React를 찾기 위한 여정

React Developer Roadmap: Learn to become a React developer
최근 리액트 스터디 로드맵이 있었는데 한번 해볼 가치가 있다고 여겨져 시작하게 되었다.
2학기가 끝나고 겨울방학이 끝나기 전까지를 목표로 잡고 꾸준히 해보겠다.
물론 하면서 머릿속에서 복습하는 과정도 거치면서 천천히 진행해보겠다 아자!

React를 찾기 위한 여정: create-react-app

우리가 처음 리액트를 시작할 때 사용하는 create-react-app 이라는 명령어를 사용한다 과연 이 명령어는 무엇일까?

create-react-app 은 공식적으로 지원되는 단일 페이지 React 애플리케이션을 만드는 방법입니다. 구성이 없는 최신 빌드 설정을 제공합니다.

명령을 통해 선언하게 된다면 아래와 같은 디렉토리가 생성됩니다.

npx create-react-app cra-example
cd cra-example
npm start

위에서 하나부터 폴더를 설명해보겠다.

node_modules

node_modules
실제 라이브러리가 설치되는 디렉토리이다.

가끔 이 노드 모듈도 github에 올려야되는지를 묻는 질문이나 올리는 실수를 하기도 하지만 이 디렉토리는 원격 저장소에 저장할 필요가 없다.
왜냐하면 위의 설명처럼 실제 라이브러리가 설치되는 디렉토리이다.

그렇다면 필요한 것 아닌가요?

우리는 package.json 이라는 파일에 내가 프로젝트에 사용한 모든 라이브러리들에 대한 종류와 버전 정보를 담고 있기 때문에 해당 파일만 원격저장소에 올려두면, 다른 로컬환경에서 npm install을 통해 package.json에 작성되어 있는 그대로 라이브러리를 추가하여 실행할 수 있다.

-g 옵션은 무엇인가요?
global 라이브러리에 설치한다는 의미로 전역 파일에 설치됩니다.
이 파일의 위치는 root -g 를 통해 알 수 있습니다.
일반적으로 해당 파일에 대해 찾기도 어렵기에 권장하지 않는 옵션입니다.
만약 사용하게 된다면 root node_modules 폴더에 추가되어서 모든 프로젝트에 접근이 가능해지기에 보통 개발 과정 중 터미널에서 실행하는 독립적인 성격의 도구들이 해당됩니다.

public

일반적으로 폰트나 이미지, styleSheet와 같은 static file들을 보관하는 장소로 사용합니다.
public폴더는 webpack에 의해 번들링 되지 않고 그래도 build폴더로 들어가게 됩니다.
또한 해당 public 폴더의 경우에는 따로 import를 활용하지 않고 접근이 가능합니다.
주요한 파일로 index.html이 있습니다.

index.html
public 폴더에 있으며, 메인 프로그램인 index.js에 대응되는 파일로 HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어난 내용에 대해 렌더링된 결과가 표시됩니다.

src

소스코드라는 이름의 약자로 되어 있으며, 주요하게 있는 파일은 index.js와 App.js가 있습니다

index.js
메인 프로그램이라고 할 수 있습니다.
여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시를 담당입니다.

App.js
이것은 컴포넌트를 정의하는 프로그램입니다. 실제로 화면에 표시되는 내용 등은 여기에서 정의된다.