[개발 상식] 쿠키의 HttpOnly, Secure, SameSite

HTTP 통신 중 사용자의 중요 정보를 담고 있는 쿠키를 보호하기 위한 방법으로, 여러 쿠키 플래그가 있습니다. 그 중에서도 HttpOnly, Secure, 그리고 SameSite 플래그에 대해 자세히 알아보고자 합니다.1. HttpOnly 플래그의 역할HttpOnly 플래그는 웹 어플리케이션에서 쿠키를 더 안전하게 관리할 수 있게 도와주는 설정입니다. 이 플래그가 설정된 쿠키는 클라이언트 사이드 스크립트, 즉 자바스크립트를 통한 접근이 차단됩니다.사용자가 웹 페이지에 접속할 때 서버에서 HttpOnly 플래그를 포함한 쿠키를 전송하면, 해당 쿠키는 브라우저에 저장되지만 document.cookie를 통한 직접적인 접근은 불가능해집니다.이러한 특성 덕분에, HttpOnly 쿠키는 Cross-Site Sc..

• format_list_bulleted 개발 상식
• · 2024. 8. 15.
• textsms

[개발 상식] CDN은 무엇일까?

CDN이란? CDN은 Content Delivery Network의 약자로 웹 페이지의 로드 속도를 높혀주는 서버 네트워크입니다. 웹 페이지에서 이미지와 같은 대용량 데이터를 읽어오는데, 서버와의 물리적 거리가 멀다면 로딩되는 속도가 느릴 수 있습니다. 이와 같은 상황에서 물리적으로 가까운 CDN서버에 대용량 데이터를 저장해 빠른 웹페이지 로딩을 기대할 수 있습니다. CDN의 장점? CDN은 컨텐츠 사용자와의 물리적 위치가 가까운 서버에 데이터를 캐싱하여 빠르게 웹페이지를 보여줄 수 있습니다. 서버를 분산시키기 때문에 하나의 서버에 과도한 요청을 보내는 것을 방지해줍니다. 이로써 DDoS 완화를 할 수 있고, 대역폭을 줄여 비용을 절감할 수 있습니다.

• format_list_bulleted 개발 상식
• · 2024. 3. 2.
• textsms

[객체 지향] 코드를 재사용 하기위한 상속과 조합

우아한 테크코스 2주차 입니다. 이번 미션에서는 조합과 상속에 대해서 공부했습니다! ❗중복 코드 발생 class Lotto { constructor(numbers) { if (numbers.some((number) => number > MAX_NUMBER || number < MIN_NUMBER)) { throw new Error("로또 번호는 1~45 사이의 정수여야 합니다."); } if (numbers.length !== 6) { throw new Error("로또 번호는 6개여야 합니다."); } if (numbers.length !== new Set(numbers).size) { throw new Error("로또 번호는 중복되지 않아야 합니다."); } this.#numbers = number..

• format_list_bulleted 개발 상식/객체 지향 & 설계
• · 2024. 2. 23.
• textsms

[개발 상식] 쿠키, 세션, 토큰 어떤 차이일까?

이번 글은, 세션과 토큰의 차이점을 공부하며 정리한 글입니다. 세션과 토큰의 차이점을 알고, 적시에 사용할 수 있는 프로그래머가 되어 봅시다! 우선 세션과 토큰을 설명하기 앞서, 쿠키라는 개념을 짚고 넘어가 봅시다. 🍪쿠키(Cookie)? 쿠키는 브라우저에 데이터를 저장하는 것을 말합니다. 모든 브라우저는 ‘요청’ 을 보내고, ‘응답’을 받게 되는데요, 이 때 브라우저가 요청을 보낼 때 보내야할 데이터가 있다면 함께 보낼 수 있게 됩니다. 요청 시 쿠키 데이터를 함께 보낼 수 있게 되는 것이죠. 이렇게 쿠키에 저장된 값 덕분에 인증은 물론, 다양한 정보를 저장할 수 있어 페이지가 이동되거나, 브라우저를 닫고 열어도 데이터를 기억할 수 있다는 것이죠. 일반적으로 쿠키는 유효기간을 가지고 있으며, 개발 환경..

• format_list_bulleted 개발 상식
• · 2023. 11. 23.
• textsms

[디자인 패턴] 프록시(Proxy) 패턴. 자바스크립트 프록시

❓프록시 패턴? 프록시(proxy)는 대리인, 대리자라는 뜻으로, 다른 객체의 접근 제어를 위한 구조 디자인 패턴입니다. 객체가 전달되는 중간 단계에 대리자를 위치시켜 무언가를 수행할 수 있도록 합니다. 하나의 객체를 두 개로 나눠 재구성하여, 실체 객체를 가로챌 수 있습니다. 여기서 특징은, 두 개로 나뉜 두 객체의 인터페이스는 같다는 것입니다. ❗프록시 패턴의 예시 (JS) // 실체 객체 class RealObject { performAction() { console.log("실체 객체 작동"); } } // 프록시 객체 class ProxyObject { constructor(realObject) { this.realObject = realObject; } performAction() { cons..

• format_list_bulleted 개발 상식/디자인 패턴
• · 2023. 11. 22.
• textsms

[디자인 패턴] 플라이웨이트(Flyweight) 패턴

❓플라이웨이트 패턴? 플라이웨이트는 각 객체의 공통된 부분들을 공유하여 사용할 수 있도록 하는 디자인 패턴입니다. 이름의 뜻처럼, fly(가볍다) weigth(무게) 즉 무게를 가볍게 하는 것으로, 공유를 통해 자원을 효율적으로 사용할 수 있습니다! 여기서 자원은 메모리를 말하는데요, 여러 객체가 동일한 데이터를 가지고 있을 때 이를 같은 참조 값으로 공유함으로써 메모리를 줄일 수 있게 되는 것이죠! ❗플라이웨이트 패턴의 예시 (JS) // 플라이웨이트 패턴을 구현할 플라이웨이트 객체 (공유 객체) class TextStyle { constructor(font, size, color) { this.font = font; this.size = size; this.color = color; } } // 텍스..

• format_list_bulleted 개발 상식/디자인 패턴
• · 2023. 11. 21.
• textsms