배운 것 Preflight Request 본 요청 전에 사전 요청을 하는 것. 일반적인 경우에서는 Preflight를 먼저 요청하지 않음. GET, HEAD, POST이외의 경우 preflight Request Content-Type 헤더에 허용된 값 이외에 작성된 경우 등… Reference https://jsikim1...

배운 것 어뷰징(Abusing) 부정 행위를 통해 이득을 취하는 행동 예를 들면 사이트에서 보안에 취약한 부분을 악용하여 이득을 취함 리프레시 토큰 (Refresh Token) 엑세스 토큰의 유효 시간이 지났을 때 다시 새로운 엑세스 토큰을 발급 받는 방법 E...

배운 것 Next Auth 좋은 점 Nextjs 간편하게 소셜 로그인을 구현할 수 있음. Server, Client 모두 Nextjs 하나로 구현할 수 있음. 궁금증 provider의 인증 토큰을 따로 받을 수 있는 지 모르겠음. Java서버 백단에서 토큰 유효성 인증을 해줄 수 있는 방법이 있을까? 설치 (v4 기준)...

배운 것 React-Helmet 라이브러리 사용하는 곳 React에서 헤더 태그에 무엇을 넣어야할 때 사용한다. 내가 필요했던 곳은 메타 태그를 넣기 위해서였다. 메타 태그의 Theme-color를 넣기 위해 사용했다. 설치 react-helmet을 설치했는데 자꾸 에러가 나서 react-helmet-async을 설치했...

배운 것 Geolocation API 기능 브라우저에서 위도와 경도 값을 받아오는 기능을 함. geolocation 객체 navigator.geolocation 객체를 통해 Geolocation API를 사용할 수 있음. 사용 방법 geolocation 객체가 존재하는 지 확인 if('geolocation' in n...

들어가기 타입스크립트로 프로젝트를 진행하는 중 의문이 생겼다. const LOGIN_ID = 'login id'; const array = ['abc', 'bbc', 'ccc']; 위와 같은 코드의 경우 LOGIN_ID는 한 눈에 타입 판단이 가능하고 TypeScript도 자동 타입 추론(Type Inference)으로 string...

Event emitter 어떤 동작이 실행되었을 때 이벤트를 인식하고 이벤트를 인식했을 때 다른 행위를 실행시키는 것 이벤트 리스너라고 생각하면 쉽다. 자세하게 다시 정리 JavaScript를 브라우저에서 사용할 때 DOM 이벤트를 받는 이벤트 리스너의 사용 방법은 다음과 같다. const button = document.que...

컨커런트 UI 패턴 화면에 나타나는 변화를 지연시키고 싶은 경우 사용 예를 들면 검색 창에서 실시간으로 검색 결과를 표시할 때 검색 결과 로직 처리보다 검색어 입력을 더 우선적으로 보여주게 하는 것. 디바운싱 기법을 사용해서 이전에 구현했었음. useTransition const [startTransition, isPending] ...

들어가기 어떤 작업을 하고 10개 정도의 커밋을 더 했는데 그 모든 작업을 취소하고 싶을 때 reset이 더 맞을까? revert가 더 맞을까? 라고 고민을 했는데, 그 부분에 대해서 포스트를 남긴다. 결론은 Revert 간단하게 이전 커밋을 취소하는 경우는 reset으로 남길 수도 있지만 이미 진행한 많은 작업들의 기록을 남기면서 ...

들어가기 임시 로그인 페이지를 만들면서 로그인 요청을 했는데, key가 쿠키에 저장되지 않고 JWT data로 반환됐다. 이 경우 JWT는 Local Storage에 넣어야 하는 것인가 Session Storage에 넣어야 하는 것인가 Cookie에 넣을 수 있는 것인가? 고민하다가 Cookie에 대한 글을 읽으면서 Cookie에 대해 알아...