GoGo GoGo

Vite와 Typescript로 구현된 프로젝트에서 로컬(프로젝트 폴더 안)에 저장된 이미지들을 불러와야하는 케이스가 있다. 이런 구조로 구현했는데 실제로 빌드된 스크립트를 이용해 이미지를 불러오려고하면 콘솔에 404 에러가 나왔다. 처음에는 경로 문제라고 생각해서 alias를 이용해 경로를 설정해보기도 하고, (-> 적절한 해결방법 아님) 빌드 설정에 assets도 추가해보기도 했다. -> 하지만 이렇게되면 빌드 결과물이 script 파일과 assets 폴더로 output이 나와버려서 스크립트만 사용해야하는 환경에서 적절하지 않은 방법이었다. import 문을 사용해서 이미지를 불러오는 경우도 있었지만, dynamic한 path인 경우에 적절하지 않았고 이미지 갯수도 많은 편이었고 앞으로 더 늘어날 가..

interface 인터페이스는 자바 공부할 때 배웠던 개념인데, ES6에서는 지원하지 않지만 Typescript에서는 인터페이스를 지원하고 있다. 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용 가능하다. 인터페이스에 선언된 프로퍼티, 메소드 구현을 강제하여 일관성을 유지할 수 있다. ✅ interface vs class 인터페이스는 직접 인스턴스를 생성할 수 없고, 모든 메소드는 추상 메소드로 이루어져있다. (abstract 키워드 사용 X) 클래스는 직접 인스턴스 생성이 가능하다. ✅ Duck typing (덕타이핑) 인터페이스로 구현하지 않았지만, 해당 인터페이스에서 정의한 프로퍼티나 메소드를 갖고 있다면, 그 인터페이스를 구현한 것으로 인정한다. 구조적 타이핑(Structural..

1. IOS touch event ios의 경우 버튼을 클릭 할 때 300ms 정도 딜레이가 있다고 한다. 이 부분을 해결하기 위해 구글링하면서 여러가지 방법을 시도해봤다. 1) viewport 태그 추가 head에 viewport 값을 추가한다. 2) 버튼에 touch-action 스타일 추가 더블탭 방지를 위해 touch-action에 보통 manipulation을 넣는데, 나는 굳이 pinch-zoom을 넣을 필요가 없어서 none으로 넣어버렸다. 3) touchend 이벤트 추가 click 이벤트를 추가한 button에 touchend 이벤트를 추가한다. 이렇게하면 모바일에서 버튼 터치할 때 onClickBtn() function이 2번 호출되는 줄 알았는데, 다행히 한번만 호출된다. 웹에서도 버..

❓ 로그인 페이지를 개발하던 중, ID input에 이미 저장된 ID 값을 넣어주고 input을 disabled 처리해달라는 요청이 있었다. 그래서 아래와 같이 코드 한 줄을 git에 푸시했다. document.getElementById("inputId").disabled = true; 그런데 갑자기 옆에서 로그인이 안된다는 이야기가 나왔다. 확인해보니 로그인할 때 아이디와 비밀번호를 form data로 보내주고 있었는데, id 값이 빠진채로 submit하고 있었다. 로그인 로직은 고친게 없어서 아무래도 저 disabled가 원인으로 보였다. 혹시나하고 구글에 "javascript input disabled form data" 라고 쳐봤더니, 역시나 disabled가 문제였다. input 필드 안의 값을..

사내 프로젝트 R1 범위를 배포하기 전에 보안 검수를 받았는데, DOM XSS 공격에 취약하다는 결과를 받았다. 서버 단에서 CSRF 공격에 대비해 처리해둔게 있어서, 사실 둘 다 비슷한 공격이라고 생각해서 프론트 단에서 따로 처리를 하지 않았었다. 보안 검수 결과에 대응하면서 XSS 공격과 CSRF 공격에 대해 알아보기로 했다. XSS(크로스 사이트 스크립팅) 공격 XSS 공격은 사용자 브라우저에 전달되는 데이터에 악성 스크립트를 포함시킨 뒤, 사용자 브라우저에 실행되면서 해킹하는 공격이다. 대표적인 피해 사례로는 아래 세 가지가 있다. 1) Session ID를 얻어 정상 사용자인 척하면서 API를 호출해 데이터를 빼내거나 2) 사용자 브라우저에 악성 스크립트가 실행되면서 사용자 PC를 통제하거나 3..

크롬에서는 보이지만, IE에서는 input 창이 보이지 않는다는 이슈였다. 보내주신 캡쳐화면처럼 IE에서는 계정 정보와 passwd 입력 input이 보이지 않았다. 주로 맥북을 사용하고 있어서 IE를 사용하려면 페러럴즈나 VDI를 신청해야하는데, 페러럴즈 다운받고 윈도우 설치하려면 시간이 오래걸릴 것 같아서 집에 있는 데스크탑에서 vpn 연결해서 접속해봤다. 확인해보니 실제로 IE에서는 input창이 나오지 않았고, 콘솔 에러를 확인해보니 스크립트에서 오류가 났다. 에러가 난 부분을 확인해보니, Arrays.findIndex() 부분에서 문제가 있었다. MDN에 나와있는 문서를 확인해보니, 브라우저 호환성에서 (너무나 당당하게 (´·ʖ̫·`) ) IE가 지원안한다고 나와있었다... for문을 쓰려다가 ..

Javascript를 공부하다보면 비동기 처리에 대해 배우게 되는데, 이부분에 대해 정리해보려고 한다. 1. 콜백 함수(Callback Function) 가장 일반적인 비동기 요청 결과를 처리하는 방법이다. 대표적인 예로는 HTTP 요청에 따른 응답 처리가 있다. 일반적으로 비동기 요청이 한 개인 경우에는 콜백 함수를 쓰는 것이 가장 편리하다. 하지만 실제로 개발을 하다보면, 여러 개의 비동기 요청을 처리해야할 때가 있다. 이럴 때, 계속해서 콜백함수를 쓰게되면 아래와 같이 콜백 헬(Callback Hell)이 발생한다. 위 예제를 보면, 콜백 함수와 if/else 문들이 여러 개 사용되어서 코드 가독성이 좋지 않다. 이런 경우, 나중에 유지보수를 할 때 매우 불편하다. 잘못 건드리면 모든 호출이 다 망..

자바스크립트를 쓰면서 가장 많이 사용하는 this. 하지만 이 this가 무슨 역할을 하는지 정확히 알지 못했다. 자기 자신 이라고 대강 알고 쓰긴 했는데, 이번에 제대로 정리를 해보려고 한다. this는 함수가 어떻게 호출되느냐에 따라 그 역할이 결정된다. this는 전역에서 사용할 수도 있고, 함수 안에서도 사용할 수 있다. 어떤 함수냐에 따라 그 역할이 다르게 해석되기도 한다. 1. 브라우저 환경에서 전역으로 this 사용하기 this.valueA = 'a'; console.log(valueA); 브라우저 환경에서 this를 전역에서 사용하면, 전역 객체인 Window 객체를 가리킨다. 그래서 valueA는 window.valueA로 해석된다. 2. 함수에서 호출하기 (1) 일반 함수인 경우 fun..