계속 면접준비한다고 놓아주었던 코딩..이었지만 면접에서 씨게 얻어맞고 다시 시작해야겠다는 생각이 강하게 들었습니다.
한달 넘게 놓고 있었더니 시작도 참 어렵더라구요.. 그래서 CRA환경에서부터 차근차근 무언가 만들어보면서 감을 찾아보려고 합니다!!
0. 프로젝트 생성하기
CRA로 간단한 스톱워치를 만들어보려고 합니다.
먼저 node와 npm(npx)가 정상적으로 설치되어있는지, 버전은 어떤건지 확인합니다.
(npm -v로 해도 동일하게 나올겁니다!)
여기서 npm이 아닌 npx를 쓰려고 하는 이유는 무엇일까요?
먼저 npm은 node.js의 의존성과 패키지 관리, 그리고 버전관리를 지원합니다.
그리고 npx는 따로 설치, 실행, 제거를 할 필요 없이 일회성으로 원하는 패키지를 npm 레지스트리에 접근해서 실행, 설치할 수 있는 도구입니다.
이 npx를 통해서 모듈을 로컬에 설치하지 않고도 매번 최신 버전의 파일을 임시로 불러와 실행하고 그 파일은 없어지는 방식으로 모듈을 사용할 수 있는 것이죠!
CRA와 같은 보일러플레이트 모듈을 사용할 때는 어짜피 매번 최신 버전을 사용할 테니까 간단하게 npx를 통해서 가져와서 사용할 수 있겠죠??
이제 본격적으로 CRA환경을 만들어봅시다!
아래 명령어를 입력해서 CRA로 새로운 애플리케이션을 만들어봅시다!
npx create-react-app {앱이름}
아.. 업데이트때문에 새롭게 지우고 깔라네요.. 하라는대로 합시다!
... 조금 기다리면 아래와 같이 설정이 완료됩니다!
잘 만들어진걸 확인했다면, 이제 만들어진 폴더로 들어갑시다!
들어가면 .git폴더까지 알아서 만들어준 것을 확인하실 수 있습니다!
1. 생성된 친구들 확인하기
왼쪽 탭에서 생성된 것들을 확인해보겠습니다.
node_modules는 말 그대로 노드 모듈입니다. 이곳에 각종 모듈들을 다운받아서 사용하게 되겠죠?
public은 virtual DOM이 들어갈 빈 껍데기와 같은 html이 이곳에 들어가게 됩니다.
그 외에도 각종 정적 파일들 (이미지나 기타 html파일들)이 이 폴더에 들어갑니다.
src는 실제로 개발이 진행되는 폴더입니다. 이 안에서 jsx/tsx 파일을 이용해서 개발을 진행하게 될 겁니다!
.gitignore는 깃에 올리지 않을 요소들을 담고 있는 설정파일입니다.
package.json은 사용할 패키지의 정보들과 버전을 담고 있습니다.
package-lock.json은 version range가 사용되는 package.json의 단점을 보완하기 위해서 딱 정해진 버전의 패키지를 다운받을 수 있게 만들어놓은 파일입니다. (얘가 있으면 npm install할 때 package.json이 아닌 package-lock.json파일을 사용하여 node_modules를 생성합니다!)
README.md는 말 그대로 설명을 위한 마크다운 파일이죠.
2. 실행하기
간단하게 어떻게 실행되는지를 확인하기 위해서 App.js파일을 수정해줍시다.
기본적으로 들어있는 내용을 싹 다 지워버리고, 테스트지롱! 이라는 말이 나오도록 적어봤습니다.
이제 npm start를 해줍니다.
그러면 자동으로 코드를 해석해서 localhost:3000에 내가 작성한 내용이 나오게 됩니다!
단순하게 내용만 적용해보았지만, 실제로는 App.js(App.jsx)에서 작성한 내용은 index.js로 넘어가게 되고, 이 곳에서 아까 작성한 내용을 document에서 'root'라는 id를 가진 DOM에 렌더링하게 됩니다.
그리고 그 document는 public폴더의 html이 되는 것이죠.
위 내용은 이해하지 못했다면 우선은 그냥 넘어가셔도 무방합니다.
계속 프로젝트를 진행하다보면 자동으로 어느 정도는 이해하실 수 있을거에요!
위 내용까지 진행하셨다면, 이제 실제로 몇 가지 내용을 작성하고 수정하고 이미저도 넣어보고 하면서 리액트에 조금 더 익숙해질 수 있을 것이라고 생각합니다.
저도 하나씩 만지고 수정해가면서 익숙해지는 시간을 가져봐야겠습니다 ㅎㅎㅎ
최근댓글