D'story

형식

페이지가 로딩되면 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의 애니메이션 등 이해를 돕는 예시가 많다.

참고

공통점

다른 파일의 코드를 불러오는 모듈 키워드이다.

차이점

require

1. node.js에 내장된 CommonJS 키워드이다.

2. const aaa = require('bbb') 의 문법 구조를 가진다.

3. <script> 태그를 사용하는 브라우저 환경과 node.js에서 채택하는 기본 모듈 시스템이 CommonJS이므로,

    Babel과 같은 ES6 코드 트랜스파일러를 사용할 수 없다면 require를 사용해야 한다.

4. 파일 내에서 사용하고자 하는 부분에 바로 쓸 수 있다.

import

1. ES6에 새로 도입된 키워드이다.

2. import aaa from 'aaa' 의 문법 구조를 가진다.

3. 파일 상단에 있어야 한다.

참고

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이 수정되는 경우, 화면에 다시 렌더링할 필요가 있는 픽셀을 파악하기 위해 위 과정을 반복한다.

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

참고

싱글 스레드 언어

자바스크립트는 싱글 스레드 언어이므로 한 번에 한 가지 작업을 처리하지만, 비동기로 동작하면 동시에 여러 작업을 수행할 수 있다.

비동기 동작 원리

call stack에 함수가 추가되어 실행 → 브라우저가 제공하는 web API 호출 → call stack에 추가된 함수는 제거되지만 함수가 전달한 콜백함수가 callback queue에 추가 → event loop는 call stack을 계속 감시하고 있다가 call stack이 빈 것을 보고 callback queue를 확인 → event loop는 callback queue에 추가된 콜백함수를 발견하고 call stack에 추가 → 콜백함수 실행

이벤트 루프(Event Loop)

call stack이 비어 있을 경우, callback queue에서 함수를 꺼내 call stack에 추가한다.

참고

이벤트 버블링(Event Bubbling)

한 요소에 이벤트가 발생하면, 최상단의 조상 요소까지 계속해서 부모 요소들의 핸들러가 동작한다.

거의 모든 이벤트는 버블링 된다.

이벤트가 발생한 가장 안쪽의 요소는 target이며, event.target으로 접근할 수 있다. event.currentTarget(=this)는 핸들러가 실제로 할당된 요소이다.

버블링 중단하기

이벤트 버블링은 target에서 시작해 document 객체 또는 window 객체를 만날 때까지 각 노드에서 모두 발생하며, 그 과정에서 모든 핸들러가 호출된다. 핸들러가 이벤트를 처리한 후에 버블링을 중단하도록 하려면, event.stopPropagation()을 사용한다. 하지만 반드시 필요한 경우가 아니라면 버블링을 막는 것은 권장되지 않는다.

이벤트 캡처링(Event Capturing)

이벤트 버블링 이외에도 이벤트가 하위 요소로 전파되는 단계인 캡처링이 있다.

캡처링 단계에서 이벤트를 잡아내려면 addEventListener capture 옵션을 true로 설정한다. capture 옵션의 값이 false(default 값)일 때에는 버블링 단계에서 동작한다.

elem.addEventListener(..., {capture: true})
// 아니면, 아래 같이 {capture: true} 대신, true를 써줘도 됩니다.
elem.addEventListener(..., true)

// 예를 들면, 이렇게!
elem.addEventListener("click", e => alert(`캡쳐링: ${elem.tagName}`), true);
elem.addEventListener("click", e => alert(`버블링: ${elem.tagName}`));

addEventListener(..., true)로 할당된 핸들러는 removeEventListener(..., true)를 같은 단계에 설정하면 지워진다.

현재 이벤트의 흐름 단계를 알고 싶다면, event.eventPhase로 반환되는 정숫값을 확인하면 된다. (1=캡처링, 2=타깃, 3=버블링)

참고

오늘 한 일

• 오늘은 낮잠을 자지 않았다. 프로젝트 기간은 아니지만 집에 공사가 좀 있어서 아침에도 잠을 3시간밖에 자지 못했다. 그래서 낮에 까무룩 잠들어버릴 줄 알았는데 어쨌든 용케도 잘 버텼다. 대신 자정 넘어서 잤다. 밤잠?
• 서로 계속 타이밍이 엇갈려서 한 자리에 모이기 참 어려웠는데, 드디어 Open door 첫 회의를 가졌다. 다음 주가 지나면 바로 추석이라 지금은 뭔가를 새로 시작하기가 매우 애매한 지점이라는 데 다들 동의하는 분위기였다. 프론트에서는 꼭 한 번 도전해보고 싶었던 타입스크립트를 공부해서 적용해보기로 했다! 첫 회의이기도 하고, 본격적인 방향을 설정하는 자리는 아닌가 싶어서 가만히 있었는데 먼저 제안해 주셔서 너무 좋았다. 오늘 구인공고를 둘러보니, 자격요건에 타입스크립트를 명시한 곳이 꽤 있어서 한 번쯤은 경험해보고 넘어가야 할 것 같았다. 공부할 생각에 벌써부터 설렌다.
• 낮잠이 없어 길었던 낮 시간 동안 로켓펀치와 원티드를 오가며 마음에 드는 회사의 채용공고를 꼼꼼히 읽어보고 이력서를 넣었다. 어제의 30이나 오늘의 15나 들어가는 노력은 만만찮았다. 숫자로만 판단하고 어느 한 쪽이 어떨 것이다 지레짐작한 것은 의미가 없었다.
• 프로젝트 토크부트를 함께한 디자이너님이 며칠 전에 연락 주신 내용을 바탕으로, 프로젝트는 끝났지만 다시 한 번 전체적으로 손을 보려고 간만에 vscode를 켰다. 헤더를 position: fixed로 붙이니 그 위에 잘만 올라가 있던 로그인 버튼이 없어져버리고, 화면 크기에 따라 화질구지가 되기도 하는 확장자 png의 이미지 파일을 svg로 변환해서 넣으니 시꺼멓게(????) 변해버리고, 아주 난리도 이런 난리가 없었다. 아니 왜 처음부터 개선의 의지를 꺾으려고 하는 건데!?...물론 컴퓨터는 아무런 잘못이 없다...

오늘 배운 것

• 로켓펀치와 원티드의 이용방법을 알게 되었다. 처음에는 둘 다 나에게 원하는 게 지나치게 많다고 느꼈지만, 여느 채용플랫폼과 마찬가지로 한 번 기본 세팅을 해놓으면 그 이후의 일은 일사천리로 진행된다. 로켓펀치의 장점은 내가 지원한 회사에서 내 이력서를 확인했는지, 검토 중인지, 뭐라고 답신을 주는지를 전부 실시간으로 알려준다는 것이다. 반면 원티드는 그렇게까지 상세하고 친절한 알림 서비스는 없지만 한 회사에 지원하고 나면 비슷한 채용공고를 올린 다른 회사들의 목록을 보여주면서 한꺼번에 지원할 수 있는 기능을 제공한다.

내일 할 일

• 내일은 면접 준비 과정의 일환으로 100문 100답을 작성해보는 날이다. 내일도 하루종일 정신이 없을 것만 같다.
• vscode를 다시 한 번 켤 용기를 가지고 문제들을 해결해보자.