React 프로젝트 환경 세팅

html, css를 공부하자마자 바로 연습할 겸 사이트 하나 만들어봤다.

 

하지만 만들면서 금세 한계점을 느끼게 된다.

단일 html 사이트 내에서는 어떻게든 만들고 싶은대로 만들 수 있었지만, 여러개의 html 사이트를 만들면 그 사이트 간의 이동이 부드럽지 않을 뿐더러 원하는 효과를 주기 어려웠다. 

그렇다고 한 html 파일 안에 모든 코드를 다 넣자니 너무 파일이 커져서 보기에 좋지 않을거 같았다.

 

그래서 React를 이용해 js 코드로 사이트를 만들어 더욱 유지보수하기 편하고, 분할/정복도 깔끔하게 달성할 수 있도록 사이트를 고쳐보기로 작정했다.

 

그러기 위해서는 일단 React를 공부해야만 했기에, 바로 시작했다.

 

 

그 시작은 우선 React를 설치하는 것!

 

사실 설치하지 않고도 리엑트를 사용할 수 있긴 하다.

https://unpkg.com/react@17.0.2/umd/react.production.min.js
https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js

위의 코드를 불러오면 된다.

하지만 위 방법은 이유 불문! 절대 해서는 안 된다.

 

본격적으로 React를 설치해보자.

 

1. node.js 설치

https://nodejs.org/ko/ 에 가서 본인 환경에 맞는 node.js를 설치하자

터미털 창에 node -v, npx 명령어를 실행했을 때, 위와 같이 문제없이 실행되면 설치 된 것이다.

 

 

2. React 프로젝트 생성

npx create-react-app <폴더(프로젝트) 이름> 을 입력한다.

처음 실행하면 create-react-app을 설치할거냐고 물어보는데 y를 입력하고 넘어가면 된다.

프로젝트 생성 성공!

 

추가--

만약 typescript로 프로젝트를 생성하고 싶다면, 다음 명령어를 입력하면 된다.
npx create-react-app <폴더(프로젝트) 이름> --template typescript

그리고 js에서 사용하는 패키지를 ts에서도 사용할 때 에러가 뜨면 다음 명령어를 입력하면 된다.
(아래의 경우는 styled components를 사용할 때)
npm i --save-dev @types/styled-components
실행시 에러가 난다면, 아래의 명령어도 실행해보자
npm i styled-components

참고로 @types/ 뒤에 어떤 라이브러리를 지원하는지는 아래의 깃헙 페이지를 참고하면 된다.
없으면 기여하는 것도 좋을 거 같다.
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types

 

 

3. React 프로젝트 실행

vscode로 생성한 프로젝트를 열어주고

만들고 싶은 대로 만든 다음에

콘솔창에 npm start를 입력하면 node.js를 이용해서 로컬호스트 위에서 실시간으로 구동해볼 수 있다.

종료는 ^C를 입력하면 된다.

 

 

 

지금은 기초 이론은 다 배우긴 했지만, 연습을 하나도 안 했기에 바로 사이트를 뒤엎을 수는 없을거 같다.

열심히 배우고, 기록한 후에 뒤엎어 봐야겠다.

 

 

ps. 위 영상의 소스코드 링크:

https://github.com/wjlee611/portfolio

언제든지 수정될 여지가 있습니다..