보호글 입니다.

보호글 입니다.

📋 프로젝트 초기 세팅 체크리스트 (Next.js 기준)1️⃣ 프로젝트 생성 & 환경 설정Next.js 프로젝트 생성 npx create-next-app@latest my-app --typescript 필요 라이브러리 설치 npm install axios react-query zustand npm install -D eslint prettier eslint-config-prettier eslint-plugin-react-hooks .gitignore 확인 (.env.local, node_modules 등)2️⃣ 환경 변수 설정.env.local NEXT_PUBLIC_API_BASE_URL=https://api.myapp.com NEXT_PUBLIC_ENV=development .env.productio..

📘 초기 설계 → 상태 관리 → UI 처리 → API 구조 → 컴포넌트 구조 → 배포까지실전 프로젝트 베스트 프랙티스 총정리1. 프로젝트 초기 설계 (가장 중요)초기에 설계를 탄탄하게 하지 않으면 개발 후반에 리팩토링 지옥이 시작됨.✅ 기술 스택 선정"왜 이 기술을 선택하는가?" 근거가 있어야 함→ 예: Next.js 선택 이유: SSR + SEO + 라우팅 단순화→ Zustand 선택 이유: 클라이언트 전역 상태 작고 빠름→ React Query 선택 이유: 서버 상태 관리에 특화 + 캐싱 기능✅ 프로젝트 폴더 구조 결정초기부터 구조를 정하지 않으면 뒤늦게 정리할수록 비용 폭증.예 (Next.js + FSD): src/ ├─ entities/ ├─ features/ ├─ shared/ ├─ widge..

보호글 입니다.

🧠 React 기본 개념선언적 프로그래밍(Declarative)리액트는 “무엇을 보여줄지” 선언하는 방식으로 작동함DOM을 직접 조작하는 게 아니라 **상태(state)**가 바뀌면 자동으로 UI 갱신→ ex) setState → 화면 자동 업데이트빠른 화면 전환Virtual DOM 사용 → 실제 DOM 변경 최소화변경된 부분만 효율적으로 업데이트컴포넌트 기반 구조UI를 독립적이고 재사용 가능한 컴포넌트 단위로 나눠 개발유지보수와 확장성이 높음거대한 생태계수많은 라이브러리, 패키지, 커뮤니티예: Redux, React Router, Next.js, React Query 등기업 선호 및 학습 투자 가치많은 기업에서 프론트엔드 표준처럼 사용러닝 커브가 있지만 배워두면 확장성 높음 (React Native,..

🔹 1. 호이스팅의 기본 원리JS 엔진은 실행 전에 변수 선언과 함수 선언을 먼저 메모리에 올려둡니다.그래서 코드에서 선언보다 사용이 앞서도 에러 없이 동작하는 경우가 있습니다.🔹 2. 변수 호이스팅var선언만 호이스팅 되고, 초기화는 호이스팅되지 않음 console.log(a); // undefined var a = 10; 실제로 JS 엔진이 해석하는 방식: var a; // 선언만 끌어올려짐 console.log(a); // undefined a = 10; // 할당은 그대로 let과 const선언도 호이스팅은 되지만, TDZ(Temporal Dead Zone, 일시적 사각지대) 때문에 초기화 전에는 참조 불가 → ReferenceError 발생 console.log(b); // ❌ Referen..

설치npm i -g typescript 타입스크립트 > 자바스크립트 변형 / / 컴파일tsc index.ts typescript config json 설치tsc --init 타입스크립트 빌드 (dist 폴더 생성)ctrl + shit + b > build // ios 는 ctrl 대신 cmd 기본 형태// number// string// boolean// null// undefined// anyvar a = 10;var b = "hello";var c = true;var d = null;var e = undefined;var f = { name: "zhangsan", age: 20 }; // 권장하지 않음var g = 20; // 권장함 or 연산자로 여러개를 지정하더라도 이렇게 표현해줄것g = 3;va..

보호글 입니다.

React 프로젝트 GitHub Pages 배포 가이드1️⃣ gh-pages 패키지 설치GitHub Pages로 배포하기 위해 gh-pages 패키지를 설치합니다. npm install --save-dev gh-pages 2️⃣ package.json 수정홈페이지 주소 추가 "homepage": "https://.github.io/" 예시: "homepage": "https://kimJAVAN.github.io/2025ReactGame" 배포 스크립트 추가 "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" } predeploy: 배포 전에 자동으로 빌드deploy: build 폴더를 gh-pages 브랜치에 올림3️⃣ 배포 ..

원인리액트 라우터에서 기본 경로를 /로만 설정해두었다.하지만 GitHub Pages는 프로젝트를 레포지토리 이름 하위 경로(/레포지토리이름)에 배포한다.즉, https://username.github.io/레포지토리이름/ 가 기본 경로가 되는데, 라우터가 /만 바라보고 있어서 실제 배포 환경에서는 정상적으로 렌더링되지 않았다.결과로컬 개발 환경(localhost:3000/)에서는 /이 기본 경로라서 화면이 잘 보였다.하지만 GitHub Pages에 올리면 /에서는 빈 화면(404)이 나오고, /레포지토리이름 경로로 접속해야 정상적으로 보였다.해결package.json에 "homepage": "https://username.github.io/레포지토리이름" 을 설정한다.라우터(BrowserRouter)에서..

1️⃣ 변경 내용 확인 git status 수정/추가된 파일 확인2️⃣ 스테이징 git add . 현재 폴더 기준 모든 변경 사항 스테이징특정 파일만 올리고 싶으면 git add 파일명3️⃣ 커밋 git commit -m "커밋 메시지 작성" 예: "Header 컴포넌트 라우터 연결 완료"4️⃣ 원격에 푸시 git push origin main 🔹 만약 원격 레포에 누군가 먼저 커밋했거나 GitHub 웹에서 파일을 수정했다면먼저 git pull --rebase origin main 하고 충돌 해결 후 푸시