반응형 웹팩(Webpack) 이해하기 - 개발 서버 저번 글에 이어서 웹팩 개발 서버에 대해 알아보자. 웹팩 개발 서버 외에도 VS code의 Extension인 Live Server나 Node.js로도 로컬 서버를 구현할 수 있다. 이런 여러 선택지 중에서 웹팩 개발 서버를 통해 얻을 수 있는 이점은 무엇일까 생각을 해봤다. 운영 환경과 비슷하게 만들기 개발 환경에서도 운영 환경과 비슷한 환경을 만들어 주는 것이 좋다. 운영 환경과 맞춤으로써 배포 시에 잠재적 문제를 미리 확인하고, 예방할 수있다. 이런 노력은 타입스크립트를 사용하는 것과 비슷한 맥락이다. 협업에서의 이점도 있지만 타입을 지정하여 운영 환경의 문제들을 예방할 수 있다. 학습 비용 감소 처음엔 Node.js를 통해 서버를 구현하고 목업 API 작업을 했었다. Node.js를 공부하니 Ex.. 2021. 11. 22. 웹팩(Webpack) 이해하기 처음 리액트를 배울 때 이런 생각이 들었다. "이렇게까지 어려운 문법을 배우면서 굳이 써야하나? 내 개인 프로젝트에 쓰일 정도로 편하긴 한가?" 반은 억지로 하다보니 따라치기 수준의 학습밖에 하지 못했다. 그러다 Vanilla JS로 SPA 만들기같은 과제를 두 번이나 하게 되면서 리액트를 쓰는 이유를 알게 되었다. 아니, 좋아하게 되었다. 리액트에선 많은 것들이 추상화 되어 있었고 굉장히 편리한 도구였다. 이제는 "고작 이 문법으로 이렇게나 많은 것들을 할 수 있다니"로 생각이 바뀌게 되었다. 그렇다면 CRA에서 기본으로 깔려있는 이 웹팩도 알아볼 필요가 있다. 분명 이유가 있을 것이다. 내 평일은 물론이고 주말까지 시간을 순삭하게 만든 웹팩을 한번 살펴보자. ✏️ 웹팩을 배우면서 제가 개인적으로 느꼈.. 2021. 11. 16. public 폴더 안 axios import 에러 Vanilla js로 SPA를 만들면서 정말 많은 에러들을 겪고 있다. 그래도 점점 직접 부딪혀보는 실력이 늘고 있다. 구현 후에 에러가 뜨면 해결하는 재미가 쏠쏠하다. 그런데 이번엔 조금 찝찝하게 마무리하게 되었다. 서버쪽에서 잘 사용하던 axios가 왜 클라이언트에선 불러오지 못하는 것일까? 일단 중요한 부분만 표현한 프로젝트의 폴더 구조는 다음과 같다. node_modules public |-- main.js // 여기서 axios를 import 해와서 쓰고 싶다 |-- index.html |-- style.css src |--api package-lock.json package.json server.js // axios 사용 main.js에서 import axios from 'axios';를 하면.. 2021. 11. 1. 이전 1 다음 반응형
