프론트엔드 개발 환경의 이해

내용

프론트엔드 개발 환경을 구성하는데 필요한 기술을 이해하고 실습을 통해 익힙니다. 프로젝트 전반에 사용되는 노드js, 모듈로 분리하여 코딩할 수 있게 도와주는 웹팩, 최신 자바스크립트 문법을 사용할 때 필요한 바벨이 개발 환경을 구성하는데 필요한 도구들 입니다. 뿐만 아니라 코딩 컨벤션을 유지할 수 있는 린트 도구는 개발자 간의 협업을 도와주는 요긴한 툴입니다.

버전 정보

Node.js 14 16과 NPM 6
웹팩 5
바벨 7

폴더 구성

강의 실습을 위한 폴더는 다음과 같이 구성되어 있습니다.

src: 검색 어플리케이션 프론트엔드 소스
server: 검색 어플리케이션 API 서버 코드
resource: 필요한 자료. 이미지나 이론 실습용 코드가 있습니다.

브랜치

강의에서 배운 내용은 아래 브랜치엑서 실습하여 진행

1-webpack/1-entry: 웹팩 엔트리/아웃풋 실습
1-webpack/2-loader: 웹팩 로더 실습
1-webpack/3-plugin: 웹팩 플러그인 실습
2-babel/1-babel: 바벨 실습
2-babel/2-sass: 사스 실습
3-lint/1-eslint: 린트 실습
3-lint/2-prettier: 프리티어 실습
4-webpack/1-dev-server: 웹팩 개발 서버 실습
4-webpack/2-hot: 웹팩 핫로딩 실습
4-webpack/3-optimazation: 웹팩 최적화 실습
main: 강의 내용대로 진행

Name		Name	Last commit message	Last commit date
Latest commit History 53 Commits
mocks/api/users		mocks/api/users
src		src
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
README.md		README.md
app.js		app.js
babel.config.js		babel.config.js
my-babel-plugin.js		my-babel-plugin.js
my-babel-preset.js		my-babel-preset.js
my-webpack-loader.js		my-webpack-loader.js
my-webpack-plugin.js		my-webpack-plugin.js
nyancat.jpeg		nyancat.jpeg
package-lock.json		package-lock.json
package.json		package.json
webpack.config.js		webpack.config.js

dev-93/webpack-settings

Folders and files

Latest commit

History

Repository files navigation

프론트엔드 개발 환경의 이해

내용

폴더 구성

브랜치

About

Resources

Stars

Watchers

Forks

Languages