정도영 Tech-Blog 정도영 Tech-Blog

1. devServer 요즘 vite나 bun 등 제각의 강점과 빠른 빌드 속도를 가진 다양한 번들링 툴이 개발 및 출시되고있기는 하지만 아직 번들링 생태계에서 가장 큰 비중을 차지하는 것은 webpack이 아닐까 생각합니다. 이 webpack은 webpack.config.js라는 파일 내부에 설치, 지정된 속성이 정의됩니다. 만약 터미널 커맨드로 프로젝트를 설치할 경우에는 보통 webpack.config.js 파일은 숨김처리 되어있기 때문에 우리는 이 파일에 대해 쉽게 접근할 수 없으며, 그 중요성과 존재를 알아차리기 힘들지만 사실 이 파일은 우리가 프로젝트를 만들도록 돕는데 큰 역할을 합니다. 여기서 webpack을 정의하는 속성 중 가장 중요한 요소 중 하나는 devServer가 아닐까 생각합니다...

webpack module의 plugins 속성은 loader들로 번들링된 js 파일의 후처리를 담당합니다. 전 글에서 plugin들은 클래스의 인스턴스를 호출하여 해당 plugin이 제공하는 후처리 로직을 번들링할 때마다 적용한다고 작성했습니다. 사실 loader나 plugins 모두 프론트엔드 개발 패키지를 다운 받을 때 필요한 요소들이 모두 함께 받아지지만, 무엇이 어떤 방식을 사용해 완성된 번들링 파일을 만드는지 궁금했기 때문에 여기에 정리를 하려고 합니다. 참고로 공부한 webpack의 설정 기준은 현재의 5버전이 아닌 4버전 기준입니다. 1. BannerPlugin new webpack.BannerPlugin({ banner: ` Build time: ${new Date().toLocaleSt..

전의 포스트에 이어서 작성하는 내용입니다. 전 포스트에서 웹팩의 주요 속성으로 mode, entry, output, module(loader)이 무엇인지 짧게 작성했습니다. var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'none', entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devServer: { port: 9000, }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html', }..

웹팩을 사용하려면 webpack과 webpack-cli 라이브러리를 다운받습니다. 물론 어플리케이션의 직접적인 실행 파일이 아니므로 -D 옵션을 붙여 devDependencies로 다운받습니다. 다운받은 후 프로젝트 내 webpack.config.js 파일의 내용입니다. module.exports = { mode: 'none', entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.scss$/, use: ['style-loader', 'css-loader', 'scss-loader'] }, { test: /\.js$/, use: ['ba..

1. 지역 설치 프로젝트 폴더의 node_modules에 라이브러리 파일이 직접 저장됩니다. 아래의 두 명령어는 동일한 역할을 합니다. 즉, 라이브러리 지역으로 설치할 때, --save-prod는 생략이 가능합니다. npm install {package name} npm install {package name} --save-prod 2. 전역 설치 npm install {package name} --global # window %USERPROFILE%\AppData\Roaming\npm\node_modules # mac /usr/local/lib/node_modules 지역 설치가 특정 프로젝트 내부의 범위에 한정해 설치하는 것이라면, 전역 설치는 사용자의 컴퓨터 내부에 라이브러리 패키지를 설치합니다. ..

server.js 는 컨트롤러의 역할을 한다고 했었다. 즉, api 요청을 받아 알맞은 페이지나 JSON 데이터를 답변으로 보내준다. 예시를 보자. get 요청은 저렇게 인자로 요청이 들어온 url, 그리고 처리 로직이 작성된 콜백 함수를 넣어준다. 그 콜백 함수는 다시 두 개의 인자를 받는데, 각 각 request와 response의 약자이며, 모두 무엇을 뜻하는지 짐작해볼 수 있다. req는 post, put, delete 요청 등에서 db를 수정하기위해 인자로 들어온 데이터 및 http 통신 정보들이 모두 들어가있다. res는 요청을 받아서 보내줄 정보를 정의한다. 사진에는 send와 sendFile 함수가 있는데, send는 보다시피 단지 String 데이터만 들어가있다. 따라서 요청을 받아 저 ..

Node.JS로 서버를 만드려면 먼저 Node.JS를 설치부터한다. 그 후 서버를 만들 폴더에 git init 입력. 그럼 프로젝트 패키지가 만들어진다. 그렇게 패키지를 만들면 라이브러리를 설치할 수 있는데, npm i express로 express 라이브러리를 설치해준다. express 라이브러리는 Node.JS로 서버를 쉽게 만들 수 있게해주는 라이브러리이다. 그리고 폴더 내에 서버의 메인 자바스크립트 파일이 될 js파일 하나를 만든다. 보통 server.js 로 주로 명명한다. 이 파일이 스프링의 MVC패턴에서 컨트롤러에 대응하는 파일이라 보면 되겠다. 해당 파일에 요렇게 express 라이브러리에서 가져온 서버를 생성하는 함수를 express 변수에 할당하고, 함수를 실행해 app이라는 클라이언트..