React로 간편하게 app 만들기
입사 후 Toy Project로 회의실 예약관리 시스템을 만드느라 블로그에는 전혀 신경을 쓰지 못했습니다...
그래서 프로젝트를 진행 하면서 배운점과 따라한 몇가지 가이드를 소개하려 합니다!
첫 번째로 15분이면 따라할 수 있다는 React app만들기!!!!!!!!!!!!!!
시작하기에 앞서 create-react-app에 대해서 간략하게 알아보자.
create-react-app?
단순하게 직역하면 react app을 만드는 녀석이다. 개발을 시작하기 위한 주춧돌 즉 기본이 되는 꼭 작성해야 하는 코드이다. 이것을 boilerplate라고 하는데 단순하게 시작하기 위한 것이라고 생각하는 것이 편하다.
2019년이 되어 처음으로 react를 접해봤는데, 이건 뭐 취업성공패키지로 6개월간 들은 교육에서와 상반되는 내용이었다. 상태관리를 따로하고 redux를 사용하고 어쩌구저쩌구
그 다음으로 놀란 점은 바로 이 creat-react-app이다. boilerplate를 직접 설정을 해본 사람에게 유레카를 외치게 만들었다는 그 유명한 create-react-app이다.
create-react-app
우선 npm 최신 버전이 설치되어 있어야 한다.(npx comes with npm 5.2+ and higher) 최소 5.2 이상 버전.
다음으로 자신이 관리하고 있는 workspace에 들어간다. (cmd창으로 들어가야 한다!)
혹시 cmd명령어를 모르신다면, 이 기회에 기본적인 명령어를 숙지해두자!
자 이제 create-react-app 을 설치하겠다. 윈도우+R 키를 누르고 cmd 입력후 엔터키를 누른다.
다음으로 나타나는 명령어를 입력한다. npm install create-react-appa
c:\user\username>npm install create-react-app엔터키를 누른다면 엄청 복잡하게 돌아갈 것이다. 설치가 진행중이라는 표시이다.
설치가 완료되었는지 확인하는 방법은 여러가지가 있지만 가장 간단하게 띄워져 있는 cmd창에서
c:\user\username>create-react-app -v을 입력하면 명령어가 틀렸다고 다른 명령어 예시를 보여준다. 명령어 가이드도 create-react-app을 만든사람이 보여주는 것으로 성공적으로 설치가 되었다고 알 수 있다. 정 불안하신 분들은 app을 만들고 확인하시면 되겠다.
자 이제 자신이 관리하는 workspace로 가서 아래의 명령어를 입력해주자!
d:\workspace> npx create-react-app test
cd test
npm start마지막 줄에 npm start를 치고 엔터를 누르게 된다면 자신이 주로 사용하고 있는 브라우저에 react앱이 띄워질 것이다.
이제 react로 spa를 개발할 준비가 끝났다!!!!