개발 일지

Link Component에 조건부 인라인 스타일링(color 값 주기)을 해줬을 때 나타는 오류이다. Server 측에서 초기 렌더링 될 때 color 속성이 없어서 (null로 설정되어있기 때문) Client 측과 일치하지 않아 발생하는 문제. → Hydration Error 라고 console에서 알려주고 있다. https://nextjs.org/docs/messages/react-hydration-error react-hydration-error | Next.js Text content does not match server-rendered HTML While rendering your application, there was a difference between the React tree tha..

리액트의 전체적인 흐름을 이해하기 위해서는 라이프 사이클에 대한 이해가 필요하다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 제공되기 때문에 클래스형 컴포넌트로 대략적인 컨셉에 대해 설명 후, 함수형 컴포넌트에서의 라이프 사이클에 대해 설명한다. 1. 라이프사이클 메서드 이해하기 리액트의 라이프사이클 메서드는 9가지가 있다. 큰 단위로는 마운트, 업데이트, 언마운트 이렇게 세 가지 영역으로 나뉠 수 있다. 마운트(Mount) : 페이지가 컴포넌트에 나타남 (페인팅) 업데이트(Update) : 컴포넌트의 정보를 업데이트 (리렌더링) 언마운트(Unmount) : 페이지에서 컴포넌트가 사라짐 1-1. 마운트(Mount) 컴포넌트가 처음으로 DOM에 그려질 때를 의미한다. 따라서 컴포넌트의 초기 설정과 데이..

자바스크립트에서 객체의 키는 보통 '문자열'이다. 배열은 객체이기 때문에, Object.keys를 이용해서 배열의 키를 나열할 수도 있다. 배열의 인덱스를 나열해보면 문자열로 변환되는 것을 쉽게 알 수 있다. 타입스크립트에서는 이러한 혼란을 방지하기 위해 숫자 'Key(키)'를 허용하고, 문자열 키와 다른 것으로 인식한다. interface Array { ... [n: number]: T; } 런타임 시점에서는 키를 모두 문자열로 인식할 것이므로, 이 코드는 타입 체크 시점에 오류를 잡는 용도로 사용할 수 있겠다. ** 여기서 사용된 number 타입은 버그를 잡기 위한 순수 타입스크립트 코드임을 명심하자! ** const x = [1, 2, 3]; const keys = Object.keys(x); c..

타입스크립트에서는 타입에 '인덱스 시그니처'를 사용해서 유연하게 매핑을 표현할 수 있다. 예를 들어보자. 아래 객체는 키(key)값 만 다를 뿐 키와 쌍을 이루고 있는 값(value) 의 타입은 모두 'string'으로 동일하다. const rocket = { name: 'Falcon 9' variant: 'Block 5' thrust: '7,607 kN', }; 따라서 객체의 타입을 다음과 같이 정의할 수 있다. type RocketType = {[property: string]:string}; const rocket:RocketType = {..} //정상 [property: string]: string 이 형태가 인덱스 시그니처이며, 다음과 같은 특징을 가진다. 1. key의 이름 : 키의 위치만 ..

타입 중복은 간과하기 쉽지만 코드 중복만큼 많은 문제를 일으키며, 불필요하게 코드 라인을 늘리게 되는 원인 중 하나이기도 하다. interface Person { firstName: string; lastName: string; } interface PersonWithBirthDate { firstName: string; lastName: string; birth: Date; } 위 예시를 살펴보자. Person 타입과 PersonWithBirthDate 타입은 언뜻 보기에도 굉장히 유사하다. PersonWithBirthDate를 Person의 확장개념으로 보면 아래와 같이 중복을 제거할 수 있게 된다. interface PersonWithBirthDate extends Person { birth: Da..

debounce와 throttle은 둘 다 자바스크립트에서 이벤트 처리를 최적화하기 위해 사용되는 기술이다. 이 두 가지는 이벤트 호출을 제어하는 방식에 차이가 있기 때문에, 각각의 상황에 맞게 적절하게 사용해야 한다. 두 차이점을 설명하기에 앞서 이벤트에 대해 짧게 짚고 넘어가자. 이벤트란 브라우저에서 발생할 수 있는 일련의 action 이다. 예를 들면, 브라우저의 창을 줄이면 "resize" 이벤트가, 버튼을 클릭하면 모달 창이 뜨는 것은 "click"이벤트가 발생하는 것이다. 아마도 우리의 최대 관심사는 이벤트 핸들러 함수(event handler function)에 구현된 로직이 브라우저에서 어떻게 작동되느냐 일 것이다. 이 handler function은 창 사이즈를 조절하여 UI 요소를 수정..

1. next.js 설치 npx create-next-app@latest # or yarn create next-app # or pnpm create next-app 설치 명령어 입력시 아래와 같이 세팅 항목들을 설정할 수 있다. yarn create next-app yarn create v1.22.17 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Installed "create-next-app@13.3.0" with binaries: - create-next-app ✔ What is your project na..

html에서 특정 DOM 요소에 id 값을 부여하는 것처럼 리액트에서도 특정 DOM 요소에 이름을 부여할 수 있는 기능이 있다. 바로 ref(reference의 줄임말)이다. 🧐 리액트에서 id을 사용하면 안될까? JSX안에서 DOM의 id를 달게 될 경우, 컴포넌트가 렌더링될 때마다 이 id값을 전달하게 되는데, 만약 이 컴포넌트를 여러 곳에서 사용하게 되는 경우 Id 값이 중복으로 사용하게 될 경우가 발생한다. id는 고유한 값으로 만들어져야 하는데, 이를 위반하게 되므로, 리액트 팀은 id 사용을 권장하지 않는다. 대신 ref는 컴포넌트 내부에서만 작동하므로 이러한 걱정을 하지 않아도 된다. 5.1 ref는 어떤 상황에서 사용해야 할까? 특정 DOM에 작업할 때 ref를 사용한다. 그래서 그 특정 ..

이벤트(Event): 웹 브라우저에서 DOM 요소가 상호 작용하는 것 리액트에서의 이벤트 시스템 4.0 Triggering, Rendering, Commiting 리액트가 웨이터라고 생각하면 Triggering: 사용자가 어떤 동작을 행했는지 알려주는 행위 (주방에 주문을 전달한다.) Rendering: 화면의 생김새를 그리는 행위 (주방에서 주문한 음식을 준비한다.) Commiting: DOM에 전달해서 실제 브라우저에 출력하는 행위 (음식을 다시 사용자에게 서빙한다.) [STEP 01] 렌더링 (1) 최초 렌더링 - 최초로 화면을 그리는 행위 (2) state 업데이트시 재 렌더링 - 화면에서 보여주는 값 중 상태가 변경된 값이 있을 경우 화면을 다시 그리는 행위 최초 렌더링 이후에는 setter함수..

Socket IO 실시간, 양방향, 이벤트 기반의 통신을 지원해 주는 프레임워크 websocket은 방법 중 하나이다. 설치 방법 : npm i socket.io socket.io는 재연결 등의 부가기능이 있다. 웹소켓을 사용할 수 없을 때의 대안이 있다. socket.io를 백엔드에 설치한 것 처럼 프론트에서도 연결을 할 수 가 있는데, 브라우저에 socket.io를 설치해야 한다. 왜냐하면, 브라우저가 주는 웹소켓은 socket.io와 호환이 안된다. socket.io가 더 많은 부가기능을 가지고 있기 때문이다. 방법은 localhost:3000/socket.io/socket.io.js 라는 기본적으로 제공되는 url을 활용하면 된다. server.js import express from "expre..