- 기본 프로젝트 구성
/src/App.js
import Sample from './Sample.js'
export default class App {
$target = null
dashboard = null
constructor($target) {
this.$target = $target
this.dashboard = new Sample($target)
}
}
/src/main.js
import App from './App.js'
new App(document.querySelector("#App"));
/src/Sample.js
export default class Sample {
$target = null
constructor($target) {
this.$target = $target
const $h1 = document.createElement('h1')
$h1.innerText = '샘플 프로젝트'
$target.appendChild($h1)
}
}
/src/style.css
#App {
margin: 1.5em auto;
max-width: 1200px;
}
h1, h2, h3, h4, h5 {
margin: 0 0;
}
/babel.config.js
module.exports = {
'presets': ['@babel/preset-env']
}
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="src/style.css" />
<title>샘플 프로젝트</title>
</head>
<body>
<main id="App"></main>
<script type="module" src="src/main.js"></script>
</body>
</html>
/jest.config.js
// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html
module.exports = {
clearMocks: true,
collectCoverage: true,
collectCoverageFrom: [
"**/utils/*.js"
],
transform: {
'^.+\\.js$': 'babel-jest'
},
testEnvironment: "node",
testMatch: [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[tj]s?(x)"
],
};
/package.json
{
"name": "2020-woowa-tech-camp",
"private": true,
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "jest --config=jest.config.js",
"start": "http-server . -c-1"
},
"keywords": [
"programmers"
],
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"babel-jest": "^25.1.0",
"http-server": "^0.12.0",
"jest": "^24.9.0"
}
}
/Procfile
build: npm install
web: npm start
migrate: /bin/true
seed: /bin/true
서버 실행
서버 실행 되지 않을시
기본 Extention
- Auto Rename Tag
- Bracket Pair Colorizer
- Complete Statement
- JavaScript (ES6) code snippets
- Prettier - Code formatter
Complete Statement 설정
emmet 활성화 시키기
파일>기본설정>설정
- 로컬에 동일 환경 구성하기
폴더 생성 및 package.json 파일 생성 및 내용 복사
Terminal > npm install
개발에 필요한 파일 생성 및 내용 copy
Terminal > npm start
브라우저에서 실행
728x90
반응형
'잡동사니' 카테고리의 다른 글
| apt-cyg cygwin에 install (0) | 2021.05.11 |
|---|---|
| Rxjava 정리 (0) | 2021.04.13 |
| Java VM Option (계속) (0) | 2020.09.15 |