리액트(React) 실행 및 관련 파일 정리

리액트를 설치하고 실행 관련 명령어 및 자동 생성되는 파일에 관한 정리를 하려고 합니다. 

1. 리액트(React) 실행관련 명령어 (터미널)

- mkdir : 폴더 생성  (ex/ mkdir test)
- ls : 폴더 안에 있는 하위파일들 목록을 조회 하는 명령어 
- cd : (ex/ cd test) > test 라는 폴더 경로로 들어가라는 명령어 
- yarn create react-app test: 프로그램에 필요한 파일들을 알아서 생성해서 test라는 폴더에 넣음 
- yarn start 
 : starts the development server. 작성한 코드 실행
- yarn build 
 : bundles the app into static  실행은 하지않고 배포할수 있도록 빌드해줌
- yarn test 
 : 작성한 유닛테스트를 실행해서 테스트 성공햇는지 실행햇는지를 알려줌
- yarn eject 
 :  create react-app으로 만들면 자동으로 설정되어있는것들이 많은데 이런 부분을 수동으로 설정가능하게 해줌

2. 리액트(React) 파일 

1. gitignore
: 해당파일에 명시된 파일들은 깃에 정보가 담기지 않아서 트레킹하고싶지않다라는 파일들은 여기에 추가를 해줌, 버전관리에 포함되면 안되는 아이들 

2. package.json
: npm에서 버전관리를 할때 , 즉 내 프로젝트에서 외부적으로 쓰이고 있는 라이브러리 버전들이 명시되어있음 (수정할일 없음) 
 * dependencies : 프로젝트에서 쓰는 외부 라이브러리 목록 

3. readme :프로젝트에 대한 설명글이 들어가는 부분 

4. yarn.lock : yarn을 이용할 경우에 포함되는 아이로 수정할 일이 없음 

3. 리액트(React) 폴더

1. node_modules : 외부 라이브러리 추가시 자동으로 하위 로 추가됌
2. public : 사용자에게 배포할때 외부적으로 보여지는 대표적인 파일들 들어가있음 
예로 파비콘이나 index.html 관련된 로고이미지들
3. manifest.json : 웹 어플리케이션에선 필요하진 않지만 pwa라고 프로그래시브 웹 어플리케이션을 만들때 모바일에서 저장하는 웹어플리케이션을 만들떄 필요한 아이
4. robots.txt : 웹 크롤 (네이버 서치 어드바이저 참고)

- src 폴더

1. index.js : 화면에 나오고있는 아이  여기안에 app//이라는게 있고
2. app.js : 화면과 설명들 있음 

4. 리액트(React) 관련 툴 

1. 바벨 : 자바스크립트 트랜스컴파일러이다 .  이크마스크립트(ECMA)2015이후버전을 이전버전으로 만들어주는 파일.
> 예전버전의 아이들도 이해할수 있도록 변환해주는 파일 , 
타입스크립트나 JSX같이 순수 자바가 아닌 프로그랩 코드들을 자스로 변환해주는 역할 

2. 웹팩 : 우리 코드를 번들링해서 번들단위로 사용자에게 제공하는 툴 또한 자바스크립트를 작성하는 것을 소스코드 줄여주고 긴변수나 함수의 이름을 다른사람들, 해커가 보지못하도록 이름을 조금 변경하는 역할도 함 

3. ESLint : 즉각적으로 코드에 잘못된점이 있으면 경고 사인을 보냄 **제일 유용

4. 제스트 : 유닛테스트를 할수 있게 도와주는 테스팅 프레임워크

5. postcss : 프레임워크에 맞게 css를 작성하면 다시 브라우저가 이해할수 있는 css로 변환해주는 아이 less나 sass와 같은 역할 하지만 다양한 플러그인이있어 많이 쓰이고 인기있는 추세