#routing

Frontend › Next.js

App Router는 폴더가 URL 세그먼트, 특수 파일이 그 세그먼트의 역할이 된다. page·layout·template·loading·error·not-found·route·default의 렌더링 계층, 동적 세그먼트([id]·[...slug]·[[...slug]])와 Promise인 params, URL에 안 나오는 라우트 그룹과 프라이빗 폴더, 병렬 라우트(@slot)와 가로채는 라우트((.)·(..))로 만드는 URL 있는 모달, Route Handler, Metadata 병합과 title 템플릿까지 Next.js 16 기준으로 정리한다.

• #nextjs
• #react
• #frontend

Frontend › React

SPA에서 URL마다 다른 컴포넌트를 그리는 React Router의 기초(Routes·Route·Outlet, Link·NavLink, useParams·useSearchParams, useNavigate, 중첩 라우트)와, 일관된 URL 규칙 위에서 레이아웃이 경로별 버튼과 Breadcrumbs를 그리는 패턴. v5 시절 API(Switch, exact, withRouter, history)와의 대응표 포함.

• #react
• #mui
• #frontend

Frontend › Web

SPA가 새로고침 없이 화면을 바꾸면서도 페이지마다 고유한 URL과 뒤로 가기를 유지하는 방법. 링크·AJAX·해시(hashchange)·History API(pushState·popstate) 방식의 차이, 새로고침 때 서버가 해야 할 일(index.html 폴백, Accept 헤더로 HTML·JSON 나눠 응답), 모든 이동을 한 이벤트로 받는 Navigation API를 정리한다.

• #web
• #spa
• #history
• #browser

Backend › Django

urls.py가 요청 주소를 view 함수로 연결하고, view가 render로 응답을 만드는 흐름과 URL 분리·이름·namespace.

• #django
• #python
• #backend

Computer Science › Network

집과 사무실을 통신사에 잇는 가입자망(전화 모뎀, ADSL·VDSL, 케이블 HFC, FTTx와 PON, 위성)과 통신사 사이를 잇는 광역망 기술(T1·E1, SONET/SDH, PPP, X.25 → 프레임 릴레이 → ATM), 그리고 지금 사업자 백본의 MPLS(레이블 push·swap·pop, LDP·RSVP-TE, 트래픽 엔지니어링, MPLS VPN)를 정리했다.

• #network
• #computer-science
• #protocol
• #packet

Computer Science › Network

IPv4 헤더와 단편화(MTU), 주소 체계(클래스와 CIDR, 사설·링크 로컬(APIPA) 같은 특수 주소), 서브넷 계산(VLSM·경로 요약·특수 주소)과 라우팅 테이블(최장 프리픽스 일치, 직접·간접 전달), 라우팅과 포워딩(RIB·FIB, 라우터의 포워딩 과정), ARP 동작 과정·RARP, DHCP 주소 할당(DORA·옵션·임대·예약), ICMP 메시지 종류·생성 규칙과 ping·traceroute, IPv6(주소 종류·확장 헤더·ICMPv6·SLAAC), NAT의 종류(SNAT·DNAT·NAPT)와 포트 포워딩, 라우팅 알고리즘(거리 벡터·링크 상태·경로 벡터)과 RIP·OSPF·BGP 비교, IP 멀티캐스트(그룹 주소와 MAC 변환, IGMP, RPF와 송신자 기반·공유 트리, PIM), 회선·패킷 교환 방식 정리.

• #network
• #ip
• #multicast
• #certificate