Next.js conf. 2023 또 Next.js 14 conference 얘기를 써보자면 BigCommerce 발표 때 한 얘기 중 최근 인기가 급부상하는 shadcn/ui라는 Tailwind UI library를 보고 영감을 많이 받아 composable storefront를 개발하는 중이라는 내용이었다. shadcn/ui에 대해서 간단히 알아보자. 설치 공식 홈페이지에보면 https://ui.shadcn.com/docs/components-json npx shadcn-ui@latest init CLI command 하나로 설치한다. 그 후엔 각각 필요한 컴포넌트별로 설치한다. 사용 이 library의 특징은 설치라는 개념이 원본 code를 다운로드 받는 개념이다. 예를들어 Card componen..

CSS 처리기에서 가장 인기있는 것은 CSS-in-JS 중 단연 styled-components 그리고 전처리기인 SCSS였다. 점유율을 보면 SCSS가 가장 높다. 그러나 최근에 Tailwind CSS의 인기가 급부상하고 있다. Styled-components 다음은 React에서 사용할 때의 jsx 파일이다. (Vue에서도 vue용 styled-components가 있다.) import styled from 'styled-components'; const StyledButton = styled.button` background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; ..

개 요 프론트엔드건 백엔드건 개발자들이 가장 싫어하는 코드는 당연 누가 뭐래도 CSS일 것이다. 여러가지 이유가 있겠지만 개인적인 생각은 (지극히 개인적인 생각) 1. 에러가 나지 않아 디버깅하기 힘들고, 2. 중복된 코드 속에서도 cascading 우선 순위 구조때문에 어느 것이 상위 우선순위로 적용되지는 알기 힘들고 3. 마지막으로는 개발자는 공돌이니깐 미적감각이 없다고 생각한다. 이 책에서는 그런 편견을 깨주는 tailwind css의 철학에 대해서 이야기해준다. Tailwind CSS의 창시자 Adam Wathan과 공동창시자인 Steve Schoger이 2018년에 "Refactoring UI"라는 이름의 책을 출판했다. Adam Wathan은 풀스택 개발자이고 Steve Schoger는 디자이..

Introduction 이번 글에서는 Vscode에서 Tailwind css를 사용할 때 유용한 두가지 확장프로그램을 소개하고자 합니다. 그 확장프로그램은 Tailwind Twin IntelliSense와 HeadWind입니다. 1. Tailwind Twin IntelliSense vscode에서 Intellisense 확장프로그램을 설치했다면, Tailwind CSS 마스터입니다. CSS 프레임워크를 다룰때 지속적으로 나왔던 단점이 '학습곡선이 존재한다. ' (본인은 동의하지 않음)었습니다. 하지만 이 환상적인 확장 프로그램을 설치함으로써, 없애버렸습니다. 일단 사용하기만 한다면, Tailwind CSS의 클래스를 빠르게 탐색하고 적용하는데 매우 유용합니다. 역할 자동 완성 기능 : 클래스 이름을 입력..

Introduction 이번 글에서는 CSS 프레임워크 선택에 있어서 주요 요소와 CSS에 대하여 알려진 사실들을 다루겠습니다. 최근에 프론트엔드 개발에 관심도가 높아지면서 자연스럽게 CSS에 대한 관심이 올라가고 있습니다. 그래서 찾아보았습니다. CSS 분야에서 지금 가장 주목받고 있는 프레임워크는 무엇인지, 또한 CSS를 다룰때 무엇이 개발자들을 고통스럽게 하는지. 1. Best CSS는 무엇인가? 우선, Best CSS가 무엇인지에 대한 궁금증으로 시작하였고, 구글 검색을 통해 결과를 찾아볼 수 있었습니다. 가장 먼저 노출되는 "24 Best CSS Frameworks ..." 에서 들여다보면 트렌드를 한눈에 파악할 수 있습니다. [1] 원문글 링크 title, 24 Best CSS Framewor..

Mobile first 시장조사기관 Statista의 2022년 통계에 따르면 글로벌한 E-commerce 시장에서 모바일 매출의 2018년도에 이미 PC 매출을 넘어섰고, 모바일 매출의 비중은 점점 늘어나고 있다고 한다. @media (max-width:) vs. (min-width) 내가 몇 개월전에 코딩한 SCSS의 일부이다. @media (max-width: 640px) { .menu { &__top { border-top: 1px solid; ... 우선 처음에 모든 디자인을 PC화면 기준으로 짜놓은 다음에, 이제 모바일도 적용되는 반응형으로 만들어야지라고 하면서 위처럼 media query를 넣기 시작한다. PC부터 짠 후 → 모바일을 짜기 때문에 (max-width: )가 들어가있다. 그러나..