본문 바로가기

전체 글114

Axios Interceptor, Lodash.debounce 어제 개발을 하다가 다음과 같은 문제가 일어났었다. 플로우는 다음과 같다.처음에 로그인을 한다.로그인을 하면 패스워드를 해싱한다. ( DB에는 원문이 들어가 있지 않고, 단방향 해싱으로 진행한다. )해싱값을 입력값 ( pw )와 비교한다. 맞으면 서버에 저장된 SECRET_KEY로 생성한 jwt 토큰을 발급한다.그리고 이 토큰을 클라이언트측 브라우저의 세션 스토리지에 넣는다. 이후에, Axios 인스턴스의 헤더에 Authorization : Bearer [토큰] 을 추가해서 API를 날린다.( 리프레시나 토큰 만료는 아직 고려하지 않았다. ) 문제는 다음에서 발생했다.토큰을 브라우저의 세션 스토리지에 분명 넣었는데, 토큰 검증이 되지 않아서 자꾸 401 ( Unauthorized ) 에러가 나는 것이었.. 2025. 4. 15.
PM2, 커넥션 풀링 ** 상황가정 **- PM2로 node api를 돌리고, 이를 IIS로 역방향 프록시를 걸어서 api에 전달한다.  - PM2가 index.js를 실행하는 순간에 Node.js 프로세스가 메모리에 로드되고 실행된다.- 이 때 index.js의 모든 초기화 코드가 실행되고, 그 중 커넥션 풀 생성코드 poolPromise도 실행된다.- 즉 IIS 서버에 대한 어떠한 클라이언트 측 요청과 상관없이 PM2가 프로세스를 시작할 때, 이미 각 프로세스는 독립적으로 구동되고, 커넥션 풀도 생성되서 대기 상태가 된다. ** 역방향 프록시와의 관계- IIS가 역방향 프록시 역할을 하여 리액트 앱에서 오는 요청을 Node 어플리케이션, 즉 pm2로 실행중인 프로세스로 전달한다. - 이 때 이미 실행된 Node.js 프로.. 2025. 4. 10.
자주 사용하는 HTTP 헤더 ** 요청헤더1. Accept- 클라이언트가 이해하거나 처리할 수 있는 응답 데이터 타입을 지정- ex) Accept : application/json 2. Accept-Encoding- 클라이언트가 지원하는 콘텐츠 압축방식을 명시- Accept-Encoding : gzip, deflate 3. Accept-Language- 클라이언트가 선호하는 언어를 나타냄- Accept-Language : en-US, ko 4. Content-Type- 요청 본문의 데이터 타입 명시- Content-Type : application/json 5. Authorization- 인증 토큰이나 자격증명 포함- Authorization : Bearer  6. User-Agent- 클라이언트 어플리케이션 ( 브라우저 등 )의 .. 2025. 4. 10.
자주 사용하는 MIME TYPE * MIME 타입- MIME 타입은 클라이언트와 서버가 전송하는 콘텐츠의 종류를 명시하여, 데이터 처리를 어떻게 할지 결정하는데 도움을 준다. 1. text/html- html 문서를 나타냄- ex) 웹페이지 2. text/plain- 일반 텍스트 데이터- ex) 단순 텍스트 파일이나 디버깅용 응답 3. application/json- JSON 데이터- ex) API의 요청 및 응답데이터 4. application/xml- xml 포맷의 데이터- ex) xml 기반의 api응답 혹은 문서 5. multipart/form-data- 파일 업로드와 같이 여러 파트로 구성된 데이터를 표현- ex) 파일 전송  6. text/css- css 스타일 시트- ex) 스타일링 파일 2025. 4. 10.
[Express] 정리 (1) 먼저 처음에 다음 과 같은 모듈들이 필요하다.const express = require('express')const sql = require('mssql/msnodesqlv8');- Express : 빠르게 웹 서버와 API 엔드포인트를 만들기 위해서- mssql/msnodesqlv8 : SQL Server와 Node.js 간의 연결을 가능하게 해주는 라이브러리, Window 인증 ( Trusted Connection )을 지원한다.  const config = { server: "ETHANGRAM", database: "HRDB2", options: { trustServerCertificate: true, trustedConnection: true, // Windows 인증 활성화 }.. 2025. 4. 10.
리버스 프록시 ** IIS - 기본적으로 마이크로소프트 기술 스택과 웹 어플리케이션을 위한 웹서버이다.- 때문에, Express 같은 Node.js 기반의 어플리케이션은 IIS에 네이티브하게 통합되어있지 않다.     ㄴ 그래서 IIS 앞단에 리버스 프록시 역할을 하는 모듈을 설정하여 들어오는 HTTP 요청을 Express 어플리케이션으로 포워딩해야한다.    ㄴ 이 역할을 통해서 IIS가 클라이언트의 요청을 받아 적절한 백엔드 서버로 전달하고 응답을 다시 클라이언트로 반환할 수 있다.  ** 리버스 프록시 Reverse Proxy- 리버스 프록시는 클라이언트의 요청을 받아서 백엔드 서버로 전달하고, 그 응답을 다시 클라이언트들에게 전달하는 역할을 하는 중간서버입니다.- 일반 프록시 Proxy는 클라이언트가 직접 외부.. 2025. 4. 9.
css -> tailwind css padding padding : 1rem;p-4 padding-top : 0.5rem;pt-2 padding-bottom : 2rem;pb-8 padding-left/right : 0.75rem;px-3 ( 좌.우) padding-top/bottom : 1.5rem;py-6 ( 위.아래 )  margin똑같음1rem이 4왼쪽은 l, 위는 t, 아래는 b, 오른쪽은 r, 위아래는 y, 왼우는 x  flexbox display:flex;flex display:inline-flex;inline-flex flex-direction : column;flex-col flex-wrap : wrap;flex-wrap align-items : center;items-center align-self : start;self.. 2025. 3. 28.
Recoil-Persist Recoil-Persist는 Recoil atom (전역상태)을 브라우저(또는 리액트 네이티브)의 영구저장소(LocalStorage, SessionStorage, AsyncStorage등)에 자동으로 저장 Persist 하고 페이지 리로드 시 저장된 값을 복원 rehydrate 해주는 가벼운 라이브러리이다. - 선택적 Persistence : 특정 atom만 골라서 저장가능- 만료 설정 가능 : 저장 데이터의 TTL ( time to live ) 지정- 타입스크립트 지원 : 제네릭 타입 정의 가능 * 예시 * import React from 'react';import { RecoilRoot, atom, useRecoilState } from 'recoil';import { recoilPersist } f.. 2025. 3. 24.
Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요? Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요?** Concurrent Mode & Suspense* Concurrent Mode : 리액트 18이상에서 활성화 가능하고, 렌더링을 비동기로 수행하여 UI 차단 없이 업데이트를 처리한다.* Suspense : 비동기 컴포넌트 ( ex : lazy import, data fetch ) 로딩 시 fallback UI를 자동표시import {Suspense, lazy} from 'react';const Profiles = lazy(()=> import ('./Profile'));function App(){ return( Loading Profil.. 2025. 3. 21.
React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. 리액트 파이버는 리액트 16부터 도입된 새로운 재조정 reconciliation 엔진이다. 기존 Stack reconciliation방식의 동기적 업데이트를 대체하여, 작업을 작은 단위 fiber로 분할하고 우선 순위에 따라서 비동기적으로 처리할 수 있게 설계되었다.  * 동작방식1. Fiber Tree : 각 컴포넌트는 Fiber 노드로 표현된다.2. Work Loop : 렌더링 작업을 여러개의 태스크로 분할한다. 브라우저 이벤트 ( 사용자 입력, 애니메이션 ) 사이에 작업을 일시중단 / 재개 한다.3. Priority Scheduling : 사용자 입력 ( 우선순위 높음 ), 애니메.. 2025. 3. 21.

티스토리툴바