+ demo-image +
+ demo-image +
기술 블로그
- - - -기술 블로그
- - - -- 개발을 하다 보면 날짜를 다루는 일은 쉽지 않다고 느끼게 됩니다. 어려운 이유는 여러 가지가 있지만, 그중 하나는 시간은 절대적이나 표기 방식은 상대적이란 사실을 뒤늦게 깨닫기 때문이죠. 웹프론트엔드 개발을 할 때, - ... -
- - -- IntersectionObserver API란IntersectionObserver API는 타겟 엘리멘트가 화면(viewport)에 보여지고 있는지 관찰하는 API입니다.크롬 51버전부터 사용 가능하며, 현재 대부분 - ... -
- - -rem 활용하기rem은 루트(html)의 글자크기를 곱해 값을 정합니다. 예를 들어 루트 글자크기가 16px이고 너비를 50rem으로 지정하면 적용되는 실제 너비는 16px * 50rem = 800px이 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
html {
font-size: 16px;
}
.outer {
font-size: 1rem; /* => 16px */
padding: 1.25rem; /* => 20px */
}
.inner {
font-size: 0.875rem; /* => 14px */
width: 50rem; /* => 800px */
}
rem을 사용하면 모든 요소에 미디어쿼리를 사용하지 않아도 됩니다. 단지 화면너비에 따라 루트의 글자크기를 바꾸는 것만으로 모든 요소의 크기를 늘리거나 줄일 수 있습니다.
-1
2
3
4
5
6
7
@media (max-width:768px) {
html { font-size: 14px }
}
@media (max-width:320px) {
html { font-size: 12px }
}
1
2
3
4
5
6
7
@media (max-width:768px) {
html { font-size: 14px }
}
@media (max-width:320px) {
html { font-size: 12px }
}
픽셀 대신 상대단위(rem, em, %)를 쓰기 어려운 이유는 곧바로 가늠되지 않기 때문입니다. 특히 디자이너와 협업이 불가피한 영역에서 이런 비직관적인 단위는 의사소통을 방해합니다. 하지만 이 문제는 간단하게 해결할 수 있습니다. 바로 픽셀로 기술하되 상대단위로 변환하는 방법을 통해서 말이죠.
scss 변환함수 활용하기scss를 사용해 px를 rem으로 바꾸는 변환함수를 작성해봅시다.
1
2
3
@function rem($px, $base: 16px) {
@return $px / $base * 1rem;
}
1
2
3
@function rem($px, $base: 16px) {
@return $px / $base * 1rem;
}
이제 rem으로 작성했던 css를 아래 같이 픽셀로 표기된 scss코드로 바꿀 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
html {
font-size: 16px;
}
.outer {
font-size: rem(16px);
padding: rem(20px);
}
.inner {
font-size: rem(14px);
width: rem(800px);
}
현대 웹 프론트엔 개발의 특징 중 하나는 컴포넌트입니다. 과거 웹페이지를 html, css, js의 구성으로 정의했다면 지금은 그 중간에 컴포넌트가 존재합니다. 웹페이지를 구성하는 각각의 컴포넌트가 자신만의 html, css, js를 소유합니다. 따라서 화면크기에 맞춰 반응하는 1차 단위로 엘리먼트 요소 대신, 컴포넌트를 사용하는 것이 바람직합니다. 컴포넌트 단위로 화면크기에 대한 예외를 준다면 그만큼 엘리먼트 요소에 일일히 작성해야 했던 변경 내용을 많이 줄일 수 있습니다.
BEM(css 방법론)과 em 활용하기BEM은 컴포넌트 기반의 css 방법론입니다. 여기에 em을 활용해 컴포넌트 단위의 반응을 실현할 수 있습니다. 먼저 rem과 마찬가지로 px를 em으로 변환하는 함수를 만듭니다.
1
2
3
@function em($px, $base: 16px) {
@return $px / $base * 1em;
}
1
2
3
@function em($px, $base: 16px) {
@return $px / $base * 1em;
}
컴포넌트 최상위(BEM에서 Block이라고 부르는) 글자크기를 1rem으로 합니다. 그리고 컴포넌트 내에서 사용되는 크기 단위로 em을 사용합니다. 결국 컴포넌트 내 모든 요소의 크기가 컴포넌트 최상위 글자크기에 대한 상대값이 되도록 합니다.
em으로 변환할 때, em의 특성을 반드시 이해하고 있어야 하는데요,font-size에서 em은 부모 요소 font-size에 대한 상대값입니다. 반면font-size가 아닌 속성에서는 em은 현재 요소 font-size에 대한 상대값 입니다. 아래의.card__title-strong주의깊게 봐주세요..card__title안에.card__title-strong가 있는 구조라고 가정하고 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
.card {
font-size: 1rem;
padding: em(10px);
}
.card__title {
font-size: em(18px);
}
.card__title-strong {
font-size: em(24px, 18px); /* 👈 `.card__title`의 font-size가 base입니다. */
margin-left: em(10px, 24px); /* 👈 현재 요소의 font-size가 base입니다. */
}
이제 아래 같이 컴포넌트에 선언한 글자크기를 바꾸는 것으로 컴포넌트 단위의 예외를 줄 수 있습니다.
-1
2
3
4
5
6
7
8
9
@media (max-width:768px) {
.card { font-size: 1.2rem; } /* => 768px 이하일 때, 20% 확대 */
}
@media (max-width:480px) {
.card { font-size: rem(12px, 14px); }
/* => 480px 이하일 때, 12px */
/* 단, 여전히 더 작은 화면너비의 루트 글자크기에 따라 변경될 수 있습니다. */
}
1
2
3
4
5
6
7
8
9
@media (max-width:768px) {
.card { font-size: 1.2rem; } /* => 768px 이하일 때, 20% 확대 */
}
@media (max-width:480px) {
.card { font-size: rem(12px, 14px); }
/* => 480px 이하일 때, 12px */
/* 단, 여전히 더 작은 화면너비의 루트 글자크기에 따라 변경될 수 있습니다. */
}
컴포넌트 글자크기 단위로에 rem을 사용했기 때문에 루트 글자크기로 전체 크기비를 조정하는 것은 여전히 유효합니다. 만약 컴포넌트 크기로 1rem(루트 글자크기)이 아닌, 다른 크기를 사용하고 싶다면 rem함수를 이용하세요.
-1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$card_base: 12px;
.card {
font-size: rem($card_base);
padding: em(10px, $card_base); /* 현재 요소의 font-size가 base입니다. */
}
.card__title {
font-size: em(18px, $card_base); /* .card의 font-size가 base입니다. */
}
.card__title-strong {
font-size: em(24px, 18px);
margin-left: em(10px, 24px);
}
@media (max-width:768px) {
.card { font-size: rem($card_base * 1.2); } /* => 768px 이하일 때, 20% 확대 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$card_base: 12px;
.card {
font-size: rem($card_base);
padding: em(10px, $card_base); /* 현재 요소의 font-size가 base입니다. */
}
.card__title {
font-size: em(18px, $card_base); /* .card의 font-size가 base입니다. */
}
.card__title-strong {
font-size: em(24px, 18px);
margin-left: em(10px, 24px);
}
@media (max-width:768px) {
.card { font-size: rem($card_base * 1.2); } /* => 768px 이하일 때, 20% 확대 */
}
간단한 예제를 통해 지금까지 내용을 정리합시다.
web
이 웹사이트는 크게 menu, nav, content 컴포넌트로 구성되어 있습니다. 첫번째 할 일은 전체 웹사이트의 기본 글자크기를 지정하는 것입니다.
1
2
3
html {
font-size: 16px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.content {+
font-size: 1rem;
padding: em(8px);
&__item {
$item_base: 14px;
font-size: em($item_base);
padding: em(6px, $item_base);
&:not(last-child) {
margin-bottom: em(12px, $item_base);
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.content {
font-size: 1rem;
padding: em(8px);
&__item {
$item_base: 14px;
font-size: em($item_base);
padding: em(6px, $item_base);
&:not(last-child) {
margin-bottom: em(12px, $item_base);
}
}
}
아까 컴포넌트 최상위에 1rem을 주었습니다. 그래서 각 컴포넌트는 아래 그림처럼 루트 글자크기에 의해 제어됩니다.
web
루트(html)의 글자크기를 화면너비에 따라 바꾸면 전체 요소의 크기비가 일괄적으로 변경됩니다. 여기서 include-media란 scss 미디어쿼리 라이브러리를 사용하면 좀 더 심플한 반응형 코드를 작성 할 수 있습니다.
-1
2
3
4
5
6
7
html {
font-size: 16px;
@include media('>2048'){ font-size: 20px }
@include media('<=960px'){ font-size: 14px }
@include media('<=480px'){ font-size: 12px }
}
1
2
3
4
5
6
7
html {
font-size: 16px;
@include media('>2048'){ font-size: 20px }
@include media('<=960px'){ font-size: 14px }
@include media('<=480px'){ font-size: 12px }
}
그리고 컴포넌트 및 컴포넌트 구성요소의 스타일링 모두 em을 사용했는데요, 결국 컴포넌트의 구성요소는 컴포넌트 최상위 글자크기를 바라보게 됩니다.
web
컴포넌트 최상위(블럭요소) 글자크기를 변경해서 컴포넌트 단위의 예외가 가능합니다.
-1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.menu{
font-size: 1rem;
@include media('<=1020'){ font-size: 1.1rem } /* => 10% 확대 */
@include media('<=960'){ font-size: 1.2rem } /* => 20% 확대 */
/* ... */
}
.nav {
font-size: 1rem;
@include media('<=960'){ font-size: rem(12px, 14px); } /* => 960px 이하일 때, 12px (루트 글자크기 14px) */
/* ... */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.menu{
font-size: 1rem;
@include media('<=1020'){ font-size: 1.1rem } /* => 10% 확대 */
@include media('<=960'){ font-size: 1.2rem } /* => 20% 확대 */
/* ... */
}
.nav {
font-size: 1rem;
@include media('<=960'){ font-size: rem(12px, 14px); } /* => 960px 이하일 때, 12px (루트 글자크기 14px) */
/* ... */
}
하위 엘리먼트 요소를 직접 수정하는 일은 정말 최후의 수단(🗡️)이 됩니다.
-1
2
3
4
5
6
7
8
9
10
11
.content {
/* ... */
&__item {
/* ... */
@include media('<=960'){ padding: em(2px, 14px); }
/* ... */
}
}
1
2
3
4
5
6
7
8
9
10
11
.content {
/* ... */
&__item {
/* ... */
@include media('<=960'){ padding: em(2px, 14px); }
/* ... */
}
}
액자 컴포넌트란 외부로 컨텐츠를 입력받아 구성하는 컴포넌트를 의미합니다. react로 예를 들면 아래 코드에서 Frame 컴포넌트가 이에 해당합니다.
1
2
3
4
5
6
7
8
9
function App() {
return (
<div className="app">
I love
<Frame>
<em className="app__em">css</em> ❤️
</Frame>
</div>)
}
output 1
2
3
4
5
6<div class="app">
I love
<div class="frame">
<em class="app__em">css</em> ❤️
</div>
</div>
저는 Frame 컴포넌트와 입력 컨텐츠 사이에 font-size를 rem으로 다시 정의해서 이 문제를 해결하고 있습니다.
1
2
3
4
5
6
7
8
9
function App() {
return (
<div className="app">
I love
<Frame className="app__frame"> // 👈 `app__frame` 클래스를 추가했습니다.
<em className="app__em">css</em> ❤️
</Frame>
</div>)
}
output 1
2
3
4
5
6<div class="app">
I love
<div class="frame app__frame">
<em class="app__em">css</em> ❤️
</div>
</div>
scss 1
2
3
4
5
6
7
8
9
10
11
12
13.app {
@mixin init {
font-size: 1rem;
@include media('<=960'){ font-size: 1.2rem }
}
@include init;
&__frame { @include init; } /* 👈 font-size를 다시 재정의합니다 */
&__em {
font-size: em(18px);
}
}
scss 1
2
3
4
5
6
7
8
9
10
11
12
13.app {
@mixin init {
font-size: 1rem;
@include media('<=960'){ font-size: 1.2rem }
}
@include init;
&__frame { @include init; } /* 👈 font-size를 다시 재정의합니다 */
&__em {
font-size: em(18px);
}
}
여러 방법을 시도했는데요, 결국 이 방법이 가장 클린했습니다. 😥 혹시 더 나은 방법이 있다면 댓글로 알려주세요.
위 코드는 app__frame 클래스명을 Frame의 props로 전달하고 있는데 만약 이것이 여의치 않다면 컨텐츠를 새 div로 감싸거나 별도 컴포넌트로 분리하는 방법을 고려해 볼 수도 있습니다.
percent)를 픽셀로 표기하기변환을 통해서 상대단위를 유지하되 표기방식만 픽셀을 사용하는 것은 생각 이상으로 매우 중요합니다. 상대단위의 비직관성 때문에 개발자는 차라리 엘리먼트의 가변성을 포기하고 픽셀로 처리하고 싶은 유혹(디자이너와 적당한 타협을 통해)에 쉽사리 빠지기 때문입니다.
@@ -454,14 +454,14 @@박스 엘리먼트 너비를 100%로 지정하면 너비 변화만큼 높이가 달라져야 합니다. 유명한 Uncle Dave’s Ol’ Padded Box 방법을 사용하기로 합시다. 이 방법은 padding, margin 속성의 높이 단위가 백분율(%)이면 부모의 요소의 너비를 기준으로 계산하는 원리를 이용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
$w: 480px;
$h: 360px;
width: 100%;
position: relative;
&::before{
padding-top: $h / $w * 100%; /* => 75% */
content: '';
display: block;
}
/* ... */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
$w: 480px;
$h: 360px;
width: 100%;
position: relative;
&::before{
padding-top: $h / $w * 100%; /* => 75% */
content: '';
display: block;
}
/* ... */
}
percentage함수 활용하기scss에는 이미 percentage라는 빌트인(builtin) 함수가 있습니다. 이 함수를 이용해 별의 위치를 픽셀에서 퍼센트로 손쉽게 변환할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.box {
/* ... */
&__img {
position: absolute;
&--star1 {
width: percentage(30px, / $w);
top: percentage(30px / $h);
left: percentage(48px / $w);
}
&--star2 {
width: percentage(42px, / $w);
top: percentage(22px / $h);
left: percentage(292px / $w);
}
&--star3 {
width: percentage(25px, / $w);
top: percentage(49px / $h);
left: percentage(412px / $w);
}
}
}
앞서 작성한 가상요소(before)의 padding-top 속성도 계산식 대신, percentage함수로 교체합니다.
-1
2
3
4
5
6
7
8
9
10
11
.box {
/* ... */
&::before{
padding-top: percentage($h / $w); /* 👈 percentage 함수로 교체 */
content: '';
display: block;
}
/* ... */
}
1
2
3
4
5
6
7
8
9
10
11
.box {
/* ... */
&::before{
padding-top: percentage($h / $w); /* 👈 percentage 함수로 교체 */
content: '';
display: block;
}
/* ... */
}
화면너비에 따라 박스와 내부 모든 요소의 위치가 비율을 유지하며 바뀌는 것을 볼 수 있습니다.
백분율(percent)을 사용해 반응형 코드를 작성하면 각 요소의 크기, 위치등이 화면너비 변화와 1(비례상수)로 정비례합니다. 그러나 종종 디자인 요구사항은 화면너비 변화율과 일치하지 않을 수 있습니다. 이때 대응해야 하는 화면 너비 지점에서 요소를 직접 수정하는 방법을 흔히 선택합니다.
-1
2
3
4
5
6
7
8
9
.content {
width: 95%;
padding: em(30px);
@include media('<=960'){
width: 60%;
padding: em(15px);
}
}
1
2
3
4
5
6
7
8
9
.content {
width: 95%;
padding: em(30px);
@include media('<=960'){
width: 60%;
padding: em(15px);
}
}
그러나 이 방법은 미디어쿼리 조건에 도달하기 직전의 화면 너비에서 레이아웃이 부자연스럽거나 깨지는 현상이 발생합니다.
vw 활용하기vw는 화면너비 백분율(percent)로 크기를 정할 수 있는 단위입니다. 예를 들어 화면너비가 1980px이면 50vw는 990px이고 10vw는 198px이 됩니다. vw를 사용하면 화면너비를 엘리먼트로 직접 가져와 계산식을 쓸 수 있기 때문에 화면너비에 비례한(그러나 반드시 1로 정비례할 필요없는) 크기를 지정할 수 있습니다.
content 부모요소 너비가 화면너비와 동일하다고 가정하고 대응해야 하는 화면너비 사이에서의 content 너비 변화율(기울기)을 계산합시다.
@@ -471,11 +471,11 @@1
$width: calc(#{$ratio * 100}vw + #{-($ratio * $from-screen) + $from});
지금은 $from-screen을 기준으로 보정했지만 변화율(기울기)에 의해 자동으로 화면너비가 $to-screen일때 $to가 됩니다.
아래는 지금까지 내용을 scss함수로 정의한 것입니다.
-1
2
3
4
@function between($from, $to, $from-screen, $to-screen) {
$rate: ($to - $from) / ($to-screen - $from-screen);
@return calc(#{$rate * 100}vw + #{-($rate * $from-screen) + $from});
}
1
2
3
4
@function between($from, $to, $from-screen, $to-screen) {
$rate: ($to - $from) / ($to-screen - $from-screen);
@return calc(#{$rate * 100}vw + #{-($rate * $from-screen) + $from});
}
미디어쿼리 대신, 정의한 between함수로 content를 스탕일링합니다.
1
2
3
4
5
6
7
.content {
$from-screen: 960px;
$to-screen: 1980px;
width: between($from-screen * 0.6, $to-screen * 0.95, $from-screen, $to-screen);
padding: between(15px, 30px, $from-screen, $to-screen);
}
$from-screen, $to-screen 사이를 벗어난 화면너비에서 크기가 너무 커지거나 줄어드는 것을 방지하기 위해서 아래처럼 제약을 추가할 수도 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.content {
$from-screen: 960px;
$to-screen: 1980px;
$from-w: $from-screen * 0.6;
$to-w: $to-screen * 0.95;
width: between($from-w, $to-w, $from-screen, $to-screen);
min-width: $from-w;
max-width: $to-w;
padding: between(15px, 30px, $from-screen, $to-screen);
@include media('>1980'){ padding: em(30px); }
@include media('<=960'){ padding: em(15px); }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.content {
$from-screen: 960px;
$to-screen: 1980px;
$from-w: $from-screen * 0.6;
$to-w: $to-screen * 0.95;
width: between($from-w, $to-w, $from-screen, $to-screen);
min-width: $from-w;
max-width: $to-w;
padding: between(15px, 30px, $from-screen, $to-screen);
@include media('>1980'){ padding: em(30px); }
@include media('<=960'){ padding: em(15px); }
}
여기서는 max-width, min-width, 미디어쿼리로 제약을 걸었지만 최신 브라우저에서는 min(), max(), clamp()를 사용하는 방법도 있습니다.
마지막으로 당부하고 싶은 점은 모든 것을 상대단위(rem, em, %)로 바꿀 필요는 없단 사실입니다. 가변성이 없다면(특히 border같은) 픽셀를 사용하세요. 또 가변성은 존재하나 미약하고 상대단위로 변환하는 공식이 너무 복잡한 상황에서도 픽셀과 미디어쿼리를 사용합시다. 배보다 배꼽이 더 클 수 있기 때문입니다.
scss를 사용하고 있다면 제가 만든 thejungle를, css-in-js 환경이라면 polished.js로 지금까지 사용한 헬퍼함수를 따로 만들지 않고 바로 쓸 수 있습니다.
@@ -531,10 +531,6 @@1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const OtherComponent = React.lazy(() => import("./OtherComponent"));
const AnotherComponent = React.lazy(() => import("./AnotherComponent"));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}
앱 코드를 분리하는 단위는 선택이지만, 좋은 방법 중에 하나는 라우트 단위로 분할 하는 방법입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React, { Suspense, lazy } from "react";
const Home = lazy(() => import("./routes/Home"));
const About = lazy(() => import("./routes/About"));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Suspense>
</Router>
);
dist 디렉토리를 보면 라우팅 단위로 파일이 분리되어 생성된것을 확인 할 수 있습니다.
-1
2
3
4
5
6
7
8
9
10
11
12
react-app
dist/
- index.html
- main.b1234.js (contains Appcomponent and bootstrap code)
- home.bc4567.js (contains Home)
- about.bc4567.js (contains About)
/** index.html **/
<head>
<div id="root"></div>
<script src="main.b1234.js"></script>
</head>
import 하는 페이지 내부에 사용중인 컴포넌트가 사용하지 않는 다른 컴포넌트와 index.js에 export를 편의상 묶어 사용하는 경우가 있습니다. 이때 컴포넌트 import시 객체 디스트럭쳐링을 사용할 경우 내부적으로 사용하지 않는 컴포넌트도 함께 로드되기 때문에 코드 분할 시 큰 효과를 보지 못합니다. 그렇기 때문에 실사용 컴포넌트만 개별 임포트 하는것이 중요합니다.
-1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 예로, PageA를 코드 분할하려고 합니다.
const PageA = React.lazy(() => import("./PageA"));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<PageA />
</Suspense>
</div>
);
}
// PageA.js 에선 Button 컴포넌트를 사용하려고 import하고 있습니다.
import { Button } from "./components"; // X 사용하지 않는 다른 컴포넌트도 함께 로드됩니다.
import Button from "./components/Button"; // O 개별 컴포넌트로 로드해야 불필요한 컴포넌트가 로드되어 파일 사이즈가 커지는것을 방지할 수 있습니다.
function PageA() {
return (
<div>
<h1>PageA</h1>
<Button>OK</Button>
</div>
);
}
// components/index.js
export { default as Loader } from "./common/Loader";
export { default as Button } from "./common/OtherSetting";
export { default as InsideSearch } from "./common/InsideSearch";
dist 디렉토리를 보면 라우팅 단위로 파일이 분리되어 생성된것을 확인 할 수 있습니다. 1
2
3
4
5
6
7
8
9
10
11
12react-app
dist/
- index.html
- main.b1234.js (contains Appcomponent and bootstrap code)
- home.bc4567.js (contains Home)
- about.bc4567.js (contains About)
/** index.html **/
<head>
<div id="root"></div>
<script src="main.b1234.js"></script>
</head>
React.lazy와 Suspense는 서버 사이드 렌더링을 지원하지 않습니다. 코드 분할을 클라이언트, 서버사이드 모두 가능하도록 만들고 싶다면 Loadable Components를 사용하면됩니다. (React 공식 문서에서 권장하는 방법)