본문 바로가기

React2

MUI에서 적용되는 CSS customize 방법들 MUI 에서는 기본적으로 여러 컴포넌트를 제공해주는데, 내 프로젝트에서는 추가적으로 customize를 해야한다! 색, 크기 등! Material UI Components 를customize 하기 위한 방법들!MUI에서는 Emotion을 기반으로 한 style 기법을 사용한다. css 관련한 sx, theme 등 모두 emotion 엔진 위에서 돌아간다. Emotion CSS 란? CSS-in-JS 로, .css 파일을 따로 만들어서 css를 적용하는 것이 아닌, js 파일 안에서 style을 적용할 수 있게 하는 라이브러리이다. 여기서 Emotion CSS랑 내가 알고 있던 styled-component, Tailwind CSS의 차이가 궁금해졌다. 다음에.. 출처: https://mui.co.. 2025. 4. 24.
[Mungae] 프로젝트 구조 best practices 조사 0. 프로젝트 시작 전, 폴더 구조를 잘 짜야 하는 이유 폴더 구조는 코드의 가독성과 유지보수성을 높이는 데 중요한 역할을 한다. 나중에 파일을 어디에 저장해야 할지 어려워진다. 폴더 구조의 기본 원칙 폴더 구조 설계 시에는 기능별로 폴더를 나누는 것이 좋다.폴더 이름은 기능을 명확히 나타내야한다. 폴더 구조를 설계할 때는 다른 개발자들과의 협업을 고려해야 한다. 확장성을 고려해야 한다. 1. 흔하게 볼 수 있는 폴더 아키텍쳐 src/├── assets/ ├── components/ ├── hooks/ ├── pages/ ├── router/ ├── services/ hooks프로젝트에서 사용하는 커스텀 hook을 저장한다. 커스텀 hook을 .. 2025. 4. 14.