[React] Create React App으로 설치된 기본 구조

기본 폴더 구조

 

 

필수 파일

이름이 변경되면 리액트 애플리케이션이 정상 작동하지 않으므로 주의가 필요합니다.

• public/index.html : 애플리케이션이 로드될 HTML 템플릿입니다. 모든 리액트 컴포넌트의 컨테이너 역할을 하며, 주로 div 요소에 id root를 통해 리액트가 렌더링됩니다.
• src/index.js : 리액트 앱의 자바스크립트 엔트리 포인트로, 모든 컴포넌트의 루트이며 ReactDOM.render() 메서드가 호출되는 시작 지점입니다.

 

주요 폴더 및 파일 설명

1. public/ 폴더

정적 파일들이 들어가는 폴더로, HTML 템플릿과 같은 리소스를 포함합니다. 이 폴더에 있는 파일들은 직접 URL로 접근할 수 있습니다.

• index.html: 애플리케이션이 로드될 때 사용되는 HTML 템플릿입니다. 주로 id="root"가 달린 div 태그로 구성되어 있으며, 여기에 리액트가 모든 컴포넌트를 렌더링합니다.
• 기타 정적 파일: 아이콘, 로고 이미지, manifest 파일 등을 포함하여 앱의 외부 리소스를 제공합니다.

참고: public/ 폴더 내 파일들만 index.html에서 접근이 가능합니다.

2. src/ 폴더

주요 리액트 소스 코드가 들어가는 폴더로, 자바스크립트와 스타일링 파일을 포함하여 컴포넌트를 작성합니다. Webpack 설정에 따라 이 폴더 내부 파일만 빌드와 번들링에 포함됩니다.

• index.js : 앱의 엔트리 포인트 파일로, 리액트 DOM이 HTML의 root에 바인딩되는 위치입니다.
• App.js : 기본 컴포넌트로서, 리액트가 제공하는 템플릿 역할을 합니다.
• App.css : App.js와 연계된 스타일 시트 파일입니다.

3. package.json

프로젝트와 관련된 메타 정보와 종속성 정보가 포함된 파일입니다.

• dependencies : 프로젝트에 필요한 라이브러리와 버전이 명시됩니다.
• scripts : 애플리케이션을 실행하고 빌드하며, 테스트를 실행하는 명령어를 포함합니다.
  • "start" : npm start를 통해 앱을 개발 서버에서 실행합니다.
  • "build" : npm run build로 앱을 최적화하여 빌드합니다.
  • "test" : npm test로 테스트 스크립트를 실행합니다.
  • "eject" : npm run eject를 통해 프로젝트의 기본 설정을 커스터마이징할 수 있습니다.
• eslintConfig : 코드 포맷과 문법 체크를 위한 설정이 포함됩니다.
• browserslist : 프로젝트가 지원하는 브라우저 설정으로, 빌드 시 참고됩니다.

4. 기타 파일

• .gitignore : Git에서 제외할 파일과 폴더를 지정합니다.
• README.md : 프로젝트의 개요와 사용법을 설명하는 문서입니다.