01. 필수 프로그램 설치
✨ 브라우저 ,VSCode, git, Node, yarn 설치하기
1-1. 크롬브라우저
우리가 만드는 웹은 브라우저에서 구동된다.
1-2. VScode
코드를 작성하기 위한 프로그램인데,
editplus로 작업을 했던 기억도 있었지만
더 효율적인 코드 작성을 위해 전문 에디터인 VScod를 사용한다.
1-3. git
우리가 작성한 코드를 저장 및 관리하고, 다른 사람과 공유하기 위해
git 이라는 툴을 사용합니다.
git을 사용하기 위해서는 내 컴퓨터에 깃을 설치해야 하기 때문에
이를 꼭 확인해야 합니다.
1-4. Node 설치하기
우리가 작성하는 자바스크립트 코드는 Node라는 도구에 의해서 실행됩니다.
그래서 내 컴퓨터에 Node가 설치되어 있지 않으면
자바스크립트 코드를 실행할 수 없게되는데,
마찬가지로 Node 홈페이지에서 설치 프로그램을 다운로드 받고 설치하면 됩니다.
우리는 LTS 버전을 설치해줍니다.
node 설치
노드를 설치하고 확인을 하는 방법은
터미널에 power shell 또는 git bash를 켜서 node -v를 입력하시면 됩니다.
npm은?
NPM (Node Package Manager) 는 무수히 많은 third-party 패키지들이
모여있는 집합소 입니다.
사용자는 npm에서 여러 패키지를 다운받아 활용할 수 있습니다.
비슷한 친구로는 yarn이 있는데,
둘 다 프론트엔드 의존성을 관리하기 위한 패키지 매니저입니다.
1-5. yarn 설치하기
우리는 npm의 역할과 동일하지만 npm보다 조금 성능적으로 개선된
yarn을 사용할 것입니다.
터미널에 npm install -g yarn 을 입력해서 설치합니다.
yarn 설치 확인 및 패키지
마찬가지로 잘 설치되었다면 yarn -v 명령어로 yarn의 버전을 체크할 수 있다.
또한, yarn으로 패키지 설치할 때는 yarn add [설치할 패키지 이름]
을 이용해 설치를 하면 됩니다.
1-6. npm과 yarn의 특징
공통점
-
둘 다 자바스크립트 런타임 환경인 Node.js 의 패키지 관리자
-
애플의 앱스토어, 구글의 플레이스토어처럼
전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들
또는 프로그램을 온라인 데이터베이스에 올려놓습니다.그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자라고 보시면 됩니다.
차별점
1. NPM
a. node.js를 설치할 때 자동으로 설치됩니다.
b. Node Package Manager의 약자
c. Javascript 프로그래밍 언어를 위한 패키지 관리자로,
수많은 Javascript 라이브러리와 애플리케이션을 호스팅하는 레지스트리 역할을 합니다.2. Yarn
a. 2016년에 Facebook, Exponent, Google, Tilde와 같은 회사에서 공동 작업으로 개발한 패키지 관리자
b. npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 좋습니다.
b-1. 병렬로 패키지를 다운로드하여 속도를 향상시키고, 더 정확한 버전 관리를 위해 yarn.lock 파일을 사용합니다.
b-2. 속도와 관련해서는, npm도 버전 5 이후로 많은 성능 개선이 이루어져서 현재는 성능 차이가 많이 줄어들었습니다.명령어
| 명령어 | npm | yarn |
|---|---|---|
| dependencies 설치 | npm install | yarn |
| 패키지 설치 | npm install [패키지명] | yarn add [패키지명] |
| dev 패키지 설치 | npm install --save-dev [패키지명] | yarn add --dev [패키지명] |
| 글로벌 패키지 설치 | npm install --global [패키지명] | yarn global add [패키지명] |
| 패키지 제거 | npm uninstall [패키지명] | yarn remove [패키지명] |
| dev 패키지 제거 | npm uninstall --save-dev [패키지명] | yarn remove [패키지명] |
| 글로벌 패키지 제거 | npm uninstall --global [패키지명] | yarn global remove [패키지명] |
| 업데이트 | npm update | yarn upgrade |
| 패키지 업데이트 | npm update [패키지명] | yarn upgrade [패키지명] |
02. Javscript 런타임 환경
✨ 자바스크립트 런타임 환경에 대해 알아보기
2-1. 런티임이란?
프로그래밍 언어가 구동되는 환경을 말한다.
자바스크립트의 대표적 런타임 환경은 2가지로 볼 수 있는데,
- 브라우저
- node 환경
이는 Javascript 파일을 실행할 수 있는 방법이 2가지가 있다는 이야기다.
// 아래 파일을 node 환경에서 실행하면 오류가 발생하게됩니다.
// test.js
function printAlert() {
alert('이 함수는 브라우저 환경에서만 실행됩니다.');
}
printAlert();