Life's

Node.js에서 TLS 인증서 검증은 어떻게 동작하는가

1. 개요Node.js에서 HTTPS 요청을 보내다 보면다음과 같은 TLS 관련 오류를 만날 때가 있다.UNABLE_TO_VERIFY_LEAF_SIGNATURESELF_SIGNED_CERT_IN_CHAINCERT_HAS_EXPIREDERR_TLS_CERT_ALTNAME_INVALID이런 오류를 해결하려면단순히 "인증서가 이상하다" 정도로 이해하는 것만으로는 부족하다.실제로는 Node.js가어떤 기준으로 서버 인증서를 검증하는지 이해해야 한다.이 글에서는 Node.js에서 TLS 인증서 검증이 어떻게 동작하는지 정리한다.2. TLS 인증서 검증이 필요한 이유HTTPS는 단순히 암호화만 하는 것이 아니다.중요한 것은 다음 두 가지다.지금 연결한 서버가 정말 의도한 서버인지서버가 제시한 인증서를 신뢰할 수 있..

Zustand를 로컬 상태 대신 써도 되는 순간은 언제일까

React에서 상태를 다룰 때 가장 먼저 떠오르는 도구는 보통 useState다.컴포넌트 안에서 바로 선언할 수 있고, 이해하기도 쉽다.반면 Zustand는 전역 상태 관리 도구라는 인식이 강하다.그래서 상태를 만들 때 종종 이런 고민이 생긴다."이건 그냥 useState로 두는 게 맞을까, 아니면 Zustand로 빼는 게 맞을까?"처음에는 단순한 모달 상태 하나였는데,조금 지나면 여러 컴포넌트에서 참조하고,라우트가 바뀌어도 유지하고 싶고,다른 액션과 함께 제어해야 하는 순간이 온다.바로 이때 로컬 상태와 전역 상태의 경계가 헷갈리기 시작한다.이번 글에서는 Zustand를 로컬 상태 대신 써도 되는 순간이 언제인지,그리고 반대로 그냥 useState로 두는 편이 더 좋은 순간은 언제인지 정리해보려고 한다..

Zustand에서 전역 상태와 서버 상태를 어떻게 구분할까?

Zustand를 쓰기 시작하면 상태를 한곳에 모아두는 경험이 꽤 편하다.컴포넌트 어디서든 꺼내 쓸 수 있고, API도 단순해서 빠르게 전역 상태를 만들 수 있다.그래서 어느 순간 이런 고민이 생긴다."이 값도 store에 넣어도 될까?"예를 들어 아래 같은 값들이다.로그인한 사용자 정보상품 목록 API 응답장바구니 개수현재 열려 있는 모달 상태검색 결과로딩 상태겉으로 보면 모두 "여러 컴포넌트에서 같이 써야 하는 값"처럼 보인다.하지만 이들을 전부 같은 종류의 상태로 보면 점점 구조가 꼬이기 시작한다.이번 글에서는 Zustand를 사용할 때 자주 헷갈리는 전역 상태와 서버 상태의 차이를 정리하고,어떤 값은 store에 두는 것이 맞고 어떤 값은 서버 상태 도구로 관리하는 편이 좋은지 기준을 정리해보려고 ..

Zustand store를 너무 크게 만들면 어떤 문제가 생길까? slice 패턴으로 나누는 기준

Zustand는 간단하다.처음 사용할 때는 store 하나를 만들고, 그 안에 상태와 액션을 모두 넣는 방식이 꽤 자연스럽다.예를 들어 아래 같은 코드는 시작하기에 충분히 편하다.import { create } from "zustand";interface AppState { user: { id: string; name: string } | null; theme: "light" | "dark"; notifications: string[]; cart: { id: number; name: string; quantity: number }[]; isLoading: boolean; setUser: (user: { id: string; name: string } | null) => void; setThe..

Zustand에서 shallow 비교는 언제 필요할까? selector와 함께 이해하기

이전 글에서 Zustand selector는 언제 쓰는 것이 좋은지 정리했다.그다음 단계에서 자주 같이 등장하는 키워드가 바로 shallow다.selector를 찾아보다 보면 아래 같은 코드도 자주 보게 된다.import { shallow } from "zustand/shallow";const { bears, honey } = useBearStore( (state) => ({ bears: state.bears, honey: state.honey, }), shallow);처음 보면 "selector를 쓸 때는 shallow도 같이 써야 하나?"라는 생각이 들 수 있다.하지만 실제로는 그렇지 않다.shallow는 항상 필요한 옵션이 아니라, 여러 값을 묶어서 선택할 때 생기는 비교 문제를 완..

Zustand를 사용하다 보면 자연스럽게 selector를 접하게 된다.공식 예제나 여러 글에서 아래와 같은 코드를 자주 볼 수 있다.const bears = useBearStore((state) => state.bears);처음 보면 단순히 "원하는 값만 꺼내오는 문법" 정도로 느껴질 수 있다.하지만 실제로는 렌더링 범위를 줄이고, 컴포넌트의 관심사를 분리하고, 상태 구독 범위를 명확하게 만든다는 점에서 꽤 중요한 역할을 한다.다만 여기서 한 가지 고민이 생긴다.selector는 항상 써야 할까?아니면 필요할 때만 선택적으로 써야 할까?이번 글에서는 Zustand selector를 "무조건 써야 하는 패턴"으로 보기보다, 언제 도입하면 좋고 언제는 굳이 복잡도를 늘릴 필요가 없는지에 집중해서 정리해보려..

1. 개요HTTPS 통신에서 서버의 인증서를 검증하기 위해서는신뢰할 수 있는 인증기관(CA, Certificate Authority) 목록이 필요하다.Node.js는 기본적으로 자체 CA 목록을 내장하고 있으며,이 목록을 기반으로 서버 인증서를 검증한다.이 글에서는 Node.js에서 신뢰하는 CA 목록을 확인하는 방법을 정리한다.2. CA (Certificate Authority)란?CA는 서버 인증서를 발급하는 기관이다.대표적인 CA:DigiCertGlobalSignLet's EncryptSectigoNode.js는 이러한 CA들을 신뢰 목록으로 가지고 있으며,이 목록에 포함된 기관이 발급한 인증서만 정상적으로 검증된다.3. Node.js에서 CA 목록 확인하기Node.js에서는 tls 모듈을 통해내장..

Vuplex에서 JavaScript → C# 이벤트 전송 시 타이밍 이슈와 해결 방법1. 개요Vuplex WebView를 사용하는 경우, JavaScript에서 Unity(C#)로 메시지를 전송할 수 있다.공식적으로는 다음 API를 사용한다:window.vuplex.postMessage("message");하지만 실제 프로젝트에서는 단순한 API 사용만으로는 안정적인 통신을 보장하기 어렵다.2. 문제 상황프로젝트를 진행하면서 WebView 환경에서 postMessage를 통해 메시지를 전송했지만,일부 상황에서 메시지가 정상적으로 전달되지 않는 문제가 발생했다.특히 동일한 코드임에도 불구하고특정 디바이스에서는 동작하고, 다른 환경에서는 실패하는 등재현이 어려운 형태로 나타났다.👉 단순한 코드 문제가 아니..

1. 문제 상황기존 서비스는 CRA(Create React App) 기반의 CSR 구조로 운영되고 있었다.초기에는 빠른 개발과 단순한 구조 덕분에 큰 문제가 없었지만, 서비스가 성장하면서 점점 한계가 드러났다.특히 다음과 같은 문제가 반복적으로 발생했다.초기 로딩 속도 지연 (FCP/LCP 저하)SEO 대응의 어려움번들 사이즈 증가Webpack 기반 빌드 속도 저하단순한 최적화로는 해결이 어려웠고,결국 렌더링 방식 자체를 바꾸는 방향을 검토하게 되었다.2. 기존 구조의 한계2.1 CSR 구조의 구조적 문제CRA 기반 CSR에서는 모든 렌더링이 클라이언트에서 이루어진다.이로 인해:HTML은 비어있는 상태로 전달됨JS 로딩 이후에야 화면 렌더링초기 사용자 경험 저하특히 네트워크 환경이 좋지 않을수록 문제는 ..

웹 서비스 개발에서 인증(Authentication) 과 권한 위임(Authorization) 은 핵심 요소다.이때 자주 등장하는 기술이 바로 OpenID와 OAuth다. 이름은 비슷하지만, 목적과 쓰임은 확연히 다르다.🔐 OpenID: 사용자의 신원을 인증한다정의: 사용자가 누구인지 확인하는 프로토콜사례: 구글·네이버·카카오 계정으로 다른 서비스에 로그인동작 흐름사용자가 "구글 계정으로 로그인"을 선택한다.OpenID 제공자가 로그인 과정을 처리한다.웹사이트는 인증 결과를 받아 사용자의 신원을 확인한다.👉 핵심: OpenID는 인증(Authentication)에 집중한다.OAuth: 자원 접근 권한을 위임한다정의: 사용자가 직접 비밀번호를 제공하지 않고도 제3자 앱이 일정 범위 내에서 자원에 접근하..