📖 서론 > 리액트로 개발을 하다 보면 렌더링이 두 번 발생한다. 처음에는 신경쓰지 않고 넘겼는데, 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을 사용해서 작성한다

📖 시작하기에 앞서, > 이번에 진행한 프로젝트는 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를 사용하여 서명을 계산하므로 내용이 위변조 되지 않았는지

📖 BASE64란? > 8비트의 이진 데이터(Binary Data)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다. ✅ BASE64를 사용하는 이유 BASE64로 인코딩 시, 6bit당 2bit의 Overhead가 발생하고, 전송해야 될 데이터의 크기가 약 33% 증가 한다. 그럼에도 사용하는 이유는 통신 과정에서 이진 데이터의 손실을 막기 위해 사용된다. 즉, HTML, 이메일 또는 DB에 이미지를 전송할 경우처럼 이진 데이터를 포함해야 할 때, 포함된 이진 데이터가 시스템 독립적으로 동일하게 전송/저장되는 걸 보장하기 위해 사용한다. ✅ 어떻게 인코딩 / 디코딩 할까? 👊 사용 예시 > 📌 참고 BASE64 - Wikipedia [BA

📖 변수 호이스팅이란? >자바스크립트는 인터프리터 인터프리터 방식이다. 즉, 자바스크립트는 인터프리터에 의해 한 줄씩 순서대로 실행된다. 그렇다면 아래의 코드의 경우 오류가 발생하게 될까? 위와 같은 코드를 작성시 에러가 아닌 undefined가 출력되었다. undefined가 출력되는 이유는 순차적으로 실행하기 전에 코드 평가를 거친 뒤 코드 실행 준비를 하게 되는데, 이 때 모든 선언문을 코드에서 찾아 먼저 실행하게 된다. 그리고 그 뒤에 모든 선언문을 제외한 코드를 순차적으로 실행한다. 그렇기 때문에 위와 같은 과정을 거치며 에러가 발생하지 않고 undefined가 출력 된 것이다. 📌 정리 >변수가 어디에 있든 다른 코드보다 먼저 실