[FE/BE] 포트포워딩(Port Forwarding)에 대해 자세히 알아보자! (정의, 구성요소, 장단점, 실습)
·
Tech Archive/[FE & BE]
1. 들어가며우리는 보통 인터넷 공유기를 통해 PC, 스마트폰, 태블릿 등 여러 기기를 연결합니다. 내부에서는 서로 파일을 주고받고 잘 통신하지만, 정작 카페나 다른 장소에서 집에 있는 내 컴퓨터에 접속하려고 하면 접속이 불가능합니다.이유는 간단합니다. 외부 인터넷 세상은 공유기(공인 IP)까지만 알고 있고, 공유기 뒤에 숨어 있는 내 컴퓨터(사설 IP)가 누구인지, 어떤 문(Port)으로 들어가야 하는지 모르기 때문입니다.이때 필요한 것이 바로 포트포워딩(Port Forwarding)입니다. 공유기에게 "이 번호로 들어오는 손님은 저 방으로 안내해 줘"라고 이정표를 세워주는 작업이죠. 이번 포스팅에서는 네트워크 엔지니어링의 기초이자 필수인 포트포워딩의 모든 것을 파헤쳐 보겠습니다.2. 포트포워딩이란? ..
[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..
[FE/BE] HTTP 상태 코드 - '클라이언트 오류' (4xx)
·
Tech Archive/[FE & BE]
1. 들어가며1편의 2xx(성공) 코드가 개발자를 웃게 한다면, 4xx(클라이언트 오류) 코드는 우리를 디버깅의 세계로 인도합니다. 😅4xx 오류 그룹은 서버가 요청을 이해했으나, "클라이언트(브라우저, 앱)가 보낸 요청 자체가 잘못되어" 처리를 거부했음을 의미합니다.FE 입장: "내가 요청을 잘못 보냈구나! URL, 파라미터, 권한 등을 확인해야겠다."BE 입장: "클라이언트가 이상한 요청을 보냈네. 명확한 4xx 코드로 응답해서 무엇이 잘못됐는지 알려줘야겠다."개발자가 가장 흔하게 마주치고, 또 반드시 잡아야 하는 오류들입니다.2. 4xx (Client Error) – 클라이언트 오류400 Bad Request (잘못된 요청)의미: 요청의 구문(Syntax) 자체가 잘못되었습니다. 서버가 요청을 이..
[FE/BE] HTTP 상태 코드 - 기본 개념 (1xx, 2xx)
·
Tech Archive/[FE & BE]
1. 들어가며: FE와 BE의 통신 언어, HTTP 상태 코드프론트엔드(FE)와 백엔드(BE)가 서로 데이터를 주고받을 때, 우리는 'HTTP 통신'을 사용합니다. 클라이언트(브라우저, 앱)가 서버에 "이거 해줘(Request)"라고 요청을 보내면, 서버는 요청을 처리한 뒤 "결과는 이래(Response)"라고 응답을 돌려줍니다.이때 서버가 돌려주는 응답의 '결과(상태)'를 표준화된 숫자로 표현한 것이 바로 HTTP 상태 코드입니다.FE 입장: 200번이 오면 '성공' 화면을, 404번이 오면 '페이지 없음' 화면을, 500번이 오면 '서버 오류' 알림을 띄우는 등 응답에 맞춰 적절한 처리를 해야 합니다.BE 입장: 요청을 처리한 결과에 따라 약속된 상태 코드를 정확히 반환해야 FE가 혼란 없이 작업을 ..