📖 서론 > 리액트로 개발을 하다 보면 렌더링이 두 번 발생한다. 처음에는 신경쓰지 않고 넘겼는데, alert가 두 번이나 뜨니 신경이 쓰일 수 밖에 없어서 알아봤다. ✅ 왜 이럴까? 이런 현상이 발생하는 이유는 React.StrictMode 때문이다. CRA로 생성된 리액트 프로젝트는 자동으로 설정되어 있기 때문에 발생하게 되는 것. 리액트 공식 문서에도 명시되어 있다. >* Strict 모드 StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. 주의 Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. **StrictMode는 아래와 같은 부분에서 도

📖 다시 To Do List 부터! > 최근에 진행한 프로젝트에서 To Do List와 같은 방식으로 구현 할 상황이 있었다. 간단하고 쉽게 생각했던 터라 진지하게 생각해본 적이 없었다. 하지만 React의 state를 활용하는 가장 기본적이고 간단한 프로젝트이므로 다시 구현해보고 다시 정확하게 이해하는 과정을 담은 포스팅이다. ✅ 무엇을 사용하는가? 진행중이었던 TypeScript 기반의 Next.JS 환경에서 작업할 것이다. To Do를 저장할 State를 활용할 것이다. 이번엔 React-hook-form을 사용할 것이다. Next.JS의 Router를 사용한다. ✅ 실전 📌 Form 생성 우선 아래와 같이 값을 입력 받을 Form을 만들어준다. 앞서 말 했듯, react-hook-form을 사용했다. 📌 onSubmit 함수 작성 useState, useRef, React-hook-form을 사용해서 작성한다

📖 Vercel이란? > Next.js에서 제공하는 배포 플랫폼이다. 빌드, 배포, 호스팅을 제공하고, 공식 문서에서도 Vercel을 통한 Front Project 배포를 권장한다. 또한 Github Repository를 통해 정말 쉽게 배포가 가능하다. ✅ Vercel 배포 순서 📌 Script 확인 / 추가 pakage.json에 아래 스크립트가 있는지 확인하고, 없다면 추가한다. 📌 Repository 등록 Github에 Repository를 만들고 Push까지 마친 뒤, Vercel로 이동한다. Continue with GitHub를 클릭하고 Repository를 선택한다. 📌 Configure Pro

📖 시작하기에 앞서, > 이번에 진행한 프로젝트는 Next Auth와 같은 라이브러리는 사용하지 않았고, DB를 사용하지 않고 유저 정보가 담긴 JSON을 사용했다. 그렇다보니 DB를 사용해서 구현한 로그인과는 조금 다르겠지만, 기본적인 원리는 동일하다고 생각하기에 블로그에 기록해둔다. ✅ 기본적인 구조는 어떻게 되는가? 클라이언트에서 ID,PW를 담아 Request 한다. 서버에서 ID, PW를 받고 JSON에서 일치하는 ID를 찾는다. ID가 일치한다면 그 ID의 PW가 일치하는지 확인한다. 모두 일치한다면 토큰을 생성한 뒤 해당 ID의 유저 데이터와 토큰을 함께 Response 한다. ✅ 클라이언트 부분 구현 React-hook-form과 axios, React-cookie를 사용했다. 다음으로 index에는 아래처럼 작성했다. ✅ 서버 부분 구현 Next.js의 api를 활용하여 구현했다. ✅ JWT(JSO

📖 JWT란? > JSON Web Token의 약자로, 토큰 기반의 인증 방식이다. 정보를 JSON 객체에 담아 암호화하여 해싱 작업을 거친 뒤 문자열 토큰을 생성하는 기술로, 클라이언트는 이 토큰을 HTTP Header에 넣고 요청을 보내어 인증을 할 수 있다. 자세한 정보 ✅ JWT를 사용하는 이유 권한 부여 : JWT를 사용하기 위한 가장 일반적인 사용처이다. 유저가 로그인을 하게 되면 이후의 각 요청에는 JWT가 포함되어, 사용자가 해당 토큰을 허용된 경로와 서비스 및 리소스에 액세스 할 수 있다. 정보 교환 : JSON Web Token은 당사자 간에 정보를 안전하게 전송하는 좋은 방법이다. 공용키, 개인키를 사용하여 서명할 수 있기 때문에 보낸 사람이 자신이 누구인지 확인이 수월하다. 또한 Header와 Payload를 사용하여 서명을 계산하므로 내용이 위변조 되지 않았는지

📖 next.config.js 란? _NextJS에서 커스텀 설정을 하기 위해선 프로젝트 디렉터리의 루트에 next.config.js 또는 next.config.mjs 파일을 만들 수 있다. 이는 JSON 파일이 아닌 Node.js 모듈이다. NextJS 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않는다._ >📌 Redirects Redirects는 URL을 변경한다! Redirect는 source, destination, permanent 속성이 있는 객체를 포함하는 배열을 반환하는 비동기 함수이다. Redirect는 새로운 페이지로 re-route 되고 URL 변경 사항을 표시한다. >📌 Rewrites _Redirects는 URL을 변경하지 않는다!