React 시작하기 - 환경구성

요즘 프론트엔드의 핵심 언어는 React입니다.

 

우선 React 를 세팅하는 방법을 알아보죠.

 

우선 node.js 를 설치해야 합니다.

 

첫 번째로 터미널 또는 cmd 등에서 node -v를 치고 설치 여부를 확인합니다.

 

node.js 버전확인

이렇게 버전이 나온다면 이미 컴퓨터에 node.js가 설치되어있는 것입니다.

 

https://nodejs.org/ko/

Node.js

 

설치가 되어있지 않다면 해당 페이지에서 본인의 컴퓨터에 맞는 버전을 다운로드 및 설치하시면 되고, 되도록 안정 버전(좌측)을 추천드립니다.

 

또 필요한 건 npm입니다.

 

마찬가지의 방법으로 npm의 설치 여부를 확인하고, 이렇게 깔려있다면 넘어가도 좋습니다.

node.js를 설치하면 보통 같이 설치가 된다고 하네요.

 

그다음 필요한 건 npx입니다.

이건 아마 처음부터 설치되어있는 경우가 잘 없을 것 같네요.

 

 

 

이렇게 버전 확인을 할 수 있고,  설치 명령어를 알려드리겠습니다.

 

npm install npx -g

터미널 또는 명령 프롬포트에서 npm과 node 가 있는 것을 확인하고 설치하시면 됩니다.

 

업데이트는 따로 안 해도 됩니다.

 

그리고 visual studio code를 통해 소스를 작성하고 편집할 텐데 이것도 설치를 추천드립니다.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

본인의 컴퓨터에 맞는 버전을 설치하시기 바랍니다.

 

 

또 깃허브를 통한 연동도 할 예정입니다.

 

https://github.com/

GitHub: Where the world builds software

여기서 회원가입을 정상적으로 해두시기 바랍니다.

 

그리고 각자 본인의 환경에 맞게 깃을 설치해주셔야 합니다.

http://git-scm.com/download/mac

Git - Downloading Package

http://git-scm.com/download/win

 

 

위가 맥 아래가 윈도우 용 설치 링크입니다.

 

설치를 다 하셨으면 

git --version

으로 정상 설치를 확인하세요.

 

이것들이 모두 있다면 이제 진짜 리액트를 시작할 때입니다.

 

 

npx를 이용해서 react 프로젝트를  생성해보죠.

 

Documents 폴더에 가서(다른 경로에 설치하고 싶으면 다른 경로에 가셔도 무방합니다)

 

npx create-react-app 폴더명

아래와 같이 명령어를 치면 movie_app_2021_ver2라는 폴더가 생성되며 설치됩니다.

 

설치가 끝나고 나면,

이렇게 npm으로 할 수 있는 명령어들이 나오게 됩니다.

 

이젠 이 폴더를 vscode에서 열어주어야 합니다.

 

vscode - 파일 - 열기-  docment\movie_app_2021_ver2.   <--(이건 각자 생성한 프로젝트대로 경로 찾아서 열기)

프로젝트가 생성된 것을 확인할 수 있습니다.

실행까지 시켜보겠습니다.

 

vscode-보기-터미널 을 눌러 터미널을 실행해주세요.

 

해당 터미널에서 

npm run start

를 하시면 

위와 같이 터미널에 로컬 호스트 주소와 , 본인의 공유기 내부망 서버 주소가 나옵니다.

그리고 가장 기본으로 보이는 react 페이지가 랜더링 되는 것으로 성공적으로 환경을 세팅하고 실행해보았습니다.

 

앞으로 해당 프로젝트 폴더 내부에 파일을 추가 , 수정 삭제하며  React로 웹페이지를 만들 수 있습니다.

 

그리고 내부망 주소는 같은 내부망을 쓰고 있는 다른 기기에서 해당 주소를 입력하면 npm이 실행 중인 컴퓨터가 서버 역할을 하며 웹페이지를 전송해줍니다.

 

npm을 죽이면 더 이상 웹페이지가 동작하지 않기 때문에 서버를 종료시키고 싶을 때에만 터미널에서  cntl + c를 눌러 종료합니다.

 

추가로 이렇게 생성한 프로젝트를 깃허브에 연동하여봅시다.

깃허브에서 새로운 레포지토리를 만들기를 누릅니다.

레포지토리명은 기존에 생성한 프로젝트명 (저의 경우 movie_app_2021_ver2)

 

그리고 간단한 설명을 추가해준 후 크리에이트 해줍시다.

여기 생성된 주소를 복사해서

 

git remote add origin git@github.com:SoNgSeUNgMiN96/movie_app_2021_ver2.git

이런 식으로 작성해줍니다.

 

git add .   (지금까지의 변경사항을 모두 추가함)
git commit -m "여기에 변경사항에대한 코멘트를 넣음"
git push origin master (실제로 깃허브에 소스를 올림)

 

위의 순서대로 하고 나면, 

 

이렇게 레포지토리에도 정상적으로 올라가는 것을 확인할 수 있습니다.

 

이렇게 React 개발에 필요한 환경을 세팅해보았으니 , 다음 게시글부터 본격적인 개발에 들어가 보겠습니다.