현대적인 웹 프로젝트를 처음부터 설정하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 팀 프로젝트 리더, 스타트업 개발자. 중간 수준의 기술 지식을 가진 개발자에게 유용.

핵심 요약

• React + Vite + TailwindCSS 기반의 모던한 프론트엔드 프로젝트 구조 생성
• ESLint + Prettier로 코드 품질 관리 및 포맷팅 자동화
• Git + GitHub으로 버전 관리 및 협업 프로세스 구축

섹션별 세부 요약

1. 프로젝트 생성 및 기본 설정

• npm create vite@latest 명령어로 Vite 기반 React 프로젝트 생성
• public/, src/, .eslintrc.cjs, .prettierrc 등 기본 디렉토리 구조 생성
• tailwind.config.js 파일 생성 후 Tailwind CSS 구성

2. Tailwind CSS 설정

• postcss, autoprefixer 설치 후 Tailwind CSS 플러그인 초기화
• src/index.css에 @tailwind base, @tailwind components, @tailwind utilities 설정
• tailwind.config.js에서 CSS 파일 경로 및 설정 확장

3. ESLint + Prettier 설정

• eslint, prettier, eslint-plugin-react 등 코드 린팅 및 포맷팅 도구 설치
• .eslintrc.cjs 파일에서 React, JSX 접근성, Prettier 규칙 설정
• .prettierrc 파일에서 포맷팅 스타일(예: 세미콜론, 인덴트 등) 정의

4. 컴포넌트 구조 및 실행

• src/components/Hello.jsx에 Tailwind CSS를 사용한 컴포넌트 작성
• App.jsx에서 컴포넌트 호출 후 기본 레이아웃 구성
• npm run dev 명령어로 로컬 서버 실행 및 확인

5. 버전 관리 및 배포 준비

• git init, git add ., git commit으로 초기 커밋 생성
• GitHub에 리포지토리 생성 및 원격 저장소 연결
• README.md 파일 생성 후 프로젝트 설명 및 설정 가이드 추가

결론

• src/assets/ 디렉토리에 자산 파일, src/pages/에 라우팅 구조 사용
• .env 파일을 통해 환경 변수 관리
• README.md에 협업자용 설치 가이드 포함하여 프로젝트 가시성 향상