Vanilla JS Basic
간단한 템플릿 프로젝트를 만들어보며 익히는 Vanilla JS FE 개발
Template 만들기
project 생성하기
필요한 툴 설치
node.js
-
node.js 란?
- 어느곳에서나 JavaScript로 프로그래밍이 가능하게 하는 framework
- server-side rendering, command line tools 등에 사용
-
npm 이란?
- Package Manager
- library, package 들을 쉽게 관리할 수 있도록 해줌
package.json파일안에 사용하는 외부 라이브러리들과 버전 정보들이 들어있다.
-
npx 란?
-
원하는 library, package를 실행할 수 있도록 해줌
-
실행하는 방법
npx "some-package"
-
-
-
node, npm version 확인
node -v
v14.15.1
npm -v
6.14.8
yarn
-
yarn 이란?
- facebook에서 만들어진 Package Manager
- npm에서 버전관리, 성능, 보안 문제를 보완 및 개선
- npm에서 쓰는
package.js와 호환가능
-
npm을 사용해 설치
npm install yarn --global
Getting Started
프로젝트 진행을 위한 기본적인 뼈대 갖추기
index.html 생성
<!-- ! + tab -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
package.json
-
using npm module
npm init -
using yarn module
yarn init
필요한 툴 추가하기
-
using npm
npm install <package-name> [--save-prod]
npm install <package-name> --save-dev-
npm install <package-name>ornpm install <package-name> [--save-prod]To add an entry to the
"dependencies" -
using
--save-devTo add an entry to the
"devDependencies"
-
-
using yarn
yarn add [package]
yarn add --dev [package]-
yarn add [package]To add an entry to the
"dependencies" -
using
--devTo add an entry to the
"devDependencies"
-
Babel
-
using npm
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill설치 완료 후
project폴더 내에babel.config.json파일 생성{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
},
"useBuiltIns": "usage",
"corejs": "3.6.5",
}
]
]
}
Webpack
-
using npm
npm install --save-dev webpack -
using yarn
yarn add webpack --dev
Jest
코드가 제대로 동작하는지 확인하는 test case를 만드는 Testing Framework
-
using npm
npm install --save-dev jest -
using yarn
yarn add --dev jest