메로그

dependencies, devDependencies 차이 우리가 노드모듈을 설치하다보면, package.json 에 dependencies, devDependencies 를 접하게 될텐데, 이의 차이점을 알아보자. 생각보다 간단하다. 우리가 설치할 때, --save-dev, -D 같은 명령어를 붙여서 설치하면 devDependencies 로 설치되게 된다. 이는 개발할 때 개발용으로 사용할 라이브러리를 설치하는 것이고 배포시에는 포함되지 않는다. 동작과는 연관이 없는 모듈을 설치 해주면 되는 것이다. 사용하는 이유 사용하는 이유는 용량 때문이다. 우리가 배포시 필요없는 모듈도 같이 올라간다면 그만큼 용량도 커지고 리소스를 잡아먹게 된다. 불필요한 라이브러리를 포함시키지 않기 위해 사용하는 것이다.

로더 웹팩은 모든 파일(html, js, css ...)을 모듈로 하여 바라보고 있습니다. 그러하여 import 구문을 사용하여 자바스크립트 코드 안으로 가져올 수 있는데 이게 가능한 이유가 웹팩의 로더 덕분입니다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환, 이미지를 dataUrl 형식의 문자열로 변환, CSS 를 자바스크립트에서 직접 로드할 수 있도록 합니다. 커스텀 로더 만들기 임의의 js 파일을 하나 만들어봅시다. userLoader.js module.exports = function userLoader (c) { return c; } 로더가 읽은 파일의 내용이 함수 인자 c 로 전달됨. webpack.config.js module: { rules: [{ test: /\.js..

웹팩이란? 모듈을 지원하기 시작한 것은 es2015(es6) 이상 입니다. 그 전에는 그럼 어떻게 했냐? 우리가 알고 있듯이 script 를 하나씩 로드해서 사용하였습니다. 또는 위와 같은 문제를 개선하여 즉시 실행 함수 (IIFE) 방식을 사용하였습니다. 그러면서 다양한 모듈 스펙 (AMD, CommonJS, UMD) 등이 나오기 시작하였습니다. 웹팩은 여러 개 파일을 하나의 파일로 합쳐주는 번들러 입니다. 시작점인 엔트리를 기준으로 의존되어 있는 모듈을 찾아 하나의 결과물로 합쳐서 만들어줍니다. 웹팩 설치 // 앞에 @ 를 붙여 원하는 버전을 설치할 수 있음. 나는 4버전을 설치하겠음 npm install webpack@4 npm install webpack webpack-cli 설치가 완료되면 아래..

TIL Today I Learned 의 약자로 내가 당일에 공부하게된 내용을 적는 것을 말합니다. 나 같은 경우에는, 공부한 내용을 정리하여 블로그 또는 개인 노트에 정리하는데, 그러다보니 생각보다 불필요한 시간이나, 관리가 소홀해지는 문제가 발생하였습니다. 그래서 이를 해결하기 위해 깃허브에 TIL 레파지토리를 만들어 하루하루 공부한 내용을 올리게 되었습니다. 최근에는 Vue 관련 프로젝트를 하면서 생긴 이슈, 간단한 문법의 경우 블로그에 일일히 정리해서 올리기보다는 한줄노트 형식으로 TIL 에 작성해보고 있습니다. 그러다보니 정리한 내용을 한 번 보면, 생각보다 하루 커밋된 내용이 간단하고 읽기 편해 총 정리된 내용은 블로그에 올리는 형식으로 해볼까~? 하고 둘 다 잘 사용할 수 있는 방법을 생각하고..

npm 의 문제점 npm 을 사용하여 node_modules 를 만들면, 많은 용량과 많은 디렉토리를 만들어 속도와 용량의 문제점을 발생시키며, 사용하고자 하는 의존성을 찾는데 npm 은 상위 node_modules 계속 탐색하여 찾으며, 패키지를 찾지 못할 수록 속도는 현저히 느려집니다. 가끔씩 찾지 못해 에러를 발생하는 것도 볼 수 있을 것 입니다. (지웟다가 다시 깔아보고.. 다시 깔아보고... 근데 느리고...) yarn berry 기존의 yarn 을 이용하여 설치시 npm 을 이용한 node_modules 보다는 가볍고 빠르다지만, node_modules 를 이용하는 것은 변함이 없습니다. 이러한 node_modules 를 해결해주기 위해 나온 것이 yarn berry 입니다. yarn berr..

이슈 템플릿 이슈를 올릴 때, 어떤 문제가 있는지? 어떤 단계가 있는지? 이런 것을 직접 일일히 적는데에는 시간이 소비된다. Gitlab 에 이슈 템플릿을 등록하면 이러한 과정을 간단하게 처리할 수 있다. 시작하기 .gitlab 밑에 이슈 템플릿 폴더와 사용할 md 파일을 생성합니다. (.gitlab/issue_templates/error.md) md 파일은 마크다운 언어로 되어있는 파일로 여기에 필요한 템플릿을 아래와 같이 간단하게 적용해주면 됩니다. # 요약 어떠한 원인으로 발생합니다. ## 어떠한 에러가 발생하는지? ## 어떠한 아웃풋을 원하는지? ### 첨부파일 1. 사진 2. 동영상 3. 파일 /label ~"오류" 이런 식으로 입력해서 이제 깃랩에 올리게 되면 해당 이슈를 생성할 때 템플릿을 ..