6. 작업환경 직접 준비하기

리액트 프로젝트를 직접 구성하려면, Webpack 설치, 그리고 Webpack 에서 ES6 를 변환하기 위한 Babel 설치도 하고, 다른 확장자를 처리하기 위한 다른 loader 도 설치하는, 꽤나 초심자에게는 번거로울 수도 있고, 잘 알고 있는 사람들에게도 상당히 귀찮은 작업을 진행해야합니다.

여기 를 보시면 이걸 직접하는 방법이 있습니다.

하지만! 우리는 그렇게까진 하지 않을 것 입니다. 리액트팀에서 이미 저희에게 create-react-app 이라는 훌륭한 도구를 만들어줬기에.. 직접 이렇게 구성해야 할 필요는 없습니다. 하지만, 내부적으로 어떻게 작동하는지 정도는 나중에 한번쯤은 이해해보는것이 좋기 때문에 시간이 난다면 위 가이드를 따라해보는 것을 추천드립니다 (적어도 코드 읽어보기)

준비해야 할 것

  • Node.js
  • Yarn
  • VS Code (혹은 여러분이 좋아하는 다른 에디터)
  • Git Bash (윈도우 사용자만)

참고 링크

윈도우 사용자의 경우, cmd 대신 Git Bash 를 사용하는것을 추천드립니다. (강의 중에 가끔 bash 명령어를 사용합니다. 폴더 이동, 생성, 등 용도이니, cmd 명령어를 제대로 숙지하고 계시고 cmd 를 좋아하신다면 (??!?!?!?) 사용하셔도 상관없습니다.

좀 더 예쁜걸 원하신다면 https://hyper.is/ 라는 솔루션도 있는데.. 한번 사용해보시는것도 나쁘지 않을 것 같습니다.

create-react-app 사용하기

create-react-app (이하 CRA) 는 정말 편리한 도구입니다. 순식간에 리액트 프로젝트준비하고, 개발을 할 수 있게 해줍니다!

$ npx create-react-app <project-name>

원하는 디렉토리에서 위 명령어를 실행하면 프로젝트가 만들어집니다. <project-name> 부분엔 여러분이 원하는 프로젝트 이름을 넣으시면 됩니다.

$ npx create-react-app first-day

이런식으로 말이죠!

만들어지고 나면, 그 디렉토리에 들어가서 yarn start (혹은 npm start) 명령어를 실행하시면 개발용 서버가 실행됩니다.

$ cd first-day
$ yarn start

그리고, 그 안에 들어가서 코드를 저장하면 자동으로 새로고침이 될 것입니다.

results matching ""

    No results matching ""