1. 개요
ECMA Script (ES, 에크마 스크립트)
: Europe Computer Manufacturing Alliance (유럽 컴퓨터 제조 협회) 기본 JS 표준화 진행
꾸준하게 1년에 한 번씩 조금씩 바뀌고 있음.
(e.g. ES6 = ES2015... JS의 각각 표준화 버전)
: 익스플로러 구버전 등은 ES5버전 이전 것만 사용가능, 신 브라우저부터는 대체로 ES6 이후 버전 활용 가능
(바벨 플러그인 통해서 ES6이후 JS 버전들을 구 브라우저에서도 기능하도록 만들어줄 수도 있음)
새로운 작성 규칙
규칙1. 터미널 입력
규칙2. 파일 내 코드 입력
2. Setting for Study
1. 시작
- 개발 작업 진행할 폴더 생성 후 visual studio에서 폴더 오픈
npm init
- package.json 파일 자동 생성
npm install parcel-bundler --save-dev
(또는)
npm install parcel-bundler -D
(또는)
npm i parcel-bundler -D
- parcel-bundler 패키지 모듈을 설치하되, 개발하는 용도로만 사용 설치한다는 의미 (사용자 확인x)
- parcel-bundler를 통해 개발용으로도 실행가능하고, 향후 완성후에 결과물을 낼 수 있는 (build가능한) Script 명령 추가
package.json파일
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" → 이 부분 삭제
"dev": "parcel index.html", //parcel에 index.html을 연결해서 개발서버를 열겠다//
"build": "parcel-bundler " //build명령을 돌렸을 때는, 로컬에 개발서버를 여는 게 아니라, 실제 build된 결과물을 dist라는 폴더 안에 만든다.//
- 루트 경로에 index.html 만들어서 script 파일 불러오기 : main.js 소스 입력
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./main.js"></script> → 추가 입력
</head>
<body>
</body>
</html>
- parcel-bundler를 통해서 index.html 을 기준으로, 로컬에 내부 서버를 연결하기
npm run dev //개발 서버가 열림//
'개발 공부 > Front-end study log' 카테고리의 다른 글
| [JavaScript] 연산자(operator)의 종류 (0) | 2021.08.28 |
|---|---|
| [JavaScript] 데이터타입 확인+ 함수 export/import (0) | 2021.08.15 |
| [Node JS] NVM, NPM _ 유의적 버전 (Semantic Versioning, SemVer) (0) | 2021.08.08 |
| [Node JS] NVM, NPM + 예제 (1) (0) | 2021.08.05 |
| Markdown 마크다운 (0) | 2021.06.27 |
