로니의 개발 이야기

React 환경에서 개발을 진행하면서 CRA를 통해 보통 개발 환경을 구축해왔다. 하지만, '프론트엔드 개발자라면 빌드 시스템을 직접 구축할 수 있어야 하지 않을까?'라는 생각이 들었다. 또한 상황에 맞게 환경 설정을 수정하며, 성능을 개선해 나가는 작업이 필요하다고 생각했다. 이번 작업은 macOS 환경에서 진행하였고, CRA 없이 react 개발 환경 구축을 시작해보겠다. package.json 만들기 가장 먼저 내가 작업하고자 하는 위치에 가서 프로젝트 초기화를 통해, 어떤 프로젝트를 진행하고자 하는지에 대한 정보를 입력한다. yarn init 명령어를 통해서 내가 작업하고자 하는 폴더를 node.js 프로젝트로 초기화 시킨다 해당 명령어를 진행하면 아래와 같은 question이 나오게 되는데, 내..

react 개발을 진행하면서 webpack에서 빌드를 할 때, 계속 아래와 같은 오류가 발생해서 이를 해결해보고자 했다. 오류에 따르면 뭔가 최적화가 안되고 있고, react-icon 주에서 fa와 md에서 최대 값인 500kb를 초과하고 있다는 내용이었다. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/fa/index.esm.js as it exceeds the max of 500KB. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/md/index.esm.js as it exceeds the max of 500KB...

CORS? 개발을 하다 보면 쉽게 접하게 되는 CORS에 대해서 한번 정리해보고자 한다. 그렇다면 먼저 CORS란 무엇일까? CORS는 Cross-Origin Resource Sharing의 줄임말로, 직역하면 교차 출처 리소스 공유이다. 교차 출처 리소스 공유라는 말은 쉽게 와닿지 않는다. 쉽게 말해, 내가 가지고 있는 모자를 친구가 빌린다고 했을 때, 내가 알겠다고 하는 느낌으로 생각하면 될 것 같다. 그렇다면, 출처(Origin)란 무엇일까? 서버의 위치를 뜻하는 URL들은 여러 개의 구성 요소로 이루어져 있는데, 이중에 sheme(protocol), host(domain), port로 구성되어있는 것이 출처이다. 예를들어, https://aosjehdgus.tistory.com/라는 주소가 있다고..