JKJongchan Kiminkickbell.hashnode.dev·Feb 23, 2024 · 5 min readVanilla SPA 1: JSX & Virtual DOM Diffing대망의 나만의 리액트 스타일 SPA 만들기 시작해보겠습니다. 이번 아티클에서는 JSX 파싱 JSX to Virtual DOM Virtual DOM Diffing Commit 을 다뤄보도록 하겠습니다. JSX란? JSX란 XML 스타일의 트리 구조로 표현하고 싶은 것들을 자바스크립트와 함께 작성하는 문법입니다. JSX의 구성 요소 JSXElement: HTML element와 비슷한 역할을 하는 컴포넌트 JSXAttributes: ...00
JKJongchan Kiminkickbell.hashnode.dev·Jan 23, 2024 · 1 min readTypescript: unknown과 any의 차이타입스크립트의 타입 시스템을 공부하다 문득 unknown도 모든 타입 다 들어가고 any도 다 들어가는데 뭐가 다른거지? 라는 생각이 들어서 무슨 차이가 있는지 찾아보았다. unknown 사용시(프로퍼티에 접근 시, 연산 시) 타입을 지정해주어야 함 다른 타입에 할당 불가능 타입의 가능성을 열어뒀다가 좁히는 용도로 사용 any 나는 타입이길 포기한다00
JKJongchan Kiminkickbell.hashnode.dev·Jan 5, 2024 · 2 min read모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표Core Web Vitals 구글에서 만든 것으로 웹페이지의 성능을 평가하는 지표들. LCP Largest Contentful Paint 페이지 로딩 성능을 의미하는 것. 의미 정확히는 '페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는 데 걸리는 시간' 뷰포트란?사용자에게 현재 노출되는 화면. 기기마다 다르다. '큰 이미지와 텍스트'는 아래의 요소들을 뜻한다. <img> <svg> 내부의...00
JKJongchan Kiminkickbell.hashnode.dev·Dec 31, 2023 · 4 min readModern React Deep Dive: 리액트 17, 18 변경사항현재 인터넷에서 가장 많이 쓰이는 리액트 버전은 16 버전이다. 그 이후 버전인 17, 18 버전에서 어떠한 변화가 있었는지 살펴보자. 리액트 17 버전 리액트 17 버전은 새롭게 추가된 기능이 없으며 기존 코드의 수정을 필요로 하는 변경 사항이 최소화되어있다. 이전 버전과의 호환성을 중시하며 17 버전으로 이동하기 쉽도록 만들어져 있다. 이벤트 위임 방식 변경 이전 버전에서는 이벤트 핸들러가 문서의 루트(Document)에서 이벤트를 캐치했지...00
JKJongchan Kiminkickbell.hashnode.dev·Dec 6, 2023 · 2 min readModern React Deep Dive: 서버 사이드 렌더링서버 사이드 렌더링 서버 사이드 렌더링(SSR)이란 웹 애플리케이션의 컨텐츠를 서버에서 렌더링하는 기법을 말한다. SSR에 대해 알아보기 전에 기존의 프론트엔드 중심 개발 방법 중 하나인 싱글 페이지 애플리케이션(SPA)를 알아본다. 싱글 페이지 애플리케이션(SPA) 과거엔 자바스크립트로 할 수 있는 일이 제한적이라 대부분의 처리를 서버에서 해야 했다. (데이터 연동, 페이지 렌더링, 인증/인가 로직 등)그 구조로 인해 관심사의 분리가 덜 이루...00
