jopemachine. dev blog

개발 관련 개인적인 일상, 후기, 생각, 스터디, 문서 번역 등 각종 포스팅을 정리하고 공부하고, 공유합니다.

Accelerated Mobile Pages, 모바일 우선 전략

Frontend

AMP (Accelerated Mobile Pages), 모바일 우선 전략 모바일 장치들에 대한 모든 스타일을 먼저 정의하고, 모바일 장치에서 적용되는 규칙들에 미디어 쿼리를 넣지 않는다. 그 후 다른 기기들의 스타일을 추가한다. AMP 페이지들은 구글 검색 결과 옆에 번개 아이콘이 뜬다. ...

Posted by jopemachine on October 7, 2021

BEM, css 방법론

프론트 각종 문제 상황 해결

BEM, css 방법론 css 방법론 클래스들의 이름을 어떻게 체계적으로 지을 것인가? BEM Block + Element + Modifier 순으로 클래스 이름을 통일하자는 방법론 id는 사용하지 않음. Block 재사용 가능한 페이지에 독립적인 컴포넌트 이름 Element 페...

Posted by jopemachine on October 7, 2021

Cookie, Session, Web Storage, JWT, IndexedDB

Browser 세부사항

Cookie, session, Web Storage (Local storage, Session storage), JWT, IndexedDB Cookie 서버에서 키, 값의 유효 기간을 정해주면 브라우저에서 저장해 놓고 해당 도메인에 request를 보낼 때 헤더에 항상 포함시킨다. Session 서버 메모리에 저장해놓는 유...

Posted by jopemachine on October 7, 2021

Resource Hints

HTML 세부사항

Resource Hints preload current navigation에 사용할 리소스들을 미리 가져온다. as로 리소스 타입을 명시하면 해당 리소스를 미리 가져온다. prefetch next navigation에 사용할 리소스들을 미리 가져온다. next navigat...

Posted by jopemachine on October 6, 2021

Critical rendering path (CRP) 및 관련 최적화

Frontend 최적화

Critical Rendering Path (CRP), Pixel pipeline 브라우저가 TCP 연결에서 받은 데이터를 파싱한 후 랜더링 되기 까지의 과정 DOM, CSSOM Parsing 렌더링 트리를 그리기 전 각각의 DOM, CSSOM 트리를 생성한다. Javascript execute JS는 DOM 조작이 가능하...

Posted by jopemachine on October 6, 2021

폰트 크기 단위 - px, em, rem, vw, vh

프론트 각종 문제 상황 해결

폰트 크기 단위 - px, em, rem, vw, vh 폰트 크기 단위에 무엇을 사용해야 적절한가? 더 나은 단위가 있는 게 아니라 경우에 따라 선택해 사용해야 한다. 상대적인 폰트 단위는 Layout 계산 과정에서 자동으로 픽셀 단위로 변환되어 렌더링 된다. px (pixel) ...

Posted by jopemachine on October 6, 2021

Debounce vs Throttle

프론트 각종 문제 상황 해결

Debounce vs Throttle 두 방법 모두 과도한 이벤트 핸들러 실행을 제어하기 위한 방법이다. Debounce 어떤 내용을 입력하다 특정 시간 동안 대기하고 있다가 입력 내용을 바탕으로 서버 요청 (이나 특정 무거운 콜백함수 실행)을 하는 것. Example: 연관 검색어 목록 구현 Relate...

Posted by jopemachine on October 6, 2021

Semantic versioning

기타

Semantic versioning 1.2.3 -> 1: Major, 2: Minor, 3: patch Major 기존 버전과 호환되지 않는 breaking change Minor 기존 버전과 호환되는 기능 추가 Patch 기존 버전과 호환되는 버그 수정 package.json의 ~와 ^의 차이 ...

Posted by jopemachine on October 6, 2021

Event flow

Browser 세부사항

Event flow html은 여러 Element 들의 중첩으로 이뤄져 있음 만약 어떤 요소에 클릭 이벤트가 일어났을 때 이 요소와 이 요소의 부모 엘리먼트들의 이벤트 처리는 어떻게 이뤄져야 하는가? 1. Capture phase (propagation up) 부모 엘리먼트에서 자식 엘리먼트 순서로 전...

Posted by jopemachine on October 6, 2021

requestAnimationFrame API에 대해

웹 API 세부사항

requestAnimationFrame API에 대해 필요한 이유 애니메이션을 사용하는 자바스크립트 로직을 setTimeout으로 사용하는 경우 애니메이션이 프레임 시작과 동시에 실행됨을 보장할 수 없고, 프레임이 끊길 수 있다. requestAnimationFrame은 애니메이션이 프레임 시작과 동시에 실행됨을 보...

Posted by jopemachine on October 5, 2021

FEATURED TAGS
Git Frontend Javascript Translation Typescript Browser Frontend Optimization Linux Programming React Redux HTML CSS Web Programming Backend Flux Http Node OSSCA Review Security
ABOUT ME

다양한 CS 분야에 관심을 갖고 공부하는 주니어 개발자입니다.