Windows에서 WSL로 React 개발 환경 구축하기
그동안 Unity 3D와 C#을 위주로 개발을 했는데, 갑작스럽게 프론트엔드와 백엔드까지 하게 되었다. 평소 공부할 때는 MS Word에 정리하지만, 프론트엔드와 백엔드는 오픈된 기술이라 블로거에 정리해보기로 하였다.
React + TypeScript 기반으로 프론트엔드와 백엔드를 개발해야 하는데, 개인적으로는 윈도우보다는 리눅스에서 개발 환경을 쉽게 구축할 수 있었다. 최근 윈도우에 탑재된 WSL을 사용하면 편리하게 우분투를 사용할 수 있다는 소식을 접하고 개발 환경을 설치해봤다. 결론적으로 매우 만족스럽게 사용하고 있다. VMWare나 VirtualBox에 비해 압도적으로 사용하기 좋았다.
1. WSL (Windows Subsystem for Linux) 설치
먼저 윈도우에 WSL이라고 하는 것을 설치해야 한다. 쉽게 말해 윈도우에서 제공하는 Linux 가상 머신이다. 근데 윈도우에 맞게 약간 커스텀이 되어 있는 것 같다. 최신 버전은 WSL 2이며, 설치 방법은 Microsoft 웹페이지에서 확인할 수 있다.
Windows 10에 Linux용 Windows 하위 시스템 설치 가이드
2. Ubuntu 설치
Ubuntu를 설치하는 방법은 Microsoft Store에서 Ubuntu를 원하는 버전을 선택하여 설치하는 것이다. WSL이 설치되어 있어야 동작한다는 점에 유의한다.
3. node.js, npm (node package manager) 설치
React를 사용하려면 node.js 10.16 이상 버전과 npm 5.6 이상 버전이 설치되어 있어야 한다. 다음과 같이 커맨드를 입력한다.
1 2 | $ sudo apt update $ sudo apt install npm | cs |
npm을 설치하면 node.js도 같이 설치된다.
설치 후에 react를 사용할 수 있는 node, npm 버전인지 확인해야 한다. 다음과 같이 커맨드를 입력한다.
1 2 | $ node --version $ npm --version | cs |
만약 버전이 맞지 않는다면, 버전 업데이트를 해야 한다. 몇 가지 방법이 있으나, npm으로 설치하는 방법을 사용했다. 다음과 같이 커맨드를 입력한다.
1 2 3 | $ npm cache clean -f $ sudo npm install -g n $ sudo n stable | cs |
ubuntu 터미널을 닫고 다시 열면 업데이트 된 node와 npm 버전이 적용된다.
4. React 프로젝트 만들기
다음과 같이 커맨드를 입력하면 my-app이라는 폴더 안에 React 프로젝트가 생성되고, npm start를 입력하면 react가 잘 동작하는 것을 확인할 수 있다.
1 2 3 | $ npx create-react-app my-app $ cd my-app $ npm start | cs |
5. Yarn 설치
npm과 같이 javascript 패키지 매니저인데, npm과 혼용하여 사용되는 것 같다. react 프로젝트 생성 후 readme 파일에서는 yarn을 사용하는 예시가 있으므로, yarn을 설치하여 react 앱을 실행해보자.
1 | $ sudo npm install --global yarn | cs |
다음으로 my-app 디렉토리에서 yarn start를 입력하면 react 앱이 실행된다.
댓글
댓글 쓰기