1. 들어가며웹 개발을 하다 보면 jsonwebtoken 라이브러리를 사용해 로그인 기능을 구현하는 튜토리얼을 수백 개는 보게 됩니다. 그리고 그 모든 튜토리얼에는 항상 이런 코드가 등장합니다.const SECRET = "your_super_secret_key";const token = jwt.sign({ userId: 123 }, SECRET);우리는 흔히 이 SECRET을 대수롭지 않게 "아, 그냥 아무 문자열이나 넣으면 되는 거구나"라고 생각하며 비밀번호(password123)나 프로젝트 이름(my_project_key)을 적어 넣곤 합니다. 심지어 이 코드를 그대로 깃허브(GitHub)에 올리기도 하죠.하지만 이 짧은 코드 한 줄에 모든 JWT 시스템의 보안이 걸려 있습니다. 해커가 이 시크릿 키..

1. 들어가며우리가 새로운 웹 서비스나 앱에 가입할 때, "Google로 로그인", "카카오로 로그인" 버튼을 누르는 것은 일상이 되었습니다. 또한, Notion 앱에서 Google 캘린더 일정을 불러오거나, 특정 앱이 내 Facebook에 대신 글을 써주기도 합니다.만약 이 과정에서 우리가 해당 앱에 '우리의 진짜 구글 아이디와 비밀번호'를 넘겨주어야 한다면 어떨까요? 그 앱이 비밀번호를 해킹당하면 내 모든 구글 정보가 유출될 것이고, 앱이 내 맘대로 결제나 이메일을 열어볼 수도 있을 것입니다.이러한 치명적인 보안 문제를 해결하기 위해 등장한 전 세계적인 표준 기술이 바로 OAuth(Open Authorization)입니다. 사용자의 비밀번호를 넘겨주는 대신, "이 앱이 내 프로필 사진만 볼 수 있도록..

1. 들어가며우리는 보통 인터넷 공유기를 통해 PC, 스마트폰, 태블릿 등 여러 기기를 연결합니다. 내부에서는 서로 파일을 주고받고 잘 통신하지만, 정작 카페나 다른 장소에서 집에 있는 내 컴퓨터에 접속하려고 하면 접속이 불가능합니다.이유는 간단합니다. 외부 인터넷 세상은 공유기(공인 IP)까지만 알고 있고, 공유기 뒤에 숨어 있는 내 컴퓨터(사설 IP)가 누구인지, 어떤 문(Port)으로 들어가야 하는지 모르기 때문입니다.이때 필요한 것이 바로 포트포워딩(Port Forwarding)입니다. 공유기에게 "이 번호로 들어오는 손님은 저 방으로 안내해 줘"라고 이정표를 세워주는 작업이죠. 이번 포스팅에서는 네트워크 엔지니어링의 기초이자 필수인 포트포워딩의 모든 것을 파헤쳐 보겠습니다.2. 포트포워딩이란? ..

1. 들어가며프론트엔드 개발자라면 공감할 것입니다. 프로젝트 규모가 커질수록 npm run start를 입력하고 한참을 기다려야 했던 그 지루한 시간들을요. 코드를 한 줄 수정했는데 브라우저에 반영되기까지 몇 초씩 걸린다면 개발 집중력은 깨지기 마련입니다.이러한 '느린 개발 경험'을 해결하기 위해 Vue.js의 창시자 에반 유(Evan You)가 내놓은 해답이 바로 Vite입니다. 프랑스어로 "빠르다(Quick)"는 뜻을 가진 Vite는 기존 Webpack 대비 10배~100배 빠른 속도를 자랑하며 프론트엔드 생태계의 표준을 바꿔놓고 있습니다.이번 포스팅에서는 Vite가 도대체 왜 빠른지, 그 원리와 사용법, 그리고 Webpack과의 결정적 차이까지 완벽하게 파헤쳐 보겠습니다.2. Vite란 무엇인가?링..

1. 들어가며인공지능(AI)과 빅데이터 시대에서 가장 중요한 자원은 바로 '데이터'입니다. 하지만 인터넷상의 수많은 유용한 정보들은 정형화된 엑셀 파일이나 CSV가 아니라, 복잡한 HTML 코드로 이루어진 웹페이지 속에 숨겨져 있습니다.수천 개의 상품 가격을 비교하거나, 뉴스 기사의 트렌드를 분석하고 싶을 때, 일일이 '복사-붙여넣기'를 할 수는 없습니다. 이때 필요한 기술이 바로 웹 스크래핑(Web Scraping)입니다. 그리고 파이썬 생태계에서 웹 스크래핑 입문부터 실무까지 가장 널리, 그리고 사랑받으며 사용되는 라이브러리가 바로 BeautifulSoup입니다.이번 포스팅에서는 BeautifulSoup의 정의부터 핵심 기능, 장단점, 그리고 실제 데이터를 수집하는 End-to-End 파이프라인까지 ..

1. 들어가며: "데이터, 어디에 저장해야 할까?"웹사이트나 앱을 만들 때 가장 먼저 하는 고민은 "데이터를 어디에 저장하지?"입니다.과거에는 무조건 Oracle이나 MySQL이었지만, 지금은 데이터의 형태와 목적에 따라 너무나 다양한 선택지가 존재합니다."결제 정보는 무조건 안전하게!""로그 데이터는 1초에 10만 개씩 쌓이는데?""검색창에 오타를 쳐도 검색되게 하고 싶어."이 질문들에 대한 답이 서로 다른 DB여야 한다는 사실, 알고 계셨나요?오늘 정리해 드리는 5가지 DB 유형만 확실히 알아두면, 시스템 아키텍처를 설계하는 눈이 트일 것입니다.2. RDB (관계형 DB)Relational Database (RDBMS)는 행(Row)과 열(Column)로 이루어진 **'엑셀 표'**와 같습니다. 50..

1. 들어가며2편에서 만든 MovieFlix API는 기능적으로 완벽합니다. 영화를 조회하고, 만들고, 수정하고, 삭제할 수 있죠.하지만 이대로 인터넷에 배포하면 5분 만에 망합니다.보안: 누구나 DELETE /movies/1을 호출해서 영화를 다 지워버릴 수 있습니다. 😱성능: 영화가 100만 개가 되면 GET /movies 요청 한 번에 서버가 멈춥니다.신뢰성: 코드를 수정했는데 기존 기능이 잘 되는지 매번 손으로 확인할 순 없죠.3편에서는 이 API를 '현업 수준'으로 끌어올리는 필수 요소들을 다룹니다. 2. 보안 (Security)API 보안의 핵심은 "너 누구야?(인증)"와 "너 이거 할 수 있어?(인가)"입니다. 2-1. 인증(Authentication)과 JWTREST API는 '무상태(..

1. 들어가며지난 1편에서 우리는 'MovieFlix(영화 스트리밍)' 서비스의 API를 설계했습니다.URI: /movies행위: GET, POST, PUT, DELETE규칙: 명사형 URI, 적절한 상태 코드이제 이 설계도를 들고 공사장에 왔습니다. 오늘 사용할 도구는 Python FastAPI입니다."왜 Django나 Flask가 아니고 FastAPI인가요?"라고 묻는다면, API 개발에 있어서만큼은 FastAPI가 압도적으로 편리하고 빠르기 때문입니다. 2. 왜 FastAPI인가?짧고 굵게 3가지만 기억하세요.빠르다 (High Performance): NodeJS나 Go에 비견될 만큼 빠릅니다. (Starlette + Pydantic 기반)쉽다 (Easy): 파이썬의 타입 힌트(Type Hint)를..

1. 들어가며프론트엔드(FE)와 백엔드(BE)가 협업할 때 가장 많이 하는 말이 있습니다."API 나왔나요?", "API 명세서 좀 주세요."API를 단순히 "DB에서 데이터 꺼내서 화면에 뿌려주는 기능" 정도로 생각하면, 나중에 유지보수 지옥이 펼쳐집니다."잘 짠 API"는 개발자 간의 명확한 약속(Contract)이자, 시스템의 얼굴입니다.API가 엉망이면 FE 개발자는 "이거 에러가 왜 나요?"라고 하루 종일 되묻고, BE 개발자는 "아, 그거 스펙 바꿨는데..."라며 땀을 흘리게 되죠.이번에는 API의 정석, 특히 현업 표준인 RESTful API를 어떻게 설계해야 '잘 짰다'는 소리를 듣는지 완벽하게 정리해 드립니다.2. API의 정의: (메뉴판과 점원)API (Application Progra..

1. 들어가며네트워크 통신은 여러 계층(Layer)으로 나뉩니다. IP (Internet Protocol)가 '호스트(H)' 간의 통신 경로(라우팅)를 책임진다면, 그 상위 계층인 전송 계층(Transport Layer, OSI 4계층)은 '프로세스(P)' 간의 논리적 연결을 담당합니다. (예: 내 크롬 브라우저 프로세스 $\leftrightarrow$ 구글 웹 서버 프로세스)이 전송 계층에는 성격이 정반대인 두 개의 핵심 프로토콜이 있습니다. 바로 TCP와 UDP입니다. 이 두 프로토콜은 애플리케이션의 요구사항(신뢰성인가, 속도인가)에 따라 선택적으로 사용됩니다.2. TCP (Transmission Control Protocol)TCP는 "전송을 제어하는 프로토콜"이라는 이름처럼, 신뢰성(Reliabi..