리액트(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와 같은 역할 하지만 다양한 플러그인이있어 많이 쓰이고 인기있는 추세