리액트 vscode, node.js 설치 후 프로젝트 생성까지(create-react-app)

리액트란?

설치에 앞서 리액트를 간단하게 알아보자.

자바스크립트 라이브러리로 사용자 인터페이스를 더 간편하게, 그러니까 Single Page Application을 효율적으로 만들기 위해 쓴다.

 

우리가 자주 쓰는 웹이나 앱(ex 인스타그램)들 중 페이지를 새로고침하지 않고 정보를 새로 불러와 교체하는 방식의 페이지를 제작하는데 리액트가 효과적이다. 물론 자바스크립트로도 만들 수는 있지만 코드가 매우 길어져 관리가 복잡한 단점이 존재한다. 

 

또 html 문법을 함수, array, object 같은 곳에 보관하고 재사용 가능해서 확장성 또한 뛰어나다.

 

자바스크립트의 라이브러리답게 기본 언어는 자바스크립트 문법과 매우 흡사하다. 하지만 jsx 같은 자바스크립트에서 볼 수 없던 파일 형식도 있고 문법도 조금씩 다르긴 하다.

 

리액트와 흡사한 Vue, Svelte, SolidJS 등이 있다. 하지만 리액트가 제일 사용자도 많고 대중적인 픽이라고 한다.

 

요새 취업시장에서는 리액트 가능자를 우대해주기 때문에 프론트엔드는 물론 백엔드 개발자도 필수적으로 알아야 한다고 생각한다.

 

node.js 설치

리액트 전 node.js 설치한다. npx 이라는 명령어를 사용하기 위해서이다. 왜 쓰는지는 뒤에서 나온다.

 

Node.js

해당 홈페이지에 접속해 안정적 버전과 최신버전 둘 중 하나를 다운받으면 된다.

 

나는 안정적 버전으로 선택해서 다운로드 받았다.

 

vscode 설치

visual studio code도 다운 받아준다. 자바 개발할때 이클립스 써서 개발하는 것처럼 에디터이다. 잘은 모르지만 엄청나게 무거운 이클립스 쓰다가 vscode쓰니까 뭔가 가볍다는 느낌을 받았다.

 

Visual Studio Code - Code Editing. Redefined

 

마찬가지로 홈페이지 들어가서 download 버튼 눌러준다. 

 

프로젝트 생성

리액트를 하기 위한 설치는 완료되었다. 이제 프로젝트를 만들어 볼 차례이다.

 

만들고 싶은 프로젝트를 담을 폴더를 생성한다.(마우스 우클릭 - 새 폴더)

 

나 같은 경우 이런 폴더를 만들었다.

그리고 폴더에 갖다대고 Shift + 우클릭 누르면 '여기에 PowerShell 창 열기' 라는게 나오는데 이걸 클릭한다. 해당 폴더를 경로로 잡은 Powershell 창이 열릴 것이다.

 

이 Powershell은 명령어를 입력하여 사용자가 원하는 기능을 수행시킬 수 있는(CLI) 스크립팅 언어이다.

 

여기에 명령어를 입력한다.

 

> npx create-react-app react_test

명령어를 해석하면 '리액트 용으로 쓸 수 있게 react_test라는 이름으로 프로젝트 세팅 하나 해보거라' 이다.

 

입력하면 알아서 뭔가 설치를 뚝딱뚝딱 한다. 아래에 'Happy hacking!' 메시지가 뜨면 성공이다.

 

해당 폴더에 들어가면 react_test라는 이름의 리액트 프로젝트가 새로 생겼다.

 

vscode에서 실행

만든 프로젝트는 vscode 에서 열어준다.

 

vscode 킨 다음 좌측 상단 File - Open Folder 누르고 만든 프로젝트 경로대로 들어가 열어준다.

 

그러면 이런식으로 프로젝트를 만들 수 있다.

 

배포

 

에디터 상단 Terminal - New Terminal 눌러서 터미널 창을 열어준다.

 

그리고 다음 명령어를 입력한다.

 

> npm start

 

성공적으로 실행이 되면 

다음과 같은 메시지와 함께 브라우저 창 url에 localhost:3000 입력 시 리액트 시작 페이지가 나올 것이다.

 

파일을 수정하면 자동으로 렌더링해서 수정한 부분을 보여준다고 하니 간편할 것 같다!

 

리액트의 신이 되어보자.