하단처럼 CRA로 template이라는 이름으로 하나 만들어준다.
yarn create react-app templatecode . // 터미널에서 vsc로 열 수 있다.
CRA 프로젝트 구조 설명
.gitignore 같은 경우는 버전 관리에 포함이 되면 안되는 파일들에 대한 정보를 담는 파일이다.
package.json 내 프로젝트에 쓰이고 있는 라이브러리와 버전들이 명시되어 있다.
public은 정적인 요소들을 담는 곳이다. 컨텐츠가 변하지 않는 것들을 담는 폴더이다.
(HTML, 리소스, 이미지 등이 포함된다.)
src는 컨텐츠가 다양하게 변화되는 우리의 소스코드들을 담는 폴더이다.
manifest.json 은 pwa를 만들때 (모바일에서 저장하는 웹 어플리케이션) 필요하다.
robots.txt는 웹 크롤링을 위해 필요한 친구이다.
바벨: 자바스크립트 transcompiler이다. ECMAScript 2015 이상의 버전을 예전 버전으로 변환해준다.
=>이는 배포시에 예전 브라우저도 이해하게 하기 위함이다.
또한 타입스크립트, jsx 등을 브라우저가 이해할 수 있는 JS로 바꿔주는 역할도 수행한다.
Jest: 유닛 테스트를 도와주는 테스팅 프레임워크이다.
CRA를 통해 만들면 git init도 자동으로 된다.
웹팩은 코드를 모듈화해서 번들링해서 배포할 수 있게 도와주는 역할을 한다.
index.html에서 <noscript> 태그의 의미
사용자가 브라우저에서 자바스크립트를 활성화하지 않았을 때 보여주는 메세지이다.
js 파일과 jsx파일 차이
리액트 컴포넌트인지 순수 자바스크립트 코드인지 헷갈린다. 나중에 class나 순수 js를 쓰는 경우가 있기 때문에 구분한다.
참고로 index.js는 컴포넌트가 아니라 연결만 해주는 역할을 수행하는 자바스크립트이다.
최종 템플릿은 다음과 같이 만들었다.
만들어진 템플릿을 이용할때는 다음 하단과 같이 입력한다.
cp -R template react-youtube-project
궁금한점
1. js 파일과 jsx 파일의 정확한 차이점이 궁금하다.
2. app.jsx로 바꿔주는 이유가 궁금하다.