전체 글 240

Access Token/Refresh Token 저장 위치

발급 방법과 토큰 종류에 따라 사용처와 보안 요구 사항이 다르기 때문에 저장 위치를 생각해보고자 합니다. 발급 방법발급 방법은 2가지가 있습니다.구성원 계정으로 인증(OAuth): 개인별로 발급되며, 사용자가 로그인할 때 발급되고 로그아웃 시 만료됩니다.서비스 계정으로 인증(JWT): 서버가 발급. 도메인별로 하나만 발급되며, 여러 사용자 요청에 공통으로 사용됩니다.서비스 계정과 사용자 계정은 인증 방식이 다르고 목적도 다르기 때문에 각각의 Access Token을 따로 관리하고 저장해야 합니다. (두 가지 토큰은 다른 API 접근 권한 가짐.)*Access Token은 사용자 정보를 담고 있는 토큰. api가 어떤 방식으로 발급된 토큰인지 구분 할 수 있습니다. 토큰의 종류여기서는 Access Toke..

study/보안 2024.12.01

저장소 비교

토큰 저장을 위해 각 저장소를 비교해보았습니다.저장소 종류서버 측 저장소:  세션(Session), 정적 변수(Static Variable), 데이터베이스(Database), 메모리 캐시(Memory Cache), 클라이언트 측 저장소(브라우저에 저장): 쿠키(Cookie), 세션 스토리지 (Session Storage), 자바스크립트 Static 변수저장소장점단점사례세션 (Session)- 웹 애플리케이션에서 클라이언트 상태 유지- 각 클라이언트마다 별도의 세션 관리- 서버 메모리 사용량 증가- 세션 만료 시 정보 소실인증 정보, 사용자 설정정적 변수 (Static Variable)- 여러 인스턴스 간 데이터 공유 가능- 빠른 접근 속도- 멀티스레딩 환경에서 데이터 경쟁 문제 발생 가능- 애플리케이션 ..

study/보안 2024.12.01

router 네비게이션 가드(Navigation Guards)

Vue Router에서 네비게이션 가드(Navigation Guards)는 사용자가 페이지(라우트) 간 이동할 때 특정 조건을 확인하거나 동작을 수행할 수 있는 메커니즘입니다. 주로 인증과 권한 제어를 위해 사용됩니다. 1. 네비게이션 가드의 종류1-1. 전역 가드 (Global Guards)전역적으로 모든 라우트 변경에 대해 작동합니다.beforeEach라우팅이 시작되기 전에 실행됩니다.주로 인증 또는 권한 확인에 사용됩니다.router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 인증이 필요하지만 인증되지 않았으면 로그인 페이지로 이동 } else { ..

Frontend/vue3 2024.12.01

git 레포지토리 병합

기존 frontend레포지토리를 backend프로젝트와 root프로젝트에 합치려고 하는데frontend 레포지토리 삭제 후 root에서 새로 레포지토리를 만들면 그동안 커밋 기록이 삭제됩니다.frontend 프로젝트에 커밋했던 히스토리를 유지한 채 합치려고 합니다. **병합 완료한 레포지토리는 삭제**만약 별도 레포지토리로 유지하며 관리할 경우 subtree나 submodule 방식을 이용합니다!! 1. root 레포지토에 frontend 추가실행 이후 root레포지토리의 staged Changes에 frontend 파일이 추가된다.#root 경로에서#frontend라는 이름의 디렉토리를 스테이징(staging) 상태에 추가git add frontend 2. frontend 레포지토리의 master 브랜..

tool/git 2024.11.30

[MariaDB] 외래키 생성/삭제 방법

1. foreign key 추가1-1. 테이블과 동시에 생성 예제이름 자동 생성CREATE TABLE comments( comment_id INT AUTO_INCREMENT NOT NULL PRIMARY KEY, post_id INT NOT NULL, -- ... FOREIGN KEY(post_id) REFERENCES post(post_id)) 1-2. 테이블이 이미 있을 때 외래키 추가 예제ALTER TABLE commentsADD CONSTRAINT fk_post_idFOREIGN KEY (post_id) REFERENCES posts(post_id)ON DELETE CASCADE; 1-3. 외래키 삭제 옵션외래키 추가시 삭제 옵션을 지정할 수 있다.- ON DELETE CASCADE부..

SQL/RDBMS 2024.11.30

DTO 작성 방법 - Array 및 Object 타입

DTO(Data Transfer Object)는 애플리케이션의 계층 간 데이터를 간단히 전달하기 위해 사용되는 객체입니다. 특히 DTO는 데이터를 캡슐화하여 객체로 전달함으로써 데이터 일관성을 유지하고, 불필요한 비즈니스 로직을 생략함으로써 성능을 높일 수 있습니다. 이 글에서는 DTO의 작성 방법을 키워드 및 예제와 함께 설명하며, Array나 Object 타입의 필드가 포함된 경우의 작성법도 함께 다루겠습니다.1. DTO 작성의 기본 구성DTO는 주로 다음 요소로 구성됩니다.필드: DTO가 전달할 데이터. 주로 private 접근 제어자로 선언하여 외부 접근을 제한합니다.기본 생성자: 객체 생성 시 기본 상태로 생성할 수 있도록 빈 생성자를 추가합니다.게터/세터: 각 필드에 접근할 수 있도록 gett..

Backend/spring 2024.11.18

MyBatis 연결 (Spring DAO 작성 방법)

목차1. 매퍼 인터페이스 사용   *MyBatis Generator를 사용하여 생성하는 방법2. SqlSession 직접 사용 3. 어노테이션 기반 매퍼 0. 시작하기 전에0-1. Spring boot mybatis 의존성 추가pom.xml에 MyBatis 의존성을 추가합니다. org.mybatis.spring.boot mybatis-spring-boot-starter 3.0.6 0-2. Spring 공통 설정  0-3. MyBatis-Spring 통합 라이브러리 사용 준비MyBatis-Spring 통합은 Spring Framework와 MyBatis를 함께 사용하는 방식으로, 의존성 주입(DI) 및 트랜잭션 관리를 쉽게 할 수 있습니다.- applica..

Backend/spring 2024.10.30

JDBC vs SQL Mapper vs ORM

JDBC, SQL Mapper, ORM은 모두 데이터베이스와 애플리케이션 간의 상호작용을 위해 사용되는 기술들이지만, 각기 다른 추상화 수준과 개발 방식이 적용됩니다. 간단한 코드 예시와 함께 이 세 가지의 차이점을 비교해보겠습니다. 1. JDBC (Java Database Connectivity)특징직접적인 SQL 사용: JDBC는 SQL 쿼리를 직접 작성하여 데이터베이스와 통신하는 방식입니다.낮은 추상화 수준: 데이터베이스와의 상호작용을 상세하게 제어할 수 있으며, 데이터베이스 특화된 기능을 쉽게 사용할 수 있습니다.장점제어력: 모든 SQL 쿼리와 연결 관리를 세밀하게 제어할 수 있습니다.성능 최적화: 성능에 민감한 작업에서 SQL 쿼리를 최적화하기 쉽습니다.단점반복 코드: 자주 사용하는 코드(예: ..

SQL 2024.09.25

[HTML] 자바스크립트 임포트 위치

HTML 문서에서 자바스크립트 파일을 임포트하는 위치는 성능과 사용자 경험에 영향을 미칠 수 있습니다. 자바스크립트를 어디에 삽입하느냐에 따라 페이지 로딩 시간, 초기화 속도, 그리고 페이지 렌더링에 차이가 발생합니다.주요 위치와 각각의 장단점을 살펴보겠습니다.1. - 장점 자바스크립트의 조기 실행: 자바스크립트가 페이지 로딩 초기에 실행되어야 할 때 유용합니다. 예를 들어, 초기 설정이나 중요한 데이터 로드가 필요할 때 사용할 수 있습니다. - 단점렌더링 차단: 자바스크립트 파일이 로드되고 실행될 때까지 HTML 파싱이 중단됩니다. 이는 페이지의 초기 렌더링 속도를 느리게 만듭니다. 2. 태그 끝에 위치 - 장점 렌더링 최적화: HTML 파싱과 렌더링이 완료된 후에 자바스크립트를 ..

Frontend/html 2024.07.05

[JavaScript] 호이스팅(Hoisting)

호이스팅(hoisting) 이란?자바스크립트에서 변수와 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 특성입니다.선언은 스코프의 최상단으로 옮기지만, 초기화(할당)는 그 위치에서 그대로 이루어집니다.호이스팅은 함수와 변수를 다르게 처리합니다. 호이스팅(hoisting) 원인실행 컨텍스트의 생성 단계에서 변수와 함수의 선언이 미리 처리되기 때문에 발생합니다.실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 정의하며, 함수 호출 또는 전역 코드가 실행될 때마다 생성됩니다.실행 컨텍스트는 생성 단계와 실행 단계로 나뉩니다.생성 단계 (Creation Phase)변수와 함수 선언 처리: 실행 컨텍스트가 생성될 때, 자바스크립트 엔진은 먼저 현재 스코프 내의 변수와 함수 선언을 찾아서 메모..

Frontend/javaScript 2024.07.05