coding- w00se

webpack-dev-server란? webpack-dev-server의 깃헙 공식문서에 의하면 아래와 같은 설명이 있다. Use webpack with a development server that provides live reloading. 해석을 하면 'webpack 개발 서버를 제공하며, 이 개발서버는 live reloading의 기능이 있다.' 이다. 즉, 파일에 변화가 생겼을 때 자동으로 reloading되는 개발 서버를 제공하는 패키지이다. 설치 npm install --save-dev webpack-dev-server html-webpack-plugin❗️html-webpack-plugin 플러그인은 빌드 파일이 저장되는 output 경로에 html문서를 포함시켜주는 플러그인..

플러그인(Plugin) 플러그인은 로더가 할 수 없는 다르 작업을 수행할 목적으로 제공됩니다. 플러그인은 번들된 파일에 후처리 작업을 할 때 사용된다. ex. 번들된 파일 맨 위에 build 시간을 주석으로 삽입하는 작업 플러그인을 만들면 플러그인의 동작 원리를 이해하는데 도움이 됩니다. 커스텀 플러그인을 만드는 예제는 김정환 님 블로그에 자세히 나와있습니다. 플러그인 설정 방법 플러그인은 webpack.config.js 파일에 plugins 속성에 배열로 등록합니다. 예제 코드 const path = require('path'); const webpack = require('webpack'); module.exports = { mode: 'development', entry: { main: './src..

로더(Loaders) webpack은 기본적으로 Javascript와 JSON 파일만 이해합니다.(= 모듈화 할 수 있습니다.) css, 이미지 파일, 폰트 등의 다른 유형의 파일들을 번들하기 위해서는 로더(Loader)의 도움을 받아 처리해야 합니다. 즉, 로더는 Javascript와 JSON을 제외한 다른 유형의 파일들의 처리하여 모듈화 가능하게 해 줍니다. 커스텀 로더를 만들면 로더의 동작 원리를 이해하는데 도움이 됩니다. 커스텀 로더를 만드는 예제는 김정환님 블로그에 잘 나와있습니다. 로더 설정 방법 로더는 webpack.config.js 파일에 modules 객체의 rules 속성에 배열로 등록합니다. 예제 코드 // webpack.config.js const path = require(&#39..

webpack 이란 무엇인가? webpack은 모듈 번들러이다. 각 모듈의 의존 관계를 파악해서 하나의 묶음 파일(bundle)로 만들어준다. 로더를 사용하면 css 하나의 javascript에 통합할 수 있다. 왜 필요한가? webpack이 필요한 이유는 등장하게 된 배경과 연관이 있습니다. webpack의 등장 배경에 대해서는 이 글에 자세히 정리되어 있습니다. 간략히 목록으로만 정리하면 웹팩의 등장 배경은 아래와 같습니다. 파일 단위의 모듈 관리의 필요성 웹 개발 작업 자동화 도구 웹 애플리케이션의 빠른 로딩 속도와 높은 성능 webpack 설치 및 설정 webpack 설치 npm install --save-dev webpack webpack-cliwebpack 설정 webpack의 기본 설정 파일..

발생 에러 fatal: 올바른 오브젝트 이름이 아닙니다: 'master' 에러 발생 상황 github에서 repository를 생성 1에서 생성한 repository를 clone git branch [브랜치 이름] 명령어를 이용해서 브랜치 생성 시도 하단 에러 이미지 3에서 에러 발생 에러 원인과 해결 방안 해당는 방금 생성한 repository에 아직 commit이 하나도 존재하지 않기 때문에 발생한 에러입니다. 따라서, commit을 한 후 다시 branch를 생성하면 정상적으로 branch를 생성할 수 있습니다. 읽어 주셔서 감사합니다 :) 잘못된 부분이 있다면 댓글로 편히 알려주세요

본 과정이 시작하기 전에 회고를 매일 쓰진 못해도 주마다 하나씩은 쓰자고 마음먹었는데 지키지 못했고, 결국 2주가 지나고 자동차 경주 미션이 완료되고 회고를 쓰게 됐다. 이번 미션 동안 느낀 점과 배운 점은 아래와 같다. 테스트 주도 개발 경험 이번 미션의 부제목은 테스트인 듯하다. TDD(Test Deiven Development)에 대한 개념을 배우고 경험해봤다. TDD의 흐름에 대해 간략히 정리를 하면 아래와 같다. 1) 테스트 코드 작성 2) 테스트를 통과하는 코드 작성 3) 구현한 기능에 대해 리팩토링 위 흐름으로 하나의 기능을 완성하고 이 과정을 반복해서 개발하는 과정이 TTD이다. 처음 테스트 코드를 작성하는 게 낯설어서 시간이 많이 걸렸다. '그냥 테스트 코드 작성을 하지 말까?' 라는 생..

호출 스케줄링 - 함수의 실행을 예약하는 방법 타이머 함수를 이용하면 일정 시간이 지난 후 특정 함수를 실행 가능하다. 타이머 함수 javascript에서는 대표적인 타이머 함수는 setTimeout과 setInterval 가 있다. setTimeout - 일정 시간이 지난 후 콜백 함수를 한번 호출 setTimeout은 단 한번 동작하는 타이머 생성 타이머가 만료되면 전달받은 콜백 함수를 호출 MDN - setTimeout setTimeout의 반환 값은 생성한 타이머에 대한 고유 id 값 타이머 고유 id 값은 실행 환경에 따라 다르다. 반환 값에 대한 예시 코드 및 결과 const firstTimerId = setTimeout(() => { console.log('first callback 함수 호..

Javascript 에러는 어떤 것들이 있나? MDN - Erorr 대표적으로 Erorr 생성자가 있고 그 이외 주요 오류는 SyntaxError, ReferecneError, TypeError, RangeError, URIError, EvalError 등이 있다. 에러 처리를 하지 않으면? → 프로그램이 강제 종료된다. 에러를 처리한 경우 try { const arr = null; arr[0]; } catch (err) { console.log('에러: ', err); // TypeError 발생 } console.log('여기까지 실행이 되나?'); // 실행됨 에러를 처리하지 않는 경우 const arr = null; arr[0]; // 여기서 코드 실행 종료 conso..

정보 은닉을 하는 이유 모던 Javascript Deep Dive에 의하면 정보 은닉은 아래와 같은 효과가 있다. 정보 은닉은 외부에 공개할 필요가 없는 구현의 일부를 외부에 공개되지 않도록 감추어 적절치 못한 접근으로부터 객체의 상태가 변경되는 것을 방지해 정보를 보호하고, 객체 간의 상호 의존성, 즉 결합도를 낮추는 효과가 있다. - 모던 Javascript Deep Dive 24장 중 간단히 정리를 하면 아래와 같습니다. 객체의 상태를 안정적으로 관리(예상하지 못한 변화를 예방) 객체 간의 결합도를 낮춤 Javascript에서 정보 은닉을 하는 방법 javascript에서는 # 접두사를 이용해서 클래스에 private 속성을 만들 수 있습니다. 과제를 수행하면서 정보 은닉을 연습했던 예시 코드는 아..

CSS로 스타일을 지정하는 작업을 하다 보면 간혹 형제 요소들 중 하나의 요소에만 다른 스타일을 적용할 필요가 생깁니다. 이런 경우 CSS에서 :nth-child, :first-child, :last-child, :not 등의 의사 클래스를 활용하면 간단하게 형제 요소들 중 특정 요소들을 지정해서 스타일을 적용할 수 있습니다. 오늘 연습할 HTML 문서의 구조와 기본 스타일은 아래와 같습니다. HTML ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ CSS(기본 스타일) #arrow-container { display: flex; flex-direction: row; margin: 50px 0; } .arrow { font-size: 32px; margin-left: 10px; } 예시 사진은 아래와 같습니다. :..