공부 기록일지📚

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

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

사용하기 이전에 여러분이 사용하는 테일윈드의 버전과 변경사항 그리고 docs는 어디를 기준으로 작성되어있는 지 확인하시는 작업이 필요합니다. 제가 사용한 테일윈드 버전은 3 이며, next는 12.2.2 입니다. 예시로 만약 제가 next13을 사용한다면 , app 경로의 파일들을 인식할 수 있게 "./app/**/*.{js,ts,jsx,tsx}"를 추가로 넣어주어야 겠죠. //tailwind.config.js //(코드 중략) content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], 하지만 전 next12버전을 쓰기 때문에 app 관련 경로를 넣어줄 필요가 없..

[정의] CSS-in-JS는 스타일 정의를 css나 scss파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 기법이다. [사용 배경] 기존 웹 사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 컴포넌트 기반 개발 방법의 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있다. inline-style과의 차이점? CSS-in-JS는 컴포넌트 안에 css를 정의하는 인라인 스타일과 비슷하지만 인라인 스타일은 지양하는 것이 좋습니다. [inline style의 단점] CSS 속성의 중복, 재사용성이 떨어진다. 의사 클래..

🍕BootStrap 이란? 간단히 말하면 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다. 오픈 소스 프론트엔드 프레임워크이다. PC용 디자인 뿐만아니라 태블릿이나 스마트폰 같은 모바일용 디자인을 반응형으로 한번에 지원한다. 여러 웹 브라우저를 지원하기 위한 크로스 브라우징 걱정 X 부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크다. https://getbootstrap.com/docs/5.0/components/card/ Cards Bootstrap’s cards provide a flexible an..