전체 글

[Next.js13] middleware 사용법

현재 프로젝트에서 NextJS13 버전을 사용중이다. NextJS의 이전 버전을 사용해본 적이 없어서 얼마나 많은 차이가 있는지는 모르겠다. NextJS13의 특징을 간략히 정리하면 다음과 같다. server-component와 client-component app router fetch 함수를 이용한 SSR, ISR 등의 구현 따라서, 이 프로젝트를 진행하며 app router를 사용하고 axios 대신 fetch 함수를 사용하고자 노력했다. 1. 문제상황 현재 프로젝트의 경우는 별도의 백엔드 서버가 있고 DB관련 연산은 모두 백엔드 서버에서 수행한다. 백엔드 서버는 API를 제공하므로 NextJS를 이용해 DB 등에 접근할 일은 없었다. 인증 방식으로는 JWT를 사용했으며 JWT의 정보를 쿠키에 담아..

[TypeScript + Jest] TypeScript 프로젝트 시작 + Jest 적용

TypeScript를 적용하면서 동시에 Jest를 이용한 단위 테스트를 하고싶다면 어떻게 해야하는지에 관한 글이다. TypeScript와 Jest를 동시에 적용하기 위해 어떻게 해야하는지, 어떤 것을 설치해야 하는지에 대한 과정이다. 프로젝트 시작 (VSCode, NodeJS와 같은 기본적인 것이 준비되어 있다는 가정) npm init -y 위의 명령어로 npm 프로젝트를 시작한다. 위의 명령어를 입력하면 디렉토리에 package.json 파일이 생성된다. -y 명령어를 입력하지 않는다면 프로젝트에 관한 세부적인 내용도 함께 설정할 수 있다. 위와 같은 내용으로 채워진 package.json이 생성된다면 성공이다. TypeScript 설치 npm i -D typescript ts-node @types/n..

[네이버 부스트캠프] 네이버 부스트캠프 웹・모바일 8기 챌린지 4주차 회고 + 수료

내용에 문제가 있는 경우 삭제 또는 수정하겠습니다. 네이버 부스트캠프 챌린지의 모든 과정이 끝났다. 4주가 어떻게 지나갔는지도 모를 만큼 빠르게 지나간 것 같다. 그 과정에 어려움도 있었지만 돌아보니 많은 성장을 할 수 있었던 것 같다. ✨ 좋았던 점(잘한 점) 이번 주는 내 코드에 새로운 기능을 더 쉽게 추가할 수 있도록 확장성있는 코드를 작성하려 노력했다. 더 세밀하게 분리할 수 있는 코드도 가독성과 직관적인 이해를 위해 그냥 두기도 했다. (단, 맞는 방법인지는 모르겠다. 본인의 경우 그렇게 했다) 그 결과 각 기능들에 일정한 규칙이 생기게 되었고 새로운 기능이 추가되는 경우도 이 규칙에 맞게 추가하면 되기 때문에 쉽게 기능을 추가할 수 있었다. 새롭게 추가할 수 있는 기능을 스스로 생각해볼 수 있..

[네이버 부스트캠프] 네이버 부스트캠프 웹・모바일 8기 챌린지 3주차 회고

내용에 문제가 있는 경우 삭제 또는 수정하겠습니다. 네이버 부스트캠프 챌린지에 참여한지 벌써 3주가 지났다. 첫 주만 해도 한 달을 어떻게 버티지라는 생각을 했었는데 벌써 한 주 밖에 남지 않았다. ✨ 좋았던 점(잘한 점) 저번 주와 마찬가지로 학습을 먼저하고 미션을 수행했다. 저번 주와 다르게 시도한 점은 학습을 미션에 어떻게 적용할지 고민하는 것이었다. 학습의 내용이 어떻게 미션에 응용되고 미션과 실제 개념은 어떤 차이가 있는지 고민하게 되었다. 미션의 내용이 실제 개념과 다른 경우에는 어떤 방식을 따라야 할 지 스스로 고민하게 되었다. 미션의 편의성을 위한 것 또는 미션을 수행하면서 스스로 생각하도록 만들어 둔 장치 등등을 염두에 뒀다. 또한, 저번주에 했던 난이도 분류에 이어 "전문가"가 되기 위..