https://beta.nextjs.org/docs/styling/css-in-js Styling: CSS-in-JS | Next.js Learn how to use CSS-in-JS inside the `app` directory. beta.nextjs.org 위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-04로 공식문서의 추가적인 업데이트가 있을 수 있습니다. 번역기와 챗지피티에 의존해서 번역하고 있습니다. (오역이 발생할 수 있습니다) 한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다. 2023-05-07 원문 변경에 의한 내용 수정, 추가 CSS-in-JS 경고: 런타임 JavaScript가 필요한 CSS-in-JS 라이브러리는 현재 서버 컴포넌트에서 지원되지 ..

🍪 Cookie 쿠키는 🍪? 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법이다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다. 쿠키를 이용하는 것은 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다. 데이터를 저장한 이후 특정 조건들이 만족되면 데이터를 다시 가져올 수 있다. 이런 조건들은 아래 코드처럼 http 헤더를 사용해 쿠키 옵션으로 표현할 수 있다. 'Set-Cookie':[ 'cookie=yummy', 'Secure=Secure; Secure', 'HttpOnly=HttpOnly; HttpOnly', 'Path=Path; Path=/cookie', 'Doamin=Domain; Domain=codestat..

😶‍🌫️ 세션기반 인증 (Session-based Authentication) 로그인 사용자가 만일 정확한 아이디와 비밀번호를 입력했다면, 서버는 인증(Authentication)에 성공했다고 판단. 다음번에 인증을 필요로 하는 작업(장바구니에 물품 추가 등)을 요청할 경우, 서버는 아이디 및 비밀번호의 해시를 이미 알고 있기 때문에 매번 로그인할 필요가 없음. 이때 서버와 클라이언트에 필요한 것은 다음과 같다. 서버: 사용자가 인증에 성공했음을 알고 있어야 한다. 클라이언트: 인증 성공을 증명할 수단을 갖고 있어야 한다. 사용자가 인증에 성공한 상태는 세션이라고 부른다. 서버는 일종의 저장소에 세션을 저장한다. (그림에서 2번) 주로 in-memory, 또는 세션 스토어(redis)등과 같은 트 랜잭션..

https://beta.nextjs.org/docs/styling/tailwind-css Styling: Tailwind CSS | Next.js Learn how to use Tailwind CSS with Next.js. beta.nextjs.org 위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-02로 공식문서의 추가적인 업데이트가 있을 수 있습니다. 번역기와 챗지피티에 의존해서 번역하고 있습니다. (오역이 발생할 수 있습니다) 한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다. Tailwind CSS Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, Next.js와 매우 잘 작동합니다. 테일윈드 설치 (Installing Tailwind) Tailwi..

https://beta.nextjs.org/docs/styling/css-modules Styling: CSS Modules | Next.js Learn how to use CSS modules in your Next.js application. beta.nextjs.org 위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-01로 공식문서의 추가적인 업데이트가 있을 수 있습니다. 번역기와 챗지피티에 의존해서 번역하고 있습니다. (오역이 발생할 수 있습니다) 한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다. 2023-05-07 원문 변경에 의한 내용 수정, 추가 CSS Modules Next.js는 .module.css 확장자를 사용하여 CSS 모듈을 기본적으로 지원합니다..

useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화하는 데 사용되는 훅이다. memo는 memoization을 뜻하는데, 이는 그대로 해석하면 '메모리에 넣기'라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 즉, 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때 마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것. 리액트에서 함수형 컴포넌트는 렌더링 ➡️ 컴포넌트 함수 호출 ➡️ 모든 내부 변수 초기화의 순서를 거친다. function Component() { let value = cal..