Node.js & Parcel

오늘은 PostCSS를 배우기 위해서 Node.js와 Parcel을 설치했다.

• Parcel : https://en.parceljs.org/ 
• Node.js : https://nodejs.org/en/download/current/

Parcel

Download | Node.js

강의에 나와 있지 않은 세부사항들은 구글링을 통해서 채워가며, 그래도 모르겠는 부분들은 유추해가며 겨우겨우 설치에 성공했다.

다른 사람들의 댓글과 강사님의 답변으로 많은 도움을 받았기 때문에 나도 도움을 주고 싶었다. 그래서 나의 우여곡절을 순서대로 정리하여 댓글을 남겼다.

 

네이버 블로그부터 우분투 한국 커뮤니티의 2009년 게시글까지 정말 많은 곳에서 단서를 찾았는데 아직도 Terminal을 통한 설치 원리가 무엇인지 정확히 모르겠다.

*어떤분이 우분투 자기 소개에 '우유를 마시지도 못하는 주제에 우유부단합니다.'라고 써놓은 것을 보고 빵터졌다. 우분투 처음들어가봤는데 한 줄 자기소개 기능 좋은 것 같다.

 

‹Node.js 설치 유의사항›

• LTS는 기업을 위한 버전이다. (3년간 지원)
• MAC용 버전이 따로 있으므로 다운로드 주의

‹Node.js와 NPM설치 확인하는 방법›

"node -v" 입력 ➜ 정상설치된 경우 버전을 알려줌 (v00. 00. 0)

"npm -v" 입력 ➜ 정상설치된 경우 버전을 알려줌 (0 .0 .0)

 

Node.js를 깔린걸 확인하고나서

"sudo -s"를 입력했으나 "Password:" 라고 뜨면서 콘솔에 아무것도 칠 수가 없었다.

*sudo : “substitute user do”(다른 사용자의 권한으로 실행)

 

당황하여 찾아보니 root password는 원래 입력할 때 안보인다는 사실을 알게 되었다. :D

그냥 입력하고 enter 치면 되는 거였다.

그리고 검색한 김에 password 재설정 방법도 알아보았다.

~$ sudo passwd root

 

Terminal에 

“sudo -s” 입력, enter,

password 입력, enter,

“npm install -g parcel-bundler”입력, enter,

“npm init -y” 입력, enter,

 

여기까지하면 package.json 파일이 생기는데

이때 생긴 package.json의 내용을 강의를 보고 따라서 똑같이 수정했다.

(github 부분만 내 것대로 수정함)

 

이후에 다시 

“npm install -g parcel-bundler”입력하니 설치가 진행됐다.

제대로 되었는지 알 수 없었지만 적어도 에러가 뜨지는 않았다.

 

 "npm run start"라고 Terminal에 입력해서

http://localhost:1234 를 얻었다.

 

jagjuui-MacBook-Pro:css-master jackjoo$ npm run start

> css-master@1.0.0 start /Users/jackjoo/Documents/css-master
> parcel index.html

Server running at http://localhost:1234 
✨  Built in 1.35s.

CSS에서 background color를 red로 설정한 후에

 해당 주소로 들어가보니 새빨간 색으로 가득한 창이 떴다.

내가 바꾸는 대로 바로바로 색깔이 바뀌었다.

 

꽤 오랜시간에 걸쳐서 PostCSS를 배울 준비를 끝냈다!