Studyyyyy

nuqs란?URL의 search parameter(ex. ?page=2&sort=asc)를 React state처럼 다룰 수 있게 해주는 라이브러리다.보통 URL 파라미터를 다루려면 useSearchParams로 읽고, router.push로 쓰는 식으로 분리해서 처리해야 하는데, nuqs는 이걸 useState처럼 하나의 훅으로 묶어준다. 타입 파싱도 내장되어 있어서 string으로 오는 URL 값을 number, boolean 등으로 자동 변환해준다.pnpm add nuqs핵심 개념파서 (Parser)URL 파라미터는 항상 string이지만, 실제로 사용할 때는 number나 boolean이 필요한 경우가 많다. nuqs는 타입별 파서를 기본 제공한다.import { parseAsInteger, ..

thead에는 sticky가 안먹히고, th에 적용해야한다.추가로 키보드 스크롤 시 sticky된 thead에 가려진다면 tbody > tr에 scroll-margin 옵션을 추가하면 된다.

Next.js 16(=App Router) + Toast UI Editor(브라우저 전용 라이브러리)→ 서버 컴포넌트 환경에서 렌더링→ window, document, Element 같은 브라우저 객체를 참조→ Element is not defined 오류 발생. 때문에 클라이언트 전용(import 시점 지연)으로 로딩해야 오류가 나지 않는다.Toast UI Editor는 SSR에서 바로 사용할 수 없기 때문에 Next.js 16에서는 동적 import + ssr: false 조합이 필수 1. dynamic import 할 컴포넌트 생성import { Editor, EditorProps } from "@toast-ui/react-editor";import React from "react";const Dy..

기본 포트80 : HTTP 기본 포트443 : HTTPS 기본 포트22 : SSH (원격 접속)25 : SMTP (메일 전송)3306 : MySQL5432 : PostgreSQL개발용/사용자 정의 포트3000 : 보통 Node.js, React, Next.js 같은 프론트엔드 개발 서버8000 : 보통 Django같은 백엔드 프레임워크

포트포워딩이란?공유기(라우터)가 들어오는 외부 요청을 내부 컴퓨터(사설 IP)로 전달해주는 설정필요한 이유 / 배경인터넷(외부)에서 오는 요청은 공인 IP까지만 도달 가능하기 때문에, 어떠한 포트(ex.8000포트)로 오는 요청은 내 컴퓨터(사설 IP)로 들어오게끔 NAT에서 설정이 필요하다.실생활 / 실무 예시집에서 Django 서버를 띄우고 외부에서 접근하고 싶을 때내 컴퓨터 내부 IP 확인 (ex. 192.168.0.10)공유기 관리자 페이지 접속 : 대부분 192.168.0.1 에서 접속 가능포트포워딩 설정 메뉴로 이동 : 보통 고급 설정 -> NAT/포트포워딩 -> 새 규칙 추가설정 입력 (포트 번호, 내부 IP, 내부 포트, 프로토콜)주의할 점보안 : 외부에서 누구든 접근이 가능하기 때문에 인..

}> }> }> }> Suspense와 prefetch boundary로 감싼 각 컴포넌트 내부에서는 useSuspenseQuery 혹은 useSuspenseQueries로 데이터를 불러오고 있는 상태이다. suspense도 따로 감싸주고 있어서 페이지 전환 시 streaming 방식으로 점진적 렌더링이 돼야하는데, 새로고침을 통해 데이터를 처음 불러올 때 외에 상호작용을 통한 페이지 전환 시에는 모든 데이터가 불러와져야만 화면이 한번에 업데이트가 되어, 화면이 멈춘듯한 UX가 만들어졌다. fallback 또한 나타나지 않았다. https://buil..

PKCE (Proof Key for Code Exchange) 동작 원리 OAuth2 Authorization Code Flow를 모바일/SPA같은 비밀키를 안전하게 숨기기 어려운 환경에서 보안 강화를 위해 만든 방식 1. 클라이언트에서 code_verifier 생성클라이언트 앱에서 랜덤 문자열(ex. xYz123...) 생성외부에 노출되면 안되기 때문에 일반적으로 HttpOnly 쿠키에 저장2. code_challenge 생성code_verifier를 SHA256 해시 후 URL-safe Base64로 인코딩 -> code_challenge이걸 OAuth 서버로 보냄(공개해도 되는 값)3. 사용자가 로그인하면 Authorization Code 발급OAuth 서버는 code_challenge 값을 기억로..

V8 이란?구글 chrome과 Node.js에서 사용하는 javascript 엔진 : JS 코드를 실제로 실행해주는 프로그램필요한 이유 / 배경기존 JS엔진은 느리고 웹앱이 복잡해짐에 따라 성능이 중요해지며 Google에서 V8을 개발빠른 속도메모리 효율Node.js 런타임에서도 활용 가능동작 원리JS 코드를 받아 파싱 -> AST(Abstract Syntax Tree) 생성Ignition 인터프리터가 먼저 실행하여 결과를 빠르게 출력TurboFan JIT(Just in Time) 컴파일러가 자주 실행되는 코드(HOT CODE)를 기계어로 변환 -> 성능 향상GC(Garbage Collector) 가 메모리 자동 관리구성 요소IP 저장 매핑 테이블타이머 / 세션 관리 : NAT 테이블에 저장된 매핑은 일..