wsl - Ubuntu20.04에서 nodejs와 npm 설치하기

정말 피하고 싶었지만 어쩔수없이 React.js를 공부해야 하는 상황이 왔다. 프론트 안 내키는데....

어쨌건 nodejs 와 npm을 설치하기로 했다. 나의 환경은 윈도우즈10의 wsl2, 우분투의 버전은 20.04다. 
왜 그런지 모르겠는데 npm은 설치할때마다 매번 이슈가 생긴다. 한번에 깔끔하게 설치된 적이 없는듯... 
아무튼 일단 nodejs부터 설치해보자.

나는 이 링크를 따라서 설치했다: github.com/nodesource/distributions/blob/master/README.md#debinstall

nodesource/distributions

LTS판을 설치할 것이기 때문에 아래의 명령어를 입력해준다.

curl -sL deb.nodesource.com/setup_lts.x | sudo -E bash - 
sudo apt-get install -y nodejs

nodejs는 순조롭게 설치되었다.
하지만 npm이라면 어떨까..?

일단 apt install npm을 시도해봤다.

 

결과: E: Unable to correct problems, you have held broken packages.

 

아니나 다를까 이 에러가 뜨면서 진행이 되지 않았다. 검색해보니 역시 해결방법이 있긴 하다. 해결방법

해당 링크의 첫번째 방법은 이거다.

sudo apt install libssl1.0-dev
sudo apt install nodejs-dev
sudo apt install node-gyp
sudo apt install npm

일단 첫번째 답변을 따라 해봤는데 libssl1.0-dev도 없다고 뜨고, 해결도 되지 않는다..

그래서 두번째 방법을 시도해봤다.

sudo apt install aptitude
sudo aptitude install npm

오오...되...된다!
사실 상당히 최근에 작성된 게시물에도 첫번째 방법으로 해결한 사람들이 많던데 그 사이에 없어져버린건지 모르겠다. 어쨌건 해결하고 나서 다음으로 넘어갔다.
페이스북 주도하에 개별된 yarn이라는 패키지매니저가 있다. 이 녀석을 설치해보자.

 

npm install --global yarn

결과:  WARN checkPermissions Missing write access to /usr/lib/node_modules

 

흠...이번엔 퍼미션 에러가 난다. 해당 디렉터리의 권한을 변경해주도록 하자.

sudo chown -R $USER /usr/lib/node_modules


npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

또 에러가 난다. 짜증난다ㅎㅎㅎ 

좋은 방법은 아니지만 sudo 를 통해서 실행했다. 잘 된다...모르겠다 이제.
yarn의 위치를 확인해본다 .

which yarn

휴...이제 리액트앱을 yarn을 통해 만들어보자

yarn create react-app [리액트앱]

고통의 시간을 지나 리액트앱을 만드는 것을 성공했다.

Inside that directory, you can run several commands: 

  yarn start 
    Starts the development server. 

  yarn build 
    Bundles the app into static files for production. 

  yarn test 
    Starts the test runner. 

  yarn eject 
    Removes this tool and copies build dependencies, configuration files 
    and scripts into the app directory. If you do this, you can’t go back! 

 

성공시 이런 메세지가 뜨는데 앞으로 사용할 일이 많아보이는 커맨드들이니 참고해두자.