분류 전체보기 135

[CSS] clamp 함수로 간단한 반응형 구현하기

현재 반응형 웹을 구현하는 가장 핵심 방법은 미디어쿼리를 사용하는 것이다. 그러나 미디어 쿼리는 한 요소에 대해 여러 화면에 대한 CSS 코드를 작성하기 때문에 전체적인 코드량이 매우 증가한다는 단점을 가진다. 만약 최소 크기, 최대 크기를 지정하는 정도의 간단한 반응형 스타일링이라면 css의 clamp 함수를 활용하는 것도 하나의 방법이다. clamp(min, preferred, max) clamp는 세 개의 값을 인자로 받는다. 첫 번째는 최소값, 두 번째는 일반적으로 적용되는 값, 마지막은 최대값이다. 즉 두 번째 값을 적용하되 그것이 최소값과 최대값의 범위를 벗어나지는 않는다. 일반적으로 두 번째 인자인 선호값(preferred value)에는 vw, vh 등 viewport를 기준으로 한 값이 ..

[Jest] jest.fn( )과 유닛 테스트 모킹 (Mocking in Unit Test)

모킹 (Mocking) 모킹은 유닛 테스트 코드를 작성할 때 테스트하는 코드가 의존하는 일부분을 가짜로 대체하는 기법을 의미한다. 모킹의 대상은 테스트 목적과 거리가 있거나 테스트 코드 구현 혹은 실제 테스트 과정에서 지나치게 리소스를 차지하는 코드이다. 혹은 DB에 접근하는 것과 같이 side effect를 유발시키거나 결과의 일관성을 방해하는 코드들도 모킹을 적용하는 것이 좋다. 모킹 기법을 활용하면 특정 일부분만을 테스트하는 유닛 테스트의 목적에 부합하면서 빠르고 가벼우면서도 매번 동일한 결과를 반환하는 테스트를 수행할 수 있다. 자바스크립트의 테스팅 라이브러리인 Jest는 여러 가지 모킹 기능을 지원한다. 오늘은 그 중에서도 jest.fn( ) 메소드를 다뤄볼 것이다. jest.fn( ) jest..

[React] useLayoutEffect vs useEffect

useLayoutEffect와 useEffect는 모두 의존값의 변화에 따라 side effect 함수를 실행시킨다는 점에서 유사한 성질을 가진다. 그러나 실제 그것이 동작하는 방식에 있어서 실제로 그것을 활용하는 방향성에 있어서 차이점을 지닌다. useEffect useLayoutEffect 실행 순서 컴포넌트 렌더링 → 화면 갱신 → side effect 컴포넌트 렌더링 → side effect → 화면 갱신 side effect 함수 실행 방식 비동기 동기 useEffect문을 사용해서 DOM element의 style을 지정하는 등 mutation을 일으키는 경우 이미 화면이 갱신된 이후에 또 다시 화면이 갱신되면서 '깜빡거림'(flickering)이 발생한다. 이는 SPA의 장점을 망치는 현상 ..

[CSS] scrollbar-gutter - 스크롤바를 위한 공간 미리 만들어두기

웹 클라이언트를 개발하다 보면 콘텐츠의 양에 따라 스크롤바의 유무가 변경되는 경우가 존재한다. 이렇게 되는 경우 스크롤바의 유무에 따라 내부 content 사이즈가 변경되기 때문에 UI적으로 변화가 발생한다. 이는 사용자 입장에서 매우 보기가 안 좋다. 스크롤바가 존재하던 존재하지 않던 동일한 레이아웃을 보여줄 수 있다면 편리하지 않을까? 이 때 사용할 수 있는 CSS 속성이 바로 scrollbar-gutter이다. scrollbar-gutter은 스크롤바가 할당될 위치를 미리 점지해줄 수 있다. scrollbar-gutter에 일반적으로 지정해줄 수 있는 값은 세 가지가 있다. (1) auto 기본값이다. overflow가 scroll이거나 auto이면서 해당 element가 overflow중이라면, ..

[CSS] data-attribute를 값으로 사용하기 - data-color이 인식이 안 돼요!

attr( )을 활용하면 다른 attritube와 마찬가지로 data-attribute에 담긴 값을 가져올 수 있다. 그러나 이전에 data-attribute를 소개하는 포스트(링크)에서 해당 방법은 content를 제외한 경우에는 사용을 지양해야 한다고 언급했다. 분명 값은 가져올 수 있는데 왜 사용하면 안 된다고 하는 것일까? 문제의 원인은 attr( )가 가져오는 값은 string이라는 점이다. 따라서 content를 제외한 경우에는 값을 가져와도 쓸모가 없다. 예를 들어서 color을 지정해주기 위해서 "#FFFFFF"라는 값을 data-attribute로 전달해줘도 이것은 헥스 코드가 아닌 문자열로 인식되기 때문에 색상이 적용되지 못한다. 마찬가지로 10, 5px, 3rem, 100vw와 같은 ..

[아키텍쳐] SAGA 패턴

SAGA 패턴 이전에 MSA 관련 포스트를 업로드하면서 MSA를 구축할 때에는 서비스 별로 DB를 구축하는 경우가 많기 때문에 트랜잭션을 어떻게 처리할 것인지에 대한 문제가 존재한다고 언급했었다. 그에 따라 각각의 서비스는 로컬 트랜잭션만을 처리하고 그 결과에 따라 트랜잭션 완료 이벤트 혹은 실패 이벤트를 전달함으로써 데이터의 일관성을 유지하는 SAGA 패턴이 등장하게 되었다. 로컬 트랜잭션이 발생하면 현재 DB를 업데이트한다. 만약 그것이 성공하는 경우 다음 로컬 트랜잭션을 트리거하고 실패하는 경우 보상 이벤트를 통해 이전 로컬 트랜잭션을 롤백한다. 완료 이벤트와 실패 이벤트는 동시 다발적으로 일어나는 것이 아니라 순차적으로 이루어진다. 여기서 트랜잭션의 관리 주체는 DBMS가 아니라 각각의 서비스이다..

아키텍쳐 2022.04.11

[아키텍쳐] BFF 패턴 (Backend for Frontend)

BFF (Backend for Frontend) BFF 패턴은 이름 그대로 특정 프론트엔드를 위한 백엔드를 구축하는 패턴을 의미한다. 옛날에는 프론트엔드를 개발할 때 데스크탑 UI 하나만을 개발하면 됐다. 그러나 모바일 시장이 활성화되면서 모바일 전용 UI를 개발하는 것 역시 필요해졌다. 초기에는 하나의 범용 백엔드를 통해서 여러 형태의 인터페이스를 한번에 처리했다. 그러나 모바일 UI와 데스크탑 UI는 성격이 많이 다르기 때문에 각각이 백엔드와 주고받는 request에서 불일치가 종종 발생하게 되었다. 그로 인해 하나의 백엔드가 여러 가지 UI 요구를 처리할 수 있도록 구현하는 과정에서 개발 프로세스의 병목 지점으로 자리잡게 되었다. 만약 하나의 UI에 대해서 백엔드 수정 사항이 필요해도 그것이 전체 ..

아키텍쳐 2022.04.11

[CSS] translate vs positioning

특정 element의 위치를 이동시키는 방법에는 대표적으로 두 가지가 있다. 하나는 translate( )을 활용하는 것이고 다른 하나는 top, left, bottom, right의 offset을 지정하는 positioning 방식이다. 둘은 위치를 재조정한다는 점에서 동일한 결과를 수행하지만 근본적으로 다른 성격을 지닌다. transform( )은 좌표 공간의 변형을 통해 이동하기 때문에 다른 element에 영향을 끼치지 않는다. 하지만 positioning의 경우 해당 element를 여기다 '위치시키겠다'는 뜻이기 때문에 다른 element들에게도 영향을 끼치게 된다. 즉 transform( )은 모션을, positioning은 위치 지정을 위한 개념이기 때문에 그 목적이 다르다. 다른 elem..

[CSS] currentColor

currentColor은 색상과 관련된 css 속성 값에 넣어줄 수 있는 키워드이다. 만약 값으로 currentColor을 넣어주게 된다면 현재 color 속성에 지정된 색상을 대입할 수 있다. 만약 color 속성의 값으로 currentColor을 사용하게 된다면 상속받은 color 값을 사용하게 된다. 이번에 프로젝트 진행하면서 알게된 키워드인데 element 트리 내에서 특정 테마 색상 하나를 자꾸 사용하는 경우에 variable을 사용하는 것보다 관리 측면에서 더 좋게 사용할 수 있는 방법 같다.

[URL] URL 구성 요소

네트워크 상에서 특정 자원을 찾아가기 위한 주소가 담긴 URL은 여러 가지 요소로 이루어져 있다. 그 중에서 가장 대표적이고 많이 사용되는 것들에 대해 간략히 다뤄보겠다. (1) Protocol (혹은 Scheme) 리소스에 접근할 때 사용하는 프로토콜(http:, ftp:, mailto: 등 통신 규약)이 담긴다. 웹에서는 http와 https가 사용되지만 브라우저는 mailto: (메일), ftp: (파일) 등의 다른 프로토콜들 역시 다룰 수 있다. (2) Host 서버의 인터넷 주소가 들어간다. 일반적으로 도메인 주소가 들어가나 IP주소가 직접 들어갈 수도 있다. (3) Port 웹 서버의 리소스를 사용하기 위해서 사용하는 특정 포트의 번호가 들어간다. 각 포트는 이용 목적에 따라 그 번호가 어느정..

카테고리 없음 2022.04.08