[FE/BE] 포트포워딩(Port Forwarding)에 대해 자세히 알아보자! (정의, 구성요소, 장단점, 실습)
·
Tech Archive/[FE & BE]
1. 들어가며우리는 보통 인터넷 공유기를 통해 PC, 스마트폰, 태블릿 등 여러 기기를 연결합니다. 내부에서는 서로 파일을 주고받고 잘 통신하지만, 정작 카페나 다른 장소에서 집에 있는 내 컴퓨터에 접속하려고 하면 접속이 불가능합니다.이유는 간단합니다. 외부 인터넷 세상은 공유기(공인 IP)까지만 알고 있고, 공유기 뒤에 숨어 있는 내 컴퓨터(사설 IP)가 누구인지, 어떤 문(Port)으로 들어가야 하는지 모르기 때문입니다.이때 필요한 것이 바로 포트포워딩(Port Forwarding)입니다. 공유기에게 "이 번호로 들어오는 손님은 저 방으로 안내해 줘"라고 이정표를 세워주는 작업이죠. 이번 포스팅에서는 네트워크 엔지니어링의 기초이자 필수인 포트포워딩의 모든 것을 파헤쳐 보겠습니다.2. 포트포워딩이란? ..
[FE/BE] Vite(비트)에 대해 자세히 알아보자! (정의, 구성요소, 장단점, 실습)
·
Tech Archive/[FE & BE]
1. 들어가며프론트엔드 개발자라면 공감할 것입니다. 프로젝트 규모가 커질수록 npm run start를 입력하고 한참을 기다려야 했던 그 지루한 시간들을요. 코드를 한 줄 수정했는데 브라우저에 반영되기까지 몇 초씩 걸린다면 개발 집중력은 깨지기 마련입니다.이러한 '느린 개발 경험'을 해결하기 위해 Vue.js의 창시자 에반 유(Evan You)가 내놓은 해답이 바로 Vite입니다. 프랑스어로 "빠르다(Quick)"는 뜻을 가진 Vite는 기존 Webpack 대비 10배~100배 빠른 속도를 자랑하며 프론트엔드 생태계의 표준을 바꿔놓고 있습니다.이번 포스팅에서는 Vite가 도대체 왜 빠른지, 그 원리와 사용법, 그리고 Webpack과의 결정적 차이까지 완벽하게 파헤쳐 보겠습니다.2. Vite란 무엇인가?링..
[FE/BE] Beautiful Soup에 대해 자세히 알아보자! (정의, 구성요소, 장단점, 실습)
·
Tech Archive/[FE & BE]
1. 들어가며인공지능(AI)과 빅데이터 시대에서 가장 중요한 자원은 바로 '데이터'입니다. 하지만 인터넷상의 수많은 유용한 정보들은 정형화된 엑셀 파일이나 CSV가 아니라, 복잡한 HTML 코드로 이루어진 웹페이지 속에 숨겨져 있습니다.수천 개의 상품 가격을 비교하거나, 뉴스 기사의 트렌드를 분석하고 싶을 때, 일일이 '복사-붙여넣기'를 할 수는 없습니다. 이때 필요한 기술이 바로 웹 스크래핑(Web Scraping)입니다. 그리고 파이썬 생태계에서 웹 스크래핑 입문부터 실무까지 가장 널리, 그리고 사랑받으며 사용되는 라이브러리가 바로 BeautifulSoup입니다.이번 포스팅에서는 BeautifulSoup의 정의부터 핵심 기능, 장단점, 그리고 실제 데이터를 수집하는 End-to-End 파이프라인까지 ..
[DB] 개발자의 기본기, 데이터베이스(DB)란 무엇인가? (RDB, NoSQL, Redis, Vector DB)
·
Tech Archive/[DB]
1. 들어가며: "데이터, 어디에 저장해야 할까?"웹사이트나 앱을 만들 때 가장 먼저 하는 고민은 "데이터를 어디에 저장하지?"입니다.과거에는 무조건 Oracle이나 MySQL이었지만, 지금은 데이터의 형태와 목적에 따라 너무나 다양한 선택지가 존재합니다."결제 정보는 무조건 안전하게!""로그 데이터는 1초에 10만 개씩 쌓이는데?""검색창에 오타를 쳐도 검색되게 하고 싶어."이 질문들에 대한 답이 서로 다른 DB여야 한다는 사실, 알고 계셨나요?오늘 정리해 드리는 5가지 DB 유형만 확실히 알아두면, 시스템 아키텍처를 설계하는 눈이 트일 것입니다.2. RDB (관계형 DB)Relational Database (RDBMS)는 행(Row)과 열(Column)로 이루어진 **'엑셀 표'**와 같습니다. 50..
[FE/BE] API 운영 가이드 (보안, 성능, 테스트)
·
Tech Archive/[FE & BE]
1. 들어가며2편에서 만든 MovieFlix API는 기능적으로 완벽합니다. 영화를 조회하고, 만들고, 수정하고, 삭제할 수 있죠.하지만 이대로 인터넷에 배포하면 5분 만에 망합니다.보안: 누구나 DELETE /movies/1을 호출해서 영화를 다 지워버릴 수 있습니다. 😱성능: 영화가 100만 개가 되면 GET /movies 요청 한 번에 서버가 멈춥니다.신뢰성: 코드를 수정했는데 기존 기능이 잘 되는지 매번 손으로 확인할 순 없죠.3편에서는 이 API를 '현업 수준'으로 끌어올리는 필수 요소들을 다룹니다. 2. 보안 (Security)API 보안의 핵심은 "너 누구야?(인증)"와 "너 이거 할 수 있어?(인가)"입니다. 2-1. 인증(Authentication)과 JWTREST API는 '무상태(..
[FE/BE] API 개발 가이드: FastAPI로 실전 REST API 만들기 (Pydantic, CRUD)
·
Tech Archive/[FE & BE]
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)를..
[FE/BE] API란 무엇일까? (API 정의, 종류, 설계, 개발 가이드)
·
Tech Archive/[FE & BE]
1. 들어가며프론트엔드(FE)와 백엔드(BE)가 협업할 때 가장 많이 하는 말이 있습니다."API 나왔나요?", "API 명세서 좀 주세요."API를 단순히 "DB에서 데이터 꺼내서 화면에 뿌려주는 기능" 정도로 생각하면, 나중에 유지보수 지옥이 펼쳐집니다."잘 짠 API"는 개발자 간의 명확한 약속(Contract)이자, 시스템의 얼굴입니다.API가 엉망이면 FE 개발자는 "이거 에러가 왜 나요?"라고 하루 종일 되묻고, BE 개발자는 "아, 그거 스펙 바꿨는데..."라며 땀을 흘리게 되죠.이번에는 API의 정석, 특히 현업 표준인 RESTful API를 어떻게 설계해야 '잘 짰다'는 소리를 듣는지 완벽하게 정리해 드립니다.2. API의 정의: (메뉴판과 점원)API (Application Progra..
[FE & BE] TCP와 UDP 한눈에 알아보기 (정의, 특징, 차이점)
·
Tech Archive/[FE & BE]
1. 들어가며네트워크 통신은 여러 계층(Layer)으로 나뉩니다. IP (Internet Protocol)가 '호스트(H)' 간의 통신 경로(라우팅)를 책임진다면, 그 상위 계층인 전송 계층(Transport Layer, OSI 4계층)은 '프로세스(P)' 간의 논리적 연결을 담당합니다. (예: 내 크롬 브라우저 프로세스 $\leftrightarrow$ 구글 웹 서버 프로세스)이 전송 계층에는 성격이 정반대인 두 개의 핵심 프로토콜이 있습니다. 바로 TCP와 UDP입니다. 이 두 프로토콜은 애플리케이션의 요구사항(신뢰성인가, 속도인가)에 따라 선택적으로 사용됩니다.2. TCP (Transmission Control Protocol)TCP는 "전송을 제어하는 프로토콜"이라는 이름처럼, 신뢰성(Reliabi..
[FE/BE] API, 프로토콜, 소켓, JSON, gRPC: 통신 스택 총정리
·
Tech Archive/[FE & BE]
1. 들어가며FE/BE 개발자나 AI 엔지니어는 "API 쏜다"는 말을 입에 달고 삽니다.API, 프로토콜, 소켓... 전부 '규칙'이라는 건 알겠는데, "그래서 뭐가 다른데?"라고 물어보면 말문이 막히곤 하죠.이 개념들은 '레이어(Layer)'로 이해해야 합니다. "API를 쏜다"는 한마디는, 사실 이 모든 레이어를 관통하는 행위입니다.API라는 '메뉴'를JSON이라는 '그릇'에 담아HTTP라는 '프로토콜(언어)'로 주문하면소켓이라는 '창구'를 통해 전달됩니다.이 포스팅에서 FE/BE 통신의 핵심 스택 5가지를 낱낱이 뜯어보겠습니다.2. L1. 소켓 (Socket): 통신의 창구 (OS 레벨)정의: OS(운영체제) 레벨에서 제공하는, 프로세스 간 통신의 **'실제 창구(Endpoint)'**입니다.설명..
[FE/BE] HTTP 상태 코드 - '서버 오류'와 '리다이렉션' (5xx, 3xx)
·
Tech Archive/[FE & BE]
1. 들어가며: "내(서버) 잘못"이거나 "다른 곳으로 가"지금까지 2xx(성공), 4xx(클라이언트 오류)를 알아봤습니다. 마지막 3편에서는 크게 두 가지 그룹을 다룹니다.5xx (서버 오류): 4xx와 반대로, 클라이언트(FE)의 요청은 완벽했지만 "서버(BE) 쪽에서 문제가 발생해" 요청을 처리하지 못한 경우입니다.3xx (리다이렉션): 이것은 '오류'가 아닙니다. 서버가 클라이언트에게 "요청한 리소스의 위치가 변경되었으니, 다른 주소로 다시 요청해"라고 알려주는 것입니다.2. 5xx (Server Error) – 서버 오류FE 입장: "나는 요청을 제대로 보냈는데 서버가 아프다. 내가 할 수 있는 건 없고, 사용자에게 '잠시 후 다시 시도해 주세요'라고 안내해야겠다."BE 입장: "큰일 났다! 5..