Programming
-
webpack 자주 사용하는 플러그인Programming/Webpack 2020. 5. 6. 21:05
BannerPlugin 웹팩에서 제공하는 플러그인으로 결과물에 빌드 정보나 커밋 버전, 만든이 등과 같은 정보를 추가할 수 있다. webpack.ocnfig.js plugins: [ new webpack.BannerPlugin({ banner: `build time : ${new Date().toLocaleTimeString()}`, }), DefinePlugin 웹팩에서 제공하는 플러그인으로 모든 자바스크립트 코드에서 접근이 가능한 전역 변수를 선언하기 위해 사용된다. 기본적으로 DefinePlugin을 빈 객체를 전달하여도 노드 환경정보인 process.env.NODE_ENV에 값을 넣어준다. console.log(process.env.NODE_ENV) 했을 경우 해당 webpack.config.js..
-
webpack 기초 입문 ( entry, output )Programming/Webpack 2020. 4. 20. 17:08
webpack ? webpack은 Node.js 환경에서 실행되고 npm으로 설치할 수 있다. 웹팩은 자바스크립트, HTML, CSS, 이미지와 같은 여러개의 assets (js, css,png,jpg 등)을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러로 의존성이 있는 모듈을 취하여 해당모듈을 대표하는 정적 자산들을 생성한다. 정적 자산들이란 말 그대로 움직임이 없이 고정된 자산들을 말하며 webpack은 예를들어 여러가지의 모듈을 main.js 에 통합 해준다. webpack 실습 전 디렉터리 구조 // bye.js function webpackTest2() { console.log('bye webpack!'); } webpackTest2(); // hi.js f..
-
socket.io 이용한 채팅Programming/NodeJS 2020. 4. 2. 15:48
socket.io를 이용한 채팅 기능을 만들면서 복습겸 정리, 아 이런거구나 감을 잡는데 도움이 되었으면 좋겠습니다. // home.pug html(lang="ko") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="styles/styles.css") title Chat body #jsNotifications // 유저입장시 입장알림 .loginBox // 닉네임 입력 안했을 때 보이는 창 form#jsLogin input(placeholder="닉네임!", type="text") .chatContainer#jsChat // 닉..
-
socket.io 원리Programming/NodeJS 2020. 3. 31. 01:40
socket.io란 socket.io는 웹소켓을 이용해 클라이언트에 실시간으로 데이터를 전송한다. socket.io는 Socket을 구현한것으로 WebSocket 개발을 쉽게 하기 위한 것이다. 클라이언트에서 Event Listener로 새로운 정보를 받아 정보를 업데이트할 수 있다. socket.io 활용되는 곳 실시간 분석, 메시지, 채팅 바이너리 스트리밍, 문서 공동작업 등 socket.io 사용 yarn add socket.io // home.pug html(lang="ko") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", hre..