본문 바로가기

반응형

시리즈

(4)
처음으로 돌아가기 | 번들 파일의 종착지, Output 관리하기 https://webpack.kr/guides/output-management/ 해당 문서를 참고하여 작성됩니다. 제가 이해 한대로  작성하는 부분이 많기 때문에, 정석대로 가실거라면 공식문서를 참고해보세요. 이전 포스트 | 애샛 설정, Data 다루기 처음으로 돌아가기 | 애샛 설정을 통한 웹팩 번들링, 그 두 번째 json/xml/csv참고한 자료는 webpack 공식 문서를 사용하였습니다. 애샛 설정 두 번째, 데이터프로젝트 환경에서 NodeJS 의 경우에는 JSON 지원을 기본적으로 해줍니다. 따라서 import data from './data.json' 형태로 불러duklook.tistory.com 들어가는 말이번시간에는 Output 경로에 대해서 다룰 겁니다. 번들링된 결과가 dist/ 경로에..
처음으로 돌아가기 | 애샛 설정을 통한 웹팩 번들링, 그 두 번째 '데이터'(애샛 파트 마지막) 참고한 자료는 webpack 공식 문서를 사용하였습니다.  애샛 설정 두 번째, 데이터프로젝트 환경에서 NodeJS 의 경우에는 JSON 지원을 기본적으로 해줍니다. 따라서 import data from './data.json' 형태로 불러와도 정상적으로 import 되어 사용할 수 있습니다. 하지만, xml 이나 csv 파일 의 경우에는 지원해주지 않기 때문에, json 과 동일한 방식으로 import 하려고 하면 문제가 발생합니다.  따라서 웹팩에서는 이 문제를 해결할 수 있는 로더를 제공해주는데 그것이 csv-loader 와 xml-loder 입니다. 이번 포스트는 해당 로더를 설정해서 번들링하는 방법을 언급하고 그 결과를 살펴보는 과정을 서술합니다.  loader 설치 및 구성 설정 후 번들링 순..
처음으로 돌아가기 | 애셋을 적용한 웹팩 번들링, 우리가 import './style.css ' 등이 가능했던 이유(애샛 파트 ① CSS, Image, Font) 이전 포스트 | 처음으로 돌아가기, 웹팩을 사용한 기초 번들링  처음으로 돌아가기, 웹팩을 사용한 기초 번들링처음으로 돌아가기, 첫 번째 프로젝트 환경 설정현재에는 프론트엔드 개발을 하기 위한 환경을 구축하는 것이 매우 쉽습니다. Vite 를 이용하면 손쉽게 개발 환경이 구축되고, 리액트,뷰, 앵글러duklook.tistory.com 들어가는 말, 이 포스트에서 해볼 것이번 시간에는 CSS, 이미지, 폰트애셋을 통합하여 웹팩 번들링 시 포함시켜주는 설정에 대해서 정리해보는 시간을 가져볼 겁니다. 이 때 까지 편하게 사용했던 import 방식이 왜 쉽게 가능했는가에 대한 부분이 되겠습니다. 원래 라면 outside 등의 문제가 발생해서 모듈을 인식하지 못하는 문제가 일반적인데, 웹팩은 이 문제를 쉽게 처리..
처음으로 돌아가기| 웹팩을 사용한 기초 번들링 처음으로 돌아가기, 첫 번째 프로젝트 환경 설정현재에는 프론트엔드 개발을 하기 위한 환경을 구축하는 것이 매우 쉽습니다. Vite 를 이용하면 손쉽게 개발 환경이 구축되고, 리액트,뷰, 앵글러와 같은 라이브러리/프레임워크를 사용하면 더 쉽게 개발을 이어갈 수 있습니다. 그리고 앞으로의 인공지능 시대에는 모든게 말 하나로 복잡한 환경 셋팅도 자동화될지도 모릅니다. 하지만, 이렇게 편안한 도구들이 등장하고, 개발자가 손쉽게 다룰 수 있는 추상화의 단계가 가속화될 때, 간과하지 말아야 하는 부분이 우리가 쓰는 도구가 어떤 원리에 의해서 동작하는가에 대해 알고 있는가에 대한  부분입니다. 자동화된 도구라도 완벽할 순 없으니, 제반이 되는 원리를 이해하고 있다면 보다 쉽게 문제를 찾아서 해결할 수 있을 지도 모를..

반응형