리액트(React) 프로젝트 폴더 분석하기

프로젝트 폴더 분석하기

 

 

리액트 프로젝트 폴더 구조에서 'node_modules', 'public', 'src' 디렉토리는 각자 다른 목적으로 구성된다

일반적으로 위와 같은 폴더 구조를 가지고 있고

프로젝트의 복잡성과 요구 사항에 맞추어 디렉토리 구조를 조정할 수 있다

 

node_modules

 

  [node_modules] 디렉토리는 npm(Node Package Manager)을 통해

프로젝트에 필요한 외부 패키지 및 의존성이 자동으로 설치된다

 

npm(Node Package Manager) 라이브러리 코드 보관함으로

프로젝트에서 사용하는 외부 라이브러리와 의존성이 저장된다

 

이 디렉토리는 npm에 의해 관리되며, 직접 수정하거나 관리할 필요가 없다

 

public

 

 정적 자원과 리액트 애플리케이션을 렌더링하는 데 사용되는

주요 HTML 파일인  index.html 을 포함하고 있다

 

웹을 구현하기 위해서는 기본적으로 html에서 구현해야하는데

react 같은 경우 App.js 파일에서 구현해도 문제가 없이 렌더링되는 이유가

 src/index.js 파일이 public/index.html 이 src/app.js을 을 포함하고 있어서 그렇다

 

  index.html 파일은 리액트 앱의 진입점이며, 일반적으로 

<div id="root"></div>

 

요소가 포함되어 있어 리액트 컴포넌트가 렌더링 된다
다른 정적 자원(이미지, 파비콘 등)이 필요한 경우 해당 디렉토리에 포함될 수 있다

 

src

 

    'src'(소스) 디렉토리는 프로젝트의 소스 코드를 담고있다

 

주로 자바스크립트/타입스크립트 파일, CSS 파일 등이 포함되며,

리액트 애플리케이션을 구성하는 리소스들이 저장된다

 

주요 리액트 컴포넌트인 'App.js', 'index.js' 등이 여기에 위치하며,

필요에 따라 컴포넌트, 스타일, 유틸리티 함수, API 호출 등의 하위 디렉토리를 생성하여 구성한다

package.json

 

 

프로젝트에 대한 정보가 기입 되어있는 파일이다

해당 파일에서는 프로젝트의 이름과 버전을 보고 수정하는 것이 가능하다

그리고 그 아래에는 리액트를 구동하는데 필요한 라이브러리 명들이 적혀 있기 때문에

 

 

프로젝트를 설치할 때 해당 파일이 없으면 에러가 발생한다