2020년 1월 15일 - 편집 역사

라이언양: /* Lint */

2020-01-15T08:17:06Z

‎Lint

2020-01-15T08:12:53Z

‎Lint

2020-01-15T07:34:00Z

2020-01-15T07:33:28Z

‎Babel

2020-01-15T07:32:29Z

‎Webpack

2020-01-15T07:30:10Z

‎학습내용

2020-01-15T04:51:15Z

2020-01-15T04:41:27Z

2020-01-15T04:37:44Z

2020-01-15T04:37:08Z

← 이전 판		2020년 1월 15일 (수) 08:17 판
83번째 줄:		83번째 줄:

	보푸라기를 제거하는 린트 롤러(Lint roller)처럼 코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다.		보푸라기를 제거하는 린트 롤러(Lint roller)처럼 코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다.
		+	코드에서 검사하는 항목을 크게 분류하면 아래 두 가지다.
		+
		+	# 포맷팅
		+	# 코드 품질
		+
		+	'''포맷팅'''은 일관된 코드 스타일을 유지하도록 하고 개발자로 하여금 쉽게 읽히는 코드를 만들어 준다. 이를 테면 “들여쓰기 규칙”, “코드 라인의 최대 너비 규칙”을 따르는 코드가 가독성이 더 좋다.
		+
		+	한편, '''코드 품질'''은 어플리케이션의 잠재적인 오류나 버그를 예방하기 위함이다. 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등이 오류 발생 확률을 줄여 준다.

	[[분류:2020년]]		[[분류:2020년]]

← 이전 판		2020년 1월 15일 (수) 08:12 판
81번째 줄:		81번째 줄:

	=== Lint ===		=== Lint ===
		+
		+	보푸라기를 제거하는 린트 롤러(Lint roller)처럼 코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다.

	[[분류:2020년]]		[[분류:2020년]]

@@ 45번째 줄: / 45번째 줄: @@
 === Webpack ===
-== 엔트리 ==
+==== 엔트리 ====
 웹팩에서 모든 것은 모듈이다. 자바스크립트, 스타일시트, 이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용하도록 한다. 자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 의존성 그래프의 시작점을 웹팩에서는 엔트리(entry)라고 한다.
-== 아웃풋 ==
+==== 아웃풋 ====
 엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶을 것이다. 번들된 결과물을 처리할 위치는 output에 기록한다.
-== 로더 ==
+==== 로더 ====
 웹팩은 모든 파일을 모듈로 관리한다고 했다. 자바스크립트 파일 뿐만 아니라 이미지, 폰트, 스타일시트도 전부 모듈로 관리한다. 그러나 웹팩은 자바스크립트 밖에 모른다. 비 자바스크립트 파일을 웹팩이 이해하게끔 변경해야하는데 로더가 그런 역할을 한다.
@@ 62번째 줄: / 62번째 줄: @@
 use에 적용할 로더를 설정한다
-== 플러그인 ==
+==== 플러그인 ====
 === Babel ===

← 이전 판		2020년 1월 15일 (수) 07:33 판
77번째 줄:		77번째 줄:

	코드를 읽고 추상 구문 트리(AST)로 변환하는 단계를 “파싱”이라고 한다. 이것은 빌드 작업을 처리하기에 적합한 자료구조인데 컴파일러 이론에 사용되는 개념이다. 추상 구문 트리를 변경하는 것이 “변환” 단계이다. 실제로 코드를 변경하는 작업을 한다. 변경된 결과물을 “출력”하는 것을 마지막으로 바벨은 작업을 완료한다.		코드를 읽고 추상 구문 트리(AST)로 변환하는 단계를 “파싱”이라고 한다. 이것은 빌드 작업을 처리하기에 적합한 자료구조인데 컴파일러 이론에 사용되는 개념이다. 추상 구문 트리를 변경하는 것이 “변환” 단계이다. 실제로 코드를 변경하는 작업을 한다. 변경된 결과물을 “출력”하는 것을 마지막으로 바벨은 작업을 완료한다.
		+
		+	바벨은 파싱과 출력만 담당하고 변환 작업은 다른 녀석이 처리하는데 이것을 “플러그인” 이라고 부른다.

	=== Lint ===		=== Lint ===

← 이전 판		2020년 1월 15일 (수) 07:32 판
44번째 줄:		44번째 줄:

	=== Webpack ===		=== Webpack ===
		+
		+	== 엔트리 ==
		+
		+	웹팩에서 모든 것은 모듈이다. 자바스크립트, 스타일시트, 이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용하도록 한다. 자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 의존성 그래프의 시작점을 웹팩에서는 엔트리(entry)라고 한다.
		+
		+	== 아웃풋 ==
		+
		+	엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶을 것이다. 번들된 결과물을 처리할 위치는 output에 기록한다.
		+
		+	== 로더 ==
		+
		+	웹팩은 모든 파일을 모듈로 관리한다고 했다. 자바스크립트 파일 뿐만 아니라 이미지, 폰트, 스타일시트도 전부 모듈로 관리한다. 그러나 웹팩은 자바스크립트 밖에 모른다. 비 자바스크립트 파일을 웹팩이 이해하게끔 변경해야하는데 로더가 그런 역할을 한다.
		+
		+	로더는 test와 use키로 구성된 객체로 설정할 수 있다.
		+
		+	test에 로딩할 파일을 지정하고
		+	use에 적용할 로더를 설정한다
		+
		+	== 플러그인 ==

	=== Babel ===		=== Babel ===

@@ 22번째 줄: / 22번째 줄: @@
 == 학습내용 ==
 * NPM은 자바스크립트 기반 프로젝트 빌드 도구
@@ 40번째 줄: / 42번째 줄: @@
 So if you see ~1.0.2 it means to install version 1.0.2 or the latest patch version such as 1.0.4. If you see ^1.0.2 it means to install version 1.0.2 or the latest minor or patch version such as 1.1.0.
 </nowiki>
 [[분류:2020년]]

@@ 31번째 줄: / 31번째 줄: @@
 * 부 버전(Minor version): 기존 버전과 호환되면서 기능이 추가된 경우
 * 수 버전(Patch version): 기존 버전과 호환되면서 버그를 수정한 경우
 </nowiki>

@@ 25번째 줄: / 25번째 줄: @@
 * NPM은 자바스크립트 기반 프로젝트 빌드 도구
-* 버전 번호를 관리하기 위한 규칙이 필요한데 이 체계를 “유의적 버전”이라고 한다. NPM은 이 [[https://semver.org/lang/ko/|유의적 버전(Sementic Version)]])을 따르는 전제 아래 패키지 버전을 관리한다. 유의적 버전은 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해서 버전을 관리한다.
+* 버전 번호를 관리하기 위한 규칙이 필요한데 이 체계를 “유의적 버전”이라고 한다. NPM은 이 '''[[https://semver.org/lang/ko/|유의적 버전(Sementic Version)]])'''을 따르는 전제 아래 패키지 버전을 관리한다. 유의적 버전은 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해서 버전을 관리한다.
 <nowiki>

@@ 7번째 줄: / 7번째 줄: @@
 * 강 사: 김정환 우아한 형제들 웹 프론트엔드 개발자 ([[http://jeonghwan-kim.github.io/|홈페이지]])
-== 강의노트 ==
+== 커리큘럼 ==
 * [[http://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html|프론트엔드 개발 환경의 이해: NPM]]
@@ 15번째 줄: / 17번째 줄: @@
 * [[http://jeonghwan-kim.github.io/series/2020/01/02/frontend-dev-env-webpack-intermediate.html|프론트엔드 개발 환경의 이해: 웹팩(심화)]]
-== 실습 ==
+=== 실습 ===
 * https://github.com/jeonghwan-kim/lecture-frontend-dev-env
 [[분류:2020년]]