Development/React

Development/React

Next.js 쿠키와 JWT 토큰으로 로그인 구현

Next.js로 웹 앱의 인증 기능을 구현하면서 MongoDB, Next API Routes와 Next Auth라는 Hooks로 인증 상태관리가 편리한 라이브러리를 사용했습니다. 하지만 이것만으로는 모든 상황의 인증 로직 구현을 이해했다 보기 어려워 jwt 토큰과 쿠키를 쓰는 코드를 따로 구현해보았습니다. 쿠키를 도입한 이유는 local storage,session storage가 취약한 csrf 공격은 프론트엔드 개발자 입장에서 막기 힘들지만 xss 공격에 취약한 쿠키는 httpOnly: true 옵션과 access token, refresh token 활용으로 보안상의 이점을 더 누릴 수 있다는 의견이 커뮤니티에서 더 많아 사용하게 되었습니다. 이 글에서는 access token, refresh to..

Development/React

Tailwind CSS 사용해보기

요즘 핫한 CSS 프레임워크가 뭘까요? 라는 질문을 주시면 저는 당연히 Tailwind CSS라고 말씀드릴 것 같습니다. (2022/08/24 기준, 위에 사진에서 Tailwind CSS 그래프가 붉은색입니다) Tailwind CSS란? Tailwind CSS가 강조하는 개발 방식은 HTML에 벗어나지 않고 한 화면에서 모든 스타일을 구현하는 것입니다. ... 위는 Tailwind CSS, 아래는 styled-components를 사용할 때 쓰는 방식의 코드입니다. ... const HamMenu = styled.div` display: inline-block; position: relative; width: 32px; height: 24px; `; 흔히 styled-components를 사용하여 개발할..

duckworth
'Development/React' 카테고리의 글 목록 (2 Page)