공부 기록일지📚

바로 직전에 MUI라는 CSS 프레임워크를 갖다 쓰는 것에 대해 비판적인 의견을 나타내는 글을 썼었는데.. 사실 MUI는 개발자들이 좋아하는 CSS 프레임워크이고 많은 사람들이 여러 가지 이유로 잘 사용하는 CSS 프레임워크이다. 많은 기능을 제공하고(built in API) 잘만 쓰면 아주 편리하기 때문인데 ..처음 MUI를 갖다 쓰면서 간단한 조각을 빌려 쓴 것이 아니라 바로 커스텀을 해야하던 상황이라 그런지 첫인상이 매우 좋지 않았다. CSS도 익숙하지 않은 사람이 만들어진 컴포넌트를 갖다 쓴다는 게 생각처럼 쉽지 않았을 것이고 결국 많은 시간을 소요하는 결과를 낳았다. 현업에서 MUI를 좋아하는 개발자들이 많다는 글을 봐서 그런지 다시 한 번 제대로 사용해보고자 한다. MUI로 구성된 프로젝트를 ..

문제상황classnames 라이브러리를 활용하여 동적인 클래스 명을 부여해서 컴포넌트 마다 다른 폰트 컬러를 적용하려고 하니 css먹지 않았다. 이유를 알 수 없어서 오타가 난건지 확인을 여러번 했고 디버깅도 했는데 원인을 찾을 수가 없었다.(당연하다 CSS는 디버깅이 어렵다.) 컴파일 순서때문인지 혹은 값을 내려주는 컴포넌트에서 변수명을 틀린 것인지 전부 다 확인해봤으나 문제를 찾을 수가 없었다. 🤯원인지금은 해결해서 알게된 사실이지만 개발자 도구에서 내가 classNames함수(classnames 라이브러리 제공 함수)를 통해 부여한 동적인 클래스 값이 해싱되지 않았다면 지금 해당 컴포넌트의 모듈 scss가 아니라 단순 css 클래스명이 부여된 것이라 CSS가 인식이 안된 것 같다. 문제였던 코드//..

개인적으로 mui, bootstrap 등의 UI프레임워크를 써보면서 불편함을 느꼈습니다. Mui를 사용했을 때, api를 읽고 제가 원하는 기능을 추가적으로 커스텀해야하는 상황이 생겼었는데 이 과정에서 많은 고통을 겪게 됐습니다. 많은 개발자들이 UI 프레임워크를 갖다쓰는 이유로 완성도 높은 디자인과 빠른 아웃풋을 낼 수 있는 점(생산성)을 들 것이라 생각합니다. 어떤 기능을 따로 추가적으로 붙이거나 디자인을 변동시키지 않는다면 UI 프레임워크는 좋은 선택이 될 수 있습니다. 저는 길게 봤을 때 좋은 선택이 아니라고 느꼈습니다. MUI에서 제공하는 컴포넌트를 갖다 썼을 때, 내가 원하는 대로 작동하지 않으며 그 이유를 찾기 어렵고 이 과정에서 시간이 많이 소요됐기 때문입니다. api를 뒤적이며 속성을 하..

이전에 프로젝트는 CRA로 생성하여 webpack기반이었고 이 외에도 next로 프로젝트를 했을 때에도 기본적으로 CNA(create next app)도 webpack기반이라 webpack bundle analyzer 를 사용하면 됐습니다. 하지만, Vite의 경우는 개발모드에서 esbuild를 사용하고 프로덕션용 최종 배포 시에는 rollup을 활용합니다. 즉, rollup의 플러그인을 활용하여 번들 사이즈를 체크해야한다는 소리입니다. 물론 vite에서도 webpack의 플러그인을 활용할 수는 있다고 합니다.(저는 그냥 호환성을 고려하여 roollup의 플러그인을 활용했습니다) 비주얼라이저 (혹은 애널라이저)는 어떤 것을 갖다 쓰면 좋을 지하고 확인하던 차에 npm trends 로 어느 패키지가 가장 ..

리액트 프로젝트를 하다보면 index.css 와 App.css가 따로 존재하는 것을 볼 수 있습니다. vite + react 프로젝트를 만들면서 전역 css를 어디에 배치해야할까 하다가 기존 템플릿에서 제공하는 root가 다른 것을 확인할 수 있었습니다. src>index.css 에는 :root src>App.css 에는 #root 둘 다 전역 CSS같은데 왜 같은 root를 다르게 표현할까 라는 생각이 들었습니다. 저는 리액트가 같은 :root 를 컴포넌트에 쓸 때는 다르게 표현한 것은 아닐까 라고 생각하고(모듈을 번들링할 때, 다르게 트랜스파일되는 줄..) App.css에 있는 #root를 전역 css로 생각하고 있었는데요. 당연히 틀렸습니다. 자주 보지 않으니 가장 근본적인 App.jsx가 어느 d..