REACT 파일 설명

mini·2024년 4월 2일

react

목록 보기

2/2

npm(Node Package Manager)

javaScript와 관련된 패키지를 관리하고 설치하는 도구다.
주로 Node.js 환경에서 사용되며, 노드 패키지(modules)를 관리하기 위한 매니저 시스템으로 다양한 프로젝트에서 필요한 외부 라이브러리나 도구들을 쉽게 설치하고 관리할 수 있다.

패키지 관리: npm은 JavaScript 개발자를 위한 패키지 저장소 역할을 한다.

기본적으로 다양한 프로젝트에 공유하고 통합할 수 있는 재사용 가능한 코드로 소규모 유틸리티부터 대규모 라이브러리까지 다양하다.

종속성 관리: 많은 JavaScript 프로젝트는 외부 라이브러리나 프레임워크에 의존한다.

npm은 개발자가 'package.json' 파일에서 프로젝트에 필요한 패키지를 지정할 수 있도록 하여 자바스크립트 프로그램은 패키지라는 이름으로 npm안에 등록되어 필요로하는 패키지가 있다면 npm에서 찾아 설치할 수 있다.필요한 모듈을 간편하게 설피 받을 수 있다. 이 파일에는 종속성, 버전 번호 및 기타 구성을 포함하여 프로젝트에 대한 메타데이터가 포함되어 있다.

필요한 모듈을 간편하게 설피 받을 수 있다.

package.json

package.json 파일은 Node.js프로젝트의 핵심 구성 요소이며 종속성, 스크립트, 메타데이터 및 구성을 포함하여 프로젝트의 다양한 측면을 관리하는 데 사용됩니다. JSON(JavaScript Object Notation) 형식으로 작성되며 프로젝트의 루트 디렉터리에 위치한다.

package.json 파일은 Node.js프로젝트의 중앙 구성 및 문서 파일 역할을 하며 프로젝트 종속성, 스크립트 및 메타데이터를 관리하는 데 중요합니다. 이를 통해 개발자는 프로젝트의 구조, 요구 사항 및 동작을 표준화된 형식으로 정의할 수 있으므로 시간이 지남에 따라 프로젝트의 공동 작업, 공유 및 유지 관리가 더 쉬워집니다.

프로젝트의 이름, 버전, 필요한 패키지들, 스크립트 등이 이 파일에 기록

package-lock.json

package-lock.json 파일이 NPM(노드 패키지 관리자)에 의해 자동으로 생성됩니다. 이는 프로젝트에 설치된 모든 종속성과 전이적 종속성(종속성 종속성)의 정확한 버전을 기록하는 역할을 한다.

기록을 함으로서 다양한 개발 환경에서 일관성을 유지하고 예상치 못한 동작이나 버그로 이어질 수 있는 버전 불일치를 방지할 수 있다.
정확한 버전에 대한 정보를 포함하여 버전 집합에 잠기므로 개발자의 명시적인 조치 없이는 의도하지 않은 업그레이드나 변경이 발생하지 않는다.
종속성에 대한 변조 또는 무단 수정을 감지하고 방지하는 데 도움이 된다.
Git 저장소 URL 또는 로컬 파일 경로로 지정된 경우 package-lock.json 파일에는 설치 중에 사용된 특정 커밋 또는 버전에 대한 정보가 포함되어 게시되지 않은 종속성이나 개발 종속성에도 종속성 트리를 정확하게 재현할 수 있다.

프로젝트에서 사용되는 패키지의 의존성을 관리하는 파일

README.md

README.md
일반적으로 소프트웨어 프로젝트의 루트 디렉토리에 위치한 텍스트 파일이다.
"README"는 "읽어보세요"라는 의미이며, ".md" 확장자는 Markdown(Markup Language) 형식을 나타낸다.

프로젝트에 대한 설명을 남긴다.

프로젝트의 목적 또는 목표
사용하는 기술 스택
설치 방법 및 사용법
프로젝트에 대한 기여 방법
라이센스 정보
연락처 정보

프로젝트의 목적, 사용방법, 라이센스 등 기술

node_modules

Node.js가 특정 프로젝트에 대해 설치된 모든 종속성을 저장하는 위치 역할 npm(노드 패키지 관리자) 또는 Yarn과 같은 패키지 관리자를 사용하여 패키지를 설치하면 이러한 패키지가 다운로드되어 'node_modules' 디렉터리에 자동 저장 된다.

의존하는 모든 외부 라이브러리, 프레임워크 및 유틸리티가 포함되며 설치된 각 패키지에는 일반적으로 'node_modules' 내에 패키지 이름별로 구성된 자체 하위 디렉터리가 생성된다.
프로젝트는 자체 종속성 세트를 독립적으로 관리한다.
Git과 같은 버전 관리 시스템에 포함 되지 않는다.
대신'package.json' 파일과 'package-lock.json' 파일을 사용하여 프로젝트 종속성을 지정하고 추적 할 수 있으며 버전 제어에서 'node_modules' 디렉터리를 제외함으로써 저장소 크기를 관리 가능하게 유지하고 중복된 종속성 복사본을 저장하는 것을 방지할 수 있다.

외부 라이브러리와 도구를 자신의 프로젝트에 쉽게 통합하여 개발 속도를 높이고 코드 재사용을 위해 저장 관리

public

"public" 디렉터리는 기존 웹 개발의 "public" 디렉터리와 비슷한 목적으로 사용되지만 주로 진입점을 구성하고 React 애플리케이션의 정적 자산을 저장하는 데 사용

일반적으로 index.html 파일을 찾을 수 있다. 이 파일은 React 애플리케이션의 HTML 템플릿 역할을 하며 기본 구조를 정의
기본적인 정적 자산 및 구성요소를 직접 참조 할 수 있다.
favicon.ico 파일을 넣어 사용한다.
아이콘, 테마 색상 등 웹 애플리케이션에 대한 메타데이터를 제공

index.html과 같은 HTML 파일, 이미지, 폰트 및 기타 정적 자산을 저장고 구성하는데 사용

index.html

public폴더 안에 구성되어 있으며 기본적인 구조를 정의하는데 사용된다.
리액트 애플리케이션의 진입점(entry point)이 되는 HTML 파일입니다.

리액트 애플리케이션의 컴포넌트들이 렌더링되는 루트(root) 요소

src

'src'소스 코드 파일을 저장하는 일반적인 디렉터리이며 React 애플리케이션의 소스 코드를 포함하고 있다.
Create React App과 같은 도구를 사용하여 새 React 프로젝트를 만들면 프로젝트 구조에는 JavaScript 코드, 구성 요소, 스타일시트 및 기타 관련 파일을 작성하는 src 폴더가 포함되어 있다.