노인과바다의 개발로그 노인과바다의 개발로그

프론트엔드를 작업할때 데이터가 필요한 경우가 있다. 더미 데이터를 만들고 이를 바탕으로 백엔드를 간단하게 구현해놓으면 프론트 API를 작업하기에 편리하다. 현재 faker.js최신버전은 리포가 폭발되었으므로(2022년 1월 초 깃허브 삭제/ 해외에서는 꽤나 이슈가 되었다.) https://www.npmjs.com/package/@faker-js/faker @faker-js/faker Generate massive amounts of fake contextual data www.npmjs.com 위의 링크의 버전을 이용해서 해보겠다. 사용법은 초 간단하다 npm i @faker-js/faker 로 인스톨 후 노드에서 실행한다. require(@faker-js/faker)로 불러오고 위의 링크에 보면 다양한..

사실 create-react-app으로 하면 거기에 웹팩과 다양한 설정들이 이미 들어가있어서 우리가 직접 세팅할 필요는 없지만,,, 다양한 설정을 위해서는 웹팩에 기본정도는 알아야 할것 같아서 이를 간단하게 정리해봤다. Webpack이란 무엇인가? 여러 컴포넌트와 다양한 파일들을 묶어서 한 덩어리로 만들어 주는 모듈 번들러(Module bundler)이다. 하단의 이미지 왼쪽의 input과 같이 다양한 종류의 파일들을 묶는 번들링이라는 과정을 거쳐 아웃풋으로 오른쪽과 같은 파일을 만들어낸다. 예시) 다양한 파일들을 번들링하여 하나로 합쳐진 js파일 혹은 여러개로 나눠진 js파일을 만들수 있다. sass라고하는 css preprocessor를 통해서 만들어진 파일을 css로 변환 이미지를 최적화해서 새로운..