[React] "먹거리 기록" 리액트 프로젝트 개발환경 구축⭐️

안녕하세요! 

최근 가장 기초라고 볼 수 있는 바닐라 자바스크립트에 대해 학습하고 있었는데요, 어느정도 DOM 요소를 가지고 놀 수 있게 되다보니 객체지향에 대해서도 큰 관심이 생겨 타입스크립트와 객체지향에 대한 강의를 수강했습니다. 👀 연습용 프로젝트도 하고 나니 생각보다 큰 장벽은 없다는 생각이 들었어요. 항상 타입스크립트가 중요하다, 한번 쓰면 헤어나오질 못하는 매력이 있다는 것을 말로만 들어 체감이 되지 않았어요. 그러나 실제로 사용해보니 협업 시에 매우 중요한 스킬이 될 것 같다는 느낌이 들었습니다. 굉장히 많은 타입과 객체지향 개념을 적용하는데 편리했고, 무엇보다 원하는 타입을 만들어 사용할 수 있다는 점이 가장 마음에 들었습니다. 타입스크립트를 사용하니 개발자를 풀어두는 듯한 자바스크립트보다 개발하는 도중 훨씬 고민하는 빈도수가 늘어났어요! 새로운 도전에서 가장 먼저 깨닫게 된 좋은 영향이라고 생각합니다. :)

 

 

Start!

리액트 프로젝트를 시작하려면 Node.js가 필요합니다.

https://nodejs.org/en/download/

위 링크로 들어가 원하는 운영체제로 설치해주세요.

Node.js를 설치하셨다면 Node Package Manager인 npm을 사용할 수 있게 돼요!

 

설치가 완료되셨다면 통합 개발 환경에서 프로젝트를 생성할 차례인데요, 저는 현재 VS Code를 사용하고 있습니다. 

작업할 폴더 위치로 이동하신 뒤, 아래 코드를 입력해 프로젝트를 생성해주세요. 

npm install -g create-react-app
create-react-app 프로젝트명

약간의 시간 소요 후, 생성이 완료되었다면 아래와 같이 cd 명령어를 이용해 [프로젝트명] 폴더로 이동해주세요.

cd 프로젝트명

 

생성된 프로젝트 폴더에는 다양한 파일들이 생겨난 것을 볼 수 있는데요, 그중에서 가장 깊게 봐야할 것은 바로 src 폴더입니다.

이곳에서 코드를 작성하면 돼요. :)

현재 App.js 파일을 보시면 리액트에서 기본적으로 작성된 코드가 있는데요, 이를 확인하기 위해선 npm start를 통해 실행하시면 됩니다! 포트 번호는 localhost:3000 이에요. 

npm start

npm start 후 localhost:3000에 나타나는 화면

localhost:3000으로 가면 우리의 프로젝트가 멋지게 동작하는 것을 볼 수 있어요!