|
2 | 2 |
|
3 | 3 | "프론트엔드 개발 환경의 이해" 강의 자료입니다. |
4 | 4 |
|
5 | | -블로그 연재물 "[프론트엔드 개발 환경의 이해](http://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html)"를 읽어보시기 바랍니다. |
| 5 | +- 강의노트: |
| 6 | + - [프론트엔드 개발 환경의 이해: NPM](http://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html) |
| 7 | + - [프론트엔드 개발 환경의 이해: 웹팩(기본)](http://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html) |
| 8 | + - [프론트엔드 개발 환경의 이해: Babel](http://jeonghwan-kim.github.io/series/2019/12/22/frontend-dev-env-babel.html) |
| 9 | + - [프론트엔드 개발 환경의 이해: 린트](http://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html) |
| 10 | + - [프론트엔드 개발 환경의 이해: 웹팩(심화)](http://jeonghwan-kim.github.io/series/2020/01/02/frontend-dev-env-webpack-intermediate.html) |
| 11 | + |
| 12 | +- 실습: [jeonghwan-kim/lecture-frontend-dev-env](https://github.com/jeonghwan-kim/lecture-frontend-dev-env) |
| 13 | + |
| 14 | + |
| 15 | +## 내용 |
| 16 | + |
| 17 | +프론트엔드 개발 환경을 구성하는데 필요한 기술을 이해하고 실습을 통해 익힙니다. |
| 18 | +프로젝트 전반에 사용되는 **노드js**, 모듈로 분리하여 코딩할 수 있게 도와주는 **웹팩**, 최신 자바스크립트 문법을 |
| 19 | +사용할 때 필요한 **바벨**이 개발 환경을 구성하는데 필요한 도구들 입니다. |
| 20 | +뿐만 아니라 코딩 컨벤션을 유지할 수 있는 **린트** 도구는 개발자 간의 협업을 도와주는 요긴한 툴입니다. |
| 21 | + |
| 22 | +수업에서 다루는 도구의 버전은 다음과 같습니다. 웬만하면 이 버전과 같은 환경으로 만들어 주세요. |
| 23 | + |
| 24 | +- Node.js 13과 NPM 6 |
| 25 | +- 웹팩 4 |
| 26 | +- 바벨 7 |
| 27 | + |
| 28 | +어플리케이션 개발에 사용되는 라이브러리나 프레임웍, 언어 문법은 다루지 않습니다. |
| 29 | + |
6 | 30 |
|
7 | 31 | ## 폴더 구성 |
8 | 32 |
|
9 | | -- src: 프론트엔드 소스 |
10 | | -- server: API 서버 코드 |
11 | | -- resource: 강의 진행에 필요한 리소스(이미지, 코드) |
12 | | -- react-sample: 리액트 샘플 |
| 33 | +강의 실습을 위한 폴더는 다음과 같이 구성되어 있습니다. |
13 | 34 |
|
14 | | -## 실습 브랜치 |
| 35 | +- src: 검색 어플리케이션 프론트엔드 소스 |
| 36 | +- server: 검색 어플리케이션 API 서버 코드 |
| 37 | +- resource: 강의 진행에 필요한 자료. 이미지나 이론 실습용 코드가 있습니다. |
| 38 | +- react-sample: 마지막에 순서인 리액트 개발환경 구성을 위한 실습 코드입니다. |
15 | 39 |
|
16 | | -강의 중 실습은 아래 브랜치 중 하나로 이동하여 진행합니다. |
17 | 40 |
|
18 | | -실습 문제는 TODO 주석으로 기록되어 있습니다. |
| 41 | +## 브랜치 |
| 42 | + |
| 43 | +강의 중 실습은 아래 브랜치 중 하나로 이동하여 진행합니다. |
| 44 | +브랜치를 이용하면 각 실습에서 풀어야하는 문제가 TODO 주석으로 기록되어 있습니다. |
19 | 45 |
|
20 | 46 | - `1-webpack/1-entry`: 웹팩 엔트리/아웃풋 실습 |
21 | 47 | - `1-webpack/2-loader`: 웹팩 로더 실습 |
22 | 48 | - `1-webpack/3-plugin`: 웹팩 플러그인 실습 |
23 | 49 | - `2-babel/1-babel`: 바벨 실습 |
24 | | -- `2-babel/1-sass`: 사스 실습 |
| 50 | +- `2-babel/2-sass`: 사스 실습 |
25 | 51 | - `3-lint/1-eslint`: 린트 실습 |
26 | 52 | - `3-lint/2-prettier`: 프리티어 실습 |
27 | 53 | - `4-webpack/1-dev-server`: 웹팩 개발 서버 실습 |
|
0 commit comments