개발 마라톤

Next.js 13 JWT 재발급 JWT는 개발 방법이 쉽고, 발급과 검증이 쉽기 때문에 개발자의 피로도가 줄었다고 생각한다. 하지만 JWT 또한 단점이 존재했다. 바로 보안성이다. JWT 토큰은 따로 서버에서 관리하는 것이 아닌 토큰 값 자체로 이용하고 검증할 수 있다. 이 점은 Session과 다른 편리함을 불러왔지만, 역으로 생각해서 토큰만 탈취하면 너무나도 쉽게 보안 위험이 생기는 것이다. 그래서 저번 포스팅 JWT 발급에서는 토큰을 목적에 맞춘 두 가지로 나누어 발급하였다. [개발] Next.js 13 JWT 발급 (tistory.com) 토큰 내용만 정리하면 다음과 같다. 토큰 종류 내용 accessToken 사용자 인증을 위한 토큰. 유효 기간을 짧게 설정하여 상대적으로 탈취되어도 덜 위험이..

Next.js 13 JWT 발급 JWT란? JSON Web Token Introduction - jwt.io JWT.IO JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. jwt.io JWT(JSON Web Token)는 JSON 객체로 당사자 간에 정보를 안전하게 전송하기 위한 간결하고 독립적인 방법을 정의하는 개방형 표준(RFC 7519)입니다. 이 정보는 디지털 서명되어 있으므로 확인하고 신뢰할 수 있습니다 공식 문서에서의 권한 부여의 예시에서는 로그인 기능 자체를 예시로 들었으며, 나도 이번에 JWT를 활용하여 로그인 기능을 구현하려고 한다..

easyFetch 함수 추가 이번 프로젝트에서는 Axios를 채택하지 않았다. 이유는 저번 프로젝트에서 Axios를 채택한 이유가 받아온 데이터를 쉽게 조작할 수 있었기 때문이었는데 Next.js 13 에 내장되어있는 fetch로도 어렵지 않게 구현할 수 있을 것 같아서 Axios를 굳이 채택하지 않았다. 추가적으로 Axios는 구형 브라우저 지원 기능과, response timeout 기능 등의 이점이 더 존재하지만, 지금 구현 중인 프로젝트는 그 정도 규모의 기능을 사용하지는 않을 거 같아서 채택하지 않은 이유도 있다. Axios와 Fetch의 데이터 처리 방식의 차이점을 살펴보겠다. // GET 요청 // axios GET axios.get('/api/users') .then(response => ..

로그인 페이지 Server Component / Client Component 분할 오늘은 로그인 페이지 작업을 들어가려고 한다. Next.js 13의 특징이라면 Server Component와 Client Component가 분리될 수 있다는 점인데, 이 점을 잊지말고 구상하는 것이 중요하다고 느꼈다. 로그인 페이지의 UI는 그림판으로 그려보았다. ( 그림판 툴이 가장 빠르고 편한 나 ) 특별히 클라이언트 유저 이벤트가 존재하지 않을 것 같은 타이틀하고 회원가입 버튼 부분은 Server Component로 구성했다. Rendering: Server Components | Next.js (nextjs.org) 서버 컴포넌트의 장점은 크게 7가지 정도 나뉜다 장점 내용 데이터 패칭 서버 단에서 데이터를 패..

Next.js 13 깔끔한 폴더 구조 Next.js 13 의 App Routing 방식의 프로젝트를 진행하던 중, 한 가지 의문점이 생겼다. 폴더 구조를 통해 자동으로 Route 하는 방식은 확실히 개발에 편한데, 폴더 구조가 너무 복잡해지는 것 아닌가? 라는 생각이 들었다. 현재 작업 중인 폴더인데, api, components, styles 폴더고 뭐고 login이나 register 같은 route 폴더랑 뒤죽박죽 섞여있어서 보기도 힘들고 난잡한것을 확인할 수 있다. Next.js 13 공식 문서를 읽을 때, 라우팅 해야되는 페이지 폴더를 그룹으로 묶을 수 있었던 내용이 어렴풋이 기억나서 찾아보았다. Routing: Route Groups | Next.js (nextjs.org) Routing: Ro..