[React] 환경설정 및 기본 구조

환경 설정

1. node.js 설치 https://nodejs.org/ko/download
2. VS Code 설치 https://code.visualstudio.com/docs/?dv=win64user

프로젝트 시작하기

프로젝트 시작할 폴더에서 터미널 열고 npx start-react-app [프로젝트명] 입력

프로젝트 구조

최상위 폴더

• node_modules: 프로젝트 실행을 위한 외부 라이브러리 저장 공간, 직접 수정하지 않고, 깃허브 올릴 때도 제외
• public: 브라우저가 직접 읽는 정적 파일들이 있음
  • index.html: 리액트 앱이 실행될 때, 이 파일의 특정 빈 공간(<div id="root"></div>)에 작성한 컴포넌트들이 끼어 맞춰져서 브라우저에 표시
• src: 실제 리액트 코드를 작성하는 폴더

src 폴더 내부

• App.js: 실제 화면에 그려지는 메인 컴포넌트
• App.css: App.js의 스타일을 정의하는 시트
• index.js: 리액트의 입구로 App.js에서 만든 컴포넌트를 가져와서 public/index.html에 연결해 주는 역할
• index.css: 전체 앱에 공통적으로 적용되는 스타일 파일
• logo.svg: 리액트 로고 이미지 파일
• App.test.js / setupTests.js: 코드가 잘 작동하는지 테스트하기 위한 파일들입니다. 초보 단계에서는 일단 무시해도 괜찮
• reportWebVitals.js: 앱의 성능(속도 등)을 측정할 때 사용하는 도구

설정 및 정보 파일 (The Metadata)

• package.json: 프로젝트의 이름, 버전, 그리고 어떤 라이브러리를 사용하는지 적혀 있는 명세서입니다. 나중에 새로운 라이브러리를 설치하면 여기에 기록됩니다.
• package-lock.json: 설치된 라이브러리들의 정확한 버전 정보를 담고 있어, 다른 사람과 협업할 때 환경을 똑같이 맞춰줍니다.
• .gitignore: Git(버전 관리)을 사용할 때, node_modules처럼 용량이 크거나 올릴 필요가 없는 파일을 제외하도록 설정하는 파일입니다.
• README.md: 이 프로젝트가 무엇인지 설명하는 문서입니다.

 

 

한 줄 요약

브라우저는 public/index.html을 열고, 그 안의 내용을 src/index.js가 src/App.js의 내용으로 채워 넣는다