Web
-
무료 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) 요청 ..
-
HTTPS 통신시 암호화 범위에 대해 알아보자!Web 2025. 4. 22. 13:48
HTTPS 통신에서 암호화되는 범위는 어디까지일까? 웹사이트에 접속할 때 주소창에 https://가 보인다면, 해당 통신은 TLS(SSL) 기반으로 암호화되고 있다는 뜻입니다. 그렇다면 HTTPS는 실제로 어떤 정보를 암호화하고, 어떤 정보는 암호화되지 않을까요? 이 글에서 간단히 정리해보겠습니다.1. HTTPS는 어떻게 동작할까? HTTPS는 HTTP + TLS 조합으로, TLS(Transport Layer Security) 프로토콜이 중간자 공격이나 패킷 스니핑으로부터 통신을 보호합니다. 이때 HTTP의 내용 전체가 TLS를 통해 암호화되어 전송됩니다.2. 암호화되는 정보 HTTP Header: User-Agent, Authorization, Cookie 등 포함 HTTP Body: POS..
-
JWT(Json Web Token)에 대해 알아보자!Web 2025. 4. 22. 13:42
JWT(Json Web Token)의 장단점과 사용 시 주의할 점 JWT(Json Web Token)는 웹 인증 및 정보 전달에 자주 사용되는 토큰 기반 인증 방식입니다. 특히 무상태(Stateless) 인증 방식으로 백엔드 서버의 부담을 줄여주는 장점이 있어, 많은 현대 웹 애플리케이션에서 사용되고 있습니다.1. JWT란? JWT는 Header.Payload.Signature 구조를 가진 문자열로, 주로 사용자의 인증 정보를 담아 서버-클라이언트 간 전달하는 데 사용됩니다.eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxMjMsInJvbGUiOiJ1c2VyIn0.dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk Heade..
-
OSI 7계층과 TCP/IP 4계층의 차이?Web 2025. 4. 22. 13:26
OSI 7계층과 TCP/IP 4계층 모델의 이해와 차이점 컴퓨터 네트워크를 이해하기 위해 가장 기초적이면서도 중요한 개념이 바로 계층 모델입니다. 네트워크 통신을 계층화해서 설명한 대표적인 모델로는 OSI 7계층과 TCP/IP 4계층이 있습니다. 이 글에서는 두 모델이 무엇인지, 각각의 계층은 어떤 역할을 하는지, 그리고 어떤 차이가 있는지 정리해보겠습니다.1. OSI 7계층이란? OSI(Open Systems Interconnection) 7계층 모델은 국제표준화기구(ISO)에서 제정한 네트워크 통신 모델로, 통신 과정을 7단계로 나누어 설명합니다. 1계층 - 물리 계층: 전기적 신호, 케이블, 커넥터 등 물리적 전송 2계층 - 데이터 링크 계층: MAC 주소 기반 프레임 전송, 오류 감지 ..
-
OSI 7 계층과 TCP, HTTP 의 이해Web 2025. 4. 22. 13:21
TCP와 HTTP의 차이점 이해하기 전에 알아야 할 OSI 7계층인터넷 통신을 이해하려면 먼저 OSI 7계층(Open Systems Interconnection Model)을 알아야 합니다. 이 모델은 네트워크 통신을 7단계로 나누어 각 계층이 수행하는 역할을 정의합니다.1. OSI 7계층이란? OSI 7계층은 네트워크에서 데이터가 전송되는 과정을 논리적으로 7단계로 나눈 모델입니다. 각 계층은 독립적으로 동작하며, 상위 계층과 하위 계층 간의 인터페이스를 통해 데이터를 전달합니다. 1계층 - 물리 계층 (Physical): 전기 신호, 케이블, 하드웨어 연결 등 물리적인 데이터 전송 2계층 - 데이터 링크 계층 (Data Link): MAC 주소를 이용한 프레임 전송, 오류 감지 3계층 - 네트..
-
[WEB] HTTP/1.1 이랑 HTTP/2 비교 해 보자!Web 2025. 4. 21. 14:46
✅ HTTP/1.1 vs HTTP/2 비교 항목 HTTP/1.1 HTTP/2 멀티플렉싱 불가능 가능 헤더 압축 없음 있음 (HPACK) 요청 순서 순차 처리 병렬 처리 서버 푸시 없음 가능 연결 수 다수 필요 하나의 연결로 처리 🌐 클라이언트: Axios 예제📦 HTTP/1.1 기본 사용axios.get('http://localhost:8080/api/data') .then(response => { console.log(response.d..