전체 글

안녕하세요! 오늘은 리액트에서 사용되는 CSS-in-JS 라이브러리인 styled-components에 대해 소개하려고 합니다. styled-components는 리액트 컴포넌트를 스타일링하는 데에 사용되며, 매우 인기 있는 라이브러리입니다. styled-components를 사용하면 CSS 파일을 작성하거나 클래스 네임을 사용하지 않고도 리액트 컴포넌트에 스타일을 적용할 수 있습니다. 이 라이브러리는 템플릿 리터럴 문법을 사용하여 컴포넌트 스타일을 작성하므로, 일반적인 CSS와 매우 유사한 문법을 가지고 있습니다.   styled-components를 사용하면 다음과 같은 이점을 얻을 수 있습니다: 유지보수 용이성: CSS와 관련된 모든 코드를 컴포넌트 내부에 작성하기 때문에, 코드베이스의 일관성과 유..

React, Vue, Angular, Svelte 4대장을 계속 쓰다 보면 기본적인 css 속성만 알고,css에 대해 무감각해져가고 성능 최적화, 코드 개선에 대해서 공부하다 보면 css에 대해 무감각해져가고 css 속성에 대해 이해도가 떨어지고 구글링, chatgpt 에 의존하게 됩니다.(저 또한 그랬구요...)그래서 기초부터 하나하나 적으면서 정리를 하려고 합니다. Flexdisplay: flex;위와 같은 속성을 가장 많이 사용하실겁니다. 1차원적인 레이아웃을 작성할 때 사용된다고들 하죠. 가로, 세로 정렬justify-content: center; ->컨테이너에서 가로축을 기준으로 가운데 정렬합니다.justify-content: flex-start (default); -> 요소들을 컨테이너의 왼쪽..

병렬라우팅 이란?NextJS 는 병렬라우팅 이라는 것을 지원하는데 아래 사진과 같이 독립적인 컴포넌트를 서버에서 해석하여 클라이언트로 내려주는 형태이다.동시에 하나 이상의 페이지를 렌더링할 수 있게 해주며 대시보드나 소셜 사이트 피드와 같은 동적인 앱 섹션에서 병렬라우팅을 사용하여 복잡한 라우팅 패턴을 구현 할 수 있다. 독립적으로 스트리밍되는 각 경로에 대해서 오류, 로딩 상태를 정의할 수 있다. 또한 인증 상태와 같은 특정 조건부에 따라서 슬롯을 렌더링할 수 있도록 지원한다. 이를 통해서 동일한 URL 이지만 완전히 분리된 코드를 사용할 수 있게 지원해준다.  프로젝트 설명현 프로젝트에서는 모달창을 띄울 때와 서로 독립적인 데이터를 가진 레이아웃을 렌더링할 때 사용한다.Client-component ..

웹 성능 최적화를 해야 하는 이유성능 최적화 : 웹 페이지가 사용자에게 빠르게 표시되도록 하는 작업무거워진 웹 로딩은 사용자 경험을 떨어뜨리고, 비즈니스에 큰 영향을 끼치기 때문에 성능 체크가 매우 중요.Ex) 이미지 공유 서비스인 Pinterest의 경우 성능 최적화를 통해 매출을 40% 증가 비즈니스 성과 향상: 사용자들이 웹 사이트에 빠르게 접근할수록 그들이 원하는 정보에 더 빠르게 도달Ex) Google 연구 결과 - 페이지 로딩 시간이 1초에서 3초로 증가하면 이탈률이 32%로 증가하고, **1초에서 10초로 증가하면 이탈률이 123%**까지 증가 ( Google / SOASTA Research, 2017 )이용자 이탈 방지: 웹 페이지가 빠르게 로드하면 사용자 경험을 향상시키고, 사용자는 페이..

디자인 시스템이란?애플리케이션을 구성하는 UI 요소와 규칙들을 재사용 가능한 형태로 컴포넌트화 하거나 패턴화 한 표준의 모음.디자이너와 개발자 모두 UI 컴포넌트를 다루기 때문에, 디자인 시스템은 두 분야를 연결하는 다리이기도 합니다. 또한 조직의 공용 컴포넌트에 대한 "단일한 진실의 원천(source of truth)"이다.예시 Accessibility at GitHub | PrimerGet started with accessibility at GitHub.primer.style  디자인 시스템이 없을 때 "이 페이지는 레이아웃 디자인이 조금 달라요""파란색 텍스트들을 조금 덜 파란색으로 모두 바꿔주세요""이 버튼에 마우스를 올리면 색이 진해지나요?"디자인 시스템이 있을 때"이 페이지도 표준에 맞추어 ..

Spring의 핵심 기술The IoC ContainerResourcesValication, Data Binding, and Type ConversionSpring Expression Language(SpEL)Aspect Oriented Programming with springNull-safetyLogging1. Ioc(Inversion of Control“전통적인 제어 흐름에 비추어볼 때, 제어 흐름을 반대로 뒤집은 것”“라이브러리를 사용할 때는 내 코드가 라이브러리 코드를 호출하지만,프레임워크를 사용할 때는 프레임워크가 내 코드를 호출한다.” 2. Resourceslow-level resources 에 접근할 수 있는 보다 폭넓은 기능을 제공UrlResourceClassPathResourceFileS..