D'story

SSR(Server Side Rendering)

클라이언트가 데이터를 요청하면 브라우저 > 프론트 서버 > 백 서버 > 데이터베이스를 거쳐서 데이터베이스에서 데이터를 가져온 후 브라우저에 그려지는 방식.

서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달하므로, 불필요한 부분까지 모두 다시 렌더링해야 한다는 단점을 가진다.

CSR(Client Side Rendering)

데이터를 제외한 화면을 그리는 코드들은 프론트 서버에, 데이터는 따로 백 서버에 요청하여 받아오는 방식.

서버 부하가 덜하다는 장점이 있는 반면, 번들된 JS 파일의 다운로드로 인해 초기 로딩이 길고 SSR에 비해 SEO에 약하다는 단점이 있다.

Next.js

첫 페이지는 SSR 방식으로 백 서버에서 렌더링해서 데이터가 채워진 html을 받아오고, 그 다음 페이지부터는 CSR 방식으로 필요한 데이터 부분만 갱신하는 방식.

여담

• 예전에 프로젝트 할 때 한번 찾아본 내용이었는데, 오늘 본 면접에서 잠깐 언급된 김에 다시 정리해보았다.

참고

margin

border를 경계로 하는 바깥쪽 여백을 의미한다.

두 개 요소의 margin 속성이 겹쳐지면 둘 중 큰 값이 적용된다(여백 상쇄).

padding

border를 경계로 하는 안쪽 여백을 의미한다.

부모 div에 padding 속성이 적용된 상태에서 콘텐츠 영역 안에 있는 자식 요소에 position: absolute, top: 0을 준다면, padding까지 부모 div의 면적으로 인식하고 padding을 무시하게 된다. 결과적으로 자식 요소는 부모의 padding이고 뭐고 맨 위에 붙어버리게 되는 것이다. 부모 div의 padding을 무시하지 않는 한도 내에서 자식 요소를 맨 위로 붙이고 싶다면, 부모 div에 padding을 주는 대신, 자식 요소에 margin을 주는 것이 낫다.

참고

형식

페이지가 로딩되면 0.1초 후 10초에 걸쳐 opacity: 0에서 opacity: 1로 변해가는 애니메이션을 작성한 코드이다.

animation-name: YOUR_ANIMATION;
animation-duration: 10s;
animation-delay: 100ms;
animation-fill-mode: both;
@keyframes YOUR_ANIMATION {
    from {
    	opacity: 0;
    }
    to {
    	opacity: 1;
    }
}

속성

• animation-name: 키프레임 애니메이션 이름.
• animation-duration: 애니메이션 재생 시간. 기본값은 0. 's', 'ms' 단위로 표현 가능.
• animation-delay: 애니메이션 시작 지연 시간. 's', 'ms' 단위로 표현 가능.
• animation-fill-mode: 애니메이션 전후에 적용할 스타일 지정. 위에서 적용한 both는 애니메이션 전에는 첫 번째 키프레임, 애니메이션 후에는 마지막 키프레임의 CSS 스타일을 유지하게 한다. 상황에 따라 다르겠지만, 위의 코드에서는 반짝거리거나 끊기는 현상 없이 가장 자연스럽게 보일 수 있는 선택인 것 같다.
• 이외에도 재생 속도를 제어하는 animation-timing-function, 재생 방향을 설정하는 animation-direction, 반복 횟수를 지정하는 animation-iteration-count, 웹페이지 로딩 후 자동 실행 여부를 지정하는 animation-play-state가 있다.

여담

• 첫 번째로 걸어놓은 링크가 워낙 잘 되어 있다. animation-timing-function의 그래프나, animation-fill-mode의 애니메이션 등 이해를 돕는 예시가 많다.

참고

display: inline

display: inline이 지정된 요소는 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다.

width, height, 상하의 margin 및 padding은 무시되고, 좌우의 margin 및 padding만 반영된다.

display: block

display: block이 지정된 요소는 앞뒤 줄바꿈이 들어가 한 줄을 모두 차지한다.

width, height, margin, padding 속성이 모두 반영된다.

display: inline-block

display: inline-block이 지정된 요소는 inline 요소처럼 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되지만,

block 요소처럼 width, height, margin, padding 속성이 모두 반영된다.

참고

CSS 상자 모델(Box Model)

페이지에 띄울 박스를 생성하기 위해 박스의 바깥쪽 여백(margin), 테두리(border), 안쪽 여백(padding), 콘텐츠(contents) 등의 작동 방식을 정의한다.

display 속성이 block인 블록 박스에 적용되며, 인라인 박스에는 일부만 적용된다. 여기에 대해서는 따로 정리하겠다.

표준 CSS 상자 모델(Standard CSS Box Model)

상자의 실제 너비는 CSS에 정의된 width + padding + border-width 이다. width의 값은 border-width와 padding을 제외한, 순수한 콘텐츠 영역의 너비만을 의미한다.

대체 CSS 상자 모델(Alternative CSS Box Model)

box-sizing: border-box를 설정하면 적용된다.

이 모델에서는 width 자체가 padding과 border-width를 모두 포함한 실제 상자의 전체 너비를 의미하므로, 콘텐츠 영역의 너비를 구하려면 width에서 padding + border-width 를 빼야 한다.

여담

• 아래 MDN 페이지에서 제공하는 Interactive Editor 너무 마음에 든다. 코드에 따른 변화를 바로 감지할 수 있다.

참고

1. HTML 마크업을 처리하고 DOM(Document Object Model) 트리 빌드

브라우저가 HTML의 원시 바이트를 디스크나 네트워크에서 읽어 와서, 해당 파일에 대해 지정된 인코딩(예: UTF-8)에 따라 개별 문자로 변환한다.

이 문자열을 다시, W3C HTML 표준에 지정된, 특별한 의미와 고유한 규칙을 가진 토큰으로 변환한다.

토큰은 다시, 해당 속성 및 규칙을 정의하는 객체로 변환된다.

마지막으로, HTML 마크업이 여러 태그 간의 관계를 정의하고 있기 때문에, 생성된 객체들은 상하위 관계에 대한 정보를 포함하는 트리 구조로 연결된다.

2. CSS 마크업을 처리하고 CSSOM(CSS Object Model) 트리 빌드

CSS도 HTML 마크업과 마찬가지의 과정을 통해 CSSOM 트리로 빌드된다.

3. DOM 및 CSSOM을 결합하여 렌더링 트리 형성

DOM 트리의 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용하는 방식으로 DOM과 CSSOM 트리가 결합하여 렌더링 트리를 형성한다.

이 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함된다. 예를 들어, display: none이 적용된 노드는 아예 생략된다.

4. 레이아웃을 실행하여 각 노드의 기하학적 형태 계산

레이아웃 단계에서는 각 객체의 정확한 위치와 크기를 계산한다. 뷰포트 내에서 각 요소의 정확한 위치와 크기를 나타내는 '상자 모델(Box-model)'이 출력된다. 이 상자 모델에 대해서는 따로 정리할 예정이다.

5. 개별 노드를 화면에 페인트

마지막 페인팅 단계에서는 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하여 보여준다.

6. 1~5번의 반복

DOM 또는 CSSOM이 수정되는 경우, 화면에 다시 렌더링할 필요가 있는 픽셀을 파악하기 위해 위 과정을 반복한다.

렌더링 최적화는 이 과정에서 걸리는 시간을 최소화하는 프로세스를 의미한다.

참고