초코chip의 코딩 생활

운영 환경을 위한 도커 파일 작성(Dockerfile)빌드 단계(builder)배포 단계(Nginx 서버)./Dockerfile# 빌드 단계FROM node:16 AS builder# 작업 디렉토리 설정WORKDIR /usr/src/app# package.json 복사COPY package.json ./# 의존성 설치RUN npm install# 모든 소스 코드 복사COPY . .# production 모드로 빌드RUN npm run build# Nginx 서버 단계FROM nginx:alpine# 빌드된 정적 파일을 Nginx의 기본 제공 HTML 디렉토리에 복사COPY --from=builder /usr/src/app/dist /usr/share/nginx/html# 필요에 따라 Nginx 설정 파일..

들어가며..Router: URL에 따른 페이지 이동React-Router: React에서 URL에 따른 페이지 이동 Client-Side vs Server-SideClient-Side Routing vs Server-Side RoutingClient-Side Routing:  Server-Side Routing:Client-Side Rendering vs Server-Side RenderingClient-Side RenderingServer-Side Rendering React-Router 설정리액트 라우터 설치폴더 구조 설정Vite 설정 파일(vite.config.js)에 절대 경로 별칭 설정 리액트 라우터 설치리액트 라우팅을 위해 react-router-dom 패키지를 설치npm install rea..

최신 방식 - Vitenpm create vite@latest -- --template react 프로젝트 폴더 구성my-app/├── node_modules/           # 프로젝트 종속성 모듈├── public/                 # 정적 파일 (CRA와 달리 HTML 파일 없음)├── src/│   ├── assets/             # 이미지와 폰트 같은 정적 파일│   ├── App.css             # App 컴포넌트 스타일│   ├── App.jsx             # 메인 컴포넌트│   ├── main.jsx            # 엔트리 포인트 (ReactDOM.createRoot() 호출)└── package.json            # 프..

들어가며..“어떤 결과를 보여줘야 하는지”에만 집중하고 “어떻게 작업을 수행할지”는 리액트가 알아서 함IoC (Inversion of Control): 렌더링 관리 책임을 리액트에 위임 우리는 화면에 어떤 “결과(상태)“가 보여져야 하는지에만 집중즉, 원하는 결과(상태)만 정의하고, 변화가 필요할 때는 그 결과(상태)만 업데이트React는 일반적인 JS와는 다르게 직접적인 DOM 조작을 최소화하고, 상태 변화에 따라 자동으로 UI를 렌더링하는 패턴을 사용 코딩 순서React에서는 상태와 컴포넌트를 기반으로 UI를 동적으로 업데이트하는 방식으로 진행상태(state) 선언 및 초기화: useState을 이용해 컴포넌트 내부에서 동적으로 변하는 값을 상태로 선언하고 초기화이벤트 핸들러 함수 정의: 특정 동작(..

리액트란?정의: UI 개발에 도움을 주는 JavaScript 라이브러리기능: 코드를 통해 컴포넌트를 만들고, 컴포넌트를 조합해 UI를 생성 2가지 주요 특징선언형(Declarative)정의: 원하는 UI 상태를 무엇으로 표현할지 작성하고, 어떻게 렌더링할지는 리액트가 알아서 처리하게 맡기는 방식“어떤 결과를 보여줘야 하는지”에만 집중하고 “어떻게 작업을 수행할지”는 리액트가 알아서 함IoC (Inversion of Control): 렌더링 관리 책임을 리액트에 위임장점직관적: 결과 중심으로 작성하므로 코드가 간결하고 이해하기 쉬움자동 업데이트: 상태가 변경되면 리액트가 UI를 자동으로 업데이트하여 일일이 수동으로 조작할 필요 없음명령형 방식: 요소를 일일이 지정하고 DOM을 작업하는 과정을 직접 지정선언..