Search for a command to run...
대망의 나만의 리액트 스타일 SPA 만들기 시작해보겠습니다. 이번 아티클에서는 JSX 파싱 JSX to Virtual DOM Virtual DOM Diffing Commit 을 다뤄보도록 하겠습니다. JSX란? JSX란 XML 스타일의 트리 구조로 표현하고 싶은 것들을 자바스크립트와 함께 작성하는 문법입니다. JSX의 구성 요소 JSXElement: HTML element와 비슷한 역할을 하는 컴포넌트 JSXAttributes: ...
타입스크립트의 타입 시스템을 공부하다 문득 unknown도 모든 타입 다 들어가고 any도 다 들어가는데 뭐가 다른거지? 라는 생각이 들어서 무슨 차이가 있는지 찾아보았다. unknown 사용시(프로퍼티에 접근 시, 연산 시) 타입을 지정해주어야 함 다른 타입에 할당 불가능 타입의 가능성을 열어뒀다가 좁히는 용도로 사용 any 나는 타입이길 포기한다
Core Web Vitals 구글에서 만든 것으로 웹페이지의 성능을 평가하는 지표들. LCP Largest Contentful Paint 페이지 로딩 성능을 의미하는 것. 의미 정확히는 '페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는 데 걸리는 시간' 뷰포트란?사용자에게 현재 노출되는 화면. 기기마다 다르다. '큰 이미지와 텍스트'는 아래의 요소들을 뜻한다. <img> <svg> 내부의...
현재 인터넷에서 가장 많이 쓰이는 리액트 버전은 16 버전이다. 그 이후 버전인 17, 18 버전에서 어떠한 변화가 있었는지 살펴보자. 리액트 17 버전 리액트 17 버전은 새롭게 추가된 기능이 없으며 기존 코드의 수정을 필요로 하는 변경 사항이 최소화되어있다. 이전 버전과의 호환성을 중시하며 17 버전으로 이동하기 쉽도록 만들어져 있다. 이벤트 위임 방식 변경 이전 버전에서는 이벤트 핸들러가 문서의 루트(Document)에서 이벤트를 캐치했지...
서버 사이드 렌더링 서버 사이드 렌더링(SSR)이란 웹 애플리케이션의 컨텐츠를 서버에서 렌더링하는 기법을 말한다. SSR에 대해 알아보기 전에 기존의 프론트엔드 중심 개발 방법 중 하나인 싱글 페이지 애플리케이션(SPA)를 알아본다. 싱글 페이지 애플리케이션(SPA) 과거엔 자바스크립트로 할 수 있는 일이 제한적이라 대부분의 처리를 서버에서 해야 했다. (데이터 연동, 페이지 렌더링, 인증/인가 로직 등)그 구조로 인해 관심사의 분리가 덜 이루...
지난 글에 이어 여러 훅을 알아보자. useMemo const memoizedValue = useMemo(() => expensiveComputation(a, b), [a, b]); useMemo는 첫 인자로 들어오는 함수의 연산 결과(비용이 큰)를 메모이제이션 해 두고 두 번째 인자인 의존성 배열의 값이 변경되지 않았으면 그 메모이제이션 된 값을 반환해주는 훅이다. 컴포넌트도 값이기 때문에 이를 통해 컴포넌트 또한 메모이제이션 할 수 있지만...
리액트 훅이란 리액트 16.8 버전에 정식으로 추가된 것으로 함수 컴포넌트가 리액트의 state, ref 등의 다양한 기능을 활용할 수 있도록 해주는 것이다. useState 함수 컴포넌트 내부에서 상태를 정의하고 관리할 수 있게 해주는 훅이다. import { useState } from "react"; const [state, setState] = useState(initialState); state가 상태이고, setState를 통해...
이번 글에서는 리액트를 이루는 근본적인 요소 중 JSX와 가상 DOM, 리액트 파이버 등에 대해 알아봅니다. JSX란? JSX란 XML 스타일의 트리 구조로 표현하고 싶은 것들을 자바스크립트와 함께 작성하는 문법입니다. 자바스크립트로 트랜스파일링되어 실행됩니다. JSX의 구성 요소 JSXElement: HTML element와 비슷한 역할을 하는 컴포넌트 JSXAttributes: JSXElement에 부여할 수 있는 속성, 필수가 아님 ...
리액트는 가상 DOM과 실제 DOM의 비교 컴포넌트 렌더링 판단 변수, 함수의 메모이제이션 등이 자바스크립트의 동등 비교 기반입니다. 이번 글에서는 자바스크립트의 동등 비교에 대해 알아보고, 그것이 리액트에서 어떻게 활용되는지 알아봅시다. 자바스크립트의 동등 비교 데이터 타입 자바스크립트에서 모든 값은 타입을 가지고 있음. (변수는 동적 타입) 크게 원시 타입과 객체 타입으로 나눌 수 있습니다. 원시 타입: 객체가 아닌 모든 타입 ...