리액트 시작하기
React는 Node.js 가 설치되어 있어야 사용 가능하다.
npm install -g create-react-app // 리액트 앱을 만드는 명령어
create-react-app 프로젝트명 // 리액트 앱의 이름을 설정하는 명령어리액트 기본 구조
위의 사진은 리액트를 설치하면 기본적으로 생성되는 파일/폴더 구조이다.
하나씩 뜯어보며 각각 어떤 역할을 하는지 알아보자.
node_modules 디렉토리
설명 : 이 디렉토리는 프로젝트에서 사용하는 모든 패키지들이 저장되는 곳이다.
'npm', 'yarn'을 사용해 설치한 외부 라이브러리들이 이 폴더에 저장된다.
기능 : 이 디렉토리는 프로젝트의 의존성을 관리하며, 코드에서 라이브러리를 불러올 때 사용된다. 사용자가 직접 관리하지 않아도 자동으로 관리를 해준다.
public 디렉토리
설명 : 이 디렉토리는 정적 파일들이 위치하는 곳이다. 주로 HTML 파일, 이미지, favicon 등이 들어있다.
이 디렉토리 안의 파일들은 빌드 시 그대로 복사되어 최종적으로 배포되는 애플리케이션에 포함된다.
index.html
<div id="root"></div>React애플리케이션은 이 'root' 요소에 마운트된다.
src 디렉토리
설명 : 실제 React 애플리케이션의 소스 코드가 포함된 디렉토리. 이곳에서 모든 컴포넌트, 스타일시트, 이미지 등이 관리된다.
App.js : React 애플리케이션의 메인 컴포넌트 파일.
이 파일은 애플리케이션의 기본적인 구조와 UI를 정의한다.
보통 이곳에서 여러 하위 컴포넌트를 불러오고 조합하여 화면에 렌더링을 한다.
App.css : 'App.js' 에서 사용하는 스타일을 정의하는 CSS 파일.
App.test.js : 'App.js'와 관련된 테스트 코드를 작성하는 파일.
'Jest'와 같은 테스트 프레임워크를 사용해 컴포넌트를 테스트할 수 있다.
index.js : React 애플리케이션의 진입점 파일. 이 파일에서 ReactDOM.render()를 사용해 App 컴포넌트를 index.html의 root 요소에 마운트한다.
index.css : 전체 애플리케이션에 적용될 수 있는 전역 스타일을 정의하는 CSS 파일
logo.svg : React 애플리케이션에서 사용되는 SVG 포맷의 로고 파일
serviceWorker.js : Progressive Web App(PWA) 기능을 제공하기 위해 사용되는 파일, 오프라인 캐시 및 백그라운드에서 작업을 처리할 수 있게 해주는 파일.
기본적으로 비활성화 되어있지만, 필요시 이 파일을 설정한다.
setupTests.js : 테스트 환경을 설정하는 파일.
프로젝트 루트 파일
package.json : 프로젝트의 메타데이터와 의존성, 스크립트 명령어 등을 정의하는 파일.
이 파일을 통해 프로젝트에서 사용하는 패키지들을 관리할 수 있으며,
npm start, npm build 등의 명령어가 정의되어있다.
yarn.lock 또는 package-lock.json : 프로젝트의 의존성 리트를 관리하는 파일.
