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문을 쓰려다가 ..

https://blog.angular.io/version-10-of-angular-now-available-78960babd41 Version 10 of Angular Now Available Version 10.0.0 is here! This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI… blog.angular.io Angular 9가 나온지 얼마 지나지 않아서 10이 나왔다. Angular 공식 블로그에 올라온 글을 해석해봤다. Version 10.0.0 is here! This is a major release that spans the entire pla..

⚠️ Problem Angular/typescript로 개발한 웹 페이지를 카톡 인앱브라우저에서 띄웠을 때, 뒤로가기가 작동하지 않는다는 이슈를 받았다. 메인 화면에서 항목 선택 후 상세 페이지로 넘어갔을 때, 왼쪽 화면처럼 인앱브라우저 뒤로가기 버튼이 활성화되어야 하는데, 실제로 개발된 페이지에는 뒤로가기 버튼이 활성화되어있지 않았다. 코드는 아래와 같다. {{content.name}} Angular 가이드 페이지에서 routing에 대해 공부할 때 routerLink 라는 속성을 배웠고, 이를 자연스럽게 적용했는데 왜 뒤로가기가 되지 않는 걸까? 그래서 routerLink 대신 일반적으로 많이 썼던 href로 바꿔봤더니 뒤로가기 버튼이 활성화되어 정상 화면처럼 작동했다. {{content.name}}..