Front-end/개발환경
-
로더 - 웹팩(Webpack) 기본편 | 김정환Front-end/개발환경 2020. 6. 4. 21:24
1. 로더의 역할 웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트 뿐만 아니라 CSS, 이미지, 폰트까지 전부 모듈로 보기 때문에 import 구문을 사용하여 자바스크립트 코드 안으로 가져올 수 있다. 이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문접으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만 아니라 CSS 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다. 2. 커스텀 로더 만들기 my-webpack-loader.js : module.exports = function myWebpackLoader (content) { console.log("myWebpackLoader가 동작함"); return content } we..
-
엔트리/아웃풋 - 웹팩(Webpack) 기본편 | 김정환Front-end/개발환경 2020. 6. 2. 22:06
# 웹팩의 역할 : 모듈로 연결된 여러 개의 자바스크립트 파일을 하나로 합쳐준다. - 하나로 합쳐진 파일을 번들이라고 하며, 웹팩은 번들을 만드는 번들러 역할을 한다. > npm install -D webpack webpack-cli webpack과 webpack-cli 설치 * -D : npm의 devDependencies(개발용 패키지)에 설치한다. # 웹팩 실행할 때 필수 옵션 * --mode : development(개발용), production(운영에 배포하기 위한 최적화) * --entry : 모듈의 시작점 * --output : 엔트리를 통해서 웹팩의 모든 모듈을 하나로 합치고 저장하는 경로를 설정 node_modules/.bin>webpack-cli --mode development --e..
-
웹팩이 필요한 이유와 기본 동작 - 웹팩(Webpack) 기본편 | 김정환Front-end/개발환경 2020. 3. 19. 20:24
[출처 : https://www.inflearn.com] 1. 배경 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터이다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는 데 수월하다. math.js : function sum(a, b){ return a+b } app.js : console.log(sum(1,2)); index.html : => index.html을 실행하면 console 창에 3이 찍힌다. 위와 같이 하면 전역 스코프가 오염되는 문제가 있다. math.js의 sum 함수는 어플리케이션이 돌아가는 어느 곳에서나 sum 함수에 접근할 수 있게 된다. 예를 들어 자바스크립트는 함수에도 할당할 수 있기에 전역 스코프가 오염되면 어플리..
-
Node.js에서 Firebase 사용하기 | KOSMOFront-end/개발환경 2020. 3. 11. 22:02
1.명령어 툴 설치 > npm i -g firebase-tools > firebase --version 2.파이어베이스 프로젝트 폴더 초기화 > firebase login > firebase init hosting 3. 파이어베이스 functions 폴더 설치 > firebase init functions (처음 firebase init 할때 functions 체크 했다면 생략) > cd functions > npm install firebase-admin --save > npm i express --save > npm install consolidate --save > npm install ejs --save > cd .. 4. 코드 편집기를 열어서 확인 해 보면 public 폴더와 func..
-
프로젝트 생성 -NPM | 김정환Front-end/개발환경 2020. 3. 10. 18:34
몇 년 전부터 프론트엔드 개발자 채용 공고에 Node.js 기술이 우대 사항 항목으로로 추가 되었다. Node.js는 백엔드를 구현하는 기술이라고 생각했다면 이 채용 항목이 의문이었을지 모르겠다. 웹 어플리케이션 개발에 직접적으로 사용하는 것은 아니지만 개발 환경을 이해하고 구성하는데 Node.js를 모르면 언젠가는 한계에 부딪히게 될 것이다. 1. 프론트엔드 개발에 Node.js가 필요한 이유 최신 스펙으로 개발할 수 있다. 자바스크립트 스펙의 빠른 발전에 비해 브라우져의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 이를테면 바벨 같은 도구의 도움 없이는 부족하다. 더불어 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프..
-
Node.js 프로그래밍 | KOSMOFront-end/개발환경 2020. 3. 4. 23:41
1. Node.js 시작하기 # Node.js 특징 - 모듈과 패키지 - 비동기 입출력 - 이벤트 기반 입출력 # pakage.json 설치 > npm init 모듈 설치하기 전에 제일 먼저 설치 # 외장 모듈 사용하기 > npm install -g nconf --save 글로벌 경로에 설치 * --save : 생략 가능 > num install nconf --save 현재 폴더 경로에 설치 > npm uninstall nconf 외장모듈 삭제 ※ npm install (plugin) --save 와 npm install (plugin) --save-dev의 차이 > npm install (plugin) --save - 패키지(plugin)를 ./node_moduels 디렉터리에 설치하고 ./pa..