comet_strike.log

12. Spring, Spring Boot

Tue, 30 Jan 2024 12:38:24 GMT

Spring

스프링이란 POJO(Plain Old Java Object)를 통해 자바 애플리케이션을 쉽게 만들 수 있도록 도와주는 프레임워크

Spring Framework is a Java platform that provides comprehensive infrastructure support for developing Java applications. Spring handles the infrastructure so you can focus on your application.

Spring Framework는 Java 애플리케이션 개발을 위한 포괄적인 인프라 지원을 제공하는 Java 플랫폼입니다. Spring은 인프라를 처리하므로 애플리케이션에 집중할 수 있습니다.

Spring enables you to build applications from “plain old Java objects” (POJOs) and to apply enterprise services non-invasively to POJOs. This capability applies to the Java SE programming model and to full and partial Java EE.

Spring을 사용하면 POJO(Plain Old Java Object)에서 애플리케이션을 구축하고 POJO에 엔터프라이즈 서비스를 비침투적으로 적용할 수 있습니다. 이 기능은 Java SE 프로그래밍 모델과 전체 및 부분 Java EE에 적용됩니다.

Introduction to Spring Framework - spring.io

https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/overview.html

프레임워크

프레임워크란 복잡한 문제를 해결하거나 서술하는 데 사용되는 기본 개념 구조이다.

소프트웨어 프레임워크 - 위키백과

https://ko.wikipedia.org/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC

프레임워크란 프로젝트에서 사용할 수 있는 뼈대가 되는 코드의 집합을 의미한다.

라이브러리

주로 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다.

라이브러리(컴퓨팅) - 위키백과

https://ko.wikipedia.org/wiki/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC_(%EC%BB%B4%ED%93%A8%ED%8C%85)

라이브러리란 혼자서 동작하는 완전한 프로그램이 아닌, 특정한 부분 기능만을 수행하도록 제작된 프로그램이다.

Spring 특징

POJO 프로그래밍 지향

POJO는 자바 언어 사양 외에 어떠한 제한에도 묶이지 않은 자바 오브젝트라 할 수 있다. 특정 자바 모델이나 기능, 프레임워크 등을 따르지 않은 자바 오브젝트를 지칭하는 말로 사용되었다.

Plain Old Java Object - 위키백과

https://ko.wikipedia.org/wiki/Plain_Old_Java_Object

IoC

Inverse Of Control, 제어의 역전이란 프로그래머가 작성한 프로그램이 재사용 라이브러리의 흐름 제어를 받게 되는 소프트웨어 디자인 패턴을 의미한다.

전통적인 프로그래밍에서는 프로그래머가 작성한 프로그램이 외부 라이브러리 코드를 호출하지만, IoC가 적용된 구조에서는 외부 라이브러리의 코드가(프레임워크) 프로그래머가 작성한 코드를 호출한다.

제어권이 프로그래머가 작성한 프로그램에서 프레임워크로 역전된다.

DI

Dipendency Injection, 의존성 주입이란 제어의 역전의 방법 중 하나로, 사용할 객체를 직접 생성하지 않고 외부 컨테이너가 생성한 객체를 주입받아 사용하는 방식을 의미한다.

스프링 부트 핵심 가이드

https://www.yes24.com/Product/Goods/110142898

AOP

Aspect of Programing, 관점 지향 프로그래밍으로 관점이란 어떤 기능을 구현할 때 핵심 기능, 부가 기능으로 구분해 각각을 하나의 관점으로 보는 것을 의미한다.

핵심 기능이 비즈니스 로직이라면 부가 기능은 로깅, 트랜잭션 등의 코드가 될 수 있다.

AOP 방식이 아닌경우 한 기능에 핵심 기능 + 부가기능으로 개발해야 한다. 개발해야하는 기능이 여러개라면 각 기능마다 부가기능을 개발해야한다. 부가 기능(로깅, 트랜잭션)등은 공통 코드가 많으므로 비효율적이다.

AOP 방식을 이용한다면 핵심 기능이 어떤 기능인지와 무고나하게 해당 기능이 수행되기 전, 후로 부가 기능을 수행할 수 있다. 여러 비즈니스 로직에서 반복되는 부가 기능을 하나의 공통 로직으로 처리하도록 모듈화 해 사용하는 방식을 AOP라 한다.

스프링 부트 핵심 가이드

https://www.yes24.com/Product/Goods/110142898

Spring Boot

스프링 프레임워크는 기존 개발 방식의 문제와 한계를 극복하기 위해 다양한 기능을 제공하지만 설정이 복잡하다. 스프링 부트는를 이용해 기존의 복잡한 설정을 간편하게 처리해주는 별도의 프레임워크이다.

스프링 부투는 내장 웹 서버가 있기 때문에 실행 시 바로 웹 서비스를 제공할 수 있다. 또한, 독립적으로 실행 가능한 Jar 파일로 프로젝트를 빌드할 수 있어 다양한 환경에서 배포할 수 있다.

11. CORS, CSRF 해결

Sun, 05 Nov 2023 11:44:42 GMT

Spring Security CORS, CSRF

CORS, CSRF가 무엇인지 부터 알아야 하겠지만, 우선 테스트가 목적이므로 간략하게 알아본 뒤 코드를 적용한다.

결론부터 말하자면 CORS는 테스트를 위해서 모든 Origin(출처)에 대해서 허용하도록 수행하고, CSRF는 Disable 상태로 변경한다.

CORS

CORS는 Cross Origin Resuorce Sharing의 약자로 교차-출처 리소스 공유로 다른 출처 사이에 정보를 공유하게 되면 발생하는 정책이다.

출처는 Protocol, Host, 포트번호를 의미한다. 따라서 프론트 주소인 localhost:3000와 백엔드 주소인 localhost:8080은 서로 다른 출처가 되게 되어 CORS 정책에 의해 차단된다.

CORS가 없을 경우, CSRF(Cross Site Request Forgery) 문제가 발생한다.

CORS란 무엇인가요? - amazon

https://aws.amazon.com/ko/what-is/cross-origin-resource-sharing/
CORS는 왜 이렇게 우리를 힘들게 하는걸까?

https://evan-moon.github.io/2020/05/21/about-cors/
CSRF 공격이란? 그리고 CSRF 방어 방법

https://itstory.tk/entry/CSRF-%EA%B3%B5%EA%B2%A9%EC%9D%B4%EB%9E%80-%EA%B7%B8%EB%A6%AC%EA%B3%A0-CSRF-%EB%B0%A9%EC%96%B4-%EB%B0%A9%EB%B2%95

CSRF

CSRF(Cross Site Request Forgery) - 사이트 간 요청 위조. 어떤 서버에서 인증된 브라우저의 정보를 공격자가 만든 악성 페이지를 통해 사용하여 사용자 모르게 공격을 수행한다.

쿠키를 통한 CSRF 공격이 수행되기 때문에 쿠키나 세션에 의존하지 않는 REST API, JWT를 사용하면 비교적 안전하다. 그래도 CSRF를 disable할 경우 보안 취약점이 생길 수 있으므로 주의해야 한다.

CSRF(Cross-Site Request Forgery) 공격과 방어

https://junhyunny.github.io/information/security/spring-boot/spring-security/cross-site-reqeust-forgery/

Spring Security CORS, CSRF 예외 적용

SecurityFilterChain에 CORS, CSRF 예외 정책을 적용한다.

SecurityConfig.java 파일을 생성하고. Configuration 어노테이션 등을 붙여준다. 이후 Security FilterChain에 cors, csrf 예외 코드를 적용한다. CorsConfigurationSource를 생성해서 모든 Origin을 허용하도록 적용시키고 csrf.disable()을 통해 csrf를 비활성화 시킨다. (csrf 활성화 되어 있는 경우 403 Error 발생)

이후 실행하면 정상적으로 값을 가져오는 것을 확인할 수 있다.

GitHub

수정 사항 Git 반영.

전체 코드

SecurityConfig.java

package com.toyproject.toyproject;

import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.Customizer;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import java.util.Arrays;

import static org.springframework.security.config.Customizer.withDefaults;

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .cors(Customizer.withDefaults())
                .csrf((csrf) -> csrf.disable());

        return http.build();
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", new CorsConfiguration().applyPermitDefaultValues());
        return source;
    }
}

tempController.java : RequestBody Parameter 수정

package com.toyproject.toyproject;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/user")
public class tempController {

    @PostMapping("/signUp")
    public String userSignUp(@RequestBody Map userInfo) {
        System.out.println("signUp");
        System.out.println(userInfo);
        return "returnValue";
        //return new ResponseEntity(Boolean.TRUE, HttpStatus.OK);
        //return new ResponseEntity(Boolean.FALSE, HttpStatus.INTERNAL_SERVER_ERROR);
    }

    @GetMapping("/test")
    public String userSignUp() {
        System.out.println("Test");
        return "Test";
    }
}

build.gradle

plugins {
    id 'java'
    id 'org.springframework.boot' version '3.1.2'
    id 'io.spring.dependency-management' version '1.1.2'
}

group = 'com.toy-project'
version = '0.0.1-SNAPSHOT'

java {
    sourceCompatibility = '17'
}

configurations {
    compileOnly {
        extendsFrom annotationProcessor
    }
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'
    implementation 'org.springframework.boot:spring-boot-starter-oauth2-resource-server'
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.kafka:spring-kafka'
    compileOnly 'org.projectlombok:lombok'
    runtimeOnly 'com.h2database:h2'
    annotationProcessor 'org.springframework.boot:spring-boot-configuration-processor'
    annotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testImplementation 'org.springframework.kafka:spring-kafka-test'
    testImplementation 'org.springframework.security:spring-security-test'
}

tasks.named('test') {
    useJUnitPlatform()
}

10. 회원가입 기능 구현 2 (Fetch API VS Axios)

Mon, 09 Oct 2023 11:56:50 GMT

이메일 양식 검사와 패스워드 양식 검사를 통과한 후 SIGN ON 버튼을 클릭 했을 때, Client는 (웹 브라우저) Server로 HTTPS / POST 방식으로 email과 password를 전송해야 한다. (물론 그 전에 email 중복 체크를 해야 한다.)

Client에서 Server로 HTTP 형식의 데이터를 전송하기 위해서 사용하는 방법으로는 Fetch API와 Axios가 잇다.

Fetch API

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다.

Fetch API 사용하기

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Axios

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트로 비동기 통신 라이브러리.

Axios Docs

https://axios-http.com/kr/docs/intro

Fetch API VS Axios

대체로 큰 차이는 없으나 Library 설치 유무 및 브라우저 지원 여부 및 사용법에 따라 결정하면 된다.

Fetch API : 라이브러리 미 설치 Axios : 라이브러리 설치, Fetch 보다 다양한 브라우저 지원

Axios vs. fetch(): Which is best for making HTTP requests?

https://blog.logrocket.com/axios-vs-fetch-best-http-requests/

기존에 Axios를 사용해 API를 개발했기 때문에 Axios를 사용할 예정이다.

Axios를 통한 회원 가입 정보 전달

Axios를 이용해서 회원 가입 정보를 Server로 (Spring Boot) 전달한다.

Axios 설치

Axios 라이브러리를 설치한다.

npm install axios

Axios 설정

Axios를 통한 통신을 관리하기 위해서 1. .env 파일을 통해 서버 URL을 설정한다.

ios를 통해서 서버와 통신하기 위해서는 서버 URL을 사용해야 한다. 매번 URL을 입력하거나, URL이 바뀔 경우 일괄적으로 처리하기 위해서 .env 파일을 생성한다.

2. util 폴더를 생성해 http 통신 관련 모듈을 관리한다.

src 폴더 밑 util 폴더를 생성하고, 폴더 밑에 http-common.js 파일을 생성해 axios 밑 http 통신에 필요한 정보를 관리한다.

3. service 폴더를 생성해 request를 관리한다.

src 폴더 밑 service 폴더를 생성하고, 폴더 밑에 필요에 따라 js 파일을 생성해 axios 요청을 생성한다. 해당 요청이 필요시에는 vue파일에서 js를 import 해서 사용한다.

1. .env 파일을 통해 서버 URL을 설정한다.

.env 파일은 프로젝트 폴더 최상위에 생성한다.

파일을 생성한후 서버 URL 주소를 입력한다. Spring Boot를 실행하게 될 경우 8080(http) 톰캣 서버가 실행되는 걸 알 수 있다. SSL 인증서가 없어 http로 실행된다. 인증서를 추가해 http ->https로 변경해 보안을 강화해야 한다.

LOCAL_DEVELOP_SERVER_URL = http://localhost:8080/

2. util 폴더를 생성해 http 통신 관련 모듈을 관리한다.

이후 src 폴더 밑에 util 폴더를 생성하고 http-common.js 파일을 생성한다. js 파일에 axios를 import 하고 통신할 서버를 설정한다.

import axios from "axios";

export default axios.create({
    baseURL: process.env.LOCAL_DEVELOP_SERVER_URL,
    headers: {
    "Content-Type": "application/json",
    },
});

3. service 폴더를 생성해 request를 관리한다.

마찬가지로 src 폴더 밑에 service 폴더를 생성하고 UserService.js를 생성한다.

import http from "@/util/http-commons"

export default class UserService {
    async postSignUp(params) {
        // params
        // userEmail : [email Type (string)]
        // passowrd : [password Type (string)]
        // return : boolean (creation result)
        return await http.post("user/signUp", params).then((data) => data.data)
    }
}

Axios를 정의한 @/util/http-commons를 호출하고 http.post 방식으로 정보를 전달한다. parmas를 매개변수로 받아서 호출 시 파라미터를 전달할 수 있도록 설정한다. [URL]/user/signUp 으로 POST 하도록 설정한다.

async와 await를 이용해서 비동기 처리를 하도록 한다.

Axios Docs - Post Example

https://axios-http.com/kr/docs/post_example

Axios Post 적용

SginUpPage.vue에서 [SIGN UP] 버튼이 눌렸을 때, Axios를 통해 POST 요청을 보내도록 적용한다. 위에서 UserService.js에 axios를 사용하기 위한 셋팅을 해두었으므로 import한 후 parameter를 적절하게 설정하면 된다.

Script 부분에서 import를 시켜준다. data에 userService를 생성하고 created 될 때, userService에 UserService 클래스를 담을 수 있도록 설정한다.

import UserService from '../service/UserService'

export default {
    created() {
        this.userService = new UserService();
    },
    data: () => ({
        form: false,
        email: null,
        password: null,
        passwordVerify: null,
        loading: false,
        userService: null,

[SIGN UP] 버튼이 눌렸을 때, methods의 onSubmit()이 호출 되므로 입력된 정보를 양식에 맞게 설정한 후 전달한다.

 methods: {
        onSubmit () {
            if (!this.form) { 
                alert('Please follow the input form')
                return
            }

            this.loading = true

            let userData = {
                userEmail : this.email,
                userPassword : this.password
            }

            this.userService.postSignUp(userData).then(data => {
                if(!!data) alert('Creation has been completed.')
                else alert('A problem has occurred.')
            })

            this.loading = false
        },

입력 양식을 체크한 후 userData 변수를 생성해서 param 양식을 맞춘다. userService에서 미리 정의해 두었던 postSignUp을 호출한다. .then을 통해서 return data에 따라 alert 메시지를 다르게 표시한다.

Vue Server Port 설정

현재 vue는 아무런 설정을 하지 않았기 때문에 localhost:8080으로 실행중이다. 포트를 변경해 포트가 겹치지 않도록 설정한다.

package.json 파일안에 "scripts" 부분을 변경한다. "serve" 부분을 변경해 실행시 포트 3000으로 실행되도록 설정한다.

  "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Spring Boot 설정

Spring Boot를 본격적으로 진행하기 전에 Axios를 통해 값이 정상적으로 넘어갔는지만 확인하기 위해 간단하게 수신만 하도록 설정한다.

Intellij를 실행해서 전에 실행했던 프로젝트를 띄운다. 임시적으로 사용할 tempController를 만들어준다.

@RestController 어노테이션을 이용해서 REST API에 사용됨을 명시한다. 이후 @RequestMapping 어노테이션을 통해서 "/user"에 해당하는 url을 가져온 후 tempController 클래스에 userSignUp의 ResponseEntity를 생성한다. return으로 Boolean 값을 설정한다.

package com.toyproject.toyproject;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/user")
public class tempController {

    @PostMapping("signUp")
    public ResponseEntity userSignUp(@RequestBody List userInfo) {
        System.out.println(userInfo);
        return new ResponseEntity(Boolean.TRUE, HttpStatus.OK);
        //return new ResponseEntity(Boolean.FALSE, HttpStatus.INTERNAL_SERVER_ERROR);
    }
}

TEST

Spring Boot 실행하고 서버가 정상적으로 작동하는 것을 확인하고 다시 테스트 진행. 테스트 결과... POST 요청 URL이 .env 설정한데로 지정되지 않는 현상으로 인해 Error가 발생했다.

console.log("url : ", process.env.LOCAL_DEVELOP_SERVER_URL)

userService.js에 console.log 추가한 후 콘솔에 출력시 undefined 발생... 구글링 결과 .env 파일에서 사용할려면 VUE_APP을 PREFIX로 지정해야 한다.

.env 파일

VUE_APP_LOCAL_DEVELOP_SERVER_URL = http://localhost:8080/

http-commons.js 파일

import axios from "axios";

export default axios.create({
    baseURL: process.env.VUE_APP_LOCAL_DEVELOP_SERVER_URL,
    headers: {
    "Content-Type": "application/json",
    },
});

UserService.js 파일

import http from "@/util/http-commons"

export default class UserService {
    async postSignUp(params) {
        // params
        // userEmail : [email Type (string)]
        // passowrd : [password Type (string)]
        // return : boolean (creation result)
        console.log("url : ", process.env.VUE_APP_LOCAL_DEVELOP_SERVER_URL)
        return await http.post("user/signUp", params).then((data) => data.data)
    }
}

파일 수정 후 실행 시 동일한 현상으로 차단되는 경우 서버를 재실행

https://stackoverflow.com/questions/55510326/vue-cli-3-environment-variables-all-undefined

실행 결과 다른 에러가 발생했다.

Network Error 발생... CORS로 인해 발생한 에러로 CORS를 설정한다. tempController 어노테이션 위에 @CrossOrigin 어노테이션을 추가한다.

tempController.java

@RestController
@RequestMapping("/user")
@CrossOrigin(origins = { "*" }, methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT, RequestMethod.DELETE} , maxAge = 6000)
public class tempController {

    @PostMapping("/signUp")
    public ResponseEntity userSignUp(@RequestBody List userInfo) {
        System.out.println(userInfo);
        return new ResponseEntity(Boolean.TRUE, HttpStatus.OK);
        //return new ResponseEntity(Boolean.FALSE, HttpStatus.INTERNAL_SERVER_ERROR);
    }
}

@CrossOrigin 어노테이션을 적용해도... 동일한 에러가 발생 찾아보니 Spring Security에서 CORS를 적용하기 위해서는 설정이 추가로 필요하다.

@CrossOrigin not working

https://www.skyer9.pe.kr/wordpress/?p=3571

Spring Security에서 CORS 설정

Spring security에서 CORS설정해서 진행할려 했지만... 최근에 업데이트가 된건지 찾았던 코드들은 모두 삭제가 되었다... Spring Boot와 Spring Security를 공부하고 CORS를 적용한 후에 테스트를 다시 수행한다.

전체 코드

1. Axios를 통한 회원 가입 정보 전달

SignUpPage.vue

.env

VUE_APP_LOCAL_DEVELOP_SERVER_URL = http://localhost:8080/

http-common.js

import axios from "axios";

export default axios.create({
    baseURL: process.env.VUE_APP_LOCAL_DEVELOP_SERVER_URL,
    headers: {
    "Content-Type": "application/json",
    },
});

UserService.js

import http from "@/util/http-commons"

export default class UserService {
    async postSignUp(params) {
        // params
        // userEmail : [email Type (string)]
        // passowrd : [password Type (string)]
        // return : boolean (creation result)
        console.log("url : ", process.env.VUE_APP_LOCAL_DEVELOP_SERVER_URL)
        return await http.post("user/signUp", params).then((data) => data.data)
    }
}

package.json

{
  "name": "toy-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@mdi/font": "5.9.55",
    "axios": "^1.5.1",
    "core-js": "^3.8.3",
    "roboto-fontface": "*",
    "vue": "^3.2.13",
    "vue-router": "^4.2.4",
    "vuetify": "^3.3.11",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-cli-plugin-vuetify": "~2.5.8",
    "webpack-plugin-vuetify": "^2.0.0-alpha.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

tempController.java

package com.toyproject.toyproject;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Map;

@CrossOrigin(originPatterns = "http://localhost:3000")
@RestController
@RequestMapping("/user")
public class tempController {

    @PostMapping("/signUp")
    public String userSignUp(@RequestBody List userInfo) {
        System.out.println(userInfo);
        return "returnValue";
        //return new ResponseEntity(Boolean.TRUE, HttpStatus.OK);
        //return new ResponseEntity(Boolean.FALSE, HttpStatus.INTERNAL_SERVER_ERROR);
    }

    @GetMapping("/test")
    public String userSignUp() {
        return "Test";
    }
}

9. 회원가입 기능 구현

Sun, 08 Oct 2023 12:19:28 GMT

회원가입 기능을 구현한다.

회원 가입 기능을 구현하기 위해서는 Passowrd 필드 아래에 입력한 Password가 맞는지 한번 더 확인하는 필드가 추가로 필요하다. v-model 또한 script에서 data로 지정이 필요하다.

회원 가입 기능 구현

Passowrd Verify를 추가한다.
Email, Password, Password Verify를 검증하는 rules를 지정하고 SIGN UP form을 활성화 시킨다.
Client에서 Server로 로그인 정보를 전송한다.

1. Password Verify 추가

Password 와 동일하게 생성하되 v-model만 다르게 지정한다.

script의 data에 passwordVerify를 생성한다. script는 Vuetify 참고 (Forms)

https://vuetifyjs.com/en/components/text-fields/

2. Email, Password, Password Verify 형식 검사

Email 형식 검사

rules를 만들어서 실시간 검증이 되도록 적용한다.

required를 통해서 필수 필드임을 나타낸다.
expertTest를 통해서 email 형식인지 검증한다.
duplicateCheck를 통해서 이미 가입된 이메일인지 확인한다.

duplicateCheck의 경우에는 emailDuplicatecheck 메소드를 생성해서 Server로 데이터를 전송하고 리턴값을 받아서 처리해야 한다. Server와 연동 후 구현 예정이라 임시적으로 true를 리턴하도록 한다.

Vuetify 방식의 실시간 검증 방식

https://sundries-in-myidea.tistory.com/130

위 내용에 따르면 rules를 이용해 실시간 검증 방식을 사용하게 되면 Server와 통신하면서 제대로 반영이 안되는 문제가 있는 것으로 판단된다. 이메일 중복 검사의 경우 버튼을 생성해 처리하던가 중복과 관련된 상태값을 추가로 설정해서 판별 후 화면에 출력하는 형태로 바꾸어야 할 거 같다.

Password 형식 검사

Password 규칙은 KISA 패스워드 선택 및 이용 안내서를 따른다.

https://www.kisa.or.kr/2060305/form?postSeq=14&page=1#fnPostAttachDownload

패스워드 생성 규칙만 정리하면 다음과 같다.

패스워드 최소 8자 이상
영문, 숫자, 특수 기호를 조합하여 사용할 수 있도록 허용

위 규칙으로만은 모호한 부분이 있어서 추가로 정보를 찾은 결과 개인정보의_기술적_관리적_보호조치_기준(제2020-5호)_해설서(2020.12월)를 참고 했다.

개인정보의_기술적_관리적_보호조치_기준(제2020-5호)_해설서(2020.12월) (클릭 시 PDF 다운로드)

https://www.privacy.go.kr/cmm/fms/FileDown.do?atchFileId=FILE_000000000841151&fileSn=0

정리하면 다음과 같다.

영문, 숫자, 특수문자 중 2종류 이상 조합 최소 10자리
영문, 숫자, 특수문자 중 3종류 이상 조합 최소 8자리
연속적인 숫자 불가

이 규칙을 참고해서 영문, 숫자, 특수문자 중 3종류 이상 조합 최소 8자리 rules를 지정한다.

            passowrd: {
                expertTest: v => {
                    const passwordExpert = /^(?=(?:[^a-zA-Z]*[a-zA-Z]))(?=(?:\D*\d))(?=(?:[^\W_]*[\W_])).{8,}$/
                    return !!passwordExpert.test(v) || 'It must be at least 8 characters and a combination of 3 or more letters, numbers, and special characters.'
                },
                lengthCheck: v => {
                    return v.length < 50 || 'The password you entered is too long.'
                }
            },

정규식을 사용해서 8자리 이상, 영문, 숫자, 특수문자 중 3종류 이상 조합 되도록 규칙을 구성했다. 그리고 너무 긴 문자열 입력을 방지하기 위해 lengthCheck를 적용했다.(email 부분에도 적용했다.)

Password Verify

Script

            passwordVerify: {
                passwordCheck: v => {
                    return this.passwordMatchCheck(v) || 'It does not match your password.'
                }
            },
...

        passwordMatchCheck (passwordVerify) {
            return (this.password === passwordVerify)
        },

Text-field

arrow function에서 this는 사용이 안되는 것을 알고 있었는데 email 형식검사에서 에러 발생 안되서 의아해 했는데 확인해보니 rules로 지정한 것과 실제 지정된 rules의 이름이 달라서 매칭이 안되고 있었던 것... Passowrd Verify 위 코드 적용시 Cannot read property of undefined가 발생했다.

arrow function에서는 this가 안먹히므로 arrow function 형태를 바꿔준다.

...

단순히 arrow function을 사용하지 않고 this.~ 형태로 적용하면 된다고 생각했지만... undefined 에러가 계속 발생한다... 여러 다양한 시행착오 끝에 최종적으로 rules에 원하는 methods를 바로 지정하면 되는 것을 알게됬다.

:rules="[rules.required, rules.email.expertTest, emailDuplicateCheck, rules.email.lengthCheck]"

emailDuplicateCheck라는 methods를 만들고 rules에 바로 지정하면 된다.

    emailDuplicateCheck (email) {
            console.log(email)
            return true;
        },

Password Verify도 Script에 methods를 추가하고

        passwordMatchCheck (passwordVerify) {
            return (this.password === passwordVerify) || 'It does not match your password.'
        },

rules 부분에 생성한 method를 넣어준다.

테스트 결과 전부 정상적으로 처리되는것을 확인했다.

password 타입 지정

password 타입으로 지정해서 노출되는것을 방지한다.

Form 활성화

양식이 모두 활성화가 되었다면 Form 상태를 변경해서 SIGN UP 버튼이 활성화 되도록 변경한다.

v-form은 다음과 같이 v-model이 "form"으로 바인딩 되어 있다. 이는 rules와 연동되어 모든 조건을 만족하게 된다면 form 값도 바뀌게 된다. 따라서 별도의 코드 수정은 필요 없다.

[VueJS] Vuetify v-text-field 유효성 검사 (rules)

https://minu0807.tistory.com/82

3. Client에서 Server 정보 전송

Fetch API와 Axios를 통해 HTTP 요청을 보낼 수 있다. 두 개를 비교하는데 상당히 길어질거 같기도 하므로 다음 글에서 작성!

전체 코드

1. Email, Password, Password Verify 형식 검사 적용 코드

SignUpPage.vue

8. 로그인 - 전송 시 암호화?

Sun, 08 Oct 2023 10:35:48 GMT

어떤 로그인을 방식을 진행하던 아이디와 비밀번호를 사용하는 로그인 방식이라면. 웹 페이지의 브라우저 (Client)에서 Server로 아이디와 비밀번호 데이터를 전송을 해야한다.

아이디의 경우에는 평문 전송이 된다고 하더라도 비밀번호의 경우 평문 전송을 사용해도 될까?

비밀번호 전송의 경우 HTTPS와 POST 방식으로 비밀번호를 전송하는 것이 표준 관행이다. Clinet - Server간의 통신은 TLS에 따라 암호화되므로 HTTPS는 비밀번호를 보호 하게 된다.

비밀번호에 대해 Client Side에서 해싱을 구현할 수 있다. 하지만 네트워크 도청자가 사용자의 비밀번호(일반 비밀번호 또는 해싱 비밀번호)를 볼 수 있다면 별 차이가 없다.

Is 'plain text' password safe to send over network? - LinkedIn

https://www.linkedin.com/pulse/plain-text-password-safe-send-over-network-manish-dhar-dwivedi

HTTPS / TLS

HTTPS는 암호화 프로토콜을 사용하여 통신을 암호화 합니다. 이 프로토콜은 전송 계층 보안(TLS)이라고 불립니다. 이 프로토콜은 비대칭 공개 키를 사용하여 통신을 보호합니다.

TLS

Transport Layer Security, 인터넷 상의 통신을 위한 개인 정보와 데이터 보안을 용이하게 하기 위한 프로토콜. 웹 응용 프로그램과 서버 간의 커뮤니케이션을 암호화 하는데 주로 사용된다.

HTTPS란 무엇입니까? - cloudflare

https://www.cloudflare.com/ko-kr/learning/ssl/what-is-https/
TLS(Transport Layer Security)는 무엇입니까? - cloudflare

https://www.cloudflare.com/ko-kr/learning/ssl/transport-layer-security-tls/
TLS 암호화란 무엇이며 어떻게 작동하나요?

https://powerdmarc.com/ko/what-is-tls-encryption/

따라서, 로그인 정보 전송시 HTTPS와 POST 방식을 이용하면 된다.

7. 로그인 화면 구성

Mon, 02 Oct 2023 07:40:10 GMT

프로젝트의 뼈대를 만드는 작업 중이므로 HTTP에 맞는 Stateless 구현하기 위해 JWT 방식과 DB Resource 측면 및 서버 확장 가능성 등을 고려해 JWT, OAuth 로그인 방식을 구현하기로 결정 추후 필요시 Session을 추가로 구현하는 방식을 고려하며 로그인 기능을 구현할 예정이다.

화면 디자인의 경우에는 모바일과 웹에서 사용자 경험을 높일 수 있도록 반응형 웹앱 형태로 변경할 예정이다. (HelloWorlde.vue 컴포넌트 이름도 변경할 예정, Vue 파일 관리 방식도 확인 필요)

a-hands-on-guide-to-mobile-first-design

https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/

우선 로그인 및 회원 가입 기능을 구현하고 메인 페이지에 반영하도록 적용한 후에 디자인은 추후 적용할 예정이다.

작업 Branch 생성

git branch login_signup_screen feature

로그인 화면 구성

가장 기본적으로 로그인 화면을 생성하고 해당 화면에서 ID, PW를 입력받도록 화면을 구성한다.

로그인 할 수 있도록 오른쪽 상단에 위치한 Toggle order 옆에 로그인 버튼을 생성하고 로그인 화면으로 갈 수 있도록 만든다.

로그인 아이콘은 뷰티파이 아이콘을 사용한다.

Where can I find a list of icons to be used in vuetify? [closed]

https://stackoverflow.com/questions/52400086/where-can-i-find-a-list-of-icons-to-be-used-in-vuetify
Material Design Icons

https://pictogrammers.github.io/@mdi/font/3.6.95/

mdi-login / mdi-login-variant 로고를 임시로 사용한다.

뷰티파이 아이콘 적용

뷰티파이 아이콘 적용 예제

https://v2.vuetifyjs.com/en/components/icons/#examples
Activator 적용 코드 (v-app-bar) 아래에 v-btn icon을 추가해준다.

      
        mdi-login

아이콘이 적용되고 클릭도 되는 것을 확인할 수 있다. (코드는 전체 코드 참고)

버튼 클릭 후 로그인 페이지로 이동

1. 로그인 화면 생성

components 밑 LoginPage.vue 생성 / 로그인 페이지를 확인할 수 있도록 Login Page 문구 출력하도록 코드 구성

2. Router Path 생성

router 밑 index.js에 login에 해당하는 경로 설정 LoginPage import / path, name, component 생성

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginPage from '../components/LoginPage.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: LoginPage
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3. 버튼 클릭 시 Page 이동

router-link 또는 @click에 함수를 적용해 구현할 수 있지만 $router.push를 이용해 로그인 페이지로 이동하게 만들었다.

      
        mdi-login

클릭 시 로그인 페이지(LoginPage.vue)로 이동하는 것을 확인했다.

로그인 페이지 화면 구성

뷰티파이 text-fileds 이용한다.

text-fileds 참고

https://vuetifyjs.com/en/components/text-fields/
elevation 참고

https://vuetifyjs.com/en/components/sheets/#color

LoginPage.vue 코드

회원 가입 페이지 화면 구성

components 밑 SignUpPage.vue 생성, 로그인 페이지에서 SIGN IN 버튼만 제거한 후 생성

SignUpPage.vue 코드

LoginPage.vue에서 Sign Up 버튼을 눌렀을 경우 해당 페이지로 이동할 수 있도록 index.js에서 route 설정 및 버튼 이벤트 추가

index.js 코드

...
import LoginPage from '../components/LoginPage.vue'
import SignUpPage from '../components/SignUpPage.vue'

const routes = [
  ...
  {
    path: '/login',
    name: 'login',
    component: LoginPage
  },
  {
    path: '/signUp',
    name: 'signUp',
    component: SignUpPage
  }
]

LoginPage.vue 코드

로그인 페이지, 회원 가입 페이지 화면 구성 완료. 단순히 화면만 구성 완료된 것으로 Script를 통해 백엔드 통신 및 Password가 노출되지 않도록 type 지정 추가 필요.

LoginPage와 SignUpPage의 버튼에서 form을 검사하는 구문이 있다. LoginPage에서 Sign Up의 경우에는 양식 검사 없이 바로 접근할 수 있어야 하므로 코드를 삭제한다.

:disabled="!form"

기능 구현이 완료되면 UX를 고려한 디자인도 적용할 예정...!

UX 참고 자료들

https://dribbble.com/shots/3902549-LOGIN-Animation-UX-Motion-Design https://taegon.kim/archives/9658 https://github.com/cgoldsby/LoginCritter https://www.tunnelbear.com/account/login

Git push

git add / commit / push

git add .

git commit -m "HelloWorlde.vue : 로그인 아이콘 생성,
LoginPage.vue : 로그인 페이지 화면 생성,
SignUpPage.vue : 회원가입 페이지 화면 생성,
index.js : login, signUp 경로 생성"

git push origin login_signup_screen

브랜치 정상반영 확인, Compare & pull request

pull request & Merge 이후 delete branch

Merged 로그인, 회원가입 화면 구성 #2

https://github.com/Fortuna3Co/Toy-Project/pull/2

전체 코드

1. 아이콘 적용 후 전체 코드

HelloWorld.vue





### 2. 로그인 페이지 이동 후 전체 코드
* HelloWorld.vue
``` vue



```
* index.js
``` javascript
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginPage from '../components/LoginPage.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: LoginPage
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
```


### 3. 회원 가입 페이지 이후 전체 코드

**LoginPage.vue**
``` vue



```

**SignUpPage.vue**
``` vue



```

**index.js**
``` javascript
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginPage from '../components/LoginPage.vue'
import SignUpPage from '../components/SignUpPage.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: LoginPage
  },
  {
    path: '/signUp',
    name: 'signUp',
    component: SignUpPage
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
```

**HelloWorld.vue**
```



```



6. 로그인 방식 분석 (쿠키, Session, JWT)
Mon, 25 Sep 2023 12:57:25 GMT
Vuetify를 통해 기본 메인 환경에 대한 구성은 끝났으므로, 로그인 화면을 구성하고 로그인 기능을 만들 예정.
로그인은 Cookie, Session, JWT를 이용하는 방식이 있으며, Spring Security, Redis를 이용한 Token 처리 등 다양한 방법이 있으므로 이를 정리한 후 구현.
1. 로그인 방식
사용자가 로그인화면에서 로그인을 수행할 경우 기본적으로 다음과 같은 방식으로 수행된다. 

로그인 정보를 입력 받는다.
로그인 정보를 서버에 전송한다.
서버는 로그인 정보를 수신한다.
인증 절차를 수행한다.
인증 결과를 클라이언트에 전송한다.

1.1. 인증/인가
인증 : 인증(認證, authentication)은 참이라는 근거가 있는 무언가를 확인하거나 확증하는 행위
인가 : 제3자의 법률적 행위를 행정청이 동의 · 승인의 형식으로 보충하여 그 법률상 효과를 완성시켜 주는 행정행위
Cookie, Session, JWT 방식 인증은 아래 링크 참고.

인증/인가는 어디에 어떻게 구현해야 할까?
https://dev.gmarket.com/45



로그인에서 인증/인가
사용자가 로그인을 하는 행위는 인증에 해당하며, 로그인 정보를 토대로 자원에 접근할 수 있도록 하는 것이 인가에 해당한다.
일반적인 웹 서비스는 stateless 상태이므로, 서버에서 인가를 받을 경우 이를 저장하는 방식이 필요하다.(그렇지 않을 경우, 지속적으로 인증을 수행해야한다.)
(※ stateless : 서버로 가는 모든 요청이 독립접으로 수행)

statefull, stateless 참고 자료

https://www.geeksforgeeks.org/difference-between-stateless-and-stateful-protocol/


세션 vs 토큰 vs 쿠키? 기초개념 잡아드림. 10분 순삭! - 노마드코더 Nomad Coders

https://www.youtube.com/watch?v=tosLBcAX1vk



1.2. Cookie를 통한 로그인
Http Cookie?
HTTP 쿠키란 하이퍼 텍스트의 기록서의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 인터넷 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일을 일컫는다.
세션을 통한 로그인도 세션 정보(Session ID)를 Cookie로 저장하므로 Cookie를 통한 로그인이라 볼 수 있지만,
여기서 Cookie를 통한 로그인은 Cookie에 ID, PW 등을 Cookie에 직접 저장 해 지속적으로 인증하는 것을 의미한다.

Http Cookie - Wikipedia
https://ko.wikipedia.org/wiki/HTTP_%EC%BF%A0%ED%82%A4



HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각, 브라우저는 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다.

HTTP Cookie (mozilla.org)
https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies



Cookie를 통한 로그인 구현 시, 사용자의 로그인 정보를 저장하고 이를 서버에 전송하는 형태를 사용하게 된다. 이 경우 여러 보안 문제점을 가지게 된다.

쿠키 탈취 (Ex, XSS 공격)
쿠키 변조
세션 하이재킹
쿠키 평문 저장

쿠키는 클라이언트(브라우저)에 저장된다. 쿠키 기반 로그인에서 브라우저는 저장된 쿠키를 서버에 전송해 인가를 수행하게 된다. 이 쿠키는 인증을 위해 인증과 관련된 정보를 가지고 있어야 한다.
만약 쿠키를 탈취 당하게 된다면 인증 정보를 탈취 당한 것과 동일해 진다.
XSS(Cross-Site Scripting) 공격 기법을 통해 쿠키를 탈취할 수 있다. 보통 Cookie의 HttpOnly(XSS 방어) 및 Secure(Sniffing 방어) 설정을 통해 이를 예방 할 수 있다.

Cookie Tracking and Stealing using Cross-Site Scripting

https://www.geeksforgeeks.org/cookie-tracking-stealing-using-cross-site-scripting/


HTTP Only flag와 Secure Cookie에 대하여

https://mitny.github.io/articles/2019-04/httpOnly-secureCookie


Using HTTP cookies (Restrict access to cookies)

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies



쿠키가 탈취되었고 ID, PW 같은 인증 정보가 평문으로 저장되었다면, 쿠키가 변경되어도 ID, PW를 통한 로그인이 가능해진다. 
만약 세션 ID가 탈취되었다면, 이를 이용한 세션 하이재킹이 발생할 수 있다. (Session을 통한 로그인 구현 시)
HTTPS 프로토콜 사용과 세션에 만료 시간을 넣어 예방할 수 있다.

세션 하이재킹
https://ko.wikipedia.org/wiki/%EC%84%B8%EC%85%98_%ED%95%98%EC%9D%B4%EC%9E%AC%ED%82%B9



또한, 사용자가 쿠키 정보를 임의로 변경해 인가 및 권한 정보에 대한 공격 시도를 수행할 수 있다.

Webhacking.kr 1번 풀이 - Cookie 변조 (Burp Suite를 통한 Cookie 변조)

https://dosnipe.tistory.com/66


[EditThisCookie] 크롬에서 쿠키 수정 하기 (EditThisCookie를 통한 쿠키 변조)

https://minimin2.tistory.com/169



1.3. Session을 통한 로그인
Session?
세션(session)은 컴퓨터 과학에서, 특히 네트워크 분야에서 반영구적이고 상호작용적인 정보 교환을 전제하는 둘 이상의 통신 장치나 컴퓨터와 사용자 간의 대화나 송수신 연결상태를 의미하는 보안적인 다이얼로그(dialogue) 및 시간대를 가리킨다. 

세션 (컴퓨터 과학) - Wikipedia
https://ko.wikipedia.org/wiki/%EC%84%B8%EC%85%98_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99))



쿠키를 통한 ID, PW 전송 방식은 많은 보안 문제를 일으킨다. 인증 후 인가와 함께 사용자를 식별할 수 있는 고유값을 생성해 Cookie를 통해 주고 받는다면 ID, PW 같은 인가정보의 탈취는 예방할 수 있다.
다만, 이 경우에도 쿠키에 저장된 고유값을 탈취하면 Session Hijacking 기법을 통해 사용자 계정에 액세스할 수 있다.
Session 로그인

Session을 통한 로그인은

사용자가 로그인 요청
서버 인증 수행
Session 정보 DB에 저장
DB에 저장된 Session 정보를 사용자 Cookie로 전달

인증이 필요한 경우

사용자는 수신한 쿠키를 서버에 전달
서버는 수신받은 쿠키에 해당하는 Session ID를 확인
Session ID와 유저를 확인해 인증


Session vs Token Based Authentication - geeksforgeeks.org
https://www.geeksforgeeks.org/session-vs-token-based-authentication/



클라이언트와 서버의 세션 정보를 저장해야 하기 때문에 사용자가 많아 질 경우 부하가 많아진다. 단일 서버에서 다중 서버로 확장하게 될 경우 모든 서버가 세션에 대한 정보를 공유해야 하기 때문에 확장성 또한 좋지 않은 편이다.
1.4. Token을 통한 로그인
토큰 기반 인증(Token based Authentication)
토큰 기반 인증이란 사용자가 자신의 아이덴티티를 확인하고 고유한 액세스 토큰을 받을 수 있는 프로토콜을 말한다.
(※ 액세스 토큰은 많은 양의 데이터를 포함하는 작은 코드 조각입니다. 사용자, 권한, 그룹 및 기간에 대한 정보는 서버에서 사용자의 장치로 전달되는 하나의 토큰에 포함)

토큰 기반 인증이란? 인증 토큰의 종류와 JWT의 이점
https://www.okta.com/kr/identity-101/what-is-token-based-authentication/



JWT (JSON Web Tokens)
RFC 7519 표준으로 당사자 간에 정보를 JSON 개체로 안정하게 전송하는 간결하고 독립적인 방법. 디지털 서명이 되어 있어 신뢰할 수 있다.

Introduction to JSON Web Tokens - jwt.io
https://jwt.io/introduction



JWT Token을 이용하면 내용 저장 없이 전달 받은 토큰을 통해 인증을 수행하고 필요한 정보를 전달할 수 있다. JWT는 Header, Payload, Signature로 구성되어  있다. 
Header는 토큰의 타입과 JWT를 서명하는데 사용한 알고리즘을 명시한다. 
Payload는 유저의 정보 또는 추가 데이터에 대한 내용이 들어있다. 서명된 토큰의 경우 해당 정보들은 보호되지만 누구나 읽을 수 있다. 암호화 되지 않는 경우 민감 정보를 담아서는 안된다. 
Signature 서버에서 토큰의 정보가 서버로부터 생성된 것인지 증명하기 위해 사용한다.

JWT 설명 및 구조
https://doqtqu.tistory.com/275


JWT란 무엇인가?
https://etloveguitar.tistory.com/101 



취약점

none Attack : JWT 대표적인 공격 방식으로 Header 영역에 alg값을 통해 알고리즘을 명시. 일부 JWT 라이브러리들은 alg값에 none 등 비 서명 처리 시 서명 검증을 하지 않는 취약점을 가지고 있다. 이를 이용하면 Secret 값을 몰라도 임의로 토큰을 생성, 수정할 수 있다.


JWT (JSON Web Token) Security
https://www.hahwul.com/cullinan/jwt/




Brute force attack : 대칭키와 서명을 비교하여 JWT를 무효화.


JWT 해킹 사례를 통한 취약점 분석하기
https://anpigon.tistory.com/138




JWT 도용 : 정상적으로 발급 된 JWT 토큰을 탈취당할 경우 해당 계정의 아이디, 비밀번호를 도용한 것과 같이 계정을 사용할 수 있다.서버 입장에서는 정상적인 JWT이므로 구분할 방법이 없다. 
JWT 탈취를 막기 위해서 Http Only Cookie에 JWT를 저장한다. 또한, 탈취 당할경우를 대비해 Access Token을 짧게 적용한 후, Refresh Token을 통해 Access Token을 새로 발급 받는 방식을 적용한다.
Refresh Token 조차 탈취 당할 경우 Access Token과 Refresh Token의 1:1 맵핑을 확인하는 등 여러가지 방법으로 기존 토큰을 만료시키는 방법을 사용할 수 있다. 다만 JWT를 임의로 만료시키는 방법은 없으므로 만료시간 만큼 DB에 저장하여 관리한다.


토큰(token)은 어떻게 탈취 당하는가?
https://velog.io/@ckdwns9121/%ED%86%A0%ED%81%B0token%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%83%88%EC%B7%A8-%EB%8B%B9%ED%95%98%EB%8A%94%EA%B0%80


토큰(token)의 탈취를 최대한 예방하기
https://dkswnkk.tistory.com/684


JWT에서 Refresh Token은 왜 필요한가?
https://velog.io/@park2348190/JWT%EC%97%90%EC%84%9C-Refresh-Token%EC%9D%80-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80



1.5. OAuth를 통한 로그인
OAuth, Open Authorization
인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다.
OAuth가 사용되기 전에는 인증방식의 표준이 없었기 때문에 기존의 기본인증인 아이디와 비밀번호를 사용하였는데, 이는 보안상 취약한 구조일 가능성이 매우 많다.
기본 인증이 아닐 경우는 각 애플리케이션들이 각자의 개발한 회사의 방법대로 사용자를 확인하였다. 예를 들면 구글의 AuthSub, AOL의 OpenAuth, 야후의 BBAuth, 아마존의 웹서비스 API 등이 있다.
OAuth는 이렇게 제각각인 인증방식을 표준화한 인증방식이다. OAuth를 이용하면 이 인증을 공유하는 애플리케이션끼리는 별도의 인증이 필요없다. 따라서 여러 애플리케이션을 통합하여 사용하는 것이 가능하게 된다.
OAuth 2.0의 동작 메커니즘

클라이언트 : 앱. 휴대기기 또는 기존 웹 앱에서 실행되는 앱. 앱은 리소스 소유자를 대싱하녀 리소스 서버에 요청을 보낸다.
리소스 소유자 : 최종 사용자. 리소스에 대한 액세스 권한을 부여할 수 있다.
리소스 서버 : Facebook, Google, Twitter와 같은 서비스. OAuth 토큰 검증이 필요할 때마다 API 요청을 처리하는 리소스 서버.
승인 서버 : OAuth 2.0 사양을 준수하며 구현되며 액세스 토큰 발급을 담당.
보호된 리소스 : 리소스 소유자가 소유한 데이터. (연락처, 계정 정보 등)

OAuth -  Wiki
https://ko.wikipedia.org/wiki/OAuth


OAuth 2.0 소개 - Google Cloud
https://showerbugs.github.io/2017-11-16/OAuth-%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C



참고자료

인증/인가는 어디에 어떻게 구현해야 할까?

https://dev.gmarket.com/45


statefull, stateless 참고 자료

https://www.geeksforgeeks.org/difference-between-stateless-and-stateful-protocol/


세션 vs 토큰 vs 쿠키? 기초개념 잡아드림. 10분 순삭! - 노마드코더 Nomad Coders

https://www.youtube.com/watch?v=tosLBcAX1vk


Http Cookie - Wikipedia

https://ko.wikipedia.org/wiki/HTTP_%EC%BF%A0%ED%82%A4


HTTP Cookie (mozilla.org)

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies


Cookie Tracking and Stealing using Cross-Site Scripting

https://www.geeksforgeeks.org/cookie-tracking-stealing-using-cross-site-scripting/


HTTP Only flag와 Secure Cookie에 대하여

https://mitny.github.io/articles/2019-04/httpOnly-secureCookie


Using HTTP cookies (Restrict access to cookies)

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies


세션 하이재킹

https://ko.wikipedia.org/wiki/%EC%84%B8%EC%85%98_%ED%95%98%EC%9D%B4%EC%9E%AC%ED%82%B9


Webhacking.kr 1번 풀이 - Cookie 변조 (Burp Suite를 통한 Cookie 변조)

https://dosnipe.tistory.com/66


[EditThisCookie] 크롬에서 쿠키 수정 하기 (EditThisCookie를 통한 쿠키 변조)

https://minimin2.tistory.com/169


세션 (컴퓨터 과학) - Wikipedia

https://ko.wikipedia.org/wiki/%EC%84%B8%EC%85%98_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99))


Session vs Token Based Authentication - geeksforgeeks.org

https://www.geeksforgeeks.org/session-vs-token-based-authentication/


토큰 기반 인증이란? 인증 토큰의 종류와 JWT의 이점

https://www.okta.com/kr/identity-101/what-is-token-based-authentication/


Introduction to JSON Web Tokens - jwt.io

https://jwt.io/introduction


JWT 설명 및 구조

https://doqtqu.tistory.com/275


JWT란 무엇인가?

https://etloveguitar.tistory.com/101 


JWT (JSON Web Token) Security

https://www.hahwul.com/cullinan/jwt/


JWT 해킹 사례를 통한 취약점 분석하기

https://anpigon.tistory.com/138


토큰(token)은 어떻게 탈취 당하는가?

https://velog.io/@ckdwns9121/%ED%86%A0%ED%81%B0token%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%83%88%EC%B7%A8-%EB%8B%B9%ED%95%98%EB%8A%94%EA%B0%80


토큰(token)의 탈취를 최대한 예방하기

https://dkswnkk.tistory.com/684


JWT에서 Refresh Token은 왜 필요한가?

https://velog.io/@park2348190/JWT%EC%97%90%EC%84%9C-Refresh-Token%EC%9D%80-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80


OAuth -  Wiki

https://ko.wikipedia.org/wiki/OAuth


OAuth 2.0 소개 - Google Cloud

https://showerbugs.github.io/2017-11-16/OAuth-%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C






5. Vue 화면 디자인
Tue, 08 Aug 2023 13:18:07 GMT
Layout Application bar

Layout Application bar에 Veutify MENU : Activator Slot1, 2 추가 (HelloWorld.vue)

https://vuetifyjs.com/en/components/menus/


Application bar 부분인  사이에 작성

Activator  Slot에 Items로 Data가 Binding 되어 있으므로, 2개의 Activation Slot 생성을 위해 Data bind Id 변경






Vuetify Wireframes
Inbox Navigation var

Wireframes를 이용해서 화면을 구성할 예정, Inbox의 Navigation var와 현재 페이지의 Toggle 기능을 살려둔 채로
main에는 System Bar를 적용한다.



inbox의 v-navigation-drawer만 적용 (HelloWorld.vue)




* 적용하니 문제 발생, 처음 화면에서 제대로 반영이 안되고 Toogle 하면 생성된다.
![](https://velog.velcdn.com/images/comet_strike/post/aa43e381-691c-45fe-b4c1-b25428c62f71/image.png)

* Toggle order 클릭 시 반영 됨

![](https://velog.velcdn.com/images/comet_strike/post/7830c073-7ae7-418a-9e92-f8c8769dc19f/image.png)

![](https://velog.velcdn.com/images/comet_strike/post/d447656d-4dc3-4939-a200-63fa8ae75669/image.png)


* script에 drawer이 생략되어 발생 (HelloWorld.vue), 추가 후 정상반영 확인
``` javascript

System bar - Main

v-main 내용만 복사해서 적용 완료.




![](https://velog.velcdn.com/images/comet_strike/post/1ae726cb-300b-4990-9339-9d2447b38c62/image.png)


* Application bar 부분과 Main 부분의 영역이 구분이 안되므로 색 변경
``` javascript
=== 기존

=== 변경


현재 v-layout으로 구성되어 있어, 화면 전체에 적용이 안되고 있어 v-layout을 v-app으로 변경

화면 전체에 적용된 걸 확인할 수 있다.

전체 코드



git push

git add . 명령어로 작업한 파일 전부 add
git commit -m 명령어로 커밋 메시지 작성git commit -m '초기 화면 구성 완료
> Vuetify Wireframes를 이용한 화면 구성
> 1. Wireframes - Inbox : v-navigation-drawer
> 2. Application Bar : Toogle 적용, Activator Bar 생성
> 3. Wireframes - System bar : v-main 구현 완료'

git push$ git push
Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 12 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (7/7), 1.60 KiB | 1.60 MiB/s, done.
Total 7 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/Fortuna3Co/Toy-Project.git
 34a513c..2fd3135  feature -> feature

정상적으로 반영 완료

GitHub
https://github.com/Fortuna3Co/Toy-Project/tree/feature



4. Vue 초기 화면 구성, Git Push
Mon, 07 Aug 2023 12:24:08 GMT
Vue 초기 화면 구성

Vuetify를 적용한 Vue 초기 화면



HelloWorld.vue에 Vuetify의 Application Layout을 적용한다.




필요없는 코드를 삭제하고 레이아웃만 추가한다. HelloWorld.vue





Application bar 왼쪽 서식을 확인한다.


flex justify : https://vuetifyjs.com/en/styles/flex/





Git push

환경 설정이 완료되었으니  git push를 실시



git add 실행

LF will be replaced by CRLF the next time Git touches it Error 발생 *
CRLF : 윈도우 줄 바꿈, LF : Mac, Linux 줄 바꿈 *
윈도우  OS를 사용하고 있으므로 git config --global core.autocrlf true를 설정*




https://dabo-dev.tistory.com/13


git commit 실행, commit 메시지는 자신 또는 다른 사람이 알아 볼 수 있도록 작성

kang@DESKTOP-P0G8MJ1 MINGW64 ~/Desktop/Toy Project/Toy-Project (feature)
$ git commit -m "초기 환경설정 구성 완료
>  Back : Java17, SpringBoot
>  Front : Vue3, Vuetify
>  Front  Vuetify layout 적용"

git push

feature 구성 완료

feature 브랜치 develop으로 반영 (Compare & pull request)


Create pull request, Write에는 Commit 메세지를 적어준다.


Merge pull request


Merge 확인




1인 개발이므로 충돌 걱정은 없지만, 추후 팀프로젝트가 될 수도 있으므로, git flow 양식을 최대한 지킨다.
기능 개발은 develop에서 새  feature 브랜치를 파서 기능을 구현하고, 구현이 완료되면 develop 브랜치에 merge 한다.




3. Vue Router
Thu, 03 Aug 2023 13:11:06 GMT
Vue Router 생성

npm install vue-router 를 vscode에서 터미널에 입력> npm install vue-router
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})




vue-router@4.2.4
added 2 packages from 1 contributor and audited 966 packages in 3.411s

108 packages are looking for funding
  run npm fund for details
found 0 vulnerabilities
* `vue add router` 실행, 만약 아래 사진과 같은 에러 발생시 터미널을 Command Propmpt로 변경
![](https://velog.velcdn.com/images/comet_strike/post/ee9bb654-2650-44a2-9498-070ae8d1507e/image.png)

* (Y/N) 물을 때 모두 Y로 선택하고 나면 router 폴더와 index.js, views폴더와 AboutView.vue, HomeView.vue 파일이 생성된다. 
* main.js 파일에도 router가 자동으로 import 된 것을 확인할 수 있다. App.vue 파일에도 router-link 코드가 생성된걸 확인할 수 있다.
Home |
About

![](https://velog.velcdn.com/images/comet_strike/post/9462283d-ce0b-422f-b95b-afb78f9ec858/image.png)
![](https://velog.velcdn.com/images/comet_strike/post/ecdf7f75-69ed-49e1-bb31-e5bf2e2926b2/image.png)
![](https://velog.velcdn.com/images/comet_strike/post/f2bfbf5b-f1c7-4840-9128-687f33b83106/image.png)



# Vuetify 적용
* 디자인을 위해 Vuetify를 사용한다. 설치 `vue add vuetify` / `npm install vuetify --save`
![](https://velog.velcdn.com/images/comet_strike/post/ae1a0956-95b0-4389-be4c-d5b7514258e2/image.png)

* 설치 후 main.js가 vuetify를 사용하도록 바뀐것을 알 수 있다.
``` javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'

loadFonts()

createApp(App)
  .use(router)
  .use(vuetify)
  .mount('#app')

HelloWorld.vue의 코드도 바뀌어서 실행하면 아래 화면처럼 Vuetify가 정상적으로 적용된 걸 볼 수 있다.



https://v15.vuetifyjs.com/ko/getting-started/quick-start/

이로써 환경 구성이 끝났다...
이제 개발 시작...



2. Vue (Header, Footer)
Wed, 02 Aug 2023 13:49:44 GMT
레이아웃

header / contents / footer로 구성
src 폴더 밑에 common 폴더를 만든후 header와 footer 생성

header 작성


* footer 작성
``` javascript




App.vue 수정, Script에 import와 components 추가






* 실행 시 Error 발생, Header, Footer를 Multi-Word로 지정하지 않아서 발생, AppHeader, AppFooter로 변경
![](https://velog.velcdn.com/images/comet_strike/post/45f1e75c-a3a8-44bf-a7ac-dbabf4a7bd80/image.png)

* App.vue 수정 코드
``` javascript





https://onethejay.tistory.com/65
https://blog.naver.com/PostView.naver?blogId=masichyun77&logNo=222440885802

레이아웃 구성 완료




1. toy-project 환경 구성
Wed, 02 Aug 2023 13:07:33 GMT
SSAFY에서 2번의 프로젝트를 하면서 기술 부채가 쌓이는 것을 느껴서 개인적인 사이드 프로젝트를 진행하면서 하나하나 되짚어볼 생각이다.
당장 아이디어가 생각나지 않아 우선은 게시판 만들기부터 수행하면서 아이디어를 차근차근 해결 할 생각이다.
Project 구성
기술 스택 선정

Learning curve를 줄이고 기술 부채를 갚기 위함이므로 새로 기술 스택을 배우는 것 보다는 기존에 알고 있는 기술을 사용하는 것을 선택했다.
DB의 경우에는 MySQL, MSSQL, MariaDB, Oracle 중에서 선택할 예정. 가장 많이 사용하고 경험이 없는 Oracle DB를 사용할지, 익숙한 Maria DB를 사용할 지 고민을 좀 더 해봐야 겠다.
Back :Java JPA SpringBoot
Data: Oracle 개발자 무료, Redis
Arch : Apache Kafka
Front : Vue

1. Git Hub

https://github.com/Fortuna3Co/Toy-Project


git hub에 repository 생성
git flow 형태로 구성 

폴더 구성

feature에 push


Vue Project 생성

Front 폴더 안에서 CMD 실행

vue create toy-project 프로젝트 생성

Vue 3로 생성
참고 :  https://rosedaily101.tistory.com/31




생성한 프로젝트에서 VScode 실행

Ctrl + ` 키를 눌러 터미널 실행


터미널 창에 npm run serve 입력 후 url에 ctrl + click


Vue 프로젝트 생성 확인 완료


Spring Boot Project 생성

start.spring.io 사이트를 이용해서 프로젝트 생성
https://start.spring.io/


구성은 아래 사진과 같다. Dependecies의 경우 필요한 만큼 추가
Dependecies 설명 : https://appleg1226.tistory.com/11



설정 후 Generate를 클릭해 다운로드, 해당 파일 Back 폴더로 이동 후 압축 풀기

toy-project 폴더에 들어가서 프로젝트 실행, 빌드되고 있는 것을 알 수 있다.

FAILURE 발생

구글링한 결과 Spring 3.X 버전 부터는 Java 17이 필수라 되어 있어서 Java 17 설치
https://jojoldu.tistory.com/698
java 17 : https://www.oracle.com/java/technologies/downloads/#jdk17-windows


Intellij 17버전으로 Gradle 변경

Project Structure > project 변경

Project Structure > Modules 변경

Rebuild 수행 결과 Build Success

Application 실행, Tomcat started on port(s): 8080 (http) 확인 완료


Project 환경

Vue 3.3.4

node 14.21.1

npm 6.14.17

Java 17 

Spring Boot 3.1.2

Dependencies
Spring Web
Lombok
Spring configuration Processor
Spring Security
OAuth2 Client
OAuth2 Resource Server
Spring Data JPA
H2 Database
Spring for Apache Kafka






Apache Kafka 기술 공유
Wed, 26 Apr 2023 08:17:22 GMT
Apache Kafka

Spring Boot Project에서 활용되는 Apache Kafka
APache Kafka에 대한 개요를 설명한다.
이후 Messaging System에 대해서 간략하게 짚고,
프로젝트에서 어떻게 활용했는지 설명한다.
해당 이해들을 바탕으로 Apache Kafka에 대해서 자세하게 설명한다.

Apache Kafka란?

아파치 카프카(Apache Kafka)는 아파치 소프트웨어 재단이 스칼라로 개발한 오픈 소스 메시지 브로커 프로젝트이다.
오픈 소스 분산 이벤트 스트리밍 플랫폼

참고자료 

https://ko.wikipedia.org/wiki/%EC%95%84%ED%8C%8C%EC%B9%98_%EC%B9%B4%ED%94%84%EC%B9%B4
https://kafka.apache.org/

Kafka 탄생

카프카는 2011년 미국 링크드인에서 출발
카프카는 링크드인 웹사이트에서 생성되는 로그를 처리하여 웹사이트 활동을 추적하는 것을 목적으로 개발
웹에서 생성되는 대량의 로그를 분석하여 사용자가 웹에서 하는 활동을 모니터링하고 서비스 개선에 활용하는 목적
링크드인의 실현 목적 ( 요구 사항)➊ 높은 처리량으로 실시간 처리한다.
➋ 임의의 타이밍에서 데이터를 읽는다.
➌ 다양한 제품과 시스템에 쉽게 연동한다.
➍ 메시지를 잃지 않는다.
실현 수단➊ 메시징 모델과 스케일 아웃형 아키텍처
➋ 디스크로의 데이터 영속화
➌ 이해하기 쉬운 API 제공
➍ 전달 보증

참고 자료

https://www.hanbit.co.kr/media/channel/view.html?cms_code=CMS9400468504


요약 : 확장 가능하고 안정성이 있으며 호환성이 좋은 메시징 모델이 없어서 Kafka를 개발했다.

Apache Kafka 이해하기

Apache Kafka는 분산 스트리밍 플랫폼이다.
데이터 파이프 라인을 만들 때 주로 사용되는 오픈소스 솔루션이다.
대용량의 실시간 로그처리에 특화되어 있는 솔루션이다.
데이터를 유실없이 안전하게 전달하는 것이 주목적인 메세지 시스템에서 Fault-Tolerant한 안정적인 아키텍처와 빠른 퍼포먼스로 데이터를 처리한다.

=> Kafka는 분산 데이터 처리 환경에 적합하다. 실시간 로그 처리에 적합하다. 메시징 시스템이며, 빠른 퍼포먼스로 데이터를 처리한다.
메시징 시스템, Messaging System 이란?

메시징 시스템으로는 Kafka, RabbitMQ, Active MQ, AWS SQS, Java JMS 등이 있다.
메시지를 문자, 이메일이라 생각하면 안됨.
여기서 메시지는 로그 데이터, 데이터, 이벤트 메시지 등 API로 호출할 때 보내는 데이터드르을 처리하는 시스템.

메시징 시스템 참고자료

https://victorydntmd.tistory.com/343

메시지, 메시징에 대한 참고자료

https://smallake.kr/?p=2139


메시징 시스템은 서로 다른 프로그램 끼리 정보를 교환하기 위해 통합채널로 활용한다.


https://velog.io/@pood/%EB%A9%94%EC%8B%9C%EC%A7%95-%EC%8B%9C%EC%8A%A4%ED%85%9C

Zzalu Project에서 Kafka가 사용된 방식

실제 진행한 Zzalu Project에서 Kafka가 어떤 방식으로 사용되었는지 설명한다.

프로젝트 Git Hub

https://github.com/Zzalu/Zzalu

프로젝트 Git Hub - 프로젝트 구조 / 시스템 흐름

https://github.com/Zzalu/Zzalu/tree/main/exec

프로젝트 Apache Kafka 사용 이유

우선 해당 프로젝트에서는 채팅 시스템을 개발하기 위해서 Apache Kafka를 사용했다.
채팅 시스템을 구현하기 위해서, Web Socket/STOMP, Redis, Apache Kafka를 사용했다.
채팅 시스템에서 Kafka를 사용하는 이유는 안정성과 확장성이다.


채팅 메세지 순서 보장
모든 내역을 로그로 기록
서버에 장애가 생길 경우 Kafka가 해당 메세지를 다른 서버로 보내거나, 가지고 있다가 복구되는데로 처리한다.

자세한 설명이 필요하면 아래 자료 참고

https://velog.io/@comet_strike/Kafka-Redis-Web-Socket-Stomp-%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%EC%B1%84%ED%8C%85-%EC%84%9C%EB%B2%84-%ED%9A%8C%EA%B3%A0

프로젝트에서 실제 처리 과정


사용자가 특정 Event를 발생시킬 경우 처리 과정을 설명한다.
해당 프로젝트에서는 채팅 메세지를 보낼경우 Kafka를 이용해 처리하므로 채팅 메세지를 보냈을 경우에 처리 방식을 설명한다.


사용자가 채팅방에 입장할 때, Server와 Client는 Web Socket으로 연결되어 있다.
사용자가 채팅 메세지를 보낼 경우, Front에서 특정 URL로 메세지를 보낸다.
Spring Boot Server에서 해당 메세지를 수신한다.
수신한 메세지를 Kafka Producer를 이용해서 특정 Topic으로 발행한다.
Kafka Server는 이를 수신하고 Kafka Consumer에 전달한다.
(Kafka Consumer는 Spring Boot Server에서 @KafaListner 어노테이션을 이용해서 구현한다.)
Kafka Consumer는 받은 메세지를 Redis로 발행한다.
Redis SUB에서는 STOMP를 통해 채팅 메세지를 수신한다.

Kafka 사용하는 서비스

Line

 https://engineering.linecorp.com/ko/blog/how-to-use-kafka-in-line-1


RIDI

https://ridicorp.com/story/how-to-use-kafka-in-ridi/


Kakao Alex

https://tech.kakao.com/2020/06/08/websocket-part1/



Line에서 Kafka

LINE에서 Kafka를 사용하는 방법은 크게 두 가지


단순하게 분산 큐잉 시스템으로 사용
데이터 허브로 사용

RIDI에서 Kafka

리디에서는 다양한 사업적 요구를 분석하기 위해서 여러 종류의 분석 플랫폼들을 활용하고 있는데, 리디 서비스와 이러한 플랫폼들 간의 데이터 통로로도 Kafka를 활용

Kakao Alex에서 Kafka

메시지 브로커로 카프카를 사용

Kafka 설명 요약

Kafka는 링크드인에서 개발한 Messaging System이다.
Kafka는 여러 방식으로 사용된다.
Kafka를 데이터의 중간 통로로 이용한다.

Kafka 구성
참고자료 

https://hoing.io/archives/5108

실제 Spring Boot 프로젝트에 적용하는 방법
1. Docker를 이용한 Kafka 설치

Kafka, Zookeeper 설치

Git Clone https://github.com/wurstmeister/kafka-docker.git

클론한 폴더에서 docker-compose.yml 파일 수정
version: '2'
services:
zookeeper:
  image: wurstmeister/zookeeper
  container_name: zookeeper
  ports:
    - "2181:2181"
  restart: unless-stopped

kafka:
  build: .
  image: wurstmeister/kafka
  container_name: kafka
  ports:
    - "9092:9092"
  environment:
    DOCKER_API_VERSION: 1.22
    KAFKA_ADVERTISED_HOST_NAME: 127.0.0.1
    KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
    KAFKA_MESSAGE_MAX_BYTES: 10000000
    KAFKA_AUTO_CREATE_TOPICS_ENABLE: 'true'
    KAFKA_DELETE_TOPIC_ENABLE: 'true'
  volumes:
    - /var/run/docker.sock:/var/run/docker.sock
  restart: unless-stopped


* 해당 폴더에서 터미널 실행 `docker-compose up -d`



## 2. Spring Boot와 연결
* application.properties에 kafka 내용 추가
spring.kafka.consumer.bootstrap-servers: localhost:9092
spring.kafka.consumer.group-id: foo
spring.kafka.consumer.auto-offset-reset: earliest
spring.kafka.consumer.key-deserializer: org.apache.kafka.common.serialization.StringDeserializer
spring.kafka.consumer.value-deserializer: org.apache.kafka.common.serialization.StringDeserializer
spring.kafka.producer.bootstrap-servers: localhost:9092
spring.kafka.producer.key-serializer: org.apache.kafka.common.serialization.StringSerializer
spring.kafka.producer.value-serializer: org.apache.kafka.common.serialization.StringSerializer

참고자료
> https://velog.io/@taehodot/SpringBoot-%EC%B9%B4%ED%94%84%EC%B9%B4%EC%99%80-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-%EC%97%B0%EB%8F%99


## 3. 실제 사용 코드

1. 사용자가 채팅 메세지를 보낼경우 수신 받은 후, Kafkao Producer로 발행
``` java
    @MessageMapping("/chat/message")
    public void message(ChatMessageDto message) {

        // 토큰 검사 => 에외 발생 시 Exception
        Member requestMember = jwtTokenProvider.getMember(message.getSender());
        message.setSender(requestMember.getNickname());
        message.setMemberName(requestMember.getUsername());
        message.setProfilePath(requestMember.getProfilePath());
        message.setMemberId(requestMember.getId());
        message.setSendDate(LocalDateTime.now());

        if (ChatMessageDto.MessageType.ENTER.equals(message.getType())) {
            chatRoomRedisRepository.enterChatRoom(message.getRoomId());
        }

        // kafka topic 발행
        kafkaProducer.sendMessage(message);
        // 입장이 아닐때만 저장
        if (!ChatMessageDto.MessageType.ENTER.equals(message.getType())) {
            chatRoomRedisRepository.setChatMessage(message, message.getRoomId());
        }
//        redisPublisher.publish(chatRoomRepository.getTopic(message.getRoomId()), message);
    }
아래 Kafka Producer 코드 참고
@Service
public class KafkaProducer {

    private static final String TOPIC = "exam";
    private final KafkaTemplate kafkaTemplate;

    @Autowired
    public KafkaProducer(KafkaTemplate kafkaTemplate) {
        this.kafkaTemplate = kafkaTemplate;
    }

    public void sendMessage(Object message){
        this.kafkaTemplate.send(TOPIC, message);
    }

}

Kafka Consumer / Redis Publisher 설정

    @KafkaListener(topics="exam", groupId = "foo")
    public void kafkaListener(String message) throws JsonProcessingException {
        ObjectMapper objectMapper = new ObjectMapper();
        ChatMessageDto chatMessageDto = objectMapper.readValue(message, ChatMessageDto.class);
        System.out.println("publish : " + chatMessageDto.toString());
        redisTemplate.convertAndSend(((ChannelTopic) chatRoomRedisRepository.getTopic(chatMessageDto.getRoomId())).getTopic(), chatMessageDto);
    }


@KafkaListener 어노테이션을 이용해서 SUB 처리
redisTemplate.convertAndSend로 PUB 처리


Redis Subscribe 설정 (Topic에 따라 다르게 처리), STOMP PUB 처리

 @Override
    public void onMessage(Message message, byte[] pattern) {
        try {

            String topic = (String) redisTemplate.getStringSerializer().deserialize(message.getChannel());
            String publishMessage = (String) redisTemplate.getStringSerializer().deserialize(message.getBody());

            if(topic.equals("comments")){
                System.out.println("comments");
                CommentResponse commentResponse =  objectMapper.readValue(publishMessage, CommentResponse.class);
                messagingTemplate.convertAndSend("/sub/title-hakwon/comments/", commentResponse);
            }else if (topic.equals("likes")){
                LikeResponse likeResponse = objectMapper.readValue(publishMessage, LikeResponse.class);
                messagingTemplate.convertAndSend("/sub/title-hakwon/comments/likes", likeResponse);
            }else{
                ChatMessageDto roomMessage = objectMapper.readValue(publishMessage, ChatMessageDto.class);
                messagingTemplate.convertAndSend("/sub/chat/room/" + roomMessage.getRoomId(), roomMessage);
            }

        } catch (Exception e) {
            log.error(e.getMessage());
        }
    }
순서 요약 :
메세지 수신 시, 메세지 처리 후 Kafka Producer를 통해 Kafka Server로 전달.
이후 Consumer를 통해 메세지 처리. Consumer는 Redis Publish 수헹.
Redis Subscribe에서 해당 메세지를 받은 후, STOMP Publish 수행.
STOMP Subscribe는 Client이므로 메세지가 Client에 정상적으로 전달.



EC2, Jenkins를 활용한 CI/CD 구축 기술공유
Wed, 26 Apr 2023 06:01:11 GMT
CI/CD

AWS EC2, Git Lab, Jenkins 환경에서 CI/CD 구성방법.

CI/CD란?

CI : Continuous Integration 지속적인 통합
CD : Continous Delivery 지속적인 제공 (Deployment로 사용하는 경우가 있다.)
CI/CD는 애플리케이션 개발 단계 부터 배포 단계 까지를 자동화하여 애플리케이션을 더욱 짧은 주기로 고객에게 제공하는 방법

CI/CD 개념 참고자료

https://www.redhat.com/ko/topics/devops/what-is-ci-cd
https://www.youtube.com/watch?v=0Emq5FypiMM&t=60s

CI/CD 구축 방법 참고자료

 https://dramatic-armchair-97f.notion.site/e85a109829c94c9ea5c841ca8e852ac5

AWS에 CI/CD 구축 하는 방법

순서는 다음과 같다.
EC2 Instance에 Jenkins 설치
Jenkins에 접속해 Git Lab과 Web Hook 연동
Jenkins에 Pipeline Script를 이용해 자동 빌드 및 배포 구현



1. EC2 Instance에 Jenkins 설치 

Docker를 이용해서 설치한다.


Docker 설치는 공식 Docs 참고 (Install Docker Engine on Ubuntu)
https://docs.docker.com/engine/install/ubuntu/


EC2에 접속한 후 Docker를 이용해 Jenkins를 설치한다.
포트의 경우에는 기본으로 8081로 설정했지만, 프로젝트 환경에 맞게 구성하면 된다.sudo docker run --name jenkins -d -p 8081:8080 -p 50000:50000 jenkins/jenkins:lts


2. Jenkins에 접속해 Git Lab과 Web Hook 연동

젠킨스로 접속한다. 웹 브라우저에 http://[IP]:8081를 입력해서 접속 가능하다.
접속 Password는 EC2에 sudo docker logs jenkins를 입력해서 찾을 수 있다.
추천 pulgin을 설치한다.

Jenkins 플러그인 설치

Plugin Manager를 통해서 Avaliable pugin을 설치한다.
Gitlab
Publish Over SSH
Mattermost Notification(MM으로 알림 보낼 경우만 설치)
docker
node.js



Jenkins Publish Over SSH 설정

Jenkins와 EC2의 SSH 연결을 설정한다.
젠킨스 관리 > Configure System 으로 들어간다.
Publish Over SSH에 .pem키를 붙여넣는다.
SSH Server를 설정한다.
Remote Dircetory의 경우에는 연결 대상에 미리 존재해야한다.
(아래의 경우에은 /home/ubuntu/jenkins_build가 remote directory이므로 EC2에 /home/ubuntu/jenkins_build가 존재해야 한다. EC2에서 mkdir 명령어를 통해서 디렉토리 생성 가능하다.)Name : EC2_Instance
Hostname : [EC2 domain] 
Username : ubuntu
Remote Directory : /home/ubuntu/jenkins_build 

EC2 설정
SSH 연결을 설정한다.

/etc/ssh/sshd_config에 vim을 통해 아래 2줄 추가한다.
sudo vim /etc/ssh/sshd_config  PubkeyAuthentication yes
  PubkeyAcceptedKeyTypes +ssh-rsa
sudo service sshd restart를 입력해서 ssh 서비스를 재시작한다.

SSH 연결에 사용할 Directory를 생성한다.
mkdir ~/jenkins_build
연결 확인

Jenkins, EC2 모두 설정한 후, Jenkins에 Publish Over SSH 설정 화면에서 오른쪽 하단 Test Configuration 클릭한다.

3. Jenkins에 Pipeline Script를 이용해 자동 빌드 및 배포 구현

Jenkiins에 Script를 설정해 Build 및 Deploy를 수행한다. 
Jenkins에서 Build하기 위해 Java와 NodeJS를 설치한다.
Build된 결과를 EC2에 전달하고, 원격으로 해당 결과를 실행시킨다.
빌드되는 순서는 다음과 같다.
Jenkins에서 Vue 프로젝트를 clone해 온다.
npm install 명령어를 통해 빌드한다.
Spring Boot 프로젝트를 clone해 온다.
생성된 결과를 Spring Boot 프로젝트에 옮긴다.
Spring Boot 프로젝트를 빌드한다.
빌드한 결과를 EC2에 전달한다.
기존 서버를 없앤 후, 새로 빌드한 프로젝트를 구동한다. 



1. Jenkins 환경 구성

npm을 사용하기 위해 nodeJS를 설치한다.
Spring Project를 빌드하기 위해 Java를 설치한다.

1. 환경 설정

apt 업데이트, sudo, vim 설치
apt-get update
apt-get install sudo
apt-get install vim
sudo 설정, 설정 파일 열기
sudo visudo

해당 파일에 아래 내용 추가
jenkins ALL=(ALL) NOPASSWD: ALL


2. NodeJS 설치

EC2에 접속한 후, jenkins에 접속하는 명령어를 수행한다.
sudo docker exec -it -u root jenkins /bin/bash

Jenkins에 NVM을 설치한다.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

NVM을 활성화한다. . ~/.nvm/nvm.sh

14버전을 설치한다. (프로젝트에 맞는 버전으로 설치)
nvm install 14

모든유저에게 적용한다.
n=$(which node);n=${n%/bin/node}; chmod -R 755 $n/bin/*; cp -r $n/{bin,lib,share} /usr/local


3. Java 설치

EC2에 접속한 상태라 가정
java를 설치하는 명령어 실행
sudo apt-get install openjdk-11-jdk

2 . Jenkins Pipeline 생성

참고 노션 [7. 젠킨스 파이프라인 생성] 참고
https://dramatic-armchair-97f.notion.site/e85a109829c94c9ea5c841ca8e852ac5



3. Webhook 생성
참고자료

https://junhyunny.github.io/information/jenkins/github/jenkins-github-webhook/


Gitlab Webhook 설정, Token 생성
Jenkins 빌드 트리거 설정, Webhook 설정

4. Script 작성

참고 노션 [8. script 작성] 참고

https://dramatic-armchair-97f.notion.site/e85a109829c94c9ea5c841ca8e852ac5


실제 작성한 스크립트를 기반으로 설명할 예정.

전체 스크립트는 아래 참고
node {  

  stage('Build') { 
      checkout scmGit(branches: [[name: '*/dev']], extensions: [], userRemoteConfigs: [[credentialsId: 'comet', url: 'https://lab.ssafy.com/s08-webmobile2-sub2/S08P12C109']])
     dir("front") {
         sh "pwd"
         sh "sudo npm install"
         sh "sudo npm run build"
         sh "sudo cp -r /var/jenkins_home/workspace/zzalu_ci_cd_test/front/dist/* /var/jenkins_home/workspace/zzalu_ci_cd_test/back/src/main/resources/static"
     }
     dir("back") {
         sh "pwd"
         sh "sudo chmod +x gradlew "
         sh "sudo ./gradlew clean"
         sh "sudo ./gradlew build"
     }

  }
  stage('Deploy') {
      dir("back/build/libs") {
          sshPublisher(publishers: [sshPublisherDesc(configName: 'zzalu_deploy_server_test', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '''cd /home/ubuntu/jenkins_build
          kill -9 `cat save_pid.txt`
          rm save_pid.txt
          sudo nohup java -jar zzalu-0.0.1-SNAPSHOT.jar > logs/zzalu.log 2>&1 & echo $! > save_pid.txt''', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '', remoteDirectorySDF: false, removePrefix: '', sourceFiles: '*.jar')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: true)])
          mattermostSend color: '#32a852', message: "Dev Branch Deploy End! (${env.JOB_NAME}) #(${env.BUILD_NUMBER}) (<${env.BUILD_URL}|Open>) \n See the (<${env.BUILD_URL}console|console>)"
      }
  }
}


checkout scmGit(branches: [[name: '*/dev']], extensions: [], userRemoteConfigs: [[credentialsId: 'comet', url: 'https://lab.ssafy.com/xxxxxxxxxx/xxxxxx']])

gitlab으로 clone하는 부분
branches: [[name: '*/dev']] : dev 브랜치를 클론한다.
credentialsId에는 사용할 계정을 선택한다.
url로는 프로젝트의 gitlab 주소를 사용한다.


dir("front") {
    sh "pwd"
    sh "sudo npm install"
    sh "sudo npm run build"
    sh "sudo cp -r /var/jenkins_home/workspace/zzalu_ci_cd_test/front/dist/* /var/jenkins_home/workspace/zzalu_ci_cd_test/back/src/main/resources/static"
}
* front 빌드 시 수행할 영역
* dir은 해당 dir로 들어가서 수행한다는 의미
* 현재 프로젝트는 아래 캡처처럼 프로젝트가 구성되어 있다.
* dir("front") 를 통해서 front 디렉토리 안으로 들어간다는 의미
* front 폴더 안에 들어가서 npm install, build를 수행한다.
* 이후 빌드된 결과를 back/src/main/resorces/static에 복사한다.



dir("back") {
   sh "pwd"
   sh "sudo chmod +x gradlew "
   sh "sudo ./gradlew clean"
   sh "sudo ./gradlew build"
   }

dir("back")을 통해서 back 디렉토리로 들어간다.
이후 gradle을 이용해서 빌드한다.


dir("back/build/libs")

빌드 된 결과는 back/build/libs에 있으므로, 해당 디렉토리로 진입한다.


sshPublisher
sshPublisher(publishers: [sshPublisherDesc(configName: 'zzalu_deploy_server_test', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '''cd /home/ubuntu/jenkins_build
         kill -9 `cat save_pid.txt`
         rm save_pid.txt
         sudo nohup java -jar zzalu-0.0.1-SNAPSHOT.jar > logs/zzalu.log 2>&1 & echo $! > save_pid.txt''', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '', remoteDirectorySDF: false, removePrefix: '', sourceFiles: '*.jar')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: true)])
         mattermostSend color: '#32a852', message: "Dev Branch Deploy End! (${env.JOB_NAME}) #(${env.BUILD_NUMBER}) (<${env.BUILD_URL}|Open>) \n See the (<${env.BUILD_URL}console|console>)"


sshPublisherDesc(configName: 'zzalu_deploy_server_test' EC2와 연결할 때 사용할 SSH, Publish On SSH에서 설정한 설정 이름을 사용  
execCommand: 전송한 후 수행할 명령어들을 작성한다.위의 경우에서 전송후 특정 디렉토리로 이동 (cd), 
기존 프로세스를 종료(kill -9)한 후 
전송한 jar 파일을 실행(nohup)한다.


remoteDirectorySDF: false, removePrefix: '', sourceFiles: '*.jar')]


.jar인 파일을 모두 전송한다.


mattermostSend color: '#32a852', message: "Dev Branch Deploy End! (${env.JOB_NAME}) #(${env.BUILD_NUMBER}) (<${env.BUILD_URL}|Open>) \n See the (<${env.BUILD_URL}console|console>)"


mattermost로 특정 메시지를 전달한다.

Trouble Shooting

트러블 슈팅 하는 방법에 대해서 설명한다.

1. 프로젝트가 정상 빌드 되었는지 확인하는 법

프로젝트가 정상 반영되지 않았을 때, 확인하는 방법


Jenkins 웹에 접속해서 빌드 결과가 Success인지 확인한다.
=> Fail일 경우 발생한 Error를 보고 판단한다.
EC2에 접속해서 Top 명령어를 친 후 jar 파일 구동 시간이 빌드한 시간과 일치하는 지 확인한다.
=> 일치하지 않을 경우 프로세스가 정상적으로 종료되지 않았을 경우일 확률이 높다. Jenkins 스크립트의 kill -9 명령어가 정상적으로 작동되는지 확인한다.
Jenkins cli로 접속해서 jar 파일 변경시간이 올바른지 확인한다.
=> 변경시간이 올바르지 않을 경우, Git에서 제대로 가져오는지 확인한다. 이후 Build에서 문제가 생기는지 CLI에서 직접 빌드해본다.




2023-03-17
Thu, 20 Apr 2023 02:50:11 GMT

docker-compose

https://github.com/ManduTheCat/docker-hadoop-spark


참고 페이지

https://github.com/dbusteed/kafka-spark-streaming-example
https://www.youtube.com/watch?v=9D7-BZnPiTY&t=756s


window local 환경에서 진행

이후 AWS EC2에서 진행할 예정


kafka

kafka 진입
docker exec -it kafka bash

apt 최신화 apt-get update, sudo 설치 apt-get install sudo

초기 진입 시 root이기 때문에 sudo는 필요없지만 sudo 명령어를 복사해서 바로 쓰기 위해서 sudo 설치함


zookeeper 실행/opt/kafka_2.13-2.8.1/bin/zookeeper-server-start.sh /opt/kafka_2.13-2.8.1/config/zookeeper.properties => tab 이름 ZK

kafka 토픽 확인. 최초 확인 시 Topic 없음. tweets 토픽 생성 후 topic 확인 시 topci 확인 가능
root@53642356f28f:/# /opt/kafka_2.13-2.8.1/bin/kafka-topics.sh --list --bootstrap-server localhost:9092


root@53642356f28f:/# /opt/kafka_2.13-2.8.1/bin/kafka-topics.sh --create --bootstrap-server localhost:9092 \

--replication-factor 1 
--partitions 1 
--topic tweets
Created topic tweets.
root@53642356f28f:/# /opt/kafka_2.13-2.8.1/bin/kafka-topics.sh --list --bootstrap-server localhost:9092
tweets
root@53642356f28f:/#


## kafka producer / consumer 확인

* 윈도우 터미널 탭 2개로 진행 
* Producer Tab에 다음 명령어 수행
`/opt/kafka_2.13-2.8.1/bin/kafka-console-producer.sh --broker-list localhost:9092 --topic tweets`
* consumber Tab에 다음 명령어 수행
`/opt/kafka_2.13-2.8.1/bin/kafka-console-consumer.sh --bootstrap-server localhost:9092 --topic tweets`

* Producer Tab에 `hello` 입력
* Consumer Tab에 `hello` 출력 확인


## Python - Kafak 
* kafka 도커에서 수행

1. python3 설치 `sudo apt install python3`
2. python3-pip 설치 `sudo apt install python3-pip`
3. kafka-python 설치 `pip3 install kafka-python`
    * kafka-python 설치 확인
    * 1. python3 실행 `python3`
    * 2. import kafka 실행
    * 에러가 없으면 정상 설치 완료
4. git 설치 `sudo apt-get install git`
5. git clone `git clone https://github.com/dbusteed/kafka-spark-streaming-example`
6. 실행 권한 추가
    * `chmod +x fake_tweet_stream.py`
    * `chmod +x transformer.py`
    * `chmod +x tweet_stream.py`
7. words 파일 생성 `vim words` (경로 pwd 명령어로 사용 : /kafka-spark-streaming-example/files)
파일 내용
sdafjlsdhaflksadjfhkasdjfhl
sadfjhasdfksdhafkjsadfh
dsfhksadfjhsadkfjhsadkf
sdafkjsadfhkjsadfhkjsghiuwehkjvzxcj
weafuvbkcjzkcxjvb
8. `vim fake_tweet_stream.py` word 파일 경로 수정
파일 내용 변경
WORD_FILE = '/kafka-spark-streaming-example/files/words'

9 server.properties - advertiesd.host.name 수정 `vim /opt/kafka_2.13-2.8.1/config/server.properties`
아래 내용 추가/수정
...
listeners=PLAINTEXT://172.19.0.15:9092
...
advertiesd.host.name=자신의호스트주소


# Spark

1. spark-zeppelin 진입 `docker exec -it spark-zeppelin bahs`
2. `pip3 install pyspark` 파이스파크 설치
3. `pyspark` 실행 (`ctrl + d` 로 exit)
4. pyspark 버전에 맞게 설정 `pip3 install pyspark==3.0.0`
5. python-kafka 설치 `pip3 install kafka-python`

AnalysisException: Failed to find data source: kafka. Please deploy the application as per the deployment section of "Structured Streaming + Kafka Integration Guide".;
오류 발생시 아래 명령어 실행
spark-submit --packages org.apache.spark:spark-sql-kafka-0-10_2.12:3.0.0 my_kafka_spark_app.py
또는
spark-shell --packages org.apache.spark:spark-sql-kafka-0-10_2.12:3.0.0
```
`



시스템 아키텍처 설계
Thu, 20 Apr 2023 02:48:51 GMT

현재 진행하는 프로젝트에서 시스템 아키텍처 설계 역할을 맡았다.
또한, 금주 일어지는 프로젝트 기획 발표에서 구체적인 수치를 언급하고 싶다는 요구사항을 받아, 어떻게든 구체적인 수치를 넣을 수 있는 방법을 생각 해 작성했다.
cloudcraft를 이용해서 제작했다. https://www.cloudcraft.co/

시스템 아키텍처

시스템 아키텍처 사용자 관점

사용자가 웹 사이트에 접근하게 되면 Front Deploy Server에서 Nginx를 통해 Build된 React를 받게 된다.

사용자가 서버에서 처리해야 하는 요청을 보낼 경우, 해당 API는 Nginx를 통해서 Load Balancer에 전달된다.

Load Balancer는 2개의 WAS의 상태를 확인 한 후 가용할 수 있는 서버에 해당 요청을 분배한다.

각 각의 WAS는 사용자의 요청을 처리하며 분산 처리가 필요한 경우에는 Apache Kafka 메시징 시스템을 이용해 분산 처리가 실행된다.

또한, 각  WAS들은 DB와 연결되어 Data를 처리한다.


장점

확장성: 로드 밸런서와 Apache Kafka를 사용하여 서비스의 부하 분산과 확장성을 향상시킬 수 있습니다. WAS를 추가하거나 삭제하면서 시스템의 처리량을 유연하게 조절할 수 있습니다.

가용성: 로드 밸런서를 사용하여 여러 대의 WAS에 요청을 분산시키므로, 하나의 WAS가 다운되더라도 서비스 전체에 영향을 미치지 않습니다. 이는 시스템의 가용성을 높이는 데 기여합니다.

성능: Nginx를 통해 정적 리소스를 캐싱하고 효율적으로 전달함으로써, 성능을 향상시킬 수 있습니다. 또한, Apache Kafka를 사용하여 WAS 간의 통신을 효율적으로 처리하므로, 서비스의 응답 시간을 단축시킬 수 있습니다.

비용 효율성: WAS를 여러 대 사용하여 부하를 분산시키면서, 하드웨어 리소스를 효율적으로 활용할 수 있습니다. 또한, AWS EC2와 같은 클라우드 서비스를 사용하여 인프라를 구축함으로써, 운영 비용을 절감할 수 있습니다.



구체적인 수치

가용성 : 서비스할 수 있는 WAS가 2개이기 때문에, WAS에 문제가 발생할 가능성은 단순 산술 계산으로 1/2로 줄어들 수 있다. 또한, 로드 밸런서를 사용하여 요청을 분산시키면, 하나의 WAS가 처리할 수 있는 요청 수를 초과해도 시스템 전체에 영향을 미치지 않아 실제로는 문제가 발생할 경우는 더 적다.

성능: Nginx를 통해 정적 리소스를 캐싱하고 효율적으로 전달함으로써, 요청 처리 속도를 높일 수 있습니다. 또한, Apache Kafka를 사용하여 WAS 간의 통신을 효율적으로 처리함으로써, 응답 시간을 단축할 수 있습니다. 대부분의 요청에 대해 100ms 이하의 응답 시간을 달성할 수 있다.

비용 효율성: 클라우드 서비스를 사용하여 인프라를 구축함으로써, 운영 비용을 절감할 수 있습니다. 또한, WAS를 여러 대 사용하여 하드웨어 리소스를 효율적으로 활용함으로써, 적은 비용으로 높은 처리량을 달성할 수 있습니다.
전체  시스템을 구성하는데 약 80만원 정도가 들었지만, 성능을 2배로 높이기 위해서 필요한 비용은 약 30만원이다.





2023-04-18
Tue, 18 Apr 2023 00:16:11 GMT
JPQL, Native Query

JPA를 이용할 떄, 쿼리를 이용하기 위한 방법은 JPQL과 Native Query가  있다.
JPQL을 사용하게 될 경우 SQL을 추상화 하기 때문에 데이터 베이스 의존도가 낮아진다.
반면 Native Query를 사용하게 될 경우 데이터 베이스의 의존도가 높아진다.
이식성을 고려한다면 JPQL을 사용하는게 좋고, JPQL로 처리할 수 없는 경우 Native Query를 사용하는게 옳다고 생각한다.

Error 처리

error에 대해서 얼마나 세세하게 할 건지?

입력의 신뢰

Front에서 전달하는 입력을 얼마나 신뢰할 수 있는지?
어느 선 까지 신뢰해야 하는지
입력의 검증을 위한 IO 증가 vs 신뢰성 보장




JPA 제약 조건 수정하기
Tue, 18 Apr 2023 00:15:05 GMT

https://velog.io/@joshuara7235/ISSUEs-JPA%EB%A1%9C-%EC%83%9D%EC%84%B1%ED%95%9C-entity-column%EC%97%90%EC%84%9C-unique-%EC%A0%9C%EC%95%BD%EC%A1%B0%EA%B1%B4-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B8%B0


JPA 설정이 다음과 같이 되어있을 경우, spring.jap.hibernate.ddl-auto : update
테이블 관련 제약 조건들을 수정하기 위해서는 DB에 직접 수정해야 한다.




Returnz 부하테스트 2
Thu, 06 Apr 2023 12:21:57 GMT
import time
from locust import HttpUser, task, between
import json
import random


class QuickstartUser(HttpUser):
    wait_time = between(3, 5)

    # 닉네임 조회 Task
    @task
    def chat_room(self):
        self.client.get("/")
        self.client.post("/api/members/login", json={"username":"moon5@naver.com", "password":"ssafy123!"})

    # 게임 생성 Task
    @task
    def game_create(self):
        self.client.get("/")
        self.client.post("/api/games/init", json={"theme":"COVID",
        "turnPerTime":"DAY",
        "startTime":0,
        "totalTurn":10,
        "memberIdList":[1]})


    # 게임 진행 Task
    @task
    def game_progress(self):
        list_index = random.randrange(0, len(game_room_list))
        self.client.get("/")
        self.client.post("/api/games/game", json={
        "roomId" : "16cd5b51-789d-4723-80eb-b76b1e7a0dd1",
        "gamerId" : 3021})

게임 진행 시 턴을 넘기지 않도록 설정하고, 부하테스트를 진행했다.
분산 저장을 위해 사용했던 hadoop, spark, zeppeline 등을 stop 시킨 후 진행했다.

AWS EC2 성능

xeon 2676v3 Siblings : 4

결과


RPS는 22
95% 4500ms되는 구간의 유저수는 99명
게임의 원활한 진행을 위한 시간이 5000ms라고 가정한다면, 최대 103명 까지 가능하다.




Returnz 부하 테스트
Wed, 05 Apr 2023 07:38:47 GMT
부하 테스트를 진행한다.
locust file
import time
from locust import HttpUser, task, between
import json
import random

game_room_list = [
    {
        "roomId" : "e47b2a75-003f-4420-bdaa-eed369f121b4",
        "gamerId" : 1329
    },
    {
        "roomId": "71cf2f67-0dbd-4540-b1bb-dcfe7468e2c3",
        "gamerId": 1330
    },
    {
        "roomId": "fd7906a9-1c6c-414a-9ae6-cdd1130bd60b",
        "gamerId": 1331
    }, 
    {
        "roomId": "941e133b-536d-4d45-817b-3fd1152dce5e",
        "gamerId": 1332
    },
    {
        "roomId": "33609155-5960-4686-98b0-36ecde8ba1e4",
        "gamerId": 1333
    },
    {
        "roomId": "706bd11b-a91f-469b-af7c-86872e8e2123",
        "gamerId": 1334
    },
    {
        "roomId": "13819427-6f64-45f0-9218-655604194b73",
        "gamerId": 1335
    },
    {
        "roomId": "62b7d4bd-4fe0-4ebc-adc3-9fb8ca20bf2e",
        "gamerId": 1336
    },
    {
        "roomId": "b0795412-4675-4b9b-8b0b-f51ed38892f7",
        "gamerId": 1337
    },
    {
        "roomId": "be8fe367-f0ae-4f57-8abd-f635f9def5da",
        "gamerId": 1338
    },
    {
        "roomId": "63eedc5e-4b42-49d4-942a-66188a7303b7",
        "gamerId": 1339
    },
    {
        "roomId": "7c0ca297-1305-4cb2-9788-780fffb18dab",
        "gamerId": 1340
    },
    {
        "roomId": "10c9a2d2-7355-4146-b5d4-5add9d617f41",
        "gamerId": 1341
    },
    {
        "roomId": "906fa5b2-233d-45f7-a5c4-083feafb8023",
        "gamerId": 1342
    },
    {
        "roomId": "0066ffb9-4862-45e0-9de2-2de1177a709d",
        "gamerId": 1343
    },
    {
        "roomId": "159c630a-f1ee-46f1-907f-b1313238e576",
        "gamerId": 1344
    }

]

class QuickstartUser(HttpUser):
    wait_time = between(3, 5)

    # 닉네임 조회 Task
    @task
    def chat_room(self):
        self.client.get("/")
        self.client.post("/api/members/login", json={"username":"moon5@naver.com", "password":"ssafy123!"})

    # 게임 생성 Task
    @task
    def game_create(self):
        self.client.get("/")
        self.client.post("/api/games/init", json={"theme":"COVID",
        "turnPerTime":"DAY",
        "startTime":0,
        "totalTurn":10,
        "memberIdList":[1]})


    # 게임 진행 Task
    @task
    def game_progress(self):
        list_index = random.randrange(0, len(game_room_list))
        self.client.get("/")
        self.client.post("/api/games/game", json={json.dumps(game_room_list[list_index])})

게임방을 미리 생성해둔 채로 진행.

닉네임 조회, 게임 생성, 게임 조회를 수행하도록 함.

게임방 생성을 계속해서 해줘야 하므로, 한번의 테스트로 Insight를 얻을 수 있도록 Number of Users, spawn rate를 조정




게임 방 진행시 가져오는 Data가 많고, DB에서 탐색해야 하는 데이터도 많기 때문에 RPS가 낮고, 응답 시간 또한 낮을 거라 판단.
게이방 처음 진입 시, 대량의 데이터를 한번에 가져오기 때문에, 초기 Response Times 95%가 비선형적으로 증가한다고 판단.

부하 테스트 결과


Total Request per Second를 분석하면 제일 작은 RPS는 10.3 이였다.
최대 RSP는 약 15이다.
Failure는 닉네임 조회, 로그인, 메인 화면 진입시에 발생했다.
Response time 50th percentile은 16 ~ 18사이로 균등하다
Response time 95th percentile은 꾸준히 증가한다. (3200ms ~ 34000ms)
Response Time 95th percentile이 줄어들다 증가하는 구간의Number of Users는 33이다.
해당 경우의 Response Time 95th percentile은 4600ms이다.

분석 결과

게임 진행 시 처리해야 하는 데이터가 많기 때문에 응답시간이 어느정도 낮다는 걸 고려한 결과 최대 처리할 수 있는 유저의 수는 33명이라 가정한다.
locust에서는 3, 5초 사이로 Task를 수행하도록 설정했지만, 실제 게임에서는 이보다 긴 1분 이내에서 Task가 수행되기때문에 테스트 보다 안정적일 것이라 생각한다.