Computer Science Knowledge Storage

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는
1. 프로젝트 초기화
2. 쿠키를 이용한 로그인 구현
3. 세션을 이용한 로그인 구현
4. JWT 토큰을 활용한 로그인 구현
입니다. 

첫번째는 프론트와 백엔드 설정입니다.

서론

로그인은 현대 웹 애플리케이션에서 필수적인 기능으로 자리 잡았습니다. 사용자 인증은 단순히 애플리케이션에 접근하기 위한 절차를 넘어, 보안, 데이터 보호, 그리고 맞춤형 서비스 제공의 핵심 역할을 담당합니다. 따라서 신뢰할 수 있고 효율적인 로그인 시스템을 설계하고 구현하는 것은 개발자의 중요한 과제 중 하나입니다.

이 포스팅에서는 로그인 시스템을 체계적으로 정리하고자 합니다. 이를 통해 로그인 시스템의 기본 원리부터 실제 구현 방법까지 폭넓게 다루고자 합니다.

프론트는 react를 사용하고 백엔드는 Spring Framework를 활용하여 다음과 같은 방식으로 로그인 시스템을 구현할 예정입니다:

1. 쿠키와 세션을 이용한 상태 관리
2. Spring Security를 활용한 인증 및 권한 부여
3. OAuth2를 통한 소셜 로그인 연동

Frontend 설정

프론트는 리액트를 활용하고 언어는 TypeScript를 이용할 것입니다. 리액트 프로젝트를 생성하기 위해
npx create-react-frontend를 통해 프로젝트를 생성합니다.

해당 프로젝트에서 TypeScript를 사용하기 위해 tsconfig.json을 설정해줍니다.

tsconfig.json

{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx"
    },
    "include": [
      "src"
    ]
  }

App.js 파일에서는 react-router-dom 라이브러리를 사용하여 애플리케이션의 라우팅을 설정합니다.
이 설정은 SPA(Single Page Application) 형태의 웹사이트에서 페이지 간 전환을 빠르고 부드럽게 구현할 수 있도록 해줍니다.
BrowserRouter, Routes, Route 등의 컴포넌트를 사용하여 라우트 경로와 해당 경로에 매핑된 컴포넌트를 정의합니다.

npm install react-route-dom을 통해 라이브러리 설치를 진행해줍니다.

App.js

import AppRoutes from "./pages/AppRoutes";

function App() {
  return (
      <AppRoutes />
  );
}

export default App;

AppRoutes.ts

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import { RoutePath } from '../interface/RoutePath';
import HomePage from './home/HomePage';

const AppRoutes = () => {
    return (
      <Router>
          <Routes>
              <Route path={RoutePath.HOMEPAGE} element={<HomePage />} />
          </Routes>
      </Router>
    )
  }
  
  export default AppRoutes

RoutePath.ts

export enum RoutePath {
    HOMEPAGE = "/",
}

HomePage.tsx 파일은 애플리케이션의 메인 페이지 역할을 하는 컴포넌트를 정의합니다.

이 페이지는 사용자가 사이트에 처음 방문했을 때 렌더링되는 기본 화면을 제공합니다.
HomePage 컴포넌트는 React를 사용하여 작성되며, 사용자가 볼 수 있는 다양한 콘텐츠와 네비게이션 링크들을 포함할 수 있습니다.

HomePage.tsx는 github를 참조하시길 바랍니다.

Backend 설정

백엔드는 Spring Boot 프레임워크를 기반으로 하며, 데이터 관리를 위해 JPA(Java Persistence API)를 사용하여 객체-관계 매핑을 지원합니다. 이를 통해 데이터베이스와의 상호작용을 더욱 간편하고 직관적으로 구현할 수 있습니다.

데이터베이스는 경량화된 H2 데이터베이스를 활용하여, 개발 및 테스트 단계에서 빠르고 효율적인 데이터 관리를 수행할 예정입니다. 이를 통해 초기 설정 및 테스트 과정을 간소화하고 생산성을 높일 수 있습니다.

start.spring.io에 해당 프로젝트를 생성해줍니다.

build.gradle은 다음과 같습니다. swagger를 위한 dependency는 넣어주지 않으셔도 됩니다.

build.gradle

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

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(17)
	}
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
	implementation group: 'org.springdoc', name: 'springdoc-openapi-starter-webmvc-ui', version: '2.6.0'
}

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

데이터베이스 h2 생성

경량화된 h2 데이터베이스를 사용할 것입니다. 해당 설치하기 위해 h2 데이터베이스를 다운로드 사이트로 이동합니다.

압축 파일을 해제 한 후 h2가 설치한 곳으로 이동하여 chmod 755 ./bin/h2.sh로 h2를 실행할 수 있는 권한을 설정해줍니다. bin 폴더로 이동 후 ./h2.sh를 통해 h2 데이터베이스를 실행해보면

다음과 같은 콘솔창이 뜹니다. JDBC URL을 설정은 데이터베이스 생성입니다. 저는 auth라는 데이터베이스를 생성하기 위해 url을 auth로 변경해줍니다. 이후 연결을 해줍니다.

💡 만약 해당 창이 뜨지 않는다면 도메인 앞쪽을 localhost로 변경해줍니다.
http://218.38.137.27:8082/(...)
=> http://localhost:8082/(...)

Spring 프로젝트를 이동하여 application.yml을 다음과 같이 설정해줍니다.

application.yml

spring:
  datasource:
    url: jdbc:h2:tcp://localhost/~/auth
    username: sa
    password:
    driver-class-name: org.h2.Driver

  jpa:
    hibernate:
      ddl-auto: create
    properties:
      hibernate:
        show_sql: true
        format_sql: true

logging.level:
  org.hibernate.SQL: debug
#  org.hibernate.type: trace

서버가 제대로 띄워졌는지 확인하기 위한 healthCheck를 위한 컨트롤러를 만들어줍니다.

StatusController

@Slf4j
@RestController
@RequestMapping("/status")
@Tags(value = @Tag(name = "StatusController", description = "Retrieve any status"))
public class StatusController {

    @GetMapping
    public ResponseEntity<?> serverStatusCheck() {
        log.info("this server is health");
        return ResponseEntity.ok("ok");
    }

    @GetMapping("/all")
    public ResponseEntity<?> anyOneCanAccess() {
        log.info("all people can access");
        return ResponseEntity.ok("all people can access");
    }
}

서버가 제대로 실행되었는지 확인하기 위해 postman을 통해 확인해보면

다음과 같이 제대로 띄워져 있는 결과를 얻을 수 있습니다.

데이터베이스와의 연동 확인

데이터베이스와의 연동을 확인하기 위해 간단한 create 요청을 만들어 디비에 제대로 적제되었는지 확인해보겠습니다.

AccountDto와 SignUpRequest는 Java의 record를 사용해 생성됩니다. record는 Java 16 이상에서 제공되는 기능으로, 불변 객체를 간결하게 정의할 수 있게 해줍니다. 이를 통해 DTO(Data Transfer Object)와 요청 객체를 더 짧고 명확한 코드로 작성할 수 있습니다.

SignUpRequest

public record AccountDto() {
    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    public static final class SignUpRequest {
        private String username;
        private String password;
    }
}

다음은 controller를 생성합니다. @RequestBody를 통해 받은 SignUpRequest를 통해 service의 joinMember를 호출합니다.

TestController

@Slf4j
@RestController
@RequiredArgsConstructor
@RequestMapping("/test")
@Tags(value = @Tag(name = "TestController", description = "check database"))
public class TestController {

    private final TestService testService;

    @PostMapping("/members")
    public ResponseEntity<String> createUser(@RequestBody SignUpRequest signUpRequest) throws Exception {
        log.info("Controller: createUser");
        String createName = testService.joinMember(signUpRequest.getUsername(), signUpRequest.getPassword());

        return ResponseEntity.ok(createName);
    }
}

엔티티 Member를 생성합니다.

Member

@Entity
@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class Member {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String username;
    private String password;

    public Member(String username, String password) {
        this.username = username;
        this.password = password;
    }
}

TestService는 서비스 계층으로 Repository와의 상호작용을 담당하고 비즈니스 로직을 담당하는 부분입니다.

TestService

@Slf4j
@RequiredArgsConstructor
@Service
public class TestService {

    private final MemberRepository memberRepository;

    public String joinMember(String username, String password) throws Exception {
        log.info("Service: joinMember");
        if (memberRepository.existsByUsername(username)) {
            throw new RuntimeException("fail join member");
        }

        Member member = new Member(username, password);

        memberRepository.save(member);

        return member.getUsername();
    }
}

MemberRepository는 Spring Data JPA의 JpaRepository 인터페이스를 확장하여 데이터베이스와 상호작용하는 저장소(Repository)입니다. 이 인터페이스를 구현함으로써, 기본적인 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 자동으로 제공받을 수 있습니다. 이를 통해 개발자는 복잡한 SQL 쿼리 작성 없이 간단한 메서드 호출만으로 데이터베이스 작업을 수행할 수 있습니다.

MemberRepository

@Repository
public interface MemberRepository extends JpaRepository<Member, Long> {
    boolean existsById(Long id);
    boolean existsByUsername(String username);
    Member findByUsername(String username);
}

포스트맨을 통해서 확인해본 결과는 다음과 같습니다.

Spring의 SQL문은 다음과 같습니다.

데이터베이스에 잘 적제된 것을 확인할 수 있습니다.

깃허브 및 참조

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링 정리를 위한 포스팅입니다.
해당 포스팅은 @Controller, @Service, @Repository의 역할과 특징 정리입니다.

도입

Spring 프레임워크는 계층구조로 코드를 나누어 각 계층마다 역할을 분리하였습니다.(객체 지향적 특징)
이와 같은 계층 구조는 코드의 역할 분리를 명확히 하고 유지보수성을 높이는 데 중요한 역할을 합니다.

• Presentation Layer: 클라이언트의 요청 처리
• Business Layer: 비즈니스 로직 처리
• Persistence Layer: 데이터 접근 처리

클라이언트와의 요청 처리는 @Controller, 비즈니스 로직 처리는 @Service, 데이터베이스와의 통신은 @Repository를 통해 코드를 구성합니다. 

이번 포스팅에서는 @Controller, @Service, @Repository의 역할과 특징을 살펴보겠습니다.

@Controller

@Controller는 Spring MVC에서 컨트롤러 클래스를 정의할 때 사용되는 어노테이션입니다. 일반적으로 뷰 템플릿을 반환하는 방식으로 클라이언트의 요청을 처리합니다. 이 어노테이션이 있는 클래스는 HTTP 요청을 처리하고, Model 객체를 사용하여 데이터를 뷰에 전달합니다. @Controller는 주로 웹 애플리케이션에서 서버 사이드 렌더링을 위한 컨트롤러로 사용됩니다.

1. 클라이언트로부터 받은 요청을 통해 Handler 어댑터를 통해 해당 요청을 처리할 수 있는 controller를 찾습니다.
2. controller는 service와 repository의 비즈니스 로직을 처리한 후 뷰 이름을 handlerAdapter에게 전달합니다.
3. Dispatcher Servlet은 해당 뷰 네임에 해당하는 뷰를 ViewResolver를 통해서 뷰를 반환합니다.

@Controller
@RequiredArgsConstructor
public class UserController {
    private final UserService userService;

    @GetMapping("/users")
    public String getUsers(Model model) {
        model.addAttribute("users", userService.findAll());
        return "userList"; // "userList" 뷰 반환
    }
}

@Controller + @RequestBody

@RequestBody는 HTTP 요청 본문을 자바 객체로 변환하여 매핑해주는 어노테이션입니다. 이 어노테이션을 @Controller와 함께 사용하면, 클라이언트에서 전달한 JSON, XML 등의 데이터를 객체로 받을 수 있습니다. @Controller는 뷰를 반환하는 역할을 계속하고, @RequestBody는 데이터를 뷰에 매핑하는 역할을 합니다.

1. 클라이언트로부터 받은 요청을 통해 Handler 어댑터를 통해 해당 요청을 처리할 수 있는 controller를 찾습니다.
2. controller는 service와 repository의 비즈니스 로직을 처리한 후 뷰 이름을 handlerAdapter에게 전달합니다.
3. 반환되는 객체는 Json으로 Serialize되어 사용자에게 반환됩니다. 이는 @ResponseBody 어노테이션으로 개발됩니다.

@Controller
@RequiredArgsConstructor
public class UserController {
    private final UserService userService;

    /**
     * Handles POST requests to create a new user from JSON data and renders the "userDetail" view.
     *
     * @param user the user data from the request body
     * @param model the model to hold attributes for the view
     * @return the name of the view to be rendered
     */
    @PostMapping("/users")
    public String createUser(@RequestBody User user, Model model) {
        User savedUser = userService.save(user);
        model.addAttribute("user", savedUser);
        return "userDetail"; // Return the name of the view
    }
}

@RestController

@RestController는 @Controller와 @ResponseBody를 결합한 어노테이션입니다. @RestController가 적용된 클래스는 RESTful 웹 서비스를 제공하며, 메서드의 반환 값이 바로 HTTP 응답 본문으로 전송됩니다. 따라서 @RestController는 일반적으로 JSON, XML과 같은 데이터를 직접 반환하는 데 사용됩니다. 뷰를 반환하지 않으며, 주로 API 서버에서 사용됩니다.

1. 클라이언트로부터 받은 요청을 통해 Handler 어댑터를 통해 해당 요청을 처리할 수 있는 controller를 찾습니다.
2. controller는 service와 repository의 비즈니스 로직을 처리한 후 뷰 이름을 handlerAdapter에게 전달합니다.
3. 반환되는 객체는 Json으로 Serialize되어 사용자에게 반환됩니다. 이는 @RestController 어노테이션으로 개발됩니다.

@RestController
@RequiredArgsConstructor
public class UserController {
    private final UserService userService;

    /**
     * Handles GET requests to retrieve the list of users as JSON.
     *
     * @return a list of users
     */
    @GetMapping("/json-users")
    public List<User> getUsers() {
        return userService.findAll();
    }
}

@Service

@Service 어노테이션은 서비스 계층에 사용됩니다. 서비스 계층은 비즈니스 로직을 처리하는 곳으로, 일반적으로 데이터베이스에서 데이터를 조회하고, 가공하여 컨트롤러로 전달하는 역할을 합니다. @Service는 주로 서비스 클래스를 나타내며, @Component의 특성을 그대로 가지고 있어 Spring 컨테이너에 의해 관리됩니다.

@Service
@RequiredArgsConstructor
public class UserService {
    private final UserRepository userRepository;

    public List<User> findAll() {
        return userRepository.findAll();
    }
}

@Repository

@Repository는 데이터 접근 계층에 사용됩니다. 이 어노테이션은 주로 데이터베이스와 상호작용하는 클래스를 나타냅니다. @Repository 어노테이션을 사용하면 Spring이 해당 클래스를 자동으로 데이터 접근 객체(DAO)로 인식하고, 예외 변환 기능을 제공합니다. @Repository는 @Service와 동일하게 @Component의 특성을 그대로 가지고 있어 Spring 컨테이너에 의해 관리되며, 데이터베이스와의 상호작용을 담당합니다.

// In-memory Database
@Repository
public class ItemRepository {

    private static final Map<Long, Item> store = new HashMap<>(); //static
    private static long sequence = 0L; //static

    public Item save(Item item) {
        item.setId(++sequence);
        store.put(item.getId(), item);
        return item;
    }
}


// JPA
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
    List<User> findAll();
}

코드

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링 정리를 위한 포스팅입니다.
해당 포스팅은 Lombok 어노테이션 입니다.

Lombok이란?

Lombok은 Java 애플리케이션에서 보일러플레이트 코드(반복적인 코드)를 줄여주는 라이브러리입니다.

이를 통해 코드의 가독성을 높이고 유지보수를 쉽게 만들어 줍니다.

왜 Lombok을 사용해야 하는가?

• Java의 기본 클래스는 자주 사용되는 메서드(생성자, getter, setter, toString 등)를 수동으로 작성해야 합니다.
• Lombok은 이러한 반복적인 코드 생성을 자동화하여 개발 생산성을 크게 향상시킵니다.

Lombok 어노테이션 종류

@Getter / @Setter

• 클래스의 모든 필드에 대해 getter와 setter 메서드를 자동으로 생성합니다.

@Getter @Setter
public class Person {
    private String name;
    private int age;
}

@ToString

• 객체의 필드를 문자열로 변환하는 toString() 메서드를 자동으로 생성합니다.

@ToString 
public class Person { 
    private String name; 
    private int age; 
}

@NoArgsConstructor / @AllArgsConstructor

• 기본 생성자 및 모든 필드를 초기화하는 생성자를 자동으로 생성합니다.

@NoArgsConstructor
@AllArgsConstructor
public class Animal {
    int age;
    String name;
}

@Builder

• 빌더 패턴을 적용하여 객체 생성 시 가독성을 높입니다.

@Builder
public class Animal {
    int age;
    String name;
}

@Data

• @Getter, @Setter, @ToString, @EqualsAndHashCode, @RequiredArgsConstructor를 모두 포함하는 어노테이션입니다. 주로 DTO 객체에 사용됩니다.

@Data
public class Plant {
    private int height;
    private String origin;

    public Plant(int height, String origin) {
        this.height = height;
        this.origin = origin;
    }
}

Lombok 설치방법

spring에서 lombok을 설치하기 위해서는 maven 또는 gradle을 사용하면 됩니다. 저는 gradle을 사용하겠습니다. 

build.gradle에서 compileOnly 'org.projectlombok:lombok',  annotationProcessor 'org.projectlombok:lombok'

를 설정한 후에 gradle 프로젝트를 reload 하면 됩니다.

dependencies {
	// ...
	compileOnly 'org.projectlombok:lombok'
	annotationProcessor 'org.projectlombok:lombok'
}

예제 확인

public class Test {
    public static void main(String[] args) {
        // @Getter, @Setter
        Person person = new Person(1, 3, 4, 5, 8);
        System.out.println(person.getShoes()); // getShoes() automatically generated
        person.setShoes(84); // setShoes() automatically generated
        System.out.println(person.getShoes());

        // @ToString
        System.out.println("person.toString: " + person.toString()); // toString() automatically generated

        // @NoArgsConstructor / @AllArgsConstructor
        Animal tomy = new Animal(20, "tomy");
        Animal aymee = new Animal(); // Default constructor automatically generated
        System.out.println("tomy = " + tomy); // toString() automatically generated
        System.out.println("aymee = " + aymee); // toString() automatically generated

        // @Builder
        Animal hiro = Animal.builder().age(7).name("hiro").build(); // Using builder pattern
        System.out.println("hiro.toString() = " + hiro); // toString() automatically generated

        // @EqualsAndHashCode, @RequiredArgsConstructor
        Plant plant1 = new Plant(2, "korea");
        Plant plant2 = new Plant(2, "korea");

        // @Data
        System.out.println("plant1 equals plant2: " + plant1.equals(plant2)); // true, since fields are the same
        System.out.println("plant1 hashCode: " + plant1.hashCode()); // Same hashCode for equal objects
        System.out.println("plant2 hashCode: " + plant2.hashCode()); // Same hashCode for equal objects

        // @RequiredArgsConstructor automatically generates a constructor with final fields
        Plant plant3 = new Plant(3, "japan"); // Constructor with height and origin fields
        System.out.println("plant3: " + plant3); // toString() automatically generated
    }
}

다음과 같이 모든 어노테이션에 대해 결과를 확인할 수 있습니다.

코드