분류 전체보기 (5) 썸네일형 리스트형 [React] 렌더링과 커밋 React에서 렌더링의 의미React 에서는 컴포넌트를 화면에 표시하기 전 렌더링을 해야합니다.React 가 컴포넌트를 화면에 표시하는 과정입니다.렌더링 트리거컴포넌트 렌더링DOM 에 커밋화면에 컴포넌트를 표시하는 단계1 단계: 렌더링 트리거컴포넌트 렌더링이 일어나는 두 가지 트리거컴포넌트의 초기 렌더링인 경우컴포넌트의 state 가 업데이트된 경우초기 렌더링앱을 시작할 때 초기 렌더링을 트리거해야 합니다.대상 DOM 노드와 함께 createRoot 를 호출한 다음 해당 컴포넌트로 render 메서드를 호출하면 작업이 완료됩니다.import Image from './Image.js';import { createRoot } from 'react-dom/client';const root = createRoo.. [Next.js] 커스텀 App & Document Custom AppNext.js 에서는 App 컴포넌트를 사용하여 페이지를 초기화합니다.이를 재정의하면 페이지 초기화 시 다양한 작업을 수행할 수 있습니다.예를 들어:공통 레이아웃을 생성할 수 있습니다.페이지에 추가적인 데이터를 주입할 수 있습니다.전역 CSS 를 추가할 수 있습니다.사용 방법기본 App 컴포넌트를 제정의하려면 pages/_app 파일을 아래와 같이 생성합니다.// pages/_app.tsximport type { AppProps } from 'next/app';export default function MyApp({ Component, pageProps }: AppProps) { return ;}Component 속성은 현재 활성 페이지를 나타내며, 경로 간 이동 시 Compone.. [Next.js] 자동 정적 최적화 자동 정적 최적화 (Automatic Static Optimization)Next.js 는 페이지에 데이터 차단 요구사항이 없을 경우 해당 페이지가 정적으로 사전 렌더링될 수 있는지 자동으로 판단합니다. 이 판단은 페이지에 getServerSideProps 나 getInitialProps 가 없을 때 이루어집니다.getServerSidePropsNext.js 에서 서버 사이드 렌더링을 위해 사용되는 함수입니다.페이지 요청 시마다 서버에서 실행되어 데이터를 가져오고, 그 데이터를 사용하여 페이지를 렌더링합니다. 이를 통해서 최신 데이터를 항상 제공할 수 있습니다.getInitialProps페이지나 커스텀 App 컴포넌트가 초기화될 때 데이터를 가져오기 위해 사용되는 함수입니다. 이 함수는 서버 측에서 호.. Zustand Zustand는 가볍고 빠르며 확장 가능한 상태 관리 라이브러리로, 다양한 기능과 사용 패턴을 제공합니다.Zustand: 간단하고 강력한 상태 관리 라이브러리Zustand는 React 환경에서 간편하게 사용할 수 있는 상태 관리 라이브러리로, Flux 패턴에서 영감을 받아 설계되었습니다. Redux처럼 설정이 복잡하지 않으면서도 성능이 뛰어나며, 필요한 상태를 구독하고 액션을 통해 상태를 변경하는 패턴을 제공합니다.주요 특징간단한 API: Zustand의 create 함수를 통해 상태를 정의하고, 이를 Hook 형태로 컴포넌트에서 쉽게 사용할 수 있습니다.불필요한 리렌더링 방지: 상태 변경 시 필요한 부분만 리렌더링되며, 선택자를 통해 특정 상태만 구독할 수 있어 성능 최적화가 용이합니다.확장성: 미들웨.. vscode 단축키 vscode 단축키Visual Studio Code의 단축키를 한국어로 번역하고 표로 정리했습니다:범주단축키설명일반 명령 팔레트 표시⇧⌘P, F1명령 팔레트 표시빠른 열기, 파일로 이동⌘P빠른 열기, 파일로 이동새 창/인스턴스⇧⌘N새 창/인스턴스창/인스턴스 닫기⌘W창/인스턴스 닫기사용자 설정⌘,사용자 설정키보드 단축키⌘K ⌘S키보드 단축키기본 편집 라인 잘라내기⌘X라인 잘라내기 (선택 없음)라인 복사⌘C라인 복사 (선택 없음)라인 아래로 이동⌥↓라인 아래로 이동라인 위로 이동⌥↑라인 위로 이동라인 아래로 복사⇧⌥↓라인 아래로 복사라인 위로 복사⇧⌥↑라인 위로 복사라인 삭제⇧⌘K라인 삭제라인 아래에 삽입⌘Enter라인 아래에 삽입라인 위에 삽입⇧⌘Enter라인 위에 삽입일치하는 괄호로 이동⇧⌘\일치하는.. 이전 1 다음
