[React] 프로젝트 구조

◈ 프로젝트 구조

• package.json >> build.gradle / pom.xml 과 동일 (라이브러리 , 버전 명시)

라이브러리와 그 버전을 명시하여 프로젝트의 의존성을 관리하는 항목

 

• dependency  : 라이브러리와 그 버전을 명시하여 프로젝트의 의존성을 관리하는 항목

 

 

• scripts 명령문 : 자주 사용되는 명령어를 스크립트로 정의하여 쉽게 실행할 수 있도록 하는 항목
• eslintConfig : 기본 프로그램 도움 (코드 품질을 보장하기 위해 JavaScript 코드 스타일을 검사하는 도구인 ESLint의 기본 설정을 정의하는 항목)
• browserlist : 프로젝트가 지원해야 하는 브라우저의 범위를 명시 ( 브라우저 호환성을 유지하기 위해 필수 )

---

◈  web pack loader

자동 리로드됨 (저장하면)

웹팩 로더는 직접 설치가 가능하다.

보일러 플레이트로 만들 경우는 자동 설정 된다.

웹팩 로더안에 babel 라는 도구가 es6를 es6로 다운그레이드 시킴

 

◈npm 

패키지 관리자

다운 or 관리

 

 

◈npx ?

npm 에 깔려있는 하나의 패키지를 실행시켜주는 실행 도구 이다.

 

 

◈yam

npm, npx 결과 다른 패키지인데

(maven, gradle 같이 또다른 패키지 관리자이다)

 

 

◈public

css > public 폴더에 넣어서 사용 (선호되는방식은아님

 

 

◈src

app .js >

 

index.js >

1.  
2. app.js export
3. index.js import
4. <app/> root 랜더함수에 집어넣음
5. index.html 사이에 화면이 그려짐
6.