유연해지기/etc.

Yarn Berry로 node_modules를 해치우자

서론 npm과 yarn v1이 가지고 있던 고질적인 문제점을 해결해주는 Yarn Berry의 등장! node_modules의 큰 용량 차지, package.json에 명시되어있지 않은 패키지를 사용하는 유령 의존성 등을 해결해줄 수 있다. yarn v1으로 관리되고 있던 프로젝트를 Yarn Berry를 사용하도록 migration 해보자. Yarn Berry 적용하기 우선 yarn을 설치한다. npm install -g yarn 그리고 프로젝트의 루트로 이동한 뒤 yarn berry로 변경해준다. yarn set version berry 그리고 lockfile을 생성해준다. yarn install 프로젝트에 새로운 파일들이 추가된 것을 확인할 수 있다. .pnp.cjs pnp.cjs는 의존성을 확인할 수..

카카오맵 API를 리액트스럽게 사용해보자

서론 이번에 진행하는 프로젝트에서 지도를 통해 정보를 제공하는 기능이 필요했다. 많은 지도 API 중에서 하나를 선택해야 했는데 카카오맵을 사용하기로 했다. 그 이유는 카카오맵 API의 개발자 커뮤니티가 잘 활성화되어있고 공식문서 구성이 깔끔했다. 또한 프로젝트에서 다루게 될 지도의 영역이 서울시였고 주변 건물들의 위치정보가 잘 드러나야 했기 때문에 이러한 점들을 고려하여 카카오맵을 최종적으로 선택하게 됐다. 이 글을 통해 카카오맵 API를 좀 더 React 환경과 어울리게 사용하고자 고민했던 과정을 공유해보고자 한다. 카카오맵 API 불러오기 https://apis.map.kakao.com/web/guide/ 공식문서에 카카오맵을 불러오는 방식이 잘 정리되어있지만 그래도 ! 작성해보겠다. API 키 발..

vscode에서 typescript warning, error 정보 안 보일 때

cmd + ,setting 들어간 뒤, typescript validate 검색 후 Enable/disable Typescript validation 체크

PostCSS에 대해 알아보자 (PostCSS란?)

https://postcss.org/ PostCSS - a tool for transforming CSS with JavaScript Enforce consistent conventions and avoid errors in your stylesheets with stylelint, a modern CSS linter. It supports the latest CSS syntax, as well as CSS-like syntaxes, such as SCSS. postcss.org 서론 웹팩의 로더에 대해 공부하던 중에 postcss-loader 라는 것을 보았다. Sass가 css의 전처리기(css pre-processor)라는 것은 알고 있었기에 postcss는 후처리기? 처럼 동작하지 않을까 예상해보..