React.js 기초 강좌1 윈도우 기본 세팅 방법

안녕하세요 엘빈입니다. 이번에 학교에서 프로젝트에서 React.js를 사용하기로 마음먹었습니다. 예전에 살짝 건드려본 만큼 천천히 공부하면서 결과물을 제작하려고 합니다. 공부하면서 강좌 형식으로 포스팅을 연재하려고 하는데요! 함께 차근차근 React.js에 대해서 알아볼까요?

 

 

---

포스팅은 "React를 다루는 기술" 책을 바탕으로 정리 및 요약식으로 작성되었습니다

 

사실 제 포스팅에 배경이 되는 책 "React.js"는 Mac 운영체제 위주로 작성되었습니다. 윈도우로 진행하는 방법도 나와 있지만 아무래도 좀 더 찾아봐야 하더군요. 확실히 프로그래밍을 하는데 윈도우의 cmd 체계보다 Shell로 진행하는 것이 좋다고 생각합니다.

 

마침 윈도우 10은 업데이트 이후로 Linux Shell이 정상 작동할 수 있도록 지원하고 있습니다. 포스팅은 cmd가 아닌 윈도우에 리눅스 체계 설치 후 이 프로그램으로진행하겠습니다.

 

먼저 윈도우에 리눅스 프로그램을 설치하기 위해선 몇몇 설정들을 해주어야 합니다.

 

 

1. 윈도우 설정 및 리눅스 체계 설치

 

먼저 윈도우 검색에 개발자를 치면 개발자 기능 사용이 나옵니다. 이 중 개발자 모드에 체크를 해줍시다.

 

 

이 후 윈도우 검색에 제어판을 검색해 들어간 후 '프로그램'에 들어가줍니다.

 

들어가면 Windows 기능 켜기/끄기가 있습니다. 클릭해줍니다.

 

Windows 기능 켜기/끄기에 여러가지 항목들이 리스트로 나열되는데 이 중 Linux용 Windows 하위 시스템에 체크해줍니다.

 

모두 설정했다면 컴퓨터 재부팅을 합니다. (다시 부팅해야지만 변경된 설정이 적용됩니다)

 

 

https://www.microsoft.com/ko-kr/p/ubuntu/9nblggh4msv6?activetab=pivot:overviewtab

Ubuntu 구매 - Microsoft Store ko-KR

위 링크를 타고 들어가면 우분투 설치 페이지가 나옵니다. 무료이므로 다운받아 설치를 진행해주세요.

 

( 설치가 진행되지 않을 경우 윈도우 업데이트를 해주거나 다시 재부팅 후 진행해 주시기 바랍니다)

 

 

설치가 완료되면 cmd와 비슷한 검은화면 창이 나옵니다. 앞으로 React를 공부하면서 자주 볼 화면이죠. 처음에 접속하면 계정을 만들라는 안내창이 나옵니다. 각자 원하는 아이디 비밀번호를 설정해줍니다.

 

 

---

2. Node.js 설치

 

Node.js는 서버와 관련된 프로그램입니다. 리액트 프로젝트에 필수적인 프로그램입니다. 웹 어플리케이션 대부분에 활용되기 때문에 대부분 웹 프로젝트에 포함된다고 생각하시면 됩니다.

 

 

ubuntu 화면에서 명령어 입력으로 node.js 설치를 진행합니다.

 

$curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash // 설치 완료 이후   $nvm --version 0.33.2 $nvm install --lits

위의 명령어를 입력해줍니다. nvm을 먼저 설치해주는 이유는 node.js의 여러 버전을 관리해주는 도구이기 때문입니다.

 

각기 다른 버전의 node.js를 사용하는 경우 nvm이 효율적이라고 말할 수 있습니다.

 

 

마지막 명령어까지 입력해주면 node.js 설치가 모두 완료됩니다.

 

 

---

3. yarn/git 설치 및 React 세팅

 

다음엔 yarn을 설치해야 합니다. yarn은 패키지 관리자 도구로 라이브러리 개수가 많을 경우 효율적으로 관리해줍니다. 

 

 

$curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - $echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources $sudo apt-get update && sudo apt-get install yarn $echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc   // 설치 완료 후    $yarn --version 1.17.3

 

개발자 중에 git을 모르는 사람은 없을거라 생각합니다. GIT 도구들은 프로젝트를 관리하는데 많은 도움을 주기 때문에 일괄적으로 설치해줍니다.

 

$sudo apt-get install git-all

(시간이 꽤 오래 걸리니 설치되는 동안 다른 작업을 진행해도 됩니다)

 

 

이후 create-react-app를 설치해줍니다. 

 

사실 react 프로젝트에서 세팅을 하는데는 많이 복잡합니다. webpack, 바벨 등등 초반에 설정해야 할 것이 너무 많기 때문입니다. 하지만 create-react-app 도구를 사용하면 프로젝트 핵심 기능 설정을 자동으로 완성해줍니다.

 

이후 "hello-world"라는 리액트 프로젝트를 생성해줍시다.

 

$yarn global add create-react-app   // 설치 완료 후 프로젝트 생성   $create-react-app hello-world

 

이후 hello-world 프로젝트로 들어가준 후 서버를 실행해줍니다. 

$cd ./hello-world $yarn start

 

 

이와 같은 페이지가 나오면 서버 실행에 성공한 것입니다.

 

 

---

4. 에디터 설치

 

이제 소스코드를 작성할 에디터를 설치해야 합니다. 여러 좋은 에디터들이 많지만 제 포스팅에서는 대중적인 Visual Code를 사용하려고 합니다. 아래 링크를 통해 설치해주시기 바랍니다.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

Ubuntu로 생성한 프로젝트를 불러오려면 파일 - 폴더 열기에서 폴더를 찾아야 합니다. 

 

Ubuntu에서 생성되는 프로젝트에 기본적인 경로는 다음과 같습니다.

C:\Users\wjdwh\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs

 

폴더 주소창에 해당 경로를 입력 후 "home-자신의 계정 이름" 폴더에 들어가면 "hello-world"라는 프로젝트가 보이실 것입니다. 해당 폴더를 열어주면 위 사진과 같이 소스코드를 불러올 수 있습니다.

 

 

여기 까지 리액트 기본 세팅을 모두 마쳤는데요. 다음 포스팅부터 본격적으로 React 공부를 시작하겠습니다.