webpack
-
SWC 이용해서 React + Webpack 세팅해보기개발 블로깅/React 개념 2023. 1. 25. 21:30
한창 블로그 초창기에 CRA(create-react-app)를 쓰지 않고 직접 package.json init부터 React + Webpack + Babel 세팅 블로그를 올린 적이 있었는데, 이미 3,4년 정도 지나고 많은 것들이 변하면서 레거시 글이 되어버렸다. 그래서 이번에 사이드 프로젝트로 인해 새로운 Single Page Application 환경이 필요하게 되면서 오랜만에 다시 세팅을 해보았는데, 요즘 컴파일러로 굉장히 핫한 SWC를 Babel 대신해서 트랜스파일러로 Webpack과 세팅을 해보았다. 그래서 이번에 SWC + Webpack을 이용해서 React 환경을 직접 구성하는 방법으로 다시 정리해보려고 한다. 우선 처음으로 package.json을 세팅한다. $ yarn init -y 다..
-
[2019.07.14] 오늘의 TIL - webpack.config.js의 build 설정 시 주의사항개발 블로깅/오늘의 TIL 2019. 7. 15. 00:18
현재 진행 중인 프로젝트에 TypeScript React Redux를 신나게 쓰고는 있고.., 컴포넌트 라이브러리를 어떤 것을 쓸까 고민을 많이 해보았다. 4주 프로젝트 때 사용했던 ant Design이 정말 괜찮긴 했었다. 설명과 예시코드가 사용하기 쉽게 잘 되어있고, 무엇보다 디자인이 엄청 깔끔하고 사용성에 대해 직관적이다. 그래도 한번 써 본 라이브러리여서, 이번에는 다른 것을 써 볼까 고민을 많이 했었다. Material-UI, BootStrap, React Tool Box 등.. 리액트 관련 CSS 라이브러리가 엄청 많아 전부 사용해 보고 싶다.. 그러나 이번 프로젝트의 기술 핵심은 TypeScript + React + Redux! 괜히 다른 것에 시간 투자하지 않고 해당 스택에 집중하기로 했다..
-
[2019.07.11] React + TypeScript + Webpack 환경 설정개발 블로깅/React 개념 2019. 7. 11. 09:48
React의 보일러 플레이트 CRA를 사용한 것이 아닌, 직접 웹팩 세팅에 TypeScript를 적용한 환경설정을 해보자. # 프로젝트 디렉토리 생성 $ mkdir React_TypeScript $ cd React_TypeScript 프로젝트로 사용할 디렉토리를 생성하고 해당 디렉토리로 이동한다. # packge.json 생성 $ npm init -y 해당 프로젝트의 디렉토리에 사용할 packge.json을 생성한다. # webpack 세팅 $ npm i -D webpack webpack-cli 프로젝트에 사용할 webpack을 개발용 패키지로 설치한다. $ touch webpack.config.js 이후에 webpack 실행에 관한 설정을 하는 webpack.config.js 파일을 root 경로에 생..
-
[2019.04.22] WebPack 사용법 #4 - babel 세팅개발 블로깅/Modern script 2019. 4. 22. 12:11
브라우저 내에서는 ES6 이상의 문법을 호환하지 않는다. 그럼 우리는 어떻게 ES6문법을 이용하여 개발이 가능한 것인가. 바로 babel이란 모듈이, ES6 문법을 브라우저에 사용할 수 있는 방식인 ES5으로 바꿔준다. 이 babel을 사용하게 위해서는 모듈을 설치하고 webpack에 설정을 해 주어야 한다. 그러면 babel을 사용하는 법을 알아보자. 이전 글에 작업했던 webpack에 이어서 한다. # babel 모듈 설치 npm i -D babel-cli babel-preset-env babel-core 위 세개의 모듈은 babel을 사용하게 위해서 필요로 한 필수 모듈이다. 설치를 하면 package.json에서 babel 관련 버전이 표시되는 것을 확인할 수 있다. 그리고 해당 root경로에 '..
-
[2019.04.21]WebPack 사용법 #2 - webpack.config.js 설정개발 블로깅/Modern script 2019. 4. 21. 23:31
이전 사용법 #1에서는 webpack 명령어를 이용하여 직접 번들파일을 생성해주는 방식을 작업해 보았다. 그러나 웹 서비스를 개발할 때마다 일일히 webpack 명령어를 쳐서 번들화 작업을 해 줄 수 없다. 그래서 webpack.config.js라는 파일을 이용해서 개발작업을 할 때마다 자동으로 번들화 시켜주도록 설정한다. bundle 파일을 자동으로 생성해주는 작업을 위한 설정 - webpack.config.js webpack을 자동으로 사용하기 위한 설정을 하기 위해서는 'webpack.config.js' 이라는 파일을 하나 생성해 줘야한다. 이 파일에 webpack에 관한 정보가 들어가게 된다. const path = require('path'); module.exports = { entry: pa..
-
[2019.04.17] 웹팩(webpack)이란?개발 블로깅/Modern script 2019. 4. 17. 15:53
요즘 웹 서비스를 하나 개발한다고 하면, 엄청난 양의 코드로 인해 많은 js파일이 생긴다. 양이 많아지는 만큼 js파일 관리가 힘들어지고, 하나하나 스크립트 선언해서 가져오게 되면 그만큼 자원도 엄청나게 소비되게 된다. 그래서 이 많은 양의 파일을 하나로 묶어줌으로써 자원 관리를 쉽게 해주는 기능을 하는 것이 웹팩(webpack)이다. 특히 리액트에서 하나의 컴포넌트마다 하나의 js파일을 생성하고, 뿐만 아니라 여러개의 수많은 이미지 파일, css파일 등등을 가지고 있는데, 이를 하나의 bundle.js 파일로 묶어줘서 웹 브라우저에 올림으로써 웹브라우저가 가지게 될 수고를 덜어준다. 위 사진은 스프린트 진행 중 만든 리액트 프로젝트 파일인데, 개발자도구에서 보면bundle.js파일을 가지고 있고, in..