분류 전체보기 (116) 썸네일형 리스트형 [Auth] - Jwt 토큰 인증, 세션(서버) 방식 인증 개념 -Topic-1. 토큰 인증, 세션(서버)인증 개념2. Jwt 개념 Why 웹 애플리케이션은 [ 회원 / 비회원 ], [ 회원 등급 기준] , [ 일반 사용자 / 관리자 ] 등의 특정 인증 사용자에게만 페이지 접근이 가능하도록 하는 등의 권한 제어가 필요한 경우가 많다. 이 때, 어떻게 접근자A 가 어떤 상태를 갖는지 확인하는 인증 방법이 필요하고, 주로 사용되는 방식으로 사용자 세션 기반 인증과 토큰 인증 방식이 있다. 🔗세션(서버) 기반 인증 - stateful세션 방식의 주요 특징은 사용자가 로그인 시 세션ID를 생성하고 사용자 브라우저에 저장 및 서버의 DB에 저장하고, 사용자가 권한이 필요한 기능을 실행할 때, 브라우저에 저장된 세션 ID가 포함된 요청을 서버에 보내게 되면 DB에 해당 세션.. 2024. 12. 5. 21:01 [ Svelte 5 ] - 2. 상태 관리 Rune 정리 & Rune store subscribe 흉내 내보기 Topic = Svelte5 Rune API 정리 해보기. Rune 이란? Rune은 Svelte 5 부터 도입된 반응성 시스템을 제공하는 구문으로 상태, 상태 이벤트, 종속성 등의 기능을 함수 형태로 캡슐화 하여 제공하는 것 이다. 상태 - $state, $derived상태관리 Rune 으로 정의한 변수는 DOM 반응성을 갖게 되어 변경이 발생하면 자동으로 DOM 이 업데이트 된다.$state(), $derived() 를 통해 각각 상태, 파생된 상태를 정의할 수 있다.변수 값이 1 이었던 count 변수의 값이 2로 바뀌면 기존 DOM 에서 보이던 1 을 2 로 업데이트 해주어야 한다. 이때 변수를 $state() 를 통해 상태로 정의해두면, 해당 상태의 값이 바뀔 때 자동으로 DOM이 업데.. 2024. 11. 28. 23:45 [ Svelte5 ] - 1. 기본 Svelte 컴포넌트 구성 요소, HTML 템플릿 문법 Topic = Svelte의 HTML 요소에 script 변수들을 바인딩하는 방법 정리해보기. 1. Svelte 컴포넌트 구성요소기본적인 Svelte의 구성요소는 다음과 같다 script 태그컴포넌트의 JS 로직과 상태를 정의하는 영역. 를 통해 ts 적용 가능.HTML 템플릿 영역 - main 태그 ( 생략 가능 )HTML 요소가 위치하는 영역으로 scipt 태그, style 태그 영역 외 영역이 HTML 템플릿 영역으로, 태그를 통해 명시적으로 HTML 템플릿 영역을 지정할 수도 있다.style 태그컴포넌트 내, 외부의 요소 스타일을 정의하는 영역기본적인 style 태그 내 스타일 속성은 해당 컴포넌트 내부에만 적용된다.전역 스타일 적용도 가능하다 ➡️ :global() 함수로 전역 스타일 속성.. 2024. 11. 26. 19:29 [메모] Svelte + SortableJS Dom 중복 업데이트 오류 오류 현상 실제로 값이 2개가 추가되는 것이 아닌, Sortable JS 의 DOM 업데이트와 Svelte의 반응성이 더해져 2개의 데이터가 추가되는 것 처럼 보이는 현상. [ 해결 코드 ]onAdd(event) { this.el.removeChild(event.item)}, [ Sortable 전체 코드 ]Sortable 객체 내부의 onAdd(event) {} 로직을 통해서 add 이벤트로 인해 요소가 추가되는 toList에 생성될 요소를 제거하는 로직을 추가해서 해결되었다. DOM 업데이트와 관련된 버그들 디버깅이 상당히 어려운 느낌이다. 강의 버전인 Svelte 3,4 버전과 현재 사용중인 Svelte 5 와 버전 차이로 인한 문제들은 많았는데, 자주 사용할 것 같은 라이브러리 관련 오류라 .. 2024. 11. 24. 20:45 [ GOF ] 브릿지 패턴 - Bridge Pattern 개념 Topic = 브릿지 패턴의 개념을 자세하게 알아보자.브릿지 패턴🔑 패턴 의도브릿지 패턴은 독립적으로 확장할 수 있는, 밀접하게 관련된 두 개 이상의 차원을 가진 하나의 계층 구조를 두개의 개별 계층구조 ( 추상부, 구현부 ) 로 나눈 후 각각 독립적으로 확장 및 수정할 수 있도록 하는 구조 디자인 패턴이다. 🌟bridge 패턴의 핵심은 하나의 계층 구조를 추상부, 구현부로 나누는 것 [ ❓브릿지 패턴의 적절한 적용 대상 : 두 개 이상의 차원을 가진 하나의 계층 구조 ]두 개 이상의 차원을 가진 하나의 계층 구조는, 조금 풀어서 정리하면 이해가 될 것 같다. 먼저 브릿지 패턴의 예시를 검색해보니 대부분 아래 케이스에 해당했다.[ 구현부 : 윈도우, Mac, Linux ] , [ 추상부 : OS에 .. 2024. 10. 29. 13:54 [ GOF ] 파사드 패턴 - Facade Pattern with Kotlin Topic = Facade 패턴의 의도와 개념에 대해서 정리해보기 🔑 Purpose복잡한 서브시스템의 단순화 ⇒ 구성과 사용의 분리여러 개의 객체가 복잡하게 상호작용 하는 경우, 이러한 상호작용을 관리하는 하나의 간단한 객체로 분리하여 클라이언트 단에서 복잡한 상호작용을 제어하지 않고 파사드 객체를 통해 기능을 간단하게 사용할 수 있다.왜 Facade 패턴을 사용해야 할까? [ 요구사항 ]주문 요청 로직결제 로직관리자 - 신규 주문 알림[ Facade 패턴 미적용 예시 코드 ]class Order { fun startOrder() { // 주문 요청 로직 }}class Purchase { fun startPurchase() { // 결제 로직 }}cla.. 2024. 10. 15. 12:25 [ GOF ] 상태 패턴 - State Pattern with Kotlin Topic = 상태 패턴의 개념에 대해서 학습해보고 Kotlin에서 적용 예시를 만들어보기. 🔑 Purpose객체의 상태를 캡슐화한 클래스들로 분리하여, 복잡한 조건문을 사용하지 않고, 위임을 통해 객체의 상태에 따라 다른 행동을 할 수 있도록 한다. Why 위 예시 사진 이미지와 같이 TodoList의 각각의 할 일들의 개별 속성 ( 마감기한, 선택목록, 체크박스, 텍스트, 백분율 등 ) 의 표기는 해당 객체의 속성이 날짜면 날짜 데이터만을 표기하고, 백분율은 숫자만을 표기하며 %로 표기하는 등 각각의 상태에 따라 다른 표기 방식을 갖게 된다. 위 상황을 상태 패턴을 적용하지 않은 코드로 일부분을 작성해보면 다음과 같이 작성할 수 있다.import io.github.oshai.kotlinlog.. 2024. 10. 10. 14:31 [ GOF ] 싱글톤 패턴, object - Singleton Pattern with Kotlin Topic = 싱글톤 패턴 개념과 정적 매소드 - Kotlin object, companion object 싱글톤 구현 방식 정리 🔑 Singleton Purpose클래스에 인스턴스가 하나만 있도록하여서 생성된 하나의 인스턴스에 대한 전역 접근을 제공하는 것. 싱글톤 패턴 개념 싱글톤 패턴은 여러 클래스에서 특정 클래스 A 객체를 생성할 때마다 새로운 A클래스의 인스턴스를 생성하는 것이 아닌, 이미 생성된 하나의 클래스 A 인스턴스를 여러 클래스에서 접근하여 사용하도록 하는 것으로 전역 접근을 통해 메모리 효율성, 클래스 메서드 사용의 편의성을 제공한다. [ 정적 메서드와 싱글톤은 다르다. ]정적 메서드정적 메서드는 클래스에 속하고, 인스턴스를 생성하지 않고도 호출할 수 있는 메서드이다.정적 메서드.. 2024. 10. 8. 20:19 이전 1 2 3 4 ··· 15 다음
