개발 일지

타입스크립트에서는 타입에 '인덱스 시그니처'를 사용해서 유연하게 매핑을 표현할 수 있다. 예를 들어보자. 아래 객체는 키(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..

chat 기능 구현하기, nickname value 추가하기 백엔드로 보내야 할 데이터 : 닉네임, 메세지 그런데, 백엔드는 이 두 개의 데이터를 알아서 구분하지 못한다. 따라서 분기 처리하는 코드가 필요해 보인다. 메세지를 구분하기 위해서 type 설정을 한다. JSON 형태로 type과 payload를 함께 보내는 것이 좋겠다. { type: "message", payload: "Hello", }, { type: "nickname", payload: "Anonymous", } JSON.stringfy로 string형태로 백엔드로 보내주면, 백엔드에서 JSON.parse를 통해 객체 형태로 출력이 가능하다. makeMessage 함수(app.js) const makeMessage = (type, pay..

🔖 WebSocekt( ) 링크 : https://developer.mozilla.org/ko/docs/Web/API/WebSocket 웹소켓 객체 생성하기 Ex) const socket =newWebSocket('ws://localhost:8080'); 이벤트리스너를 사용할 수 있다. 종류 : connection, close, error, headers, listening 그 중 connection을 사용할 건데, 연결 되었으면, 어떤 이벤트를 실행해~ 와 같은 의미이다. 이 메서드는 콜백으로 socket을 받는데, 쉽게 설명하자면 브라우저에 연결된 건너편의 누군가이다. socket을 이용하면 메세지를 주고 받고 할 수 있게 된다. 프론트 단 (app.js)에서도 socket을 정의, 백 단(serve..

이제까지 했던 세팅들을 정리해보자면, 다음과 같다. (1) pug로 뷰 엔진 설정 (2) express로 template이 어디에 있는지 지정(정적 리소스들) (3) public url을 생성해서 유저에게 보여줌 (4) home.pug를 렌더링해주는 라우터 handler 설정 약간의 편리한 스타일 적용을 위해 MVP.css를 html에 추가한다. (link=stylesheet)사용 https://andybrewer.github.io/mvp/ MVP.css - Minimalist stylesheet for HTML elements A decent MVP in no time More building and less designing with "set and forget" styling. "Uber for X..