LHJ

Node

• https://nodejs.org/api/fs.html
• Chrome V8 엔진 기반의 플랫폼 구성, Node.js & NPM
• Node 버전관리 NVM
• NPM - 노드 패키지 매니저 알고 가기
• Node.js 환경을 이해하는 간단 실습
• 자바스크립트 파일을 Node.js로 실행하기
• 클라이언트 자바스크립트 VS. 서버 사이드 자바스크립트
• Node.js 환경을 이해하는 심화 실습
• 비동기 흐름과 동기 흐름은 어떤 차이가 있나요?
• 파일을 읽을 때 코드를 동기적으로 실행할 수도 있나요?
• File System 모듈을 사용하여 파일 쓰기(Write File)
• writeFileSync - 동기 처리
• File System 모듈로 파일 변경 내용을 계속 관찰(Watch File)하기
• 디렉터리(폴더) 안의 모든 파일을 일괄적으로 관찰할 수 있나요?

NPM

• NPM 노드 패키지 매니저 활용
• http-server 웹서버 모듈 활용하기
• 사용자 정의 모듈(User Define Module) 활용하기
• 다른 사용자가 작성하여 공유한 외부 모듈을 호출하여 사용할 수는 없나요?
• 사용자 정의 모듈, NPM에 배포하기
• NPM에 배포한 모듈 다운로드하여 테스트하기

중간 복습

• 중간복습
• 중간복습2

Gulp

• 업무를 향상시키는자동화 시스템 Gulp
• Gulp.js를 사용하는 기초 준비
• 전역 설치된 Gulp 파일은 어디에 있나요?
• Gulp.js 프로젝트 디렉터리에 로컬 설치하기
• gulpfile.js 파일 생성 및 수행할 업무(Task) 등록하기
• Gulp 플러그인을 활용한 파일 결합, 압축, 문법 검사
• 작성한 scripts 업무 역할별 분리
• del 모듈로 특정 디렉터리 및 파일 삭제
• scripts 업무 프로세스와 동일한 CSS 업무 정의
• gulp-if 모듈로 조건에 따른 업무 처리
• 지속적 관찰 업무 등록
• 환경 설정 외부로 분리
• GitHub에서 Gulp 프로젝트 파일 다운로드하여 실행

gulpjs 공식사이트

• JavaScript and Gulpfiles
• Creating Tasks
• Async Completion

gulp 4점대 버전 필수 참고 사이트

• https://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async
• https://fettblog.eu/gulp-4-parallel-and-series/
• https://gulpjs.com/docs/en/getting-started/quick-start
• https://github.com/xtratio/amocrm-widget-starter-kit/issues/8
• https://programmingsummaries.tistory.com/393?category=700959

gulp 4점대 버전 필수 공부

• gulp 4점대 버전 특징
• JavaScript and Gulpfiles

고성능 HTML 템플릿 엔진, Jade (최신업데이트 2020년 기준 5년 전이 마지막)

• 고성능 HTML 템플릿 엔진, Jade
• Jade 학습을 위한 기본 준비
• Gulp 프로젝트에 Jade 모듈 설치하기
• Jade 속기 마크업(Shorthand Markup)
• Jade 스크립팅(scripting)
• 믹스인 사용하기
• Jade 템플레이팅(Templating)
• 확장 & 상속(extends & inheritance) 사용하기
• 템플릿 상속 기본 값 설정(Inheritance Default Value)하기
• block 앞뒤에 내용 추가(prepend/append block)하기
• 환경 설정(Configuration) 분리하기

Jade : 공부 참고 사이트

• Jade : gulp-open 모듈 참고 사이트
• html2jade (: online)
• html2jade (: npm)
• jade case문(if문과 같은 성질)
• jade while문(each ~ in문과 같은 성질)

강력한 CSS 확장 언어, Sass & Compass, Bourbon

• 강력한 CSS 확장 언어, Sass & Compass, Bourbon
• Sass 사용을 위한 모듈 설치 및 준비
• Sass 알아보기
• gulp-sass 모듈 설치하기
• gulp-sass 모듈 호출 및 sass 업무 등록하기
• Sass 문법과 Scss 문법은 어떤 차이가 있나요?
• gulp-ruby-sass 모듈도 gulp-sass와 사용 방법이 비슷한가요?
• Sass 기본(Basic) 사용 방법
• Sass 호출(Import)하기
• Css 코드를 여러 줄이 아닌 한 줄로도 출력할 수 있나요?
• Sass 스크립트(Script) 사용 방법
• Sass 데이터 유형에는 어떤 것들이 있나요?
• Sass 연산(Operation) 처리하기
• Sass 믹스인(Mixin) 사용하기
• CSS3 속성마다 웹브라우저 벤더 프리픽스(Browser Vender Prefix)를 설정한 믹스인을 모두 만들어야 하나요?
• Sass 조건문(Conditions) 사용하기
• Sass 조건문의 또 다른 유형
• Sass 반복문(Loops) 사용하기 (@while)
• Sass 반복문(Loops) 사용하기 (@for)
• Sass 반복문(Loops) 사용하기 (@each) : Sass List 데이터 활용
• Sass 반복문(Loops) 사용하기 (@each) : Map 데이터 활용
• 추가내용 : spritemith와 Sass 연동하기

고성능 HTML 템플릿 두번째, EJS

• EJS 템플릿 설치 방법
• EJS scripts 문법 - 변수 & 이스케이프
• EJS scripts 문법 - 반복문
• EJS scripts 문법 - 조건문
• EJS scripts 문법 - include

참고할만한 EJS 템플릿 사이트

• https://junspapa-itdev.tistory.com/2

필수!

• Node 버전관리 NVM
• NVM - 오류 없이 설치하는 법
• Node 버전별 다운로드받을 수 있는 사이트
• Node.js에서 ES6 활용할 수 있는 환경 꾸미기
• ESLint 환경설정, ES6 문법 오류 검사
• Gulp 3.9.X와 4.X의 차이점
• Jade와 같은 HTML Template에 css, js파일을 인라인 스타일로 넣을 때 주의할점!!!!!

그외 공부해보고 싶은 부분들

• JSON.stringify()
• JSON.stringify()
• crolling