프론트 엔드 개발 기록

시작하기 전 🤔 ❓ node.js 쓰면 무엇이 좋을까 예전엔 폴더 하나 만들고 그 안에 html, js파일 만들어서 작업했었다. 이번엔 node.js 환경을 구축해서 작업해보고 싶었는데, 개념과 장점을 명확히 알고 쓰고싶었다. Node (또는 더 공식적으로는 Node.js) 는 오픈소스, 크로스 플랫폼이며, 개발자가 모든 종류의 서버 사이드 도구들과 어플리케이션을 JavaScript로 만들수 있도록 해주는 런타임 환경이다.런타임은 브라우져 영역 밖에서도 사용할수 있도록 의도했다.(예를들면 서버 OS 또는 컴퓨터에서 직접적으로 실행되는). 이와 같이, 이 환경에서 특정 브라우져에서의 자바스트립트 API들을 제외시키고 , HTTP 와 파일 시스템 라이브러리들을 포함하여 더 많은 전형적인 OS API들을 추가..

잘되던 소스 빌드가 갑자기 되지 않았다. 확인해보니 node환경 개선으로 다른 개발자분이 package.json을 수정하셨다. npm update를 해도 잘 되지 않아서 node modules를 제거하고 다시 install한 뒤 소스를 빌드하였는데 아래와 같은 에러가 났다. no such file or directory, scandir '~\node_modules\node-sass\vendor 아래 명령어로 node-sass를 rebuild해주니 해결되었다. npm rebuild node-sass 참고 https://stackoverflow.com/questions/45251645/error-enoent-no-such-file-or-directory-scandir

.eslintrc.js 파일 내 env설정에 아래 두 줄을 삽입해준다. module.exports = { "env": { "amd": ture, //require "node": true, //module } } 참고 https://stackoverflow.com/questions/30901417/eslint-how-to-set-eslintrc-to-recognize-require http://eslint.org/docs/user-guide/configuring#specifying-environments

Babel 최신 언어들을 es5로 변환해주는 트랜스컴파일러. Gulp 반복적인 작업 (ex. 프론트엔드 빌드)에 필요한 작업들을 수행하는Stream기반의 Build System. 코드작성 > JS Test > JS Minify > JS Merge > CSS Minify > CSS Merge > 결과물 폴더에 저장 1. 프로젝트 시작하여 package.json파일 생성 npm init 2. gulp, eslint 전역으로 설치 npm install -g gulp eslint 3. 배포시엔 필요 없으니 --save-dev 설정하여 설치 npm install --save-dev gulp babel-core babel-preset-es2015 gulp-babel@7 gulp-sass gulp-eslint 4. ..