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

이번 글은, 세션과 토큰의 차이점을 공부하며 정리한 글입니다. 세션과 토큰의 차이점을 알고, 적시에 사용할 수 있는 프로그래머가 되어 봅시다! 우선 세션과 토큰을 설명하기 앞서, 쿠키라는 개념을 짚고 넘어가 봅시다. 🍪쿠키(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

[디자인 패턴] 파사드(Facade) 패턴

❓파사드 패턴? 파사드 패턴이란, 복잡한 시스템, 서브 시스템을 단순한 인터페이스로 감싸, 클라이언트가 해당 시스템을 쉽게 사용할 수 있게 해주는 것을 말합니다. ‘싱글턴 추상 팩토리’ 라고 불리기도 합니다. 객체지향 개발 방식에서는 하나의 모듈을 작은 단위로 분리하고, 클래스로 캡슐화하며, 작게 분리된 모듈은 다른 기능 구현에도 재사용됩니다. 이 과정에서 수많은 클래스가 생성되고 객체는 복잡한 관계를 가지게 되는데요, 파사드 패턴을 이용해 이 복합한 객체 연결 구조 사이에 인터페이스를 두어서 시스템간 의존성 관리를 할 수 있고, 이는 느슨한 결합을 유지시켜줍니다. 파사드로 인해 새로운 계층이 추가되어, 객체 사이의 결합도를 낮추어 유연한 구조를 가질 수 있습니다. 특히 파사드 패턴은, 클라우드, 서비스..

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

[React] State가 변경 되었는데, 재 렌더링이 안된다면?

useState를 잘못 사용하여 재 렌더링이 되지 않는 상황을 마주쳤습니다. 기본적인 부분이라고 생각하지만, 저와 같은 실수를 하시는 분이 있으실 수 있어 블로그 포스팅을 해봅니다! ❓React 요소가 재 렌더링 되는 시점? 기본적으로 React의 요소가 재 렌더링 되는 경우는 다음과 같습니다. State가 변경되었을 때 Props가 변경 되었을 때 부모 컴포넌트가 재 렌더링 될 때 컨텍스트(useContext 훅을 사용하여)에 의존하고 있는 경우 컨텍스트 값이 변경될 때 네 가지 상황에서 재 렌더링이 실행됩니다. 그런데 제가 마주친 상황은 State가 변경되었음에도, 재 렌더링이 되지 않는 상황이었습니다. //... const [files, setFiles] = useState([]); const in..

• format_list_bulleted Front End/React
• · 2023. 11. 18.
• textsms

[디자인 패턴] 장식자(Decorator) 패턴

❓장식자 패턴? 동적 기능을 추가하기 위해 구조를 개선하는 패턴입니다. 장식자 패턴은 어댑터 패턴과도 비슷한 개념입니다. 래퍼(Wrapper) 구조를 사용한다는 점에서 비슷한데요, 두 패턴의 목적성은 조금 다릅니다 어댑터 패턴 : 서로 다른 인터페이스의 통일 장식자 패턴 : 동적 기능을 추가함으로써 기능을 확장 이런 목적성을 가지는데요, 실제 프로그램에서는 딱 구분되는 것이 아니기 때문에 이렇구나 생각하고 넘어가겠습니다! 어댑터 패턴은 아래 글을 참고해주세요! [디자인 패턴] 어댑터(Adapter) 패턴 ❓어댑터 패턴? 어댑터 패턴은 구조 패턴으로, 다른 말로 래퍼(Wrapper) 패턴이라고도 합니다. 연관성 없는 2개의 객체를 묶어서 인터페이스를 만들어 주는 패턴을 말하는데요, 이를 통해 서로 연 lu..

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