-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #75 from oagree0123/oagree0123
[프론트6기 오예준] 1주차 과제 - 계속 써먹는 환경 설정 만들기
- Loading branch information
Showing
17 changed files
with
11,950 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
node_modules/ | ||
dist/ | ||
.parcel-cache/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
module.exports = { | ||
env: { | ||
browser: true, | ||
es2021: true, | ||
}, | ||
extends: ['xo', 'plugin:react/recommended'], | ||
overrides: [ | ||
{ | ||
env: { | ||
node: true, | ||
}, | ||
files: ['.eslintrc.{js,cjs}'], | ||
parserOptions: { | ||
sourceType: 'script', | ||
}, | ||
}, | ||
{ | ||
extends: ['xo-typescript'], | ||
files: ['*.ts', '*.tsx'], | ||
}, | ||
], | ||
parserOptions: { | ||
ecmaVersion: 'latest', | ||
sourceType: 'module', | ||
}, | ||
plugins: ['react'], | ||
rules: {}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,144 @@ | ||
# Created by https://www.toptal.com/developers/gitignore/api/node | ||
# Edit at https://www.toptal.com/developers/gitignore?templates=node | ||
|
||
### Node ### | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
lerna-debug.log* | ||
.pnpm-debug.log* | ||
|
||
# Diagnostic reports (https://nodejs.org/api/report.html) | ||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json | ||
|
||
# Runtime data | ||
pids | ||
*.pid | ||
*.seed | ||
*.pid.lock | ||
|
||
# Directory for instrumented libs generated by jscoverage/JSCover | ||
lib-cov | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
*.lcov | ||
|
||
# nyc test coverage | ||
.nyc_output | ||
|
||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) | ||
.grunt | ||
|
||
# Bower dependency directory (https://bower.io/) | ||
bower_components | ||
|
||
# node-waf configuration | ||
.lock-wscript | ||
|
||
# Compiled binary addons (https://nodejs.org/api/addons.html) | ||
build/Release | ||
|
||
# Dependency directories | ||
node_modules/ | ||
jspm_packages/ | ||
|
||
# Snowpack dependency directory (https://snowpack.dev/) | ||
web_modules/ | ||
|
||
# TypeScript cache | ||
*.tsbuildinfo | ||
|
||
# Optional npm cache directory | ||
.npm | ||
|
||
# Optional eslint cache | ||
.eslintcache | ||
|
||
# Optional stylelint cache | ||
.stylelintcache | ||
|
||
# Microbundle cache | ||
.rpt2_cache/ | ||
.rts2_cache_cjs/ | ||
.rts2_cache_es/ | ||
.rts2_cache_umd/ | ||
|
||
# Optional REPL history | ||
.node_repl_history | ||
|
||
# Output of 'npm pack' | ||
*.tgz | ||
|
||
# Yarn Integrity file | ||
.yarn-integrity | ||
|
||
# dotenv environment variable files | ||
.env | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
.env.local | ||
|
||
# parcel-bundler cache (https://parceljs.org/) | ||
.cache | ||
.parcel-cache | ||
|
||
# Next.js build output | ||
.next | ||
out | ||
|
||
# Nuxt.js build / generate output | ||
.nuxt | ||
dist | ||
|
||
# Gatsby files | ||
.cache/ | ||
# Comment in the public line in if your project uses Gatsby and not Next.js | ||
# https://nextjs.org/blog/next-9-1#public-directory-support | ||
# public | ||
|
||
# vuepress build output | ||
.vuepress/dist | ||
|
||
# vuepress v2.x temp and cache directory | ||
.temp | ||
|
||
# Docusaurus cache and generated files | ||
.docusaurus | ||
|
||
# Serverless directories | ||
.serverless/ | ||
|
||
# FuseBox cache | ||
.fusebox/ | ||
|
||
# DynamoDB Local files | ||
.dynamodb/ | ||
|
||
# TernJS port file | ||
.tern-port | ||
|
||
# Stores VSCode versions used for testing VSCode extensions | ||
.vscode-test | ||
|
||
# yarn v2 | ||
.yarn/cache | ||
.yarn/unplugged | ||
.yarn/build-state.yml | ||
.yarn/install-state.gz | ||
.pnp.* | ||
|
||
### Node Patch ### | ||
# Serverless Webpack directories | ||
.webpack/ | ||
|
||
# Optional stylelint cache | ||
|
||
# SvelteKit build / generate output | ||
.svelte-kit | ||
|
||
# End of https://www.toptal.com/developers/gitignore/api/node |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"extends": [ | ||
"@parcel/config-default" | ||
], | ||
"reporters": [ | ||
"parcel-reporter-static-files-copy" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"editor.rulers": [120], | ||
"editor.codeActionsOnSave": { | ||
"source.fixAll.eslint": true | ||
}, | ||
"trailing-spaces.trimOnSave": true | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,159 @@ | ||
# frontend-survival-week01 | ||
|
||
프론트엔드 생존코스 1주차 과제 | ||
|
||
## 개발 환경 | ||
|
||
### 1. 시작하기 | ||
|
||
```sh | ||
npm init | ||
npm init -y | ||
``` | ||
|
||
#### .gitignore 쉽게 만들기 | ||
|
||
<https://www.toptal.com/developers/gitignore/> | ||
|
||
### 2. 타입스크립트 | ||
|
||
타입스크립트는 자바스크립트에 타입을 부여한 언어 | ||
|
||
```sh | ||
npm i -D typescript | ||
``` | ||
|
||
#### 실행(컴파일) | ||
|
||
```sh | ||
npx tsc --init | ||
``` | ||
|
||
- tsconfig.json 파일로 설정 | ||
|
||
### 3.lint | ||
|
||
린트는 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위 | ||
다른 사람과 협업을 할 때 코드의 형식을 맞추는데 도움을 준다. | ||
|
||
```sh | ||
npm i -D eslint | ||
``` | ||
|
||
- .eslintrc.js 파일을 생성 후 설정 | ||
- .eslintignore 파일 생성 후 설정 | ||
|
||
### 4. 리액트 설치 | ||
|
||
```sh | ||
npm i react react-dom | ||
npm i -D @types/react @types/react-dom | ||
``` | ||
|
||
### 5. 테스팅 라이브러리 | ||
|
||
```sh | ||
npm i -D jest @types/jest @swc/core @swc/jest jest-environment-jsdom | ||
npm i -D @testing-library/react @testing-library/jest-dom | ||
``` | ||
|
||
- jest.config.js 파일 설정 | ||
- 테스트에서 SWC 사용 | ||
|
||
```javascript | ||
module.exports = { | ||
testEnvironment: 'jsdom', | ||
setupFilesAfterEnv: [ | ||
'@testing-library/jest-dom/extend-expect', | ||
'./jest.setup', | ||
], | ||
transform: { | ||
'^.+\\.(t|j)sx?$': ['@swc/jest', { | ||
jsc: { | ||
parser: { | ||
syntax: 'typescript', | ||
jsx: true, | ||
decorators: true, | ||
}, | ||
transform: { | ||
react: { | ||
runtime: 'automatic', | ||
}, | ||
}, | ||
}, | ||
}], | ||
}, | ||
testPathIgnorePatterns: [ | ||
'<rootDir>/node_modules/', | ||
'<rootDir>/dist/', | ||
], | ||
}; | ||
``` | ||
|
||
### 6. parcel | ||
|
||
```sh | ||
npm i -D parcel | ||
``` | ||
|
||
### 7. package.json | ||
|
||
parcel로 웹 서버를 띄워주기 때문에 source 추가 | ||
|
||
```json | ||
"source": "index.html", | ||
"scripts": { | ||
"start": "parcel --port 8080", | ||
"build": "parcel build", | ||
"check": "tsc --noEmit", | ||
"lint": "eslint --fix --ext .js,.jsx,.ts,.tsx .", | ||
"test": "jest", | ||
"coverage": "jest --coverage --coverage-reporters html", | ||
"watch:test": "jest --watchAll" | ||
}, | ||
``` | ||
|
||
### 8. 기본 파일 작성 | ||
|
||
- `index.html` | ||
- `src/main.tsx` | ||
- `src/App.tsx` | ||
- `src/App.test.tsx` | ||
- `src/components/Greeting.test.tsx` | ||
- `src/components/Greeting.tsx` | ||
|
||
#### 기본 작성 | ||
|
||
#### 1. index.html | ||
|
||
```html | ||
<!DOCTYPE html> | ||
<html lang="ko"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Document</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="./src/main.tsx"></script> | ||
</body> | ||
</html> | ||
``` | ||
|
||
#### 2. main.tsx | ||
|
||
```javascript | ||
import ReactDOM from 'react-dom/client'; | ||
function App() { | ||
return <p>Hello, World!</p>; | ||
} | ||
const element = document.getElementById('root'); | ||
if (element) { | ||
const root = ReactDOM.createRoot(element); | ||
|
||
root.render(<App />); | ||
} | ||
``` | ||
|
||
설정 끝 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<!DOCTYPE html> | ||
<html lang="ko"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>React Demo App</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="./src/main.tsx"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
module.exports = { | ||
testEnvironment: 'jsdom', | ||
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'], | ||
transform: { | ||
'^.+\\.(t|j)sx?$': [ | ||
'@swc/jest', | ||
{ | ||
jsc: { | ||
parser: { | ||
syntax: 'typescript', | ||
jsx: true, | ||
decorators: true, | ||
}, | ||
transform: { | ||
react: { | ||
runtime: 'automatic', | ||
}, | ||
}, | ||
}, | ||
}, | ||
], | ||
}, | ||
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'], | ||
}; |
Oops, something went wrong.