Web
-
MQTT 프로토콜 알아보자! (Http, gRPC 비교)Web 2025. 5. 2. 16:22
MQTT란 무엇인가? MQTT(Message Queuing Telemetry Transport)는 경량 메시지 전송 프로토콜로, 저전력 장치와 제한된 네트워크 환경을 고려해 설계되었습니다. 주로 사물인터넷(IoT) 기기 간 통신에 많이 사용되며, 발행(Publish)과 구독(Subscribe) 방식의 구조를 가집니다.MQTT의 특징 TCP/IP 기반 통신 브로커(Broker)를 통한 Pub/Sub 구조 낮은 대역폭, 저전력 환경에 최적화 QoS(Quality of Service)를 통한 신뢰성 제어Request/Response vs Publish/Subscribe 통신 방식의 차이 프로토콜을 이해하려면 먼저 각각의 통신 방식 차이를 아는 것이 중요합니다. MQTT는 Pub/Sub 방식, HT..
-
SSR vs CSR 구분 및 개발 방법을 알아보자!Web 2025. 4. 29. 14:17
✅ SSR (Server Side Rendering) vs CSR (Client Side Rendering)📌 SSR (서버사이드 렌더링) 개념: 서버에서 HTML을 완성해서 클라이언트에 전달 예시: Next.js, JSP, Thymeleaf 특징: 초기 로딩 속도 빠름, SEO 유리, 서버 부담 높음✔️ 개발 방법 (React - Next.js)// pages/index.tsxexport async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data } };}export default fu..
-
Socket (소켓) 에 대해 알아보고, Websocket (웹소켓) 과 구분해보자!Web 2025. 4. 28. 10:37
✅ 소켓(Socket)이란?소켓(Socket)은 네트워크 통신을 위한 기본 단위입니다.IP 주소와 포트 번호를 조합해, 컴퓨터끼리 데이터를 주고받을 수 있는 통로를 만드는 기술입니다.TCP 소켓, UDP 소켓처럼 사용됩니다.통신을 열고 데이터를 주고받는 역할을 합니다. ✅ WebSocket이란?WebSocket은 웹 환경에서 실시간 양방향 통신을 가능하게 하는 프로토콜입니다.초기 연결은 HTTP로 시작하지만, 이후에는 소켓을 통해 지속적으로 통신합니다.HTTP 프로토콜을 업그레이드해서 사용합니다.브라우저와 서버 간에 빠른 실시간 데이터 송수신이 가능합니다. ✅ 소켓 vs WebSocket 차이 정리항목소켓(Socket)웹소켓(WebSocket)개념네트워크 통신의 기본 단위웹 실시간 통신을 위한 프로토콜사..
-
쿠키 사용 시 CSRF 취약점 대응을 위한 설명!Web 2025. 4. 25. 17:18
🍪 웹 개발자가 꼭 알아야 할 쿠키(Cookie) 속성 정리웹 보안과 인증에서 쿠키는 매우 중요한 역할을 합니다. 특히 SameSite 속성은 CSRF 공격을 방어하기 위해 꼭 알아야 하는 요소입니다. 이 글에서는 웹 개발자가 실무에서 자주 다루는 쿠키 속성들을 정리해보았습니다.✅ 쿠키 속성 총정리 속성설명 Name=Value쿠키의 이름과 값 Domain쿠키가 유효한 도메인 Path쿠키가 전송될 URL 경로 Expires / Max-Age쿠키의 만료 시간 설정 SecureHTTPS에서만 쿠키를 전송 HttpOnlyJavaScript로 쿠키 접근 차단 (XSS 방지) SameSiteCross-site 요청 시 쿠키 전송 여부 결정 (CSRF 방지)🔐 SameSite 속성 설명SameSit..
-
CSRF 취약점과 방어 방법에 대해 알아보자!Web 2025. 4. 25. 17:15
✅ CSRF는 언제 발생하고, RESTful API에서는 안전한가?CSRF(Cross-Site Request Forgery)는 웹 보안에서 자주 언급되는 취약점입니다. 많은 개발자들이 궁금해하는 부분 중 하나가 "RESTful API는 CSRF에 안전한가?"입니다. 이 글에서는 그에 대한 정확한 설명과 주의할 점들을 정리해봅니다.🔍 CSRF는 어떤 상황에서 발생하나요?CSRF는 브라우저가 인증 정보를 자동으로 서버에 전송할 때 발생합니다. 즉, 쿠키 기반 세션 인증 방식이 대표적인 예입니다. 조건설명 쿠키 기반 세션 인증브라우저가 요청 시 쿠키를 자동 전송 서버가 세션 유지상태(stateful) 기반 인증 로그인 상태 유지 중공격자가 위조 요청을 보낼 수 있음✅ REST API는 CSRF에 안전..
-
무료 WYSIWYG(위지윅) 에디터 알아보자!Web 2025. 4. 25. 16:49
✅ 무료로 사용할 수 있는 WYSIWYG 에디터 추천웹 프로젝트나 블로그에서 사용할 수 있는 무료 WYSIWYG 에디터를 소개합니다. HTML 변환은 물론, 보안과 확장성도 고려해 선택해 보세요.1. Toast UI Editor 마크다운 기반의 에디터 React, Vue, JS 지원 보안 필터링 내장 GitHub 바로가기2. TinyMCE 전통적인 HTML WYSIWYG 에디터 플러그인 확장 쉬움 기본 무료, 상용 플랜 있음 공식 사이트3. Quill 빠르고 가벼운 에디터 오픈소스 / 커스터마이징 용이 공식 사이트4. CKEditor 5 완성도 높은 UI 마크다운 & HTML 지원 무료 플랜 + 상용 플랜 공식 사이트자신의 프로젝트에 맞는 에디터를 선택하고, XSS 필터링 기능..
-
위지윅(WYSIWYG) 에디터와 XSS 취약점에 대해 알아보자Web 2025. 4. 25. 16:21
✅ WYSIWYG 에디터와 XSS 취약점, 그리고 안전하게 사용하는 방법웹 개발에서 위지윅(WYSIWYG: What You See Is What You Get) 에디터는 텍스트를 HTML 형태로 손쉽게 작성할 수 있어 매우 유용합니다. 하지만 이 편리함 뒤에는 XSS(Cross-Site Scripting) 취약점이라는 보안 위협이 숨어 있습니다. 이번 글에서는 왜 이러한 취약점이 생기는지, 그리고 이를 어떻게 방지할 수 있는지에 대해 알아봅니다.🔍 1. 왜 XSS 취약점이 발생하나요? (예시 포함)WYSIWYG 에디터는 사용자가 입력한 내용을 HTML로 변환해서 저장합니다. 이 과정에서 악성 스크립트가 필터링되지 않으면, 브라우저가 이를 실행하게 되어 XSS가 발생합니다.📌 예시 상황이 코드가 필터링..
-
TCP 3-Handshake 에 대해 알아보자!Web 2025. 4. 22. 13:50
TCP 3-Way Handshake란? TCP(Transmission Control Protocol)는 신뢰성 있는 데이터 전송을 보장하는 연결 지향적인 프로토콜입니다. TCP 연결을 설정하는 과정은 3-Way Handshake라는 3단계 과정으로 이루어집니다. 이 과정은 두 컴퓨터 간의 연결을 확립하고, 데이터가 안전하게 전송될 수 있도록 준비하는 중요한 단계입니다.1. 3-Way Handshake란? TCP 3-Way Handshake는 클라이언트와 서버 간의 신뢰성 있는 연결을 설정하는 과정으로, 총 세 단계로 이루어집니다. 이 과정에서 서로 간에 연결 요청, 승인, 확인 메시지를 주고받습니다.2. 3-Way Handshake 단계 Step 1: SYN (Synchronize) 요청 ..