👒내 포트폴리오 웹사이트 만들기👒 : 개발환경 세팅

모두 다 퇴근해버리고..

야근반

 

toby큭큭

---

 

👒 개발환경 세팅

https://github.com/Goldchae/GoldchaePortfolio

GitHub - Goldchae/GoldchaePortfolio: 내 포트폴리오 웹사이트

---

프로젝트 디렉토리 생성 및 초기화

npm init -y

---

Typescript, React, Vite, Emotion TailwindCSS, Framer Motion, Three.js  설치

npm install react react-dom

npm install --save-dev typescript vite @vitejs/plugin-react

npm install @emotion/react @emotion/styled

npm install tailwindcss postcss autoprefixer

npx tailwindcss init -p

npm install framer-motion three

 

---

ESLint와 Prettier 설치

npm install --save-dev eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier

.eslintrc.js 및 .prettierrc 파일 설정

ESLint와 Prettier를 함께 사용할 때 충돌을 방지하려면 적절한 설정이 필요

---

Jest로 테스트 환경 설정

npm install --save-dev jest @types/jest ts-jest

npx ts-jest config:init

 

package.json에 테스트 스크립트 

"scripts": { "test": "jest" }

기존에는 그냥 오류 메세지 출력하고 exit임

---

vite.config.ts/tsconfig.json/eslint.config.js/.prettierrc 및 기타 구성

vite.config.ts 설정: React, Typescript, Emotion 등과 잘 통합되도록 Vite를 구성

 

 

• plugins: @vitejs/plugin-react 플러그인을 통해 React와 TypeScript를 사용하고, Emotion을 지원하는 Babel 플러그인을 설정
  • jsxImportSource: '@emotion/react': Emotion의 JSX 프래그먼트(css 함수 등)를 자동으로 인식하도록 설정
  • babel.plugins: ['@emotion/babel-plugin']: Emotion과 React의 JSX를 올바르게 변환할 수 있도록 Emotion의 Babel 플러그인을 사용
• resolve.alias: 프로젝트에서 경로를 짧게 사용하기 위한 별칭을 설정. 예를 들어, @/components로 src/components를 참조
• server.port: 개발 서버가 구동될 포트를 설정 기본적으로 3000번 포트로 설정
• build.outDir: 빌드된 파일들이 저장될 디렉토리. 기본값은 dist.
• build.sourcemap: 디버깅 시 소스맵을 활성화해 디버깅 경험을 개선

---

👒 코드 환경 구성

.github 추가 

 

디렉토리 구조 

KABOO_CONNECTION-FRONT/
│
├── public/                 # 정적 파일들이 위치하는 곳 
│
├── src/                    # 소스 코드가 위치하는 곳
│   ├── assets/             # 이미지, 폰트, 스타일 등 정적 자산
│   ├── components/         # 재사용 가능한 컴포넌트
│   ├── pages/              # 각 라우트에 해당하는 페이지 컴포넌트
│   ├── hooks/              # 커스텀 훅
│   ├── constants/          # 공통적으로 사용되는 상수들을 정의한 파일
│   ├── stores/             # Zustand 상태관리
│   ├── services/           # api 관련 로직의 모듈 파일, auth와 같이 인증과 관련된 파일
│   ├── utils/              # 정규표현식 패턴이나 공통함수 등 공통으로 사용하는 유틸 파일
│   └── config/             # 여러개의 config 파일
│
└── package.json            # 프로젝트 설정 및 의존성 목록

---

👒 이슈 작성

---

기타 수정 사항

npm install --save-dev @types/react @types/react-dom @types/react-router-dom

React Router v6로 업데이트

npm install react-router-dom@latest

 

브랜치

 git  branch -r

브랜치 보기

git checkout -b feature/#0 origin/feature/#0

오리진 브랜치 가져오기