최근에 Using WebSockets with React 라는 글을 접하게 되면서, 기존 아키텍처를 개선해 보기로 했습니다. 기존 아키텍처는 Zustand를 사용해 모든 실시간 데이터를 단일 스토어에서 관리하는 방식을 사용하였습니다.(단순하고 직관적인 방식을 사용)해당

에러 처리(예외처리)를 하는 것은 중요한 일임에도 너무 안일하게 생각했던거 같아서 정리할 겸 작성해보려고 한다. 바로 예시로 넘어가서 알아보자e.g) 간단한 프로미스를 이용한 함수Promise문 이후 console.log()는 실행될 수 없습니다. 왜냐하면 resol

JS로 코딩을 하다보면 여러 데이터를 한 곳에 모아 관리할 때가 많습니다. 이럴 때 우리는 '자료구조'를 사용하게 됩니다. 특히 JS에서는 Array, Set, Map 이 세가지가 가장 기본적으로 많이 쓰이게 됩니다. 셋 다 여러 데이터를 담는 역할을 하는 공통점을 가

기존 OOP에 익숙한상태로 NestJS를 처음 접하면 아래 코드에 의문이 생길 수 있습니다. 분명 Car를 만드려면 Engine과 Wheels가 필요한데 어디에서도 new Car(new Engine(), new Wheels())와 같이 객체를 생성하고 부품을 넣어두는

Proxy 객체를 활용하면 특정 객체(Object)와의 인터렉션을 조금 더 세밀하게 조작할 수 있게 된다. Proxy 객체는 어떤 객체의 값을 설정(set)하거나 값을 조회(get)할 때 등의 인터렉션을 직접 제어할 수 있다.Proxy는 어떤 이의 대리인이라는 뜻이다.

GraphQL은 페이스북이 2012년 개발 -> 2015 공개한 데이터 질의어 REST 및 부속 웹서비스 아키텍처를 대체 할 수 있다. 클라이언트는 필요한 데이터의 구조를 지정할 수 있다. → 서버는 정확히 동일한 구조로 데이

ABI(Application Binary Interface)는 스마트 컨트랙트와 외부(다른 컨트랙트, DApp, 라이브러리, 사용자 등)가 서로 통신할 때 필요한 "규격서" 같은 역할을 하는 개념 → API와 흡사사람이 읽는 함수명, 변수명, 파라미터 → 블록체인 노드

뒤의 n은 JavaScript의 BigInt 타입 표기viem의 getBlockNumber()는 정밀도를 보존하기 위해 bigint를 반환하므로 콘솔에 23098157n처럼 표시출력은 문자열로변환 할 것 문자열로 출력: blockNumber.toString() → "2

bundle-analyze를 사용해서 번들링 최적화를 진행하는 중 build된 파일의 크기가 너무 크다는 것을 알았다. 가장 크게 보이는 번들 사이즈가 355KB였고 crypto-browserify로 묶여있는 것을 확인crypto-browserify?crypto-bro

해당 게시글은 AI를 기반으로 생성하고 제가 직접 다듬었습니다.웹 개발을 하다 보면 최신 문법이나 기능이 구형 브라우저에서 작동하지 않는 문제가 자주 발생합니다. 이를 해결하기 위한 두 가지 핵심 도구가 바로 Babel과 Polyfill입니다.Babel은 최신 Java

→←↑↓ 📌⚠️ 토이플젝이든 팀 플젝이든 프로덕션 단계에 진입하면 코드 스플리팅이 꼭 거론된다. 이번 글에서는 코드 스플리팅이 뭐하는 놈인지 알아볼 예정이다. 📌 MDN은 이렇게 말한다. > 코드 분할은 웹 애플리케이션이 의존하는 코드(자체 코드 및 서드파티 의존성 포함)를 서로 독립적으로 로드 가능한 별도의 번들로 나누는 방법입니다. 이를 통해...

ForexBar.tsx컴포넌트의 CLS가 0.21로 개선이 필요한 상황 렌더링될 때 이미지와 value에 대한 레이아웃이 잡혀 있지 않았기 때문에 CLS에 문제가 생긴 것또한 value는 텍스트 이기 때문에 길이에 대한 shift가 발생 가장 핵심적인 개선 포인트는 각

처음 레이아웃을 잘 잡으면 불필요한 중복 스타일링을 제거할 수 있어서 인라인으로 작성하는 tailwindCSS를 좀 더 깔끔하게 작성할 수 있다.

함수형 프로그래밍에 관해 찾다가 알게됐는데 처음보는 구조이기도하고 되게 신기하다.f(a,b,c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합되도록 변환하는 것 커링은 함수를 호출하지 않는다. 단지 변환

Feature Sliced Design 기능 중심으로 폴더구조 설계 역할 도메인 최상위 폴더 - Layer 폴더 안에 있는 폴더 - slice 내부 slice 안에 있는거 - segment

기존 코드는 동작을 위한 form 코드, useState로 상태를 관리했었다.해당 코드를 하나의 state로 관리하면 어떨까 하는 생각에 아래와 같이 리팩토링을 진행했음 useReducer를 활용해서 작성했는데 처음 input의 e.target.value만을 다룰 때즉

TS 쓰면서 의구심 + 궁금증 해소 목적으로 작성해놓음 상수를 목적으로 사용하기에는 tConst가 컴파일 했을 때 단순 객체이기 때문에 더 가벼움단 enum을 사용하면 양방향 맵핑이 가능하다는 장점이 있음개발 중 api 응답으로 데이터를 받다보면 이런식의 데이터가 꽤

mode: "no-cors"를 지정하면 요청에 사용할 수 있는 헤더가 다음 목록으로 제한AcceptAccept-LanguageContent-LanguageContent-Type 값으로는application/x-www-form-urlencodedmultipart/form

: 처음엔 main 브랜치에서 b로 분기를 나누었고 b를 진행하는 과정에서 a라는 새로운 기능이 필요해 a 브랜치 분기를 만들었음 a를 다 끝낸 뒤에 main으로 merge를 진행하기 전에 a를 b에다가 가져다가 쓰고 싶은 것임 이럴 때 어떻게 할 수 있을까? 충돌나는

당장은 이렇게만 설정하면 됨