React 시작하기
리액트 페이지 바로가기
페이지에 명시된 Node >= 14.0.0 and npm >= 5.6
node와 npm이 설치된 상태로 진행하겠다.
추후 페이지가 수정된다 하더라도 해당 버전만 확인하면 쉬이 해결 할 수 있을 것이다.
react 공식 홈페이지의 순서대로 진행하면
npx create-react-app my-app
cd my-app
npm start
터미널 CLI에 입력하게 될 이 코드를 만나게 된다.
순차적으로 뜯어보자.
npx =>
이 글을 보는 이 명령어를 처음 보는 사람들이 이 명령어를 처음 보았을 때의 나처럼 어? npm도 아니고 npx? 이건 뭐지? 하는 생각이 들었으면 좋겠다.
npm은 'Node Package Manager'라고 생각되는 것처럼
npx는 'Node Package eXecuter'라고 생각하면 된다.
노드 패키지를 설치하는 것이 아닌 실행시키는 명령어이다.
따라서 create-react-app 패키지는 설치되지 않으며 가상환경에서 실행되는 것이다.
create-react-app =>
이녀석이 react 프로젝트를 만들어 줄 것이다.
앞서 말한 npx가 패키지를 임시설치한 환경에서 실행되어 후술할 명칭의 폴더를 생성하고 그 이하에 리액트 프로젝트를 만든다.
my-app =>
이것은 내가 만들 리액트 프로젝트의 명칭이다.
원하는 것으로 변경해도 된다.
npx create-react-app frontend 라던지
npx create-react-app [프로젝트 명] 이라던지.
자 여기까지 수행하면 아래와 같이 콘솔에 뜰 것이다.
이대로 수행하면 react 공식의 내용과 같다.
cd my-app =>
my-app(프로젝트 명) 폴더로 cd(change directory) 하기
npm start =>
정식 명칭은 npm run start 이지만 약식으로 이렇게 사용한다. 혹여 외부 다른 Docker나 script에서 npm을 수행할때는 대신 반드시 npm run start를 적어야하니 잡지식으로 기억해두자.
Hello, React!
자 이제 뱅글뱅글 돌아가는 React 로고를 확인할 수 있을 것이다.
다음 게시물에서는 디폴트 페이지를 분석하며 리액트의 구성 방식을 알아보도록 하겠다.
