저는 요즘 tailwindcss 매력에 푹 빠져있습니다. 독창적인 디자인을 할 수 있으며 css속성들이 클래스로 이미 다 지정이 되어있어서 협업을 할 때에도 좋습니다. 이번글에서는 tailwindcss 동적으로 스타일링하는법에 대해서 알아보겠습니다. 동적 스타일링이란 무엇일까요? 제가 생각하기에 동적스타일링이란 상태 또는 prop에 따라 컴포넌트의 UI가 바뀌는 것이라고 생각합니다. 바로 코드부터 살펴보시죠. 안 좋은 예 export default function FlexBox({ children, className = "", direction = "row", justify = "center", align = "center", gap = 0, as: Container = "div", }: FlexBoxP..
대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행된다. 하지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려했을 때 효율적인 클라이언트 사이드 프로그래밍이 가능하다. 이를 위해 브라우저가 HTML,CSS,JS파일을 어떻게 파싱 하여 렌더링 하는지 알아보자! 브라우저 렌더링 과정 브라우저는 HTML,CSS,JS파일,이미지,폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML,CSS를 파싱 하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성한다. 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syn..
인터넷 브라우저에 www.daum.net을 입력하면 뒷단에서는 어떤 일이 일어나는지 과정을 알아보겠습니다. 1. 브라우저의 URL 파싱 URL을 입력받은 브라우저는 URL의 구조를 해석합니다. 어떤 프로토콜을 통해 해당 URL에 요청을 할 것인지 어떤 URL로 요청할 것인지 어떤 포트로 요청할 것인지 보통 우리는 URL을 입력해서 페이지 이동을 할 때 포트번호까지 입력하면서 이동하진 않는다. 왜냐하면 브라우저는 설정된 기본값에 의해 포트번호가 자동으로 붙기 때문이다. HTTP 라면 80 , HTTPS 라면 443 포트가 자동적으로 붙게 된다. 2.HSTS 목록 조회 HSTS(HTTP Strict transport security)란 HTTP를 허용하지 않고 HTTPS를 사용하는 연결만 허용하는 기능을 말..
프론트엔드 개발자로써 가장 중요한 역량중 하나로 재사용성이 높은 컴포넌트를 개발하는것이라고 생각합니다. 보통 버튼은 하나의 프로젝트뿐만아니라 다른프로젝트나 여기저기 많이 사용될 가능성이 높습니다. 또한 협업할때 개발생산성을 높이기위해 공통컴포넌트를 만드는것은 중요합니다. 만약 디자이너가 프로젝트 전체의 버튼을 초록색으로 바꿔주세요! 라고 했을때 공통컴포넌트를 사용하지않고 각자 만들었다면 어떨까요..? 각자 맡았던 버튼 컴포넌트를 찾아 수정을 해야할것입니다. 이는 개발생산성을 낮추게 되는것이죠. 단순 색상변경이 아니라 더 어려운 작업이라면... 아찔 그 자체일것입니다. 이제 필요한 이유는 알았으니 Button 공통 컴포넌트 디자인 시스템을 구축해보겠습니다. 재사용성 높은 Button 컴포넌트 만들어보기 i..
