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..
Semantic HTML 웹 표준에서는 HTML을 시멘틱(semantic)하게 작성하는 것의 중요성을 강조한다. 그렇다면 시멘틱 HTML이 어떤 의미일까? 시멘틱 HTML은 영단어인 semantic과 HTML의 합성어이고, 각 단어의 의미는 다음과 같다. semantic: 의미의, 의미가 있는 이라는 뜻의 영단어 HTML: 화면의 구조를 만드는 마크업 언어 시멘틱 HTML의 필요성 개발자 간 소통 검색 효율성 웹 접근성 자주 사용되는 시멘틱 요소의 종류 페이지나 요소의 최상단에 위치하는 머리말 역할의 요소 메뉴, 목차 등에 사용되는 요소 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할..
OSI 7 계층은 국제표준화기구(ISO)에서 개발한 모델로서, 네트워크 프로토콜 디자인과 통신 과정을 7개의 계층으로 구분하여 만든 표준구격이다. 초창기의 네트워크는 각 컴퓨터마다 시스템이 달랐기 때문에 하드웨어와 소프트웨어의 논리적인 변경 없이 통신할 수 있는 표준 모델이 나타나게 되었다. 통신이 일어나는 과정을 7단계로 크게 구분하여 단계별로 파악이 가능 컴퓨팅 장치나 네트워킹 장치를 만들 때 이 모델을 참조해서 모든 통신 장치를 만듬 네트워크 구성 요소를 표준화함으로 서로 다른 통신 장치와의 상호 호환 가능 각 계층은 독립적인 모듈로 구성되어 있음 이상이 생기면 해당 단계만 고쳐서 해결 가능 각 계층은 상하 계급 구조를 가지고 있음 물리 계층: 하드웨어 / 데이터링크 계층: 하드웨어 + 소프트웨어 ..