GoGo GoGo

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}}..

🧐 monorepo 형태의 프로젝트를 진행 중인데, 프로젝트 내에 ui와 markup 앱이 같이 있어서 사실 scss, img 파일들이 중복된다. 컴포넌트별 스타일 파일은 어쩔 수 없이 마크업에서 업데이트 될 때마다 덮어씌워야하지만, 공통으로 사용하는 스타일 파일이라던지 이미지 파일은 중복으로 갖고 있을 필요가 없다. ✅ Nx.dev로 monorepo를 생성하면 libs 폴더가 있는데, 여기에 프로젝트 내 app에서 공통으로 사용하고 있는 것들을 넣어주면 된다. 만약 공통 컴포넌트 같은 라이브러리를 생성하려면, nx g @nrwl/angular:lib 라이브러리 명 명령어를 사용하면 되지만 이번에는 정적 파일(scss, img)만 넣을거니까 새 폴더 추가해서 다 넣어버렸다. 그 다음, 기존에 각 app내..

Nx.dev는 monorepos 프로젝트를 위한 개발 툴이다. 기존에 Lerna, Git-repo 등 다른 툴로 monorepo를 구성할 수 있었는데, Nx.dev라는 걸 알게되어서 이를 이용해 프론트 개발 환경을 구성해보기로 했다. monorepos 란? In revision control systems, a monorepo (syllabic abbreviation of monolithic repository) is a software development strategy where code for many projects is stored in the same repository. (출처: https://en.wikipedia.org/wiki/Monorepo) monorepo는 한 repository..