리액트 1 시작하는 법(설치 프로그램 / 링크)

전 회사에서 리액트를 하다가 이직 후 제이쿼리만 하다보니 리액트를 다 잊어버렸다. 오랜만에 다시 리액트를 해보니 정말 많이 잊어버렸다는 것이 실감나서 혼자서 정리해보는 리액트 기초.

 

어떻게 리액트를 시작해야 하는지 리액트를 하기 위해 뭘 알아야 하는지 적어본다. 다른 리액트 관련 문서들도 많으니 여기서는 잊지 말아야 할것들 위주로, 그리고 실제 리액트 돌아가게 하기 위해서 처음에 시작하는 부분은 자세히 적어보려고 한다. 

 

먼저 리액트를 위해서 VSCode를 깔아야 한다.

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

VSCode 처음 쓸때 이클립스보다 가볍고 편해서 너무 좋았는데 ^_ㅠ 이클립스만큼의 역할을 하지는 못한다고 해서 아쉬웠다. 

그래도 VSCode에서 터미널 - 뉴 터미널 열고 명령어 치면 왠만한거 다 다운받아지고 굉장히 편해서,, VSCode 못잃어..

 

그리고 또 리액트를 위해 필요한 것. node.js

https://nodejs.org/ko/

Node.js

 

그리고 npm만으로도 가능하지만 yarn으로 하는게 더 빠르기도 해서 (?) 정확한 이유는 모르겠지만 어쨌든 yarn도 깔아준다.

https://classic.yarnpkg.com/en/docs/install#windows-stable

Yarn

 

그리고 터미널 / 프롬프트에 

node -v
yarn --version

 

잘 깔렸는지 버전확인 해보기.

 

그리고 깔면서 여러가지 책도 참조했는데 VSCode에서 

• ESLint
• Reactjs code snippets

이거 두개는 필수로 설치하라고 해서 좌측 아래 블록 모양 extensions 선택해서 이 두개 프로그램을 서치해서 설치했다.  

 

 

그리고 이클립스 썼던 분들이라면 Eclipse Keymap 도 추천. 이클립스와 동일한 단축키를 쓸 수 있게 해준다. 

다 설치했다면 VSCode 터미널에서 

 

yarn global add create-react-app 
create-react-app test-react-app

 

이라고 명령해준다. 

 

여기서 yarn global add create-react-app 은 혹시 너무 세밀한 경로에서 설치하고 있지 않은지 확인하면 좋을 것 같고

create-react-app 뒤에 test-react-app은 원하는 프로젝트 name을 말하는 것이므로 본인이 원하는 다른 이름을 써주면 된다. 

그리고 create-react-app 해주는 앞에 경로가 프로젝트가 생성됐으면 하는 경로가 맞는지 확인하면 좋다. 

 

경로는 프롬프트 앞에 나와있는데 경로 이동을 하고 싶다면, 

 

cd 이동할 폴더명

 

더 상위 폴더로 가고 싶다면

 

cd ..

 

라고 치면 된다. 

 

리액트 프로젝트를 생성하는데 약간의 시간이 걸리므로 조금 기다리면

 

이런 success 및 관련 명령어가 뜬다. 

여기서 we suggest that you begin by typing 뒤에 나와있는

 

cd 프로젝트명
yarn start

 

를 입력하면 프로젝트가 실행된다. 

프로젝트명 = 폴더명이므로 cd 프로젝트명이라고 치면 되는 것. 

 

 

 

그럼 이렇게 리액트 로고가 돌아가는 첫 화면이 나온다. 

 

그리고 이 소스 수정을 위해서는 파일 - 오픈 워크스페이스 또는 파일 - 오픈 폴더 를 선택하면 (맥 / 윈도우 달라서) 된다. 프로젝트 폴더를 선택해주면 내부 소스가 모두 윈도우에 오픈된다. 관련해서 수정해야하거나 알아야 할 것들은 2편에 정리.