서론평소처럼 Tailwind CSS와 추가 플러그인을 설치해서 사용하다가, h-[]등 일부 클래스가 적용되지 않는 문제가 발생했다..문제 원인은 Tailwind CSS v4.1의 구성과 Tailwind CSS 3의 구성을 혼용했기 때문이었고, v4.1에 맞는 구성을 사용하여 해결했다. 생각해보니 올해 초에 비슷한 문제를 겪었었던 것 같은데, 또 실수를 반복한 것 같다. 따라서 이것을 계기로 postCSS란 무엇인가, 어떻게 작동하는가. Tailwind CSS v4.1에서는 PostCSS 를 어떻게 구성하는가에 대해 정리해보려고 한다..PostCSS란 무엇인가PostCSS는 JavaScript를 사용해 CSS를 변환하는 도구이다. "Post-(이후에)"라는 접두사가 말해주듯, CSS가 작성된 후에 그 코드..
CSR (Client-Side Rendering, 클라이언트 사이드 렌더링) 실행 흐름사용자 요청: 사용자가 페이지를 요청빈 HTML 전송: 서버는 빈 HTML 파일과 JavaScript 파일을 클라이언트로 전송클라이언트에서 데이터 fetching: 클라이언트(ex.크롬 브라우저)는 JavaScript를 실행해 필요한 데이터를 API 등에서 가져온다.클라이언트에서 렌더링: 클라이언트는 데이터를 사용해 페이지를 동적으로 렌더링한다.특징렌더링 위치: 클라이언트(브라우저)에서 렌더링.렌더링 시점: 사용자 요청 후 JavaScript 실행 시리액트의 기본 동작 방식. 클라이언트에서 데이터를 fetching( JavaScript 파일 다운로드 및 실행 , JavaScript 파일로부터 DOM을 렌더링)하는 과정..
Atomic Design System(원자 설계 방법론)
홈페이지를 구축할 때, 얼마나 많은 시간과 노력이 드는지 어떻게 판단할 수 있을까?프로젝트의 노력수준은 페이지 수 자체보다는 해당 페이지에 포함된 기능과 구성 요소에 의해 결정된다. 따라서 재활용할 수 있는 구성 요소들을 작성하는 스타일 가이드가 있다면, 프로젝트의 능률은 올라갈 수 있다.Atomic Design System 원자 설계 방법론 그러한 스타일 가이드를 작성하는 방법으로, 자연계에서 아이디어를 얻은 'Atomic Design System'을 활용할 수 있다. 자연계에서 원자들이 서로 결합하여 분자를 형성하고, 분자들은 결합해서 복잡한 유기체를 형성한다. Atomic Design System에서는 이를 바탕으로 원자, 분자, 유기체, 템플릿, 페이지 총 5개의 설계 단계를 거친다. 1. 원..