빛나는 아이디어✨

[캡스톤B 졸업 프로젝트] 그로쓰 기술 회고록

wlalsu_u — Tue, 21 May 2024 21:32:26 +0900

1. 프로젝트 소개 및 개요

이화여대 컴퓨터공학과 [캡스톤 디자인 및 창업 프로젝트 B] 수업의 졸업프로젝트로,

우리 팀은 Once(원스) 애플리케이션을 고안하고 개발하게 되었다.

Once 프로젝트 소개

카드 다보유자를 위한 결제 전 최대 할인 카드를 추천해주는 AI 챗봇 서비스

원스는 카드 다보유자를 위해, 결제 전 결제처와 결제 금액을 입력하면

사용자가 보유한 카드 중 해당 결제처에서 가장 할인 금액이 높은 카드를 추천해주는 핀테크 모바일 애플리케이션이다.

Tech Stack

Once 의 주요 SW 모듈 및 SW Architecture 구조는 다음과 같다.

1) Front-End : Flutter (Dart)
2) Back-End
- 프레임워크 : SpringBoot (Java)
- 클라우드 호스팅 : AWS - EC2, RDS(MySQL), S3
- 크롤링 라이브러리 : BeatifulSoup, Selenium
- 인공지능 카드 추천 모델 : OpenAI GPT-3.5 Turbo Fine-Tuning
3) 외부 오픈 소스
- Docker
- CODEF API : 사용자 보유 카드 목록, 실적 충족 여부, 카드 승인 내역 API 조회

Once 프로젝트에서 크롤링, Front-End 개발, Back-End API 개발을 맡아 진행하였다.

각각의 기술 스택에 대해 아래에 상세히 기술하였다.

2. 삼성 카드/현대 카드 혜택 크롤링

소비자와 카드사 간의 정보 비대칭 문제를 해결하기 위해서는,

주기적인 크롤링을 통해 소비자에게 최신 혜택 정보를 제공하는 것이 중요하다고 생각했기에,

개발의 첫 시작으로 카드 혜택 크롤링을 진행하게 되었다.

우리 팀은 [ 신한, 국민, 삼성, 롯데, 하나, 현대 ] 6개 카드사의 크롤링을 진행하였는데,

그 중 삼성카드와 현대카드 혜택 크롤링을 맡게 되었다.

크롤링 하는 방법을 한번 터득하고 나면, 크롤링 코드를 작성하는 것이 크게 어렵지 않은데,

처음 크롤링을 시작했을때 어디부터 어떻게 시작해야 할지 애를 먹었던 기억이 있어서,,,

크롤링 방법을 단계별로 자세하게 작성해보려고 한다.

(삼성카드를 기준으로 작성했으나, 현대카드도 동일한 방식으로 개발하였다.)

1. 카드 리스트 수집

먼저 각 카드의 상세 페이지에 자동으로 접근하게 하기 위해서는,

카드 리스트 페이지에서 각 카드의 이름, 이미지, 상세 페이지 URL을 수집하는 과정이 필요하다.

(수동으로 카드 리스트를 수집하게 되면, 카드가 추가되거나 변경되었을 때 매번 수동으로 업데이트 해주어야 하므로,

카드 리스트 페이지를 크롤링하는 방식이 좋다.)

삼성 카드의 경우 아래의 리스트 페이지에서, 전체 삼성 카드 리스트를 추출하였다.

https://www.samsungcard.com/home/card/cardinfo/PGHPPDCCardCardinfoRecommendPC001

3. Front-End flutter 개발

안드로이드 및 iOS 운영체제에서 모두 실행이 가능한 크로스플랫폼으로 개발하기 위해

flutter를 이용하여 Front-End 개발을 진행하게 되었다.

우리 팀에 프론트 개발자가 없어 프론트도 함께 개발하게 되었는데,

React나 Android 개발은 간단하게 진행해본 적은 있지만,

flutter 개발은 처음이라 걱정이 많이 앞섰었다..

프론트 개발을 본격적으로 들어가기 전에

유튜브 [ 개발하는 남자 - 인스타그램 클론코딩 ] 강의를 들었는데,

처음 flutter 감을 잡는데 큰 도움이 되어 소개한다!

https://www.youtube.com/watch?v=hM2whwf2u14&list=PLgRxBCVPaZ_1iBe1v3-ZSSzHGdQo7AZPq

flutter 개발이 처음이다 보니, 처음 프로젝트를 세팅하는 과정부터 난관이었다,,

github flutter 프로젝트들을 찾아다니면서 공부하다가, 아래와 같이 프로젝트 세팅을 진행하게 되었다!

프로젝트 세팅 구조

먼저 flutter 프로젝트 폴더는 다음과 같이 구성하면 된다.

꼭 해당 구조대로 세팅할 필요는 없지만,

flutter 프로젝트에서 가장 많이 사용되는 방식으로 프로젝트를 세팅하였다.

ONCE-FE
│
├── assets
│ └── fonts
│ └── images
│
│ (...)
│
├── lib
│ └── src
││ ├── screens
│ │ │ └── login // 회원가입 및 로그인 관련 페이지들
│ │ │ │ └── (...)
│ │ │ │
│ │ │ └── home // 메인 챗봇 페이지들
│ │ │ │ └── home.dart
│ │ │ │ └── (...)
│ │ ││
│ │ │ └── mywallet // 마이 월렛 관련 페이지들
│ │ │ │ └── mywallet.dart
│ │ │ │ └── (...)
│ │ │ │
│ │ │ └── mypage // mypage 내부에 속하는 페이지들
│ │ │ └── mypage.dart
│ │ │ └── (...)
│ │ │
│ │ ├── models
│ │ │ └── (models 내부 파일 및 폴더)
│ │ ├── utils
│ │ │ └── (utils 내부 파일 및 폴더)
│ │ ├── controller
│ │ │ └── (controller 내부 파일 및 폴더)
│ │ └── repository
│ │ │ └── (repository 내부 파일 및 폴더)
│ │
│ │ └── app.dart
│ │
│ └── main.dart
│ └── style.dart

각 폴더에는 아래의 내용에 해당되는 파일들을 작성하여 구성하면 된다.

assets : 리소스 폴더 (정적 이미지, 아이콘, 폰트)
lib : flutter 개발을 위한 Dart 코드 파일 저장 (앱 로직 및 뷰 구현)
- screens : 앱 고유 화면 저장
- models : 앱 전체에서 사용할 데이터 모델 파일
- utils : 앱 전체에서 사용할 공용 비즈니스 로직 (유틸리티 함수, 클래스)
- controller : 컨트롤러 및 비즈니스 로직
- repository : 외부 데이터와 상호작용하기 위한 레포지토리 및 데이터 소스 정의
main.dart : flutter 앱 진입점, 애플리케이션 시작 정의 및 루트 위젯 생성
style.dart : 애플리케이션 공용 스타일 지정 (텍스트 스타일, 색상)

프로젝트 테마 설정

다음으로 figma에서 디자인한 UI를 참고하여,

프로젝트의 전체 스타일로 적용해야 하는 테마 코드를 작성해주었다.

1) 폰트 적용

assets > fonts 폴더에 Pretendard, Poppins 글꼴 ttf 파일 복사하여 적용하였다.

이후 pubspec.yaml 파일 fonts 하위에 해당 폰트를 등록한 후,

pubget 을 실행해준다.

2) 프로젝트 전체 스타일 적용

lib > style.dart 파일에 전체 뷰에 일괄적으로 적용할 수 있는 스타일 코드를 작성하였다.

작성한 style.dart 코드는 import해서 사용 가능하며,

Material App에 작성하여 모든 위젯에 공통 스타일 적용되도록 한다.

import './style.dart' as 별칭;

void main() {
  runApp(
    MaterialApp(
      theme: 별칭명.변수명,
      home : MyApp()
    )
  );
}

작성한 style.dart 파일은 다음과 같다.

(해당 style.dart 코드를 아직 적용하지 않고, 하드 코딩한 상태인데,, 나중에 리팩토링하면서 고쳐야할 것 같다.. )

프론트엔드 개발

프로젝트 세팅을 마친 후 본격적으로 프로젝트 개발에 들어갔다.

아래와 같이 팀원과 역할을 분담하여 프로젝트 개발을 진행하였다.

[ 앱 초기화면, 로그인, 회원가입, 보유카드 등록, 마이월렛, 마이페이지 정보 수정, 월별 혜택 조회, CODEF 주카드 등록 페이지] 를 맡아 개발하게 되었다.

뷰 개발과 관련해서는 단순히 피그마에 디지인된 화면대로 코드를 작성하면 돼서 어렵지 않았지만,

서버 API와 연결하는 과정에서 처음에 어려움을 많이 겪었어서,

해당 부분에 대해 자세하게 기술하고자 한다.

프론트 - 서버 API 연결

서버 API 연결을 위해, Dart Dio 패키지를 이용하였다.

아래의 공식문서를 참고하면 쉽게 코드를 작성할 수 있다.

https://pub.dev/packages/dio

dio | Dart package

A powerful HTTP networking package, supports Interceptors, Aborting and canceling a request, Custom adapters, Transformers, etc.

pub.dev

먼저, pubspec.yml 파일의 dependencies에

dio 패키지를 추가한 후 pub get 해준다.

(dio 4.0.0 버전을 사용하였다.)

예를 들어 월별 혜택 조회를 위한 API 연결 코드를 작성해보자.

API 명세서를 확인해보면 다음과 같다.

HTTP method : GET
URI : /mypage/benefit?month=8
Request Header : { "Authorization" : "[사용자별 Access Token]" }
Query Parameter : month (Int type)

앞선 명세서를 참고하여 dio를 이용한 API 연결 코드는 다음과 같다.

먼저 apiUrl 에 BASE_URL에 해당 URI를 추가하여 작성해주면 된다.

이때 Query Parameter의 값은 $ 뒤에 변수 명을 작성하여준다.

(BASE_URL을 상단에 Constants.baseUrl로 지정하여 유출되지 않도록 하였다.)

final String BASE_URL = Constants.baseUrl;

다음으로 Request Header의 사용자의 AccessToken이 필요한데,

FlutterSecureStorage 패키지를 이용하여 저장한 AccessToken을 불러올 수 있도록 하였다.

https://pub.dev/packages/flutter_secure_storage

flutter_secure_storage | Flutter package

Flutter Secure Storage provides API to store data in secure storage. Keychain is used in iOS, KeyStore based solution is used in Android.

pub.dev

이후 dio를 이용하여 앞서 작성한 apiUrl을 Get 메소드로 불러오도록 한후,

응답값을 Map<dynamic, dynamic> 형태의 responseData 변수에 넣으면,

해당 responseData를 파싱하여 원하는 응답값을 사용할 수 있다.

// [Get] 월별 혜택 조회
  Future<void> _getMontlyBenefit(BuildContext context) async {
    final String apiUrl = '${BASE_URL}/card/benefit?month=$_month';

    const storage = FlutterSecureStorage();
    String? storedAccessToken = await storage.read(key: 'accessToken');

    final baseOptions = BaseOptions(
      headers: {'Authorization': 'Bearer $storedAccessToken'},
    );

    final dio = Dio(baseOptions);

    try {
      var response = await dio.get(apiUrl);
      Map<dynamic, dynamic> responseData = response.data;
      print(responseData);

      if (responseData['code'] == 1000) {
        _updateBenefitState(responseData);
      }
    } catch (e) {
      // ** 차후 수정 필요 **
      print(e.toString());
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("오류 발생"),
            content: Text("서버와 통신 중 오류가 발생했습니다."),
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text("확인"),
              ),
            ],
          );
        },
      );
    }
  }

다른 API 역시 위와 동일한 방식으로 dio 패키지를 이용하여 연결하였고,

추가적인 프론트엔드 코드 아래의 github 페이지에서 확인할 수 있다.

[ Front-End github ]

https://github.com/EWHA-LUX/ONCE-FE

GitHub - EWHA-LUX/ONCE-FE

Contribute to EWHA-LUX/ONCE-FE development by creating an account on GitHub.

github.com

4. Back-End SpringBoot API 개발

백엔드 개발은 SpringBoot 3.1.6 버전을 이용하여 진행하였다.

먼저 ERD를 설계하고, API 명세서를 작성한 후, API 개발을 시작하였다.

ERD 설계

ERD Cloud를 이용하여 작성하였으며, 최종 설계된 ERD는 다음과 같다.

API 명세서 작성

다음으로 설계한 ERD와 UI를 바탕으로 API 명세서를 작성하였다.

API 개발

[ 아이디 중복 확인, 로그아웃, 비밀번호 확인, 비밀번호 변경, 회원 정보 수정, 마이월렛 조회, 주카드 아닌 카드 실적 입력, 월별 혜택 조회, 목표 혜택 금액 입력 ] API를 맡아 개발하게 되었다.

1) 엔티티 생성

앞서 작성한 ERD를 바탕으로, 각 테이블에 해당되는 엔티티를 작성해준다.

User 엔티티의 예시 코드는 다음과 같다.

각 ERD 칼럼에 해당되는 값을 필드로 작성해주고,

해당 칼럼의 특성을 @Column 어노테이션 안에 작성해주면 된다.

package ewha.lux.once.domain.user.entity;

import ewha.lux.once.domain.user.dto.EditUserInfoRequestDto;
import ewha.lux.once.global.common.BaseEntity;
import ewha.lux.once.global.common.ColumnEncryptor;
import jakarta.persistence.*;

import lombok.*;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.userdetails.UserDetails;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Date;
import java.sql.Timestamp;
import java.util.List;

@Entity
@Table(name="User")
@Getter
@Builder
@NoArgsConstructor(access= AccessLevel.PROTECTED)
@AllArgsConstructor
public class Users extends BaseEntity implements UserDetails {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "userId")
    private Long id;

    @Column(name = "loginId", nullable = false, unique = true)
    private String loginId;

    @Column(name = "username", nullable = false)
    private String username;

    @Column(name = "nickname", nullable = false)
    private String nickname;

    @Column(name = "password", nullable = false)
    private String password;

    @Column(name = "phone")
    private String phone;

    @Column(name = "profileImg")
    private String profileImg;

    @Temporal(TemporalType.DATE)
    @Column(name = "birthday")
    private Date birthday;

    @Temporal(TemporalType.TIMESTAMP)
    @Column(name = "lastLogin")
    private Timestamp lastLogin;

    @Column(name = "benefitGoal")
    private int benefitGoal;

    @Column(name = "connectedId")
    @Convert(converter = ColumnEncryptor.class)
    private String connectedId;


    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        List<GrantedAuthority> authorities = new ArrayList<>();
        authorities.add(new SimpleGrantedAuthority("USER")); // 사용자에게 기본적인 권한을 부여
        return authorities;
    }

    @Override // 계정 만료 여부 반환
    public boolean isAccountNonExpired() {
        return true;
    }

    @Override // 계정 잠금여부 반환
    public boolean isAccountNonLocked() {
        return true;
    }

    @Override // 패스워 만료 여부 반환
    public boolean isCredentialsNonExpired() {
        return true;
    }

    @Override // 게정 사용 가능 여부 반환
    public boolean isEnabled() {
        return true;
    }

    @PreUpdate
    public void setLastLogin() {
        this.lastLogin = new Timestamp(System.currentTimeMillis());
    }

    public void editUserInfo(EditUserInfoRequestDto requestDto){

        if (requestDto.getUsername() != null)
            this.username = requestDto.getUsername();
        if (requestDto.getNickname() != null)
            this.nickname = requestDto.getNickname();
        if (requestDto.getBirthday() != null)
            this.birthday = requestDto.getBirthday();
        if (requestDto.getUserPhoneNum() != null)
            this.phone = requestDto.getUserPhoneNum();
    }



    public void setProfileImg(String profileImg) {
        this.profileImg = profileImg;
    }

    public void updatePassword(String password) {
        this.password = password;
    }

    public void setCardGoal(int goal) {this.benefitGoal = goal;}

    public void setConnectedId(String connectedId) {this.connectedId = connectedId;}
}

2) 응답 코드 생성

코드 개발을 용이하게 하기 위해 응답 코드를 지정하여,

Response를 생성하도록 코드를 작성하였다.

1000번대는 Requst 성공 메시지, 2000번대는 Request 오류 메시지, 3000번대는 Response 오류 관련 메시지를 표시하도록 작성하였다.

3) API 개발

API의 경우 Service, Controller, Dto 관점에서 나누어 생각하면 보다 쉽게 개발가능하다.

비밀번호 확인 API를 확인해보자.

[ Dto ]

먼저 Dto의 경우, 비밀번호 확인을 위해서는 비밀번호 필드만 Request Body로 입력받으면 되므로,

password 필드가 있는 Dto를 작성해준다.

package ewha.lux.once.domain.user.dto;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class ChangePasswordDto {
    private String password;
}

[ Controller ]

- @PostMapping : Post 메소드를 사용하므로 해당 어노테이션을 사용한다.

- value 안에 해당 API URI를 작성해준다.

- Request Header에 Access Token이 필요하므로, @AuthenticationlPrincipal을 이용하여 유저 정보를 가져오도록 한다.

- RequestBody로는 앞서 만든 Dto 클래스를 작성해준다.

- 이후 해당 API를 위한 상세 서비스 로직은 Controller가 아닌 Service에서 작성해야 하므로, userService의 postCheckPassword 메소드의 return 값을 Response로 응답하도록 작성한다.

// [Post] 비밀번호 확인
    @PostMapping(value = "/edit/pw")
    @ResponseBody
    public CommonResponse<?> checkPassword(@AuthenticationPrincipal UserAccount userAccount, @RequestBody ChangePasswordDto checkPasswordRequestDto) {
        try {
            return new CommonResponse<>(ResponseCode.SUCCESS, userService.postCheckPassword(userAccount.getUsers(), checkPasswordRequestDto));
        } catch (CustomException e){
            return new CommonResponse<>(e.getStatus());
        }
    }

[ Service ]

앞서 작성한 Controller의 세부 서비스 로직을 수행하기 위한 코드를 작성한다.

passwordEncoder를 사용하여 Dto Request Body로 입력받은 password와 현재 user의 password가 동일하다면

true 값을 return하도록 설계한다.

public boolean postCheckPassword(Users nowUser, ChangePasswordDto checkPasswordRequestDto) throws CustomException {
        return passwordEncoder.matches(checkPasswordRequestDto.getPassword(), nowUser.getPassword());
    }

다른 API 역시 위와 동일한 방식으로 개발을 완료하였으며,

추가적인 백엔드 코드는 아래의 github 페이지에서 확인할 수 있다.

[ Back-End github ]

https://github.com/EWHA-LUX/ONCE-BE

GitHub - EWHA-LUX/ONCE-BE

Contribute to EWHA-LUX/ONCE-BE development by creating an account on GitHub.

github.com

[UMC Server] Chapter 8.1 API 응답 통일

wlalsu_u — Mon, 27 Nov 2023 16:39:23 +0900

8.0 8주차 워크북 학습 목표

이번 주차는 프로젝트를 위한 여러가지 설정을 적용하였다.

먼저 API 응답을 통일하고,

서버나 클라이언트에서 발생한 오류를 처리하는 방법을 알아보자.

1) Spring Boot에서 API 응답 통일 적용하기

2) Spring Boot에서 에러 핸들러 구축하기

8.1 API 응답 통일

API는 보통 함수를 호출하듯, 하나의 변수에 응답을 받게 되는데,

응답의 형태가 모두 다르게 되면, 프론트 개발자가 이를 이해하기 어려워진다.

예를 들어 API 응답이 성공인 경우와 실패인 경우의 양식이 다르다면,

각각의 응답을 처리하고 파악하기 힘들 것이다.

API 응답 형식

API 응답은 보통 아래의 형태를 따른다.

{
    isSuccess : Boolean
    code : String
    message : String 
    result : { 응답으로 필요한 또 다른 json }
}

{
	"isSuccess ": true,
	"code" : "2000",
	"message" : "OK",
	"result" : 
		{
			"testString" : "This is test!"
		}
}

1) isSuccess

- 성공 여부를 알려주는 필드

2) code

- HTTP 상태 코드에 더해 세부적인 결과를 알려주는 필드

- 예를 들어 403 Unauthorized가 떴을 때, 왜 권한 오류가 없는지 자세히 알려줌

2) message

- code에 추가적으로 어떤 결과인지를 문자로 알려주는 필드

3) result

- 실제로 클라이언트에게 응답으로 필요한 json 반환

- 응답에 실패한 경우 null 반환

[ 참고 ] HTTP 상태코드

1. 200번대 - 문제 없음

- 200 OK : 성공
- 201 Created : 받은 데이터를 가지고 새로운 리소스를 만듦

2. 400번대 - 클라이언트에 의한 에러

- 400 Bad Request : 필요한 정보가 누락되는 등 잘못된 요청
- 401 Unauthorized : 로그인이 안되어 있는 증 인증이 안됨
- 403 Forbidden : 관리자 페이지 접근과 같이 권한 없음
- 404 NotFound : 요청한 정보가 없음

3. 500번대 - 서버에 의한 에러

- 500 Internal Server Error : 서버 터짐..
- 504 Gateway Timeout : 서버가 응답을 안줌

API 응답 통일

먼저 apiPayload 라는 패키지를 생성하고,

ApiResponse 클래스를 만든 후 다음과 같이 코드를 작성한다.

ApiResponse 클래스는 API 응답 정보를 정하는 클래스이다.

package com.example.umcstudy.apiPayload;

import com.example.umcstudy.apiPayload.code.BaseCode;
import com.example.umcstudy.apiPayload.code.status.SuccessStatus;
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonProperty;
import com.fasterxml.jackson.annotation.JsonPropertyOrder;
import lombok.AllArgsConstructor;
import lombok.Getter;

@Getter
@AllArgsConstructor
@JsonPropertyOrder({"isSuccess", "code", "message", "result"})
public class ApiResponse<T> {

    @JsonProperty("isSuccess")
    private final Boolean isSuccess;
    private final String code;
    private final String message;
    @JsonInclude(JsonInclude.Include.NON_NULL)
    private T result;

    // 성공한 경우 응답 생성
    public static <T> ApiResponse<T> onSuccess(T result){
        return new ApiResponse<>(true, SuccessStatus._OK.getCode() , SuccessStatus._OK.getMessage(), result);
    }

    public static <T> ApiResponse<T> of(BaseCode code, T result){
            return new ApiResponse<>(true, code.getReasonHttpStatus().getCode() , code.getReasonHttpStatus().getMessage(), result);
    }

    // 실패한 경우 응답 생성
    public static <T> ApiResponse<T> onFailure(String code, String message, T data){
        return new ApiResponse<>(true, code, message, data);
    }

}

1) @JsonPropertyOrder

- 클래스의 인스턴스를 JSON으로 변환할 시, 속성의 순서를 직렬화

2) ApiResponse <T>

- T라는 타입 매개변수를 가진 제네릭 클래스 선언

3) @JsonInclude(JsonInclude.Include.NON_NULL)

- 값이 null일 경우 result 필드는 해당 JSON에서 제외

4) private T result

- result 값이 어떤 형태로 올지 알 수 없으므로, 제네릭 타입 선언

다음으로 apiPayload > code > status 패키지를 생성한 후

ErrorStatus, SuccessStatus enum을 작성해야 한다.

보통 응답은 Code 라는 이름의 enum으로 형태로

code와 message 형식을 관리한다.

(성공과 실패 응답을 통일할 수도 있고, 분리할 수도 있음)

일단 Code enum으로 구체화 코드를 작성하기 전에,

이를 위한 BaseCode와 BaseErrorCode 인터페이스를 작성해보자.

[ BaseCode ] - 인터페이스

package com.example.umcstudy.apiPayload.code;

public interface BaseCode {
    public ReasonDTO getReason();
    public ReasonDTO getReasonHttpStatus();
}

[ BaseErrorCode ] - 인터페이스

package com.example.umcstudy.apiPayload.code;

public interface BaseErrorCode {
    public ErrorReasonDTO getReason();
    public ErrorReasonDTO getReasonHttpStatus();
}

해당 인터페이스의 두개의 메소드는

이를 구체화하는 아래의 enum Status에서 반드시 오버라이드 해야 한다.

이제 앞선 BaseCode와 BaseErrorCode 인터페이스를 구현하는

ErrorStatus 와 SuccessStatus enum을 작성해보자.

[ ErrorStatus ]

package com.example.umcstudy.apiPayload.code.status;

import com.example.umcstudy.apiPayload.code.BaseErrorCode;
import com.example.umcstudy.apiPayload.code.ErrorReasonDTO;
import lombok.AllArgsConstructor;
import lombok.Getter;
import org.springframework.http.HttpStatus;

@Getter
@AllArgsConstructor
public enum ErrorStatus implements BaseErrorCode {

    // 가장 일반적인 응답
    _INTERNAL_SERVER_ERROR(HttpStatus.INTERNAL_SERVER_ERROR, "COMMON500", "서버 에러, 관리자에게 문의 바랍니다."),
    _BAD_REQUEST(HttpStatus.BAD_REQUEST,"COMMON400","잘못된 요청입니다."),
    _UNAUTHORIZED(HttpStatus.UNAUTHORIZED,"COMMON401","인증이 필요합니다."),
    _FORBIDDEN(HttpStatus.FORBIDDEN, "COMMON403", "금지된 요청입니다."),


    // 멤버 관려 에러
    MEMBER_NOT_FOUND(HttpStatus.BAD_REQUEST, "MEMBER4001", "사용자가 없습니다."),
    NICKNAME_NOT_EXIST(HttpStatus.BAD_REQUEST, "MEMBER4002", "닉네임은 필수 입니다."),

    // 예시,,,
    ARTICLE_NOT_FOUND(HttpStatus.NOT_FOUND, "ARTICLE4001", "게시글이 없습니다."),

    // Ror test
    TEMP_EXCEPTION(HttpStatus.BAD_REQUEST, "TEMP4001", "이거는 테스트"),

    // FoodCategory Error
    FOOD_CATEGORY_NOT_FOUND(HttpStatus.NOT_FOUND, "FOOD_CATEGORY4001", "음식 카테고리가 없습니다.");

    private final HttpStatus httpStatus;
    private final String code;
    private final String message;

    @Override
    public ErrorReasonDTO getReason() {
        return ErrorReasonDTO.builder()
                .message(message)
                .code(code)
                .isSuccess(false)
                .build();
    }

    @Override
    public ErrorReasonDTO getReasonHttpStatus() {
        return ErrorReasonDTO.builder()
                .message(message)
                .code(code)
                .isSuccess(false)
                .httpStatus(httpStatus)
                .build()
                ;
    }
}

[ SuccessStatus ]

package com.example.umcstudy.apiPayload.code.status;

import com.example.umcstudy.apiPayload.code.BaseCode;
import com.example.umcstudy.apiPayload.code.ReasonDTO;
import lombok.AllArgsConstructor;
import lombok.Getter;
import org.springframework.http.HttpStatus;

@Getter
@AllArgsConstructor
public enum SuccessStatus implements BaseCode {

    // 일반적인 응답
    _OK(HttpStatus.OK, "COMMON200", "성공입니다.");

    // 멤버 관련 응답

    // ~~~ 관련 응답

    private final HttpStatus httpStatus;
    private final String code;
    private final String message;

    @Override
    public ReasonDTO getReason() {
        return ReasonDTO.builder()
                .message(message)
                .code(code)
                .isSuccess(true)
                .build();
    }

    @Override
    public ReasonDTO getReasonHttpStatus() {
        return ReasonDTO.builder()
                .message(message)
                .code(code)
                .isSuccess(true)
                .httpStatus(httpStatus)
                .build()
                ;
    }
}

임시 API 만들어보기

임시 API를 만들어서 앞서 작성한 코드가

어떻게 동작하는지 확인해보자.

먼저 API response body 데이터는 다음과 같다.

[ GET /temp/test ]

{
    "isSuccess ": true,
    "code ":"2000",
    "message" : "OK",
    "result" :
        {
            "testString" : "This is test!"
        }
}

먼저 TempResponse DTO를 다음과 같이 작성한다.

package com.example.umcstudy.web.dto;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;

public class TempResponse {
    @Builder
    @Getter
    @NoArgsConstructor
    @AllArgsConstructor
    public static class TempTestDTO{
        String testString;
    }
    
    @Builder
    @Getter
    @NoArgsConstructor
    @AllArgsConstructor
    public static class TempExceptionDTO{
        Integer flag;
    }
}

[ 참고 ] public static class란?

- DTO의 경우 수많은 곳에서 사용되므로, static class로 만드는 것이 좋음

- 매번 class 파일을 새로 만들지 않아도, 범용적으로 사용 가능

- 따라서 큰 클래스 묶음을 만들고, 내부적으로 static 클래스를 작성

[ 참고 ] DTO에 적용되는 빌더 패턴

- 작성하는 대부분의 인스턴스는 빌더 패턴이 적용됨

- requestDTO의 경우 프론트의 객체를 단순히 받게 되므로, 빌더 패턴을 적용하지 않음

다음으로 TempConverter 클래스를 생성하여

repository에서 받아온 엔티티를 dto로 바꾸는 과정 수행해보자

package com.example.umcstudy.converter;

import com.example.umcstudy.web.dto.TempResponse;

public class TempConverter {

    public static TempResponse.TempTestDTO toTempTestDTO(){
        return TempResponse.TempTestDTO.builder()
                .testString("This is Test!")
                .build();
    }
    
    public static TempResponse.TempExceptionDTO toTempExceptionDTO(Integer flag){
        return TempResponse.TempExceptionDTO.builder()
                .flag(flag)
                .build();
    }
}

앞서 TempResponse에서 작성한

TempTestDTO와 TempExcetionDTO를 생성하고 반환할 수 있도록 한다.

마지막으로 Controller를 작성해보자.

package com.example.umcstudy.web.controller;

import com.example.umcstudy.apiPayload.ApiResponse;
import com.example.umcstudy.converter.TempConverter;
import com.example.umcstudy.web.dto.TempResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/temp")
@RequiredArgsConstructor
public class TempRestController {

    @GetMapping("/test")
    public ApiResponse<TempResponse.TempTestDTO> testAPI(){
        return ApiResponse.onSuccess(TempConverter.toTempTestDTO());
    }

}

1) @RestController

- @Controller + @Responsebody

- JSON 형태로 객체 데이터 반환

2) @RequiredArgsConstructor

- 초기화 되지 않은 final 필드나, @NonNull이 붙은 필드에 대해 생성자 생성

- 새로운 필드를 추가할 때 다시 생성자를 만들어서 관리하지 않아도 됨

- @Autowired를 사용하지 않고 의존성 주입

실제로 스프링 부트를 실행하고 localhost:8080/temp/test에 접속하면

아래와 같이 응답 데이터가 뜨는 것을 확인할 수 있다.

(원격 서버에 Spring Boot를 구축한 경우,

nginx에 도달 후 리버스 프록시를 통해 SpringBoot로 요청이 감)

최용욱 'UMC Server 8주차 워크북' 내용을 기반으로 작성하였습니다.

[코딩자율학습단] 3일차. 게시판 만들고 새 글 작성하기 : Create

wlalsu_u — Sun, 26 Nov 2023 21:11:18 +0900

3.0 3일차 학습 목표

'3일차 게시판 만들고 새 글 작성하기 : Create' 에서는

게시판을 생성하고 게시글을 쓰는 방법을 알아보면서

서버 프로그래밍과 데이터베이스의 기본기를 익혀보자.

1) 폼 데이터란?

2) 폼 데이터를 DTO로 받기

3) DTO를 데이터베이스에 저장하기

4) DB 데이터 조회하기

3.1 폼 데이터란?

폼 데이터 (form data)

- HTML 의 <form> 태그에 실려 전송되는 데이터

- <form> 태그는 웹 브라우저에서 서버로 데이터를 전송할 때 사용

- 데이터를 어디로, 어떻게 보낼지를 작성함

- <form> 태그에 실어 보낸 데이터는, 서버의 컨트롤러가 DTO 객체에 담아서 받음

3.2 폼 데이터를 DTO로 받기

1) 입력 폼 만들기

먼저 뷰 템플릿 페이지를 만들기 위해

src > main > resources > templates 디렉토리에 articles 디렉토리를 생성하고,

new.mustache 파일을 아래와 같이 작성한다.

{{>layouts/header}}

<form action="">
    <input type = "text">
    <textarea></textarea>
    <button type="submit">Submit</button>
</form>

{{>layouts/footer}}

1) input type : 게시글 제목 입력

2) textarea : 게시글 내용 입력

3) button : 전송 버튼

2) 컨트롤러 만들기

다음으로 뷰 페이지를 웹 브라우저에서 보기 위해

controller 패키지 아래에 ArticleController 를 생성하고,

아래와 같이 코드를 작성한다.

package com.example.firstproject.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ArticleController {
    
    @GetMapping("/articles/new")
    public String newArticleForm(){
        return "articles/new";
    }
}

[ 주의할 점 ] articles 디렉토리를 새로 만들었으므로, return 값에 파일 경로를 함께 적어준다.

localhost:8080/articles/new 페이지에 접속하면,

앞서 작성한 new.mustache 뷰 페이지가 제대로 출력되는 것을 확인할 수 있다.

이후 디자인 수정을 위해 new.mustache 파일 코드를 아래와 같이 수정하였다.

{{>layouts/header}}

<form class="container">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type = "text" class="form-control">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

{{>layouts/footer}}

3) 폼 데이터 전송하기

웹 페이지에 내용을 입력하면, 서버에 전송할 수 있도록 해보자.

제목과 내용을 입력한 후 submit 버튼을 눌렀을 때, 데이터가 전송되기 위해서는

"어디로", "어떻게" 보낼지에 대한 정보를 추가해야 한다.

<form> 태그에 아래의 정보를 추가한다.

<form class="container" action="/articles/create" method="post">

1) action

- URL 연결 주소를 적어 localhost:8080/articles/create 페이지로 폼 데이터를 보냄

2) method

- get / post 2가지 방식을 설정할 수 있음

4) 폼 데이터 받기

다음으로 앞서 전송한 폼 데이터를 컨트롤러가 받을 수 있도록 해주자.

ArticleController 클래스 코드를 아래와 같이 수정한다.

package com.example.firstproject.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class ArticleController {

    @GetMapping("/articles/new")
    public String newArticleForm(){
        return "articles/new";
    }
    
    @PostMapping("/articles/create")
    public String createArticle(){
        return "";
    }
}

1) @PostMapping

- 뷰 페이지에서 폼 데이터 방식을 post 방식으로 전송했으므로

- 괄호 안에 받는 URL 주소를 작성

2) createArticle() 메서드

- 형식을 맞추기 위해 return 값에 빈 문자열 적음

5) DTO(Data Transfer Object) 만들기

컨트롤러에서 form 데이터를 받을 때는 DTO 객체에 담아 받게 된다.

먼저 com.example.firstproject 에서 dto 패키지를 생성하고,

ArticleForm 클래스를 생성한 후 아래와 같이 코드를 작성한다.

package com.example.firstproject.dto;

// 폼 데이터를 받아 올 그릇 = DTO
public class ArticleForm {
    private String title; // 제목을 받을 필드
    private String content; // 내용을 받을 필드

    // 전송 받은 제목과 내용을 필드에 저장하는 생성자 추가
    public ArticleForm(String title, String content) {
        this.title = title;
        this.content = content;
    }

    @Override
    public String toString() {
        return "ArticleForm{" +
                "title='" + title + '\'' +
                ", content='" + content + '\'' +
                '}';
    }
}

1) title / content 필드

- 각각 제목과 내용을 받을 필드

2) ArticleForm 생성자

- 전송받은 제목과 내용을 필드에 저장하는 생성자

- Generate > Constructor 을 클릭하여 자동 생성할 수 있음

3) toString() 메서드

- 폼 데이터를 잘 받았는지 확인

- Generate > toString 을 클릭하여 자동 생성할 수 있음

6) 폼 데이터를 DTO에 담기

전송받은 폼 데이터를 DTO에 담아보자.

ArticleController 코드를 다음과 같이 수정한다.

package com.example.firstproject.controller;

import com.example.firstproject.dto.ArticleForm;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class ArticleController {

    @GetMapping("/articles/new")
    public String newArticleForm(){
        return "articles/new";
    }

    @PostMapping("/articles/create")
    public String createArticle(ArticleForm form){
        System.out.println(form.toString());
        return "";
    }
}

1) ArticleForm form

- DTO로 만든 클래스 ArticleForm 타입의 form 객체를 매개변수로 선언

2) form.toString()

- 폼에서 전송한 데이터가 잘 담겼는지 확인하기 위한 출력문

7) 입력 폼과 DTO 필드 연결하기

앞서 작성한 title과 content 필드에 값이 들어가기 위해서는,

new.mustache 입력 폼에 필드명을 지정해야 한다.

아래와 같이 text 와 textarea에 name 을 각각 title과 content로 지정한다.

이렇게 DTO 필드명과 동일한 이름을 name 값으로 주면,

입력 폼에서 작성한 데이터가 DTO의 해당 필드와 연결된다.

{{>layouts/header}}

<form class="container" action="/articles/create" method="post">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type = "text" class="form-control" name = "title">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3" name = "content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

{{>layouts/footer}}

서버를 재시작 한 후,

브라우저에서 제목과 내용을 입력한 후 submit 버튼을 눌러보자.

아래와 같이 IntelliJ 실행 창에서

ArticleForm 데이터가 출력되는 것을 확인할 수 있다.

[ 과정 정리 ]

1) 뷰 페이지를 만든 후, <form> 태그의 action과 method 속성을 지정한다.

2) 컨트롤러를 만들고, PostMapping 방식으로 URL 주소를 연결한다.

3) 전송받은 데이터를 담을 DTO 객체를 만든다.

4) 컨트롤러에서 폼 데이터를 전송받아 DTO 객체에 담는다.

3.3 DTO를 데이터베이스에 저장하기

앞선 과정에서는 웹 브라우저에서 전송한 폼 데이터를

컨트롤러를 통해 DTO 객체에 담았다.

이번에는 받은 데이터가 데이터베이스에 저장되도록 해보자.

데이터베이스와 JPA

- 해당 실습에서는 H2 DB를 사용

- JPA(Java Persistence API)를 이용하여 DB에 자바로 데이터 저장 명령을 내릴 수 있음

- JPA를 통해 데이터를 객체 지향적으로 관리할 수 있음

- JPA 의 핵심 도구로는 Entity와 Repository가 있음

DTO를 DB에 저장하는 과정은 다음과 같다.

[ 참고 ] Entity 와 Repository

- Entity : 자바 객체가 DB를 이해할 수 있도록 만든 것

- Repository : Entity가 DB속 테이블에 저장, 관리 될 수 있도록 하는 인터페이스

1) DTO를 엔티티로 변환하기

먼저 DTO를 Entity로 변환하려면, 엔티티 클래스를 생성해야 한다.

com.example.firstproject 아래에 entity 패키지를 생성한 후,

Article 클래스를 아래와 같이 작성한다.

package com.example.firstproject.entity;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.Id;

@Entity
public class Article {

    @Id
    @GeneratedValue
    private Long id;

    @Column
    private String title;

    @Column
    private String content;

    // Article 생성자 추가
    public Article(Long id, String title, String content) {
        this.id = id;
        this.title = title;
        this.content = content;
    }

    // toString 메서드 추가
    @Override
    public String toString() {
        return "Article{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", content='" + content + '\'' +
                '}';
    }
}

1) @Entity

- 해당 클래스가 엔티티임을 선언 (JPA에서 제공하는 어노테이션)

- 해당 어노테이션이 붙은 클래스를 기반으로 DB에 테이블 생성

2) @Id

- 엔티티의 대푯값을 지정

3) @GeneratedValue

- 대푯값을 자동으로 생성하게 함 (숫자가 자동으로 매겨짐)

4) @Column

- title과 content 필드를 선언하여, DB테이블의 title, content 열과 연결됨

다음으로 ArticleForm DTO 클래스에

아래와 같이 toEntity() 메서드를 추가한다.

package com.example.firstproject.dto;

import com.example.firstproject.entity.Article;

// 폼 데이터를 받아 올 그릇 = DTO
public class ArticleForm {
    private String title; // 제목을 받을 필드
    private String content; // 내용을 받을 필드

    // 전송 받은 제목과 내용을 필드에 저장하는 생성자 추가
    public ArticleForm(String title, String content) {
        this.title = title;
        this.content = content;
    }

    @Override
    public String toString() {
        return "ArticleForm{" +
                "title='" + title + '\'' +
                ", content='" + content + '\'' +
                '}';
    }

    public Article toEntity() {
        return new Article(null, title, content);
    }
}

toEntity() 메서드는 DTO 객체를 엔티티로 반환하는 역할을 수행한다.

이때 전달값은 Article 클래스의 생성자 형식에 맞게 작성한다.

(ArticleForm에 id 정보는 없으므로, id 값은 null로 처리)

2) Repository를 이용해 Entity를 DB에 저장하기

마지막으로 Entity를 DB에 저장해보자.

먼저 com.example.firstproject에 repository 패키지를 생성한 후,

ArticleRepository 인터페이스를 아래와 같이 작성한다.

package com.example.firstproject.repository;

import com.example.firstproject.entity.Article;
import org.springframework.data.repository.CrudRepository;

public interface ArticleRepository extends CrudRepository<Article, Long> {
}

1) CrudRepository<T, ID>

- JPA에서 제공하는 Repository 인터페이스를 상속받음

- 엔티티 생성, 조회, 수정, 삭제가 가능

- 2개의 제네릭 요소(관리 대상 엔티티의 클래스 타입, 관리 대상 엔티티의 대푯값 id) 을 받음

다음으로 ArticleController 에서 Repository 객체를 선언하고,

save() 메서드를 호출하여 article 엔티티를 저장한다.

package com.example.firstproject.controller;

import com.example.firstproject.dto.ArticleForm;
import com.example.firstproject.entity.Article;
import com.example.firstproject.repository.ArticleRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class ArticleController {

    @Autowired
    private ArticleRepository articleRepository;

    @GetMapping("/articles/new")
    public String newArticleForm(){
        return "articles/new";
    }

    @PostMapping("/articles/create")
    public String createArticle(ArticleForm form){
        System.out.println(form.toString());
        // 1. DTO를 Entity로 변환
        Article article = form.toEntity();

        // 2. Repository로 Entity를 DB에 저장
        Article saved = articleRepository.save(article);

        return "";
    }
}

이때 ArticleRepository 인터페이스의 별도의 구현 객체를 만들지 않아도,

@Autowired 어노테이션을 통해 스프링 부트가 미리 생성해 놓은 객체를 연결해준다. (DI)

[ 참고 ] @Autowired

- 스프링부트에서 제공하는 어노테이션

- 컨트롤러의 필드에 붙이면, 스프링부트가 만들어 놓은 객체를 가져와 주입

- 의존성 주입(DI - Dependenct Injection)이라고 함

실제로 서버를 재시작하고, toString() 메서드를 통해 확인해보면,

DTO에 저장된 후, DTO가 Entity로 잘 변환되었고,

이후 DB에도 저장되는 것을 확인할 수 있다.

3.4 DB 데이터 조회하기

H2 데이터베이스에 접속하여 앞서 생성한 게시글을 조회해보자.

1) H2 DB 접속하기

먼저 H2 DB에 웹 콘솔로 접근할 수 있도록

application.properties 파일에 아래의 코드를 추가한다.

spring.h2.console.enabled=true

이후 서버를 재시작하고, localhost:8080/h2-console 페이지에 접속한다.

JDBC URL의 경우 서버를 실행할 때마다 바뀌므로,

IntelliJ [Run] 탭에서 'jdbc:h2:mem: ...' 문구를 복사해서 입력한 후,

connect 버튼을 클릭한다.

2) 데이터 조회하기

H2 DB는 모든 입출력을 메모리 모드에서 돌리므로

서버를 재시작하면 DB에 저장된 내용이 사라진다.

따라서 localhost:8080/articles/new 에서 새로운 데이터를 생성한 후,

ARTICLE 의 테이블을 조회해보면

아래와 같이 작성한 레코드가 나타나는 것을 확인할 수 있다.

3장 셀프 체크

[ signup.mustache ]

{{>layouts/header}}

<form class="container" action="/join" method="post">
    <div class="mb-3">
        <label class="form-label">이메일</label>
        <input type = "email" class="form-control" name = "email">
    </div>
    <div class="mb-3">
        <label class="form-label">비밀번호</label>
        <input type="password" class="form-control" name = "password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <a href="/members">Back</a>
</form>

{{>layouts/footer}}

[ MemberController ]

package com.example.firstproject.controller;

import com.example.firstproject.dto.MemberForm;
import com.example.firstproject.entity.Member;
import com.example.firstproject.repository.MemberRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class MemberController {

    @Autowired
    private MemberRepository memberRepository;

    @GetMapping("/signup")
    public String newSignUpForm(){
        return "articles/signup";
    }

    @PostMapping("/join")
    public String createMember(MemberForm memberForm){

        // 1. DTO를 Entity로 변환
        Member member1 = memberForm.toEntity();

        // 2. Repository로 Entity를 DB에 저장
        Member saved = memberRepository.save(member1);

        return "";
    }

}

[ MemberForm ] - DTO

package com.example.firstproject.dto;

import com.example.firstproject.entity.Member;

public class MemberForm {

    private String email;

    private String password;

    public MemberForm(String email, String password) {
        this.email = email;
        this.password = password;
    }

    public Member toEntity() {
        return new Member(null, email, password);
    }
}

[ Member ] - Entity

package com.example.firstproject.entity;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.Id;

@Entity
public class Member {

    @Id
    @GeneratedValue
    private Long id;

    @Column
    private String email;

    @Column
    private String password;

    public Member(){

    }

    public Member(Long id, String email, String password) {
        this.id = id;
        this.email = email;
        this.password = password;
    }
}

[ MemberRepository ] - Repository

package com.example.firstproject.repository;

import com.example.firstproject.entity.Member;
import org.springframework.data.repository.CrudRepository;

public interface MemberRepository extends CrudRepository<Member, Long> {
}

홍팍 '스프링 부트3 자바 백엔드 개발 입문' 책 내용을 기반으로 작성하였습니다.

[코딩자율학습단] 2일차. MVC 패턴 이해와 실습

wlalsu_u — Sun, 26 Nov 2023 00:53:45 +0900

2.0 2일차 학습 목표

'2일차 MVC 패턴 이해와 실습' 에서는

변수에 따라 서로 다르게 출력되는 뷰 템플릿을 만들고,

이를 위한 역할 분담 동작 기법인 MVC 패턴에 대해 알아보자.

1) 뷰 템플릿과 MVC 패턴

2) MVC 패턴을 활용해 뷰 템플릿 페이지 만들기

3) MVC의 역할과 실행 흐름 이해하기

4) 뷰 템플릿 페이지에 레이아웃 적용하기

2.1 뷰 템플릿과 MVC 패턴

뷰 템플릿 (View Template)

- 화면을 담당하는 기술로, 간단히 '뷰'라고도 이야기함

- 웹 페이지를 하나의 틀로 만들고, 변수를 삽입해 서로 다른 페이지를 보여줌

- 머스테치(Mustache) 도구를 사용하여 뷰 템플릿을 만듦

- 예를 들어 "지민"님 반갑습니다. 에서 이름 부분만 변수로 두고, 다른 부분은 동일한 틀을 사용

MVC 패턴

- 뷰, 컨트롤러, 모델로 역할을 나누는 기법

- 모델 (Model) : 데이터 관리

- 뷰 (View) : 앞선 뷰 템플릿과 동일한 개념

- 컨트롤러 (Controller) : 클라이언트의 요청에 따라 서버에서 처리

2.2 MVC 패턴을 활용해 뷰 템플릿 페이지 만들기

앞선 MVC 패턴을 적용하여 웹 브라우저에서 뷰 템플릿을 출력해보자.

1) 뷰 템플릿 페이지 만들기

기본적으로 뷰 템플릿은

src > main > resources > templates 디렉토리에 만든다.

먼저 templates 디렉토리에 greetings.mustache 파일을 만들어주자.

mustache는 뷰 템플릿을 만드는 뷰 템플릿 엔진이다.

(Thymeleaf, JSP와 같은 뷰 템플릿 엔진도 사용 가능)

이후 상단의 'Install Handlebars/Mustache plugin' 을 클릭하여 설치한다.

다음으로 doc 을 입력한 후 Tap 키를 눌러 기본 HTML 코드를 생성하고,

본문(body)에 "지민님, 반갑습니다!" 를 입력하였다.

2) 컨트롤러 만들고 실행하기

앞서 만든 뷰 템플릿을 웹 브라우저에서 보기 위해서는 컨트롤러를 작성해야 한다.

컨트롤러는 기본적으로 src > main > java > com.example.firstproject에

controller 패키지를 추가하여 작성한다.

controller 패키지 안에 FirstController 라는 클래스를 생성한 후,

아래와 같이 코드를 작성한다.

1) @Controller

- 해당 클래스가 컨트롤러임을 선언

- Controller 클래스 패키지가 자동으로 import됨

2) niceToMeetYou()

- 반환형이 문자열인 메서드 선언

- 공백 문자열 ""을 반환하도록 함

[ 추가 ] 어노테이션이란 (@) ?

- 소스 코드에 추가해 사용하는 메타 데이터

- 컴파일 및 실행 과정에서 코드를 어떻게 처리해야 할지 알려줌

다음으로 niceToMeetYou() 메서드로 grettings.mustache 페이지를 반환하기 위해서는

아래와 같이 "gretting" 라는 파일이름을 반환값으로 작성해야 한다.

파일명을 반환값으로 작성하면,

서버가 자동으로 templates 디렉토리에서 파일을 찾아 웹에 전송한다.

이후 서버를 실행하고, localhost:8080/greeting.mustache 페이지로 이동하면

아래와 같이 404 에러화면이 나오는 것을 확인할 수 있다.

이는 greeting.mustache 페이지를 반환하는

URL 요청을 접수하는 부분이 작성되지 않았기 때문이다.

아래와 같이 @GetMapping 어노테이션을 추가하고,

URL 주소인 "/hi" 를 작성한다.

3) @GetMapping

- URL 요청 접수

- localhost:8080/hi 로 접속할 경우, greetings.mustache 파일을 찾음

실제로 서버를 재시작하고 localhost:8080/hi 에 접속하면

아래와 같이 뷰 템플릿 화면이 출력되는 것을 확인할 수 있다.

[ 정리 ] 컨트롤러 만들기

1) @Controller 로 컨트롤러 선언

2) return 값으로 보여줄 뷰 템플릿의 이름을 적음

3) @GetMapping 으로 URL 요청을 접수

[ 참고 ] 한글 깨짐 현상 발생 해결

처음에는 아래의 사진처럼 한글 깨짐 현상이 발생하여,

src > main > resources > application.properties 파일에서 아래의 코드를 추가하였다.
server.servlet.encoding.force=true

3) 모델 추가하기

앞선 뷰 템플릿의 "지민님, 반갑습니다!" 에서 이름을 변수로 지정하여,

다른 이름으로 자유롭게 바꿀 수 있도록 수정해보자.

greeting.mustache 파일에서 이름 부분을 {{username}} 으로 바꾼다.

( mustache 문법에서 변수 삽입은 두 겹의 중괄호로 감싼다 )

"지민" 을 {{username}} 변수로 변경하게 되면,

변수명에 따라 동적으로 출력되는 값을 바꿀 수 있다. (템플릿화)

그렇다면 username 변수는 어디서 찾게 될까?

MVC 패턴에서 모델은 데이터를 관리하는 역할을 맡게 되는데,

이때 컨트롤러의 메서드에서 매개변수 받아 온다.

아래와 같이 FirstController 코드를 수정해보자.

1) Model model 매개변수

- 모델은 컨트롤러의 메서드에서 매개변수로 받아옴

2) addAttribute("변수명", "변수값") 메서드

- 모델을 통해 변수를 등록

서버를 재시작하고 localhost:8080/hi에 뜨면

아래와 같이 username 변수로 지정한 이름이 뜨는 것을 확인할 수 있다.

2.3 MVC의 역할과 실행 흐름 이해하기

1) /hi 페이지의 실행 흐름

앞서 localhost:8080/hi 에 접속했을 때 뷰 템플릿을 출력하기 위해

어떤 과정이 차례대로 수행되는지 정리해보자.

1) @Controller 어노테이션을 통해 컨트롤러 임을 선언

2) 클라이언트로부터 /hi 요청을 받아 접수

3) niceToMeetYou() 메서드를 수행

4) 변수를 등록하기 위해 모델 객체를 매개변수로 가져옴

5) addAttribute()를 통해 모델에서 사용할 변수 등록

6) return 값인 greetings.mustache 파일을 찾아 웹 브라우저로 전송

2) /bye 페이지 만들기

앞선 페이지와 동일하게 localhost:8080/bye 에 접속하면

"{{username}}님, 다음에 또 만나요!" 라는 문구가 출력되도록 아래와 같이 작성해보았다.

Controller의 경우 별도의 파일을 만들지 않고,

기존의 FirstController에 작성하였다.

[First Conroller]

package com.example.firstproject.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

// 컨트롤러 선언
@Controller
public class FirstController {

    // /hi URL 요청 접수
    @GetMapping("/hi")
    // 메서드 작성
    public String niceToMeetYou(Model model) { // 모델 객체 받아오기
        model.addAttribute("username", "Jimin");
        return "greetings";
    }
    
    // /bye URL 요청 접수
    @GetMapping("/bye")
    public String seeYouNext(Model model) {
        model.addAttribute("nickname", "Jimin");
        return "goodbye";
    }
}

[goodbye.mustache]

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>{{nickname}}님, 다음에 또 만나요!</h1>
</body>
</html>

2.4 뷰 템플릿 페이지에 레이아웃 적용하기

앞서 만든 뷰템플릿에 header-footer 레이아웃을 적용시켜보자.

1) /hi 페이지에 헤더-푸터 레이아웃 적용하기

쉽고 따르게 페이지를 꾸미기 위해 부트스트랩(Bootstrap)을 사용하였다.

먼저 아래의 웹 페이지에 방문하여 상단의 v5.0.2를 선택한 후,

하단의 Starter Template 코드를 복사하여 사용하였다.

https://getbootstrap.com/

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

복사한 코드를 grettings.mustache 파일에 붙여 넣은 후,

아래와 같이 주석으로 nav / content / footer 를 구분해 주었다.

다음으로 navbar를 설정하기 위해 부트스트랩에서 navbar를 검색한 후,

해당 코드를 복사하여 navigation 영역에 붙여넣는다.

Footer의 경우 아래와 같이 간단하게 작성해주었다.

최종 greeting.mustache 코드와 실행 결과는 아래와 같다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

<!-- content -->
<div class="bg-dark text-white p-5">
    <h1>{{username}}님, 반갑습니다!</h1>
</div>

<!-- site info -->
<div class="mb-5 container-fluid">
    <hr>
    <p>CloudStudying | <a href="#">Privacy</a> | <a href="#">Terms</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

2) /bye 페이지에 헤더-푸터 레이아웃 적용하기

앞선 /hi 페이지와 동일하게 /bye 페이지에도 레이아웃을 적용해보자.

이때 동일한 코드를 반복해서 사용하는 것은 비효율적이므로,

헤더와 푸터 영역을 변수화하여 템플릿 파일로 만들어보자.

templates 디렉토리 > layouts 디렉토리 를 만든 후,

header.mustache 와 footer.mustache 파일을 생성한다.

이후 앞서 작성한 greetings.mustache 파일의 헤더와 푸터 부분을 나누어 복사 붙여넣기 한다.

[header.mustache]

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Hello, world!</title>
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

[footer.mustache]

<!-- site info -->
<div class="mb-5 container-fluid">
    <hr>
    <p>CloudStudying | <a href="#">Privacy</a> | <a href="#">Terms</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

이후 greetings.mustache 파일의 헤더와 푸터 부분은

{{>파일명}} 으로 바꾸어 작성해준다.

[greetings.mustache]

{{>layouts/header}}
<!-- content -->
<div class="bg-dark text-white p-5">
    <h1>{{username}}님, 반갑습니다!</h1>
</div>
{{>layouts/footer}}

goodbye.mustache 파일도 동일한 방법으로 작성해주면,

헤더와 푸터를 반복하지 않아도, 코드를 간단하게 작성할 수 있다.

또한 content 내용을 보다 명확하게 이해할 수 있다는 장점이 있다.

{{>layouts/header}}
<!-- content -->
<div class="bg-dark text-white p-5">
    <h1>{{nickname}}님, 다음에 또 만나요!</h1>
</div>
{{>layouts/footer}}

실제로 /bye 웹 페이지에 들어가보면,

header와 footer가 정상적으로 적용된 것을 확인할 수 있다.

2장 셀프 체크

[quote.mustache]

{{>layouts/header}}
<!-- content -->
<div class="bg-dark text-white p-5">
    <h1>{{randomQuote}}</h1>
</div>
{{>layouts/footer}}

[SecondController]

package com.example.firstproject.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class SecondController {

    @GetMapping("/random-quote")
    public String randomQuote(Model model){
        String[] quotes = {
                "행복은 습관이다. 그것을 몸에 지니라. " +
                        "-허버드-",
                "고개 숙이지 마십시오. 세상을 똑바로 정면으로 " +
                        "바라보십시오. -헬렌 켈러-",
                "고난의 시기에 동요하지 않는 것, 이것은 진정 " +
                        "칭찬받을 만한 뛰어난 인물의 증거다. -베토벤-",
                "당신이 할 수 있다고 믿든 할 수 없다고 믿든 " +
                        "믿는 대로 될 것이다. -헨리 포드-",
                "작은 기회로부터 종종 위대한 업적이 시작된다. " +
                        "-데모스테네스-"
        };
        int randInt = (int)(Math.random()*quotes.length);
        model.addAttribute("randomQuote", quotes[randInt]);
        return "quote";
    }
}

홍팍 '스프링 부트3 자바 백엔드 개발 입문' 책 내용을 기반으로 작성하였습니다.

[코딩자율학습단] 1일차. 스프링 부트 시작하기

wlalsu_u — Sat, 25 Nov 2023 17:40:53 +0900

1.0 1일차 학습 목표

'1일차 스프링 부트 시작하기' 에서는

자바 기반 웹 서비스를 편리하게 만들기 위한 도구인 스프링 부트에 대해 알아보고,

"Hello World!"를 출력하여 웹 서비스 동작 원리를 살펴본다.

1) 스프링 부트란?

2) 스프링 부트 개발환경 설정하기

3) 웹 서비스의 동작 원리 이해하기

1.1 스프링 부트란?

스프링 부트 (Spring Boot)

- 자바 웹 프로그램을 쉽고 간편하게 만들기 위한 도구

- 자바 웹 프로그램을 만들기 위한 기능과 도구가 모여 있음

- 스프링과 달리 개발 환경 설정이 간소화

- 웹 애플리케이션 서버(WAS) 인 톰캣을 내장하여 jar 파일로 간편하게 배포 가능

- 예를 들어, 가게를 운영할 때 프랜차이즈에 가입해 레시피와 서비스 노하우를 전수받는 것과 유사

1.2 스프링 부트 개발환경 설정하기

개발 환경을 설정하기 위해 JDK 설치 / IDE 설치 / 스프링부트 프로젝트 생성

과정을 하나씩 진행해보자.

1) JDK 설치하기

해당 실습에서는 Spring Boot 3 을 사용하기 위해

JDK 17 버전을 설치하여야 한다.

먼저 cmd 창에서 'java -version' 을 통해 java 버전을 확인한다.

java 11 버전이 설치되어 있는 것을 확인할 수 있는데,

해당 버전의 JDK를 삭제한 후, JDK 17 버전을 다시 다운받았다.

먼저 아래의 AdoptOpenJDK 사이트에 방문한 후

컴퓨터의 운영체제에 맞는 JDK 를 다운받는다.

https://adoptium.net/temurin/releases/

Latest Releases | Adoptium

adoptium.net

Window의 경우 Window / x64 / JDK / 17 - LTS 버전으로 선택한 후

.msi 파일을 다운받았다.

다운로드가 완료되면 설치를 진행하고,

다시 cmd 창에서 'java -version' 을 확인해보면, OpenJDK 17 설치가 완료된 것을 확인할 수 있다.

2) IDE 설치하기

자바에서는 주로 Eclipse와 IntelliJ IDE를 사용하는데,

이미 IntelliJ Ultimate 버전을 사용하고 있으므로, 이 부분은 생략하였다.

( 책의 실습을 따라갈 때 Community Edition도 충분하다 )

https://www.jetbrains.com/ko-kr/idea/download/?section=windows

최고의 Java 및 Kotlin IDE인 IntelliJ IDEA를 다운로드하세요

www.jetbrains.com

3) 스프링 부트 프로젝트 만들기

스프링 부트 프로젝트는 Spring Initializer( https://start.spring.io/ )

웹사이트를 통해 쉽게 만들 수 있다.

각 환경설정에 대한 자세한 내용은 아래의 블로그에 작성해두었다.

https://wlalsu.tistory.com/8

[스프링 입문] 섹션 1.1 프로젝트 환경설정 (프로젝트 생성)

1.1.1 프로젝트 생성 ( spring initializr 사이트 사용) JAVA 11 / IntelliJ (IDE) 사용 Spring 프레임 워크를 사용하는 프로젝트는 SpringBoot를 기반으로 간편하게 만들 수 있다. 아래의 spring initializr 사이트를 이

wlalsu.tistory.com

아래와 같이 설정을 완료한 후 Generate 버튼을 클릭하여

zip 파일을 다운로드 받는다.

[ 참고 ] 기본 설정 - GA 또는 아무런 접미사가 없는 버전 선택하는 것이 좋음

- SNAPSHOT : 현재 테스트 단계

- Mx(Milestone) : 주요 기능 및 버그 수정 단계

- RC(Release Candidate) : 기능과 버그 수정된 최종 배포 전 단계

- GA(General Availability) : 최종 배포 단계

이후 다운받은 zip 파일의 압축을 해제하고,

IntelliJ 에서 해당 파일을 열었을 때 BUILD SUCCESSFUL 메시지가 뜨면 된다.

처음에는 프로젝트를 실행하자 마자 Spring Boot 3 버전을 실행할 수 없다는 오류가 떴다

build.gradle 파일을 살펴봐도 문제가 없었는데..

알고보니 IntelliJ 설정에서 이전에 JVM 11 버전으로 설정해 놓았다..!

먼저 Project Structure에서 SDK 17 버전을 추가해 준다.

이후 File > Settings > Build, Execution, Deployment > Gradle 에서

Gradle JVM 을 17 버전으로 수정해주면 오류가 발생하지 않는다.

빌드가 성공적으로 완료되었다면, build.gradle 파일에서

Spring Boot 버전을 3.1.0 버전으로 바꾼 후 아래의 프로젝트를 진행한다.

[ 참고 ] 빌드(build) 란?

- 소스 코드를 실행할 수 있는 독립적인 형태로 만드는 것

- 빌드 이후 독립 파일이 생성되고, 이를 실행하여 기능을 이용할 수 있음

4) Hello World! 출력하기

먼저 Spring Boot 프로젝트를 실행해보자.

main > java > com.example.firstproject > FirstProjectApplication 클래스를 실행한 후,

아래와 같이 "Started FirstprojectApplication" 문구가 뜨면 서버 실행이 완료된 것이다.

크롬 브라우저에서 localhost:8080을 입력하면

아래와 같은 Error 페이지가 뜨는 것을 확인할 수 있다.

이는 아직 웹 페이지를 생성하지 않았기 때문에 뜨는 기본 페이지이다.

localhost:8080/hello.html 에 접속하면 Hello World! 문구가 뜨도록 해보자.

src > main > resources > static 에서 hello.html 파일을 생성한다.

html 파일의 body 부분에 <h1> 태그로 "Hello World!" 를 작성한다.

이후 새로 만든 hello.html 파일을 서버에 반영하기 위해

서버를 재시작하고, localhost:8080/hello.html 주소로 접속하면

아래와 같이 Hello World! 문구가 뜨는 것을 확인할 수 있다.

1.3 웹 서비스의 동작 원리 이해하기

앞선 hello.html 파일을 출력하기 위해

서버 내부에서 어떤 동작이 일어나는지 알아보자.

1) 클라이언트 - 서버 구조

- 웹 서비스는 클라이언트의 요청과 서버의 응답으로 동작

- 클라이언트 : 서비스를 사용하는 프로그램 / 컴퓨터 (웹 브라우저)

- 서버 : 서비스를 제공하는 프로그램 / 컴퓨터 (스프링 부트)

이때 서버가 클라이언트의 요청에 응답하기 위해서는,

서버가 반드시 실행중이어야 한다.

실제로 서버를 실행중일 때 메시지를 살펴보면,

톰캣이 8080 포트 위에서 수행된다는 "Tomcat stated on port(s): 8080..." 메시지를 확인할 수 있다.

2) localhost:8080/hello.html 의 의미

- localhost : 내 컴퓨터를 의미하며, IP 주소로 변경하면 127.0.0.1이 됨

- 8080 : 포트 번호를 의미, 웹 서버인 Tomcat(스프링 부트가 담겨있음)이 수행되는 포트 번호

- hello.html : 서버에 요청하는 파일 (기본적으로 src > main > resources > static에서 찾음)

1장 셀프 체크

홍팍 '스프링 부트3 자바 백엔드 개발 입문' 책 내용을 기반으로 작성하였습니다.

[코딩자율학습단] 0일차. 자율학습단을 신청하게 된 이유 / 스터디 소개

wlalsu_u — Sat, 25 Nov 2023 16:11:07 +0900

코딩자율학습단을 신청하게 된 이유

예전에 파이썬 공부를 처음 시작했을 때, 나도 코딩님의 파이썬 강의를 들었던 기억이 있다. 이후에 계속 유튜브 채널을 구독하고 있었는데, 어느날 갑자기 '코딩자율학습단 5기'를 모집한다는 공고를 보게 되었다. 1달 동안 1권의 책을 끝낸다는 목표가 굉장히 매력적으로 다가왔고, 이번 겨울방학에 UMC 프로젝트와 졸업 프로젝트에서 Spring 백엔드 파트를 잘 수행해내기 위해서는 12월 안에 스프링 공부를 최대한 마쳐야 한다는 생각이 있었기에 신청하게 되었다.

그동안 UMC 동아리의 스프링 워크북을 따라가면서 실력이 많이 향상되고 있는 것을 느꼈다. 하지만 오히려 공부를 할수록 내가 채워나아가야 하는 개념이나 내용이 더 눈에 잘 보이기 시작했다. 이러한 디테일적인 부분은 강의나 동아리를 통해 공부하는 것보다, 책을 통해 꼼꼼히 학습하는 것이 좋겠다는 생각이 들었고 망설임 없이 자율학습단에 신청하게 되었다.

자율학습단 소개

'홍팍 - 스프링부트3 자바 백엔드 개발 입문' 책을 1달 내에 끝내는 것을 목표로 한다.

4주차와 6주차 커리큘럼으로 나누어져 있는데, 일단 4주차 커리대로 따라가다가 12월에 기말고사 기간에 시간이 부족하면 6주차 커리로 진행할 예정이다.

1주일에 최소 한번 자율학습단 카페에 인증글을 남겨야 하는데, 우선 기술블로그에 공부 내용을 작성한 후 중요 내용을 요약하여 카페에 인증할 예정이다.

이번 자율학습단을 통해 탄탄한 스프링 기본기를 다질 수 있었으면 좋겠다

목표 : 1달 동안 [홍팍 - 스프링부트3 자바 백엔드 개발 입분] 책 끝내기

Part1 : 스프링 부트 개요
Part2 : 게시판 CRUD 만들기
Part3 : REST API와 테스트 코드 작성하기
Part4 : 댓글 CRUD 만들기

[캡스톤A 졸업 프로젝트] 스타트 기술 회고록

wlalsu_u — Fri, 24 Nov 2023 21:59:42 +0900

1. 프로젝트 소개 및 개요

이화여대 컴퓨터공학과 [캡스톤 디자인 및 창업 프로젝트 A] 수업의 졸업프로젝트로,

우리 팀은 Once(원스) 애플리케이션을 고안하고 개발하게 되었다.

Once 프로젝트 소개

원스는 결제처에서 사용자가 보유한 카드 중

가장 혜택이 좋은 카드를 추천해주는 핀테크 모바일 애플리케이션이다.

우리 팀은 매년 사라지는 카드 포인트 1000억원이 소비자가 아닌 카드사의 부가수입으로 들어간다는 점,

그리고 1인당 신용카드 보유 개수는 무려 3.9장 이지만, 휴면카드가 1300만장에 육박한다는 사실에 주목했다.

소비자들은 자신이 보유한 모든 카드의 혜택을 관리하고 파악하기 어려워한다.

원스는 사용자가 카드 결제 전, 보유한 카드 중 결제처에서 최적의 혜택을 받을 수 있는 카드를 추천해줌으로써,

손쉬운 카드 관리 서비스를 제공한다.

Once (원스) 가 제공하는 서비스

1) 회원가입은 기본적으로 ID/PW 방식으로 이루어지며, 아래의 두가지 단계를 따른다.

- CODEF API 의 accessToken과 connectedId를 발급받아 계정 등록

- 발급받은 connectedId를 이용하여 사용자의 보유 카드 목록 조회

회원가입 과정 프로토타입

2) 로그인 후 Once 어플리케이션 이용이 가능하며, 크게 5가지 서비스를 제공한다.

- 홈(카드 추천 챗봇) , 푸시 알림 서비스, 마이 월렛, 나의 혜택 정보, 마이페이지

시작 화면, 홈(카드 추천 챗봇) , 푸시 알림 서비스

마이 월렛, 나의 혜택 조회, 마이페이지

프로젝트의 전체적인 흐름도는 다음과 같다.

Tech Stack

Once 앱에서 사용하는 기술 스택 및 프로젝트 구조도는 다음과 같다.

- Version Control : Git, Github

- Communication : Notion, Discord

- Development Tool : XCode, Android Studio, IntelliJ

- Design Tool : Figma

- Front-End : React Native (JavaScript)

- Back-End : Spring Boot (Java)

- Cloud Hosting : AWS (EC2, RDS, S3)

- Crawling Library : BeautifulSoup, Selenium

- AI Model : OpenAI GPT3.5 API Fine-tuning

[ 프로젝트 github ]

https://github.com/EWHA-LUX

EWHA-LUX

EWHA-LUX has 5 repositories available. Follow their code on GitHub.

github.com

프로젝트 구조도

Open Source API

Once 앱에서 사용하는 API 종류와 공식문서 링크는 다음과 같다.

- CODEF API 보유카드 조회 https://developer.codef.io/products/card/common/p/account

CODEF API 개발가이드

CODEF API 개발 명세서와 기술 문서를 확인해 보세요

developer.codef.io

- CODEF API 실적 조회 https://developer.codef.io/products/card/common/p/result-check

CODEF API 개발가이드

CODEF API 개발 명세서와 기술 문서를 확인해 보세요

developer.codef.io

- CODEF API 승인내역 조회 https://developer.codef.io/products/card/common/p/approval

CODEF API 개발가이드

CODEF API 개발 명세서와 기술 문서를 확인해 보세요

developer.codef.io

- Geolocation API (GPS) https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

Geolocation API - Web APIs | MDN

The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

developer.mozilla.org

- GPT 3.5 Turbo API https://openai.com/blog/gpt-3-5-turbo-fine-tuning-and-api-updates

GPT-3.5 Turbo fine-tuning and API updates

Developers can now bring their own data to customize GPT-3.5 Turbo for their use cases.

openai.com

2. 스크래핑 기반 금융 API를 이용한 사용자 정보 조회

Once는 결제할 매장을 입력하면, 사용자가 보유한 카드 중 최적의 혜택을 가진 카드를 추천해주므로,

아래의 3가지 카드 정보를 조회해야 한다.

우선 Once 서비스가 가능하기 위해서는 아래의 3가지 내역을 필수적으로 불러왔어야 하므로,

해당 API를 불러오는 과정부터 기술 개발을 시작하였다.

1) 사용자 보유 카드 조회 : 보유 카드 중 최적의 혜택을 가진 카드를 추천

2) 카드 실적 조회 : 전월 실적 충족 여부에 따라 혜택이 좋은 카드가 변함

3) 승인 내역 조회 : 승인 내역을 바탕으로, 자주 이용한 단골 매장 근처에서 카드 추천 알림 푸시 서비스 제공

원래 금융결제원 오픈 API를 이용하려고 하였으나,

사업자 등록 이슈와.. 복잡한 승인 과정으로 인하여 CODEF API를 이용하게 되었다.

현재는 DEVELOPER 계정을 이용하여 API 테스트 및 개발을 진행하고 있으며,

이후 출시를 위해서는 BUSINESS 계정을 구매할 예정이다.

카드 승인 내역 조회 API 테스트

accessToken 발급과 API 조회 가능 여부를 확인하기 위해

우선 카드 승인 내역 조회 API 테스트를 진행하였다.

- CODEF API 승인내역 조회 https://developer.codef.io/products/card/common/p/approval

CODEF API 개발가이드

CODEF API 개발 명세서와 기술 문서를 확인해 보세요

developer.codef.io

1) accessToken 발급

Query 파라미터와 Header에 아래의 정보를 입력하여 access Token을 발급받았다.

이때 Authorization으로는 개인별 base 64 인코딩 값을 넣으면 된다.

- POST : https://oauth.codef.io/oauth/token

[Query Params]

1) grant_type : client_credentials

2) scope : read

[Header]

1) Content-Type : application/x-www-form-urlencoded

2) Authorization : Basic [base64 인코딩 값]

Response 메시지를 확인해보면, 200 OK로

accessToken 이 제대로 응답온 것을 확인할 수 있다.

2) 카드 내역 조회

입력부는 아래의 API 명세서를 따라 작성한다.

[ 입력부 (Input) ]

1) countryCode : KR

2) businessType : CD

3) organization : 0306 (신한카드 코드, 카드사마다 정해진 코드번호가 있음)

4) clientType : P

5) loginType : 0

6) certType : 1

7) derFile / keyFile : 아래의 코드 참고

이때 derFile과 keyFile은 Base64 인코딩을 활용해

문자열로 변환된 값을 입력한다.

def encode_to_file_string(file_path: str) -> str:
    파일을 base64 문자열로 인코딩
    :param file_path: 파일 경로
    :return: 인코딩된 file string
    fp = open(file_path, 'rb')
    data = fp.read()
    fp.close()
    return base64.b64encode(data).decode('utf-8')

print(encode_to_file_string('def 파일 경로'))
print(encode_to_file_string('key 파일 경로'))

{
    "organization": "0020",
    "connectedId": "3Lj7J-OvQ",
    "birthDate": "",
    "startDate": "20190601",
    "endDate": "20190619",
    "orderBy": "0",
    "inquiryType": "1",
    "cardName": "",
    "duplicateCardIdx": "0",
    "cardNo": "6253123456780000",
    "cardPassword": "",
    "memberStoreInfoType": ""
}

API를 호출하면 아래와 같이 최근 사용한 카드 내역 순으로

카드 승인 내역 조회가 출력되는 것을 확인할 수 있다.

카드 승인 내역 조회 API

처음에는 사용자의 민감한 카드 정보를 불러올 수 있을지가 우리의 중요한 문제였는데,

API 테스트를 통해 사용자 개인의 카드 승인 내역 및 보유카드 내역을 불러올 수 있다는 기술 검증을 할 수 있었고,

해당 주제로 계속해서 개발을 진행해나가게 되었다.

3. 카드 추천 GPT 3.5 Turbo Fine-Tuning

API 테스트를 통한 주제 검증을 완료한 이후,

본격적으로 카드 추천 모델 개발을 진행하였다.

사용자가 결제를 원하는 매장의 상호명(스타벅스, GS25 등)을 입력하면,

보유한 카드 중에서 가장 혜택이 좋은 카드를 추천해주기 위해 GPT Fine-Tuning 을 수행하였다.

Fine-Tuning 이란?

- 기존에 학습된 딥러닝 모델이 특정 작업을 더욱 효과적으로 수행하도록 추가 학습을 진행

- 기존 모델의 지식을 기반으로 새로운 작업에 대한 세부 정보를 학습하여 성능 향상

- Once의 경우 기존의 GPT API에 카드 추천 데이터셋을 학습시켜, 결제처를 입력하면 최적의 카드를 추천해주도록 성능 개선

GPT 3.5 Turbo Fine-Tuning을 선택한 이유

먼저 Once는 챗봇 형태로 사용자에게 카드 추천 서비스를 제공하므로,

Chat Completions를 통해 대화 형식으로 Fine-Tuning할 수 있는 GPT 3.5가 적합하다고 판단했다.

또한 GPT 3.5에서는 사용자 보유 카드 리스트와 전월 실적 충족 여부를

prompt에 별도의 입력 없이, 기본 backgound 형태로 불러올 수 있으므로 토큰 절약과 편의성 면에서도 적합하다고 판단하였다.

- GPT 3.5 Turbo API https://openai.com/blog/gpt-3-5-turbo-fine-tuning-and-api-updates

GPT-3.5 Turbo fine-tuning and API updates

Developers can now bring their own data to customize GPT-3.5 Turbo for their use cases.

openai.com

Fine-Tuning Input / Output 선정 과정

모델의 학습 능력 향상과 정확성을 위해서는 적절한 input과 output 을 찾아야 한다.

우선 처음 우리 팀이 생각한 구현 방법은 아래의 4가지 방식이었다.

1) Prompt로 [사용자가 보유한 카드 혜택 정보 + 실적 충족 여부 + 결제처] 입력

”prompt” : “<결제처, [카드 1, 카드 1 상세 혜택, 카드 1 실적 충족 여부], ...,
[카드 N, 카드 N 상세 혜택, 카드 N 실적 충족 여부]>”, “completion” : “<결제처에서 사용할 카드>”}

[ 문제점 ]

해당 방법을 사용하는 경우 사용자별로 fine-tuning을 진행해야 함

2) Prompt로 [결제 매장, 카드 1개 이름, 해당 카드의 혜택] 입력

{"prompt":"결제 매장:GS25\n확인 카드:Deep Dream Platinum+\n카드혜택:~~~",
"completion":"할인금액:10000원 이상 5% 할인"}

사용자가 보유한 카드가 각각 1,2,3이라면 3개의 카드를 각각 3번 모델에 입력한 후,

혜택이 좋은 카드 순서대로 정렬한다.

사용자의 특정 정보(전월 실적/최대 혜택 금액)는 개별 사용자에 맞게 조절되어야 하므로,

파인튜닝이 아닌 시스템 알고리즘으로 동적 계산한다.

[ 문제점 ]

- GPT2.0 모델을 사용한다면 적합한 방식이나, 정확성이 떨어질 수 있음

- 카드 혜택 정보를 모두 prompt로 입력할 시 토큰이 부족할 수 있음

- 시스템 단에서 전월 실적과 최대 헤택 금액을 위한 알고리즘을 별도로 설계해야 함

3) 앞선 1번과 2번 방식을 합쳐서 구현

- GPT 모델 1 : [결제처, 카드명, 카드의 혜택]을 보고 사용할 수 있는 카드 혜택을 찾음

{”prompt” : “<결제처, 카드명, 그 카드의 혜택, 실적 조건>”,
“completion” : “<결제처에서 해당 카드로 누릴 수 있는 혜택(실적 채운 경우와 채우지 못한 경우 나눠서)>”}

- GPT 모델 2 : 직접 사용자가 [결제처]를 입력하면, [사용할 카드]를 알려줌

{”prompt” : “<[결제처 A, 카드명1, 결제처에서 해당 카드로 누릴 수 있는 혜택1], ... , [결제처 A, 카드명N, 결제처에서 해당 카드로 누릴 수 있는 혜택N]>”, 
“completion” : “<결제처, 사용할 카드, 그 카드의 혜택>”}

[ 문제점 ]

- 카드 혜택 정보를 모두 prompt로 입력할 시 토큰이 부족할 수 있음

- 2개의 GPT 모델을 파인튜닝 해야 함

앞선 prompt와 completion 방식 모두 토큰 이슈나 정확성이 떨어진다는 문제점이 있어,

아래의 4번째 방식을 채택하고 파인튜닝을 진행하였다.

4) Chat Completion 사용 & 카드 리스트 및 전월 실적 충족 여부 background 정보

카드 리스트와 전월 실적 충족 여부는 background 정보로 넣어두고,

아래의 chat completion 의 방식을 통해 대화형식으로 fine-tuning 하여 챗봇 서비스에 더 맞춤화 하였다.

[
    {"role": "system", "content": "You are a financial assistant providing credit card recommendations."},
    {"role": "assistant", "content": "Sure, I can help you find the card with the best benefits."},
    {"role": "user", "content": "[결제처]. What's the best card for this?"},
    {"role": "assistant", "content": "Got it. Let me check your cards. You have the [Card A], [Card B], and [Card C]."},
    {"role": "user", "content": "Yes, those are my cards."},
    {"role": "assistant", "content": " the [Card B] offers the highest cashback at [결제처], with 5% cashback on purchases. Additionally, it provides 2% cashback on groceries"},
]

해당 chat completion 방식으로 현재 Fine-Tuning을 진행하고 있으며,

최종 개발 까지 최소 5000개의 데이터 셋을 학습시켜 정확도를 높여나갈 예정이다.

[UMC Server] Chapter 7. JPA를 통한 엔티티 설계, 매핑 & 프로젝트 파일 구조 이해

wlalsu_u — Wed, 22 Nov 2023 12:19:15 +0900

7.0 7주차 워크북 학습 목표

스프링 프로젝트 진행 시

인프라 구축이 완료되면 (12주차에서 다룸),

앞서 설계한 ERD를 통해 Spring Data JPA로 Entity를 설계해야 한다.

이번 주차에서는 앞서 설계한 미션 ERD를 따라

JPA Entity 매핑을 해보자.

1) Spring data JPA를 이용해서 Entity 설계, 매핑하기

사용할 음식점 미션 프로젝트 ERD는 아래와 같다.

7.1 Springboot 디렉토리 컨벤션

프로젝트 마다 디렉토리 컨벤션은 달라질 수 있지만,

해당 프로젝트에서는 아래와 같이 package 를 만들어 주었다.

(github action을 위한 디렉토리는 생성하지 않음)

각각의 패키지에 대해 하나씩 자세하게 알아보자.

domain 패키지

- JPA에서 사용하기 위한 Entity 클래스를 저장

controller 패키지

- HTTP 요청에 따른 응답을 주는 클래스 모임

- 응답을 주는 과정은 service에서 처리

service 패키지

- 비즈니스 로직이 필요한 클래스 모임

- controller > service > repository 메소드 호출

repository 패키지

- 데이터베이스와 통신

- Spring Data JPA를 이용한 respository 이용

dto 패키지

- 클라이언트가 body에 담아서 보내는 데이터를 받음

- 데이터베이스에서 받아온 데이터를 클라이언트에게 보여줌

[ 추가 ] 왜 dto 패키지를 설정해야 할까?

- 요구사항 변경이 생겨 데이터베이스 테이블 설계가 바뀔 수 있음

- 이때 엔티티 그대로 응답을 주면 프론트까지 문제 발생 가능

- dto를 통해 데이터베이스 변경이 생긴 경우 dto만 변경 가능

converter 패키지

- 데이터 형식 간의 변환 수행

- repository에서 받아온 엔티티를 dto로 바꾸는 과정 수행

- Entity 생성 수행

(Service에서 수행할 수도 있지만, converter에서 하는 것이 단일 책임 원칙 측면에서 더 좋음)

- dto를 만드는 역할만 수행한다면, web 패키지 내부에 존재해도 됨

[ 추가 ] dto를 어디에서 생성해야 할까?

1) service에서 dto 생성

- service에서 controller로 dto 생성한 후, 이를 controller에 리턴함

- controller가 entity에 노출되지 않아 보안 측면에서 좋음

- 대규모 프로젝트에서 작업을 나누어 하는 경우, 해당 권한이 있는 개발자만 데이터를 볼 수 있도록 함

2) controller에서 dto 생성

- service에서 entity를 리턴하고, controller에서 controller로 dto를 만들어서 응답

- service의 범용성이 커져 유지보수가 편함

- 서비스 함수를 재활용 할 수 있어 코딩이 간편해짐

[ 참고 ] IntelliJ에서 사용하면 좋은 플러그인

- atom material Icons

- Settings > Plugin > Marketplace 에서 설치 가능

7.2 데이터베이스 생성하기

domain 패키지에서 entity를 매핑하는 방법을 알아보자.

RDS를 사용하면 요금 폭탄을 맞을 수 있기 때문에...

로컬 DB를 사용하였다.

먼저 mysql 워크밴치에서 umcstudy라는 데이터베이스를 생성하였다.

이후 resources 파일의 application.properties를 삭제하고

application.yml 파일을 생성해두었다.

application.yml 파일에 아래의 코드를 작성해준다.

(앞서 6주차의 build.gradle 파일에서 주석처리 했던 부분도 없애준다)

spring:
  datasource: 
    url: jdbc:mysql://localhost:3306/데이터베이스이름
    username: 유저 이름
    password: 비밀번호
    driver-class-name: com.mysql.cj.jdbc.Driver
  sql:
    init:
      mode: never
  jpa:
    properties:
      hibernate:
        dialect: org.hibernate.dialect.MySQL8Dialect
        show_sql: true
        format_sql: true
        use_sql_comments: true
        hbm2ddl:
          auto: update
        default_batch_fetch_size: 1000

7.3 Entity 매핑하기

먼저 Member 엔티티를 통해 Entity 매핑 방법에 대해 알아보자.

아래의 ERD를 참고하여 엔티티를 생성하였다.

domain 패키지 > Member 클래스에

아래의 코드를 작성한다.

package umc.spring.domain;

import lombok.*;
import umc.spring.domain.enums.Gender;
import umc.spring.domain.enums.MemberStatus;
import umc.spring.domain.enums.SocialType;

import javax.persistence.*;
import java.time.LocalDate;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Member {

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

    private String name;

    private String address;

    private String specAddress;

    @Enumerated(EnumType.STRING)
    private Gender gender;

    @Enumerated(EnumType.STRING)
    private SocialType socialType;

    @Enumerated(EnumType.STRING)
    private MemberStatus status;

    private LocalDate inactiveDate;

    private String email;

    private Integer point;
}

기본 어노테이션 작성

- @Entity : 해당 클래스가 JPA 엔티티임을 명시

- @Getter : lombok에서 제공, getter를 만들어 줌

- @Builder / @NoArgsConstructor(access = AccessLevel.PROTECTED)/@AllArgsConstructor

: 빌더패턴(자바의 디자인 패턴)을 사용하여 객체 생성

[ 참고 ] 빌더 패턴(Builder Pattern) 이란?

- GoF 디자인 패턴 중 생성 패턴에 해당

- 객체의 생성 클래스와 표현하는 클래스를 분리

- 필요한 데이터만 설정할 수 있어, 테스트가 용이하고 불필요한 코드의 양이 줄어듦

- 유연성 확보 가능

- 직관적으로 어떤 데이터에 어떤 값이 들어가는지 쉽게 파악 가능

- Setter는 불필요한 변경을 열어두지만, 빌더는 변경가능성을 최소화함

기본 키 만들기

- @Id : 기본 키 id 값임을 표

- @GeneratedValue(strategy = GenerationType.IDENTITY) : JPA가 통신하는 DBMS 방식을 따름

( 위의 예시에서는 MySQL을 따름)

특정 값 저장 하는 경우 ( Gender / Status / SocialType )

- 어떤 값이 저장될지 모르는 것이 아니라, 정해진 값들 중 특정 값이 저장되는 경우

- String 보다 enum 타입을 사용하는 것이 좋음

- @Enumerated(EnumType.STRING)을 사용하여 엔티티에 적용

- EnumType을 STRING으로 설정하는 것이 좋음

- ORIDINAL 을 사용하면 enum의 순서가 저장되어, 순서를 바꾸게 되면 에러 발생

Enum 클래스를 생성하는 방법은 아래와 같다.

domain 패키지 > enums 패키지에

아래와 같이 미리 정해진 값을 저장해준다.

package umc.spring.domain.enums;

public enum Gender {
    MALE, FEMALE
}

package umc.spring.domain.enums;

public enum MemberStatus {
    ACTIVE, INACTIVE
}

package umc.spring.domain.enums;

public enum SocialType {
    KAKAO, GOOGLE, NAVER, APPLE
}

[ 참고 ]

Spring data JPA를 사용하면 specAddress를 spec_address 형식으로 자동으로 바꾸어준다!

이제 N : M 관계의 매핑 테이블을 제외하고

나머지 엔티티를 생성해보자.

코드 작성방법은 위의 Member 엔티티 작성 방식과 동일하다.

(created_at과 updated_at은 아래에서 따로 설정)

FoodCategory

package umc.spring.domain;

import lombok.*;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class FoodCategory {

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

    private String name;
}

Mission

package umc.spring.domain;

import lombok.*;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import java.time.LocalDate;

@Entity
@Getter
@Setter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Mission {

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

    private Integer reward;

    private LocalDate deadline;

    private String missionSpec;
}

Region

package umc.spring.domain;

import lombok.*;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Region {

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

    private String name;
}

Review

package umc.spring.domain;

import lombok.*;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Review {

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

    private String body;

    private Float score;
}

Store

package umc.spring.domain;

import lombok.*;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Store {

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

    private String name;

    private String address;

    private Float score;
}

Terms

package umc.spring.domain;

import lombok.*;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Terms {

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

    private String title;

    private String body;

    private Boolean optional;
}

7.4 Created_at / Updated_at

Created_at 과 Updated_at의 경우 모든 엔티티에서 사용되므로,

일일이 Entity에 적용하지 않고,

추상 클래스를 만든 후 상속받도록 해보자.

domain 패키지 > common 패키지를 생성하고

BaseEntity 라는 추상클래스를 만든 후, 아래와 같이 코드를 작성한다.

package umc.spring.domain.common;

import lombok.Getter;
import org.springframework.data.annotation.CreatedDate;
import org.springframework.data.annotation.LastModifiedDate;
import org.springframework.data.jpa.domain.support.AuditingEntityListener;

import javax.persistence.EntityListeners;
import javax.persistence.MappedSuperclass;
import java.time.LocalDateTime;

@MappedSuperclass
@EntityListeners(AuditingEntityListener.class)
@Getter
public abstract class BaseEntity {

    @CreatedDate
    private LocalDateTime createdAt;

    @LastModifiedDate
    private LocalDateTime updatedAt;
}

이후 모든 엔티티 클래스들이

BaseEntity 추상 클래스를 상속받도록 해준다.

또한 Spring boot Application 에서 JpaAuditing이 사용 가능하도록

아래와 같이 코드를 변경해준다.

package umc.spring;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.data.jpa.repository.config.EnableJpaAuditing;

@SpringBootApplication
@EnableJpaAuditing
public class Application {

	public static void main(String[] args) {
		SpringApplication.run(Application.class, args);
	}

}

7.5 매핑 테이블의 설계

앞서 작성하지 않았던 N : M 관계의 매핑 테이블은

mapping 패키지를 따로 만들어 관리해보자.

domain 패키지 > mapping 패키지에 각각의 엔티티를

위의 방식과 동일하게 작성한다.

MemberAgree 엔티티

package umc.spring.domain.mapping;

import lombok.*;
import umc.spring.domain.common.BaseEntity;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class MemberAgree extends BaseEntity {

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

MemberStatus Enum

- 회원 상태는 특정한 값을 지정하는 것이므로, enum을 생성하여 관리한다.

- domain 패키지 > enums 패키지에 MissionStatus enum 생성

package umc.spring.domain.enums;

public enum MissionStatus {
    CHALLENGING, COMPLETE
}

MemberMission 엔티티

package umc.spring.domain.mapping;


import lombok.*;
import umc.spring.domain.common.BaseEntity;
import umc.spring.domain.enums.MemberStatus;
import umc.spring.domain.enums.MissionStatus;

import javax.persistence.*;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class MemberMission extends BaseEntity {

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

    @Enumerated(EnumType.STRING)
    private MissionStatus missionStatus;
}

MemberPrefer 엔티티

package umc.spring.domain.mapping;

import lombok.*;
import umc.spring.domain.common.BaseEntity;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class MemberPrefer extends BaseEntity {

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

7.6 연관 관계 매핑

연관 관계 매핑의 단방향 매핑과 양방향 매핑에 대해

하나씩 자세하게 알아보자.

단방향 매핑

- 연관 관계 주인에게만 연관 관계를 주입

[ 추가 ] 연관 관계 주인이란?

데이터베이스에서 외래키를 가지는 테이블을 의미

앞선 ERD 예시를 통해 알아보자.

member_prefer 엔티티의 경우,

member 엔티티에서 member id를 / food_category에서 category_id

외래키를 가지고 있다.

이때 1 : N 관계에서 N에 해당되는 member_prefer 엔티티는 연관 관계 주인이 되고,

만약 1 : 1 관계라면 원하는 엔티티를 연관 관계 주인으로 설정할 수 있다.

앞서 작성한 member_prefer 엔티티에서

연관관계 매핑 코드를 추가해보자.

package umc.spring.domain.mapping;

import lombok.*;
import umc.spring.domain.FoodCategory;
import umc.spring.domain.Member;
import umc.spring.domain.common.BaseEntity;

import javax.persistence.*;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class MemberPrefer extends BaseEntity {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "member_id")
    private Member member;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "category_id")
    private FoodCategory foodCategory;
}

1) @ManytoOne

- 1 : N 관계에서 N에 해당하는 엔티티가 연관 관계 매핑할 때 사용

2) fetch = FetchType.LAZY

- 지연 로딩을 성정

3) @JoinColumn

- 외래키의 이름을 설정

MemberAgree 엔티티의 연관 관계 매핑 코드는 다음과 같다.

package umc.spring.domain.mapping;

import lombok.*;
import umc.spring.domain.Member;
import umc.spring.domain.Terms;
import umc.spring.domain.common.BaseEntity;

import javax.persistence.*;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class MemberAgree extends BaseEntity {

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

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "member_id")
    private Member member;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "term_id")
    private Terms terms;
}

Mission 엔티티의 연관 관계 매핑 코드는 다음과 같다.

package umc.spring.domain;

import lombok.*;
import umc.spring.domain.common.BaseEntity;

import javax.persistence.*;
import java.time.LocalDate;

@Entity
@Getter
@Setter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Mission extends BaseEntity {

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

    private Integer reward;

    private LocalDate deadline;

    private String missionSpec;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "store_id")
    private Store store;
}

양방향 매핑

- 버그 발생 위험성이 있음

- 양방향 매핑을 통한 객체 그래프 탐색은 프로그래밍을 편리하게 도와줌

- 연관 관계 주인이 아닌 엔티티에게도 연관 관계 주입

- 필수적인 기능인 cascade 설정이 가능

- 연관 관계 편의 메서드 필요

[ 추가 ] cascade란?

- 데이터베이스에서 외래키를 가진 연관 관계 주인인 테이블에 설정

- 참조 대상 테이블의 칼럼이 삭제되거나 변경될 때, 같이 변경되는 기능

- JPA에서는 연관 관계 주인이 아닌, 참조 대상 엔티티에 설정

단방향 매핑에서는 변경되지 않아야 하는 데이터가 삭제될 수 있으므로, 양방향 매핑이 유리

Member 엔티티에 양방향 매핑을 적용한 코드는 다음과 같다.

1 : N 관계에서 1에 해당하는 엔티티에 설정해준다.

package umc.spring.domain;

import lombok.*;
import umc.spring.domain.common.BaseEntity;
import umc.spring.domain.enums.Gender;
import umc.spring.domain.enums.MemberStatus;
import umc.spring.domain.enums.SocialType;
import umc.spring.domain.mapping.MemberAgree;
import umc.spring.domain.mapping.MemberMission;
import umc.spring.domain.mapping.MemberPrefer;

import javax.persistence.*;
import java.time.LocalDate;
import java.util.ArrayList;
import java.util.List;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Member extends BaseEntity {

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

    private String name;

    private String address;

    private String specAddress;

    @Enumerated(EnumType.STRING)
    private Gender gender;

    @Enumerated(EnumType.STRING)
    private SocialType socialType;

    @Enumerated(EnumType.STRING)
    private MemberStatus status;

    private LocalDate inactiveDate;

    private String email;

    private Integer point;

    @OneToMany(mappedBy = "member", cascade = CascadeType.ALL)
    private List<MemberAgree> memberAgreeList = new ArrayList<>();

    @OneToMany(mappedBy = "member", cascade = CascadeType.ALL)
    private List<MemberPrefer> memberPreferList = new ArrayList<>();

    @OneToMany(mappedBy = "member", cascade = CascadeType.ALL)
    private List<Review> reviewList = new ArrayList<>();

    @OneToMany(mappedBy = "member", cascade = CascadeType.ALL)
    private List<MemberMission> memberMissionList = new ArrayList<>();
}

1) @OneToMany

- 1 : N 관계에서 N에 해당하는 엔티티에서 ManytoOne이 설정된 멤버 변수를 mappedBy

2) @CascadeType.ALL

- Member의 변화에 따라 각 엔티티가 영향을 받게됨

- Member 에서 삭제되는 데이터가 있으면, 같이 삭제가 되므로 일일이 삭제하지 않아도 됨

Terms 엔티티의 양방향 매핑 코드는 다음과 같다.

package umc.spring.domain;

import lombok.*;
import umc.spring.domain.common.BaseEntity;
import umc.spring.domain.mapping.MemberAgree;

import javax.persistence.*;
import java.util.ArrayList;
import java.util.List;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Terms extends BaseEntity {

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

    private String title;

    private String body;

    private Boolean optional;
    
    @OneToMany(mappedBy = "terms", cascade = CascadeType.ALL)
    private List<MemberAgree> memberAgreeList = new ArrayList<>();
}

Mission 엔티티의 양방향 매핑 코드는 다음과 같다.

package umc.spring.domain;

import lombok.*;
import umc.spring.domain.common.BaseEntity;
import umc.spring.domain.mapping.MemberMission;

import javax.persistence.*;
import java.time.LocalDate;
import java.util.ArrayList;
import java.util.List;

@Entity
@Getter
@Setter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Mission extends BaseEntity {

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

    private Integer reward;

    private LocalDate deadline;

    private String missionSpec;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "store_id")
    private Store store;
    
    @OneToMany(mappedBy = "mission", cascade = CascadeType.ALL)
    private List<MemberMission> memberMissionList = new ArrayList<>();
}

FoodCategory 테이블의 경우 주로 수정, 삭제가 일어나지 않으므로

양방향 매핑을 수행하지 않았다.

7.7 칼럼 별 세부적인 설정

앞서 ERD에서 Member 테이블의 name의 경우 varchar(20)으로 설정하였지만,

우리는 JPA에서 단순히 String으로 설정해 놓았다.

unique / default / null 가능 / Type 등

각 칼럼의 세부적인 설정을 완성해보자.

Member 테이블의 세부 설정 예시는 다음과 같다.

package umc.spring.domain;

import lombok.*;
import umc.spring.domain.common.BaseEntity;
import umc.spring.domain.enums.Gender;
import umc.spring.domain.enums.MemberStatus;
import umc.spring.domain.enums.SocialType;
import umc.spring.domain.mapping.MemberAgree;
import umc.spring.domain.mapping.MemberMission;
import umc.spring.domain.mapping.MemberPrefer;

import javax.persistence.*;
import java.time.LocalDate;
import java.util.ArrayList;
import java.util.List;

@Entity
@Getter
@Builder
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
public class Member extends BaseEntity {

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

    @Column(nullable = false, length = 20)
    private String name;

    @Column(nullable = false, length = 40)
    private String address;

    @Column(nullable = false, length = 40)
    private String specAddress;

    @Enumerated(EnumType.STRING)
    @Column(columnDefinition = "VARCHAR(10)")
    private Gender gender;

    @Enumerated(EnumType.STRING)
    private SocialType socialType;

    @Enumerated(EnumType.STRING)
    @Column(columnDefinition = "VARCHAR(15) DEFAULT 'ACTIVE'")
    private MemberStatus status;

    private LocalDate inactiveDate;

    @Column(nullable = false, length = 50)
    private String email;

    private Integer point;

    @OneToMany(mappedBy = "member", cascade = CascadeType.ALL)
    private List<MemberAgree> memberAgreeList = new ArrayList<>();

    @OneToMany(mappedBy = "member", cascade = CascadeType.ALL)
    private List<MemberPrefer> memberPreferList = new ArrayList<>();

    @OneToMany(mappedBy = "member", cascade = CascadeType.ALL)
    private List<Review> reviewList = new ArrayList<>();

    @OneToMany(mappedBy = "member", cascade = CascadeType.ALL)
    private List<MemberMission> memberMissionList = new ArrayList<>();
}

1) @Column

- 해당 어노테이션을 통해 칼럼 세부 설정이 가능하다.

2) columnDefinition = "VARCHAR(10)" / nullable = false, length = 40

- enum 타입의 경우 전자로 설정함

3) 'ACTIVE'

- @ColumnDefault('ACTIVE')으로도 작성 가능

- mySQL 문자열은 ' '로 감싸지 않으면 DDL을 날려 오류 발생

설정을 완료한 후 application.yml 파일의 auto를 create로 변경한다.

이후 Spring boot를 실행하면 @Entity를 찾아 Database에 테이블을 생성한다.

로그를 확인해보면 실제로 테이블이 생성된 것을 확인할 수 있다.

에러 메시지가 발생할 수 있는데,

이는 기존 테이블이 없는데 create으로 삭제 후 생성하다보니 발생하는 오류이므로

무시하고 다시 실행하면 된다.

단 create는 매번 새로운 테이블을 생성하니,

이후에는 update로 변경해야 한다.

최용욱 'UMC Server 7주차 워크북' 내용을 기반으로 작성하였습니다.

[23년11월17일] 첫눈 온 날, 오페라의 유령 막공❄️

wlalsu_u — Mon, 20 Nov 2023 21:13:54 +0900

연극이나 뮤지컬을 보고 나면

한동안은 ost 리스트를 무한 재생하면서 나무위키를 몇 번이나 정독할 정도로 푹 빠져있다가,

시간이 지나면 어떤 공연을 봤었는지도 점점 흐릿해지곤 했다..

요즘 기록의 중요성을 아주 절실히 느끼고 있는데,

공연을 보는 날들은 내가 일상에서 탈피하는 몇 안 되는 날이기도 해서

일상 기록과는 다르게 관극 일기도 적어보려 한다!

오페라의 유령은 초등학생 때 책으로 처음 접하게 되었는데,

이후에 영화를 보고 크리스틴이 너무 예뻐서 뮤지컬을 보고 싶다고 생각했던 기억이 아직도 남아 있다!

오페라의 유령이 13년만에 공연이라,

이번 잶유령 공연 너무 보고 싶어서 막공 티켓 풀리기 며칠 전부터 벼르고 있었는데

한결같이 실패해버렸다

처음에는 19열 중블을 잡았는데

페이북에서 2층 7열 취소표 줍줍하고.. 매일 새벽에 취소표 수집하는 것도 스트레스라

그래 이정도면 그냥 보자 하고 포기했다!ㅎㅎ

잠실역에서 내리면 거의 바로 앞에 샤롯데가 보인다!

샤롯데 도착하자마자 그냥 너무 예쁘구.. 앞에 오유 현수막도 너무 멋있다..

이날 창업경진대회 발표 끝나고 정신없이 후다닥 달려간거라 너무 피곤했는데

샤롯데 도착하자마자 바로 설렘당했다

저 종이가방은 너무 무거워서 꼬깃꼬깃 해진건데,,

아이패드랑.. 창업 경진대회에서 받은 샌드위치랑.. 콜라랑.. 완전 바리바리

안그래도 너무 피곤한데 무거워서 계속 혼자 속으로 투덜대고 있었는데

공연 시작 전에 너무 야무지게 먹었다ㅎㅎ

사람 많이 없을 때 캐스팅 보드 찍고 md 구경하려고 원래 1시간 30분 일찍가려고 했는데,

대회 일정이 늦어지는 바람에 1시간쯤 전에 도착했다

그래도 딱 운 좋게 우리가 들어갔을 때는 사람이 없어서 자유롭게 사진 찍었다ㅎㅎ

매표소에서 표 교환하고 포토존에서 사진 찍고 난 후에 갑자기 사람들이 엄청 많아졌는데,

딱 아슬아슬하게 사람 없을 때 간듯! 운이 좋았다

매표소 옆쪽에 장미로 가득 채워져 있는 포토존 있는데,

저 사진은 신나서 웃는게 아니구,, 옆에 사람들이 엄청 많이 쳐다보고 있어서 머쓱한 웃음이다

2층 올라가면 메인 캐스팅 보드가 있다!

최재림, 손지수, 황건하 배우님으로 꼭 보고싶었는데, 딱 막공이 이 페어였다!

완전 행복...❤️

이때부터는 사람들이 너무 많아져서 줄 기다리는거 포기하고 그냥 옆에서 비스듬히 찍고 나왔다

4층에 있는 다른 캐스팅보드 한 번 더 찍구 샌드위치 호다닥 먹고 바로 입장했다!

오유는 공연 전이나 커튼콜 모두 촬영이 불가능해서 아쉽지만 무대는 못 찍었다

공연 본 후 소감은!

1) 공연 첫 시작에 오케스트라가 너무 멋있다.. 샹들리에 올라갈 때 온몸에 소름이 쫙 돋는다

2) 왜 내가 이걸 막공으로 봤을까.. 이제 언제 다시 볼 수 있을지 모른다고 생각하면 아쉽다

3) 한정된 공간에서 어떻게 저런 멋진 연출을 할 수 있을까? 연출이 너무 예뻤다

4) 최재림 배우님 성량 지붕 뚫었고,, 손지수 배우님 목소리 꾀꼬리 뺨 쳤고,,

5) 팬텀 너무 안쓰럽고 짠했다..선택훼에...

6) 잶유령 힘이 너무 좋아서 유령의 비밀이 밝혀졌다ㅎㅎ

7) 막공 소감으로 이제 빵을 훔치러 가신다는 얘기에,, 참지 못하고 레미제라블 예매했다.. 내 통장 눈감아..

2층 7열 중블에 대한 간단한 후기는 가성비로 가면 좋은것 같다!

13만원이 가성비인가 싶긴 하지만.. 뮤지컬 가격이 너무 많이 올라서

그래도 티켓팅을 잘 할 수 있다면 1층 앞열이 최고인것 같다!

음향도 괜찮고 전체적인 극을 보기에는 좋았지만 2층이라 확실히 몰입력이 부족했다

그래도 샤롯데는 무대랑 거리가 가깝고,

오유는 유령이 여기저기 위에서 튀어나오는 경우가 많아서 2층도 충분히 만족스러웠다

1층 19열보다는 훨씬 잘한 선택인듯!ㅎㅎ

최근에 동아리 과제나 대회 준비 때문에 며칠 동안 잠도 못 자고 너무너무 피곤했는데

오유 볼 생각으로 하루하루 힘낼 수 있었다

매일 코딩만 하고 키보드만 두들기다가 오랜만에 공연을 보니까

한 여름밤의 꿈처럼 뭔가 다른 세상에 들어갔다 온 느낌이었는데,

현생에 대한 아무 생각 없이 다른 일에 집중해본 것이 너무 오랜만이라 그것 자체만으로도 너무 좋았다!

집에 와서 바로 오유 영화보면서 복습했는데, 뮤지컬이랑 줄거리나 요소가 조금씩 달라서 다른 매력이 있다!

레미제라블 보기 전까지는 계속 오유 넘버만 들어야지(●'◡'●)

[UMC Server] Chapter 6. API URL의 설계 & 프로젝트 세팅

wlalsu_u — Wed, 15 Nov 2023 11:45:21 +0900

6.0 6주차 워크북 학습 목표

앞서 4주차에서 학습한 것과 같이 ERD 설계를 마치면,

큰 틀에서 API 설계를 시작해야 한다.

( API 세부사항을 정하기는 어렵겠지만, 큰 틀은 변하지 않는다 )

이번 주차에서는 API 설계 방법을 익히고,

스프링 프로젝트 초기 세팅 방법에 대해 알아보자.

1) RESTful한 API 설계를 익히기

2) Spring boot 프로젝트 세팅하기

6.1 API 란?

프로젝트 개발 과정에서 API 라는 단어를 자주 사용하기도 하고,

대략적으로 클라이언트와 서버 간의 통신에 필요한 것이라는 것은 알고 있지만,

API에 대한 정확한 의미를 이해가 부족하다는 생각이 들었다.

먼저 API의 의미에 대해 정확하게 알아보자.

API ( Application Programming Interface)

- Application을 Programming 할 때 사용되는 인터페이스

- 즉 어플리케이션 프로그래밍을 쉽게 도와주는 도구

예를 들어 Java 에서 println을 통해 콘솔에 출력을 할 때,

우리는 print 함수의 내부 동작에 대해서는 알지 못하지만,

단순히 println 함수를 이용해서 출력을 수행할 수 있다.

이처럼 추상화와 캡슐화를 통해

사용자의 프로그래밍을 쉽게 도와주는 도구를 API 라고 한다.

[ 참고 ] 인터페이스 (Interface) 란?

- 어려운 것을 감추어 쉽게 상호작용 할 수 있도록 도와주는 것

ex ) User Interface (UI)

REST API ( Representational State Transfer )

- HTTP를 기반으로 하는 웹 서비스 아키텍처

- HTTP 메소드와 자원을 이용하여 통신을 주고받는 방법

API Endpoint

- REST API에서 API를 호출하기 위한 HTTP 메서드

- HTTP 메소드와 필요한 자원에 대한 명시를 한 URI를 합쳐서 말함

ex) 도메인 주소가 https://umc.com 일 경우 POST https://umc.com/users/login 을 말함

[ 참고 ] HTTP 메소드란?

- REST 방식으로 통신할 때 필요한 작업을 표시하는 방법

- CRUD 에 대응되는 5가지 메소드가 있음

1) GET : 조회

2) POST : 생성 / 클라이언트가 서버에 특정 정보를 넘기고 처리 요청하는 경우

3) PUT : 갱신 (전체)

4) PATCH : 갱신 (일부)

5) DELETE : 삭제

6.2 RESTful API Endpoint의 설계

API를 설계하기 위해서는

API End point 설계 / 요청 데이터, 응답 데이터 설계 과정이 필요하다.

먼저 RESTful한 API Endpoint를 설계하기 위한 방법을 알아보자.

RESTful API Endpoint 설계 규칙

- URI에 동사가 포함되어서는 안됨

- URI에서 단어의 구분이 필요한 경우 하이픈 ( - ) 사용

- 자원은 기본적으로 복수형으로 표현

- 단 하나의 자원을 명시적으로 표현하려면 식별 값을 추가로 사용 ( ex) /users/id )

- 자원 간 연관 관계가 있는 경우 URI에 표현

- 위의 5개의 규칙을 지키되, 피치 못한 경우는 무조건 따르지 않아도 됨

회원가입, 로그인, 탈퇴 API Endpoint를 설계하여

위의 설계 규칙이 어떻게 적용되는지 알아보자.

회원가입 API Endpoint

- 클라이언트가 로그인 정보를 서버로 넘겨 처리 요청하므로 POST

- 간단하게 POST /users 로 사용 가능

( 요구사항에서 사용자가 새로 추가되는 경우에 대한 명시가 있다면 구분해야 함 )

[ 참고 ] 회원가입은 각각의 유저에 대해 이루어지는데, 왜 POST /users/id 가 아닐까?

- id 값을 사용하려면 해당 유저를 식별할 수 있어야 함

- 회원가입이 진행되기 전에는 유저를 식별할 수 있는 정보가 없음

로그인 API Endpoint

- 클라이언트가 로그인 정보를 서버로 넘겨 처리 요청하므로 POST

- POST /users 의 경우 회원가입의 Endpoint로 사용됨

- POST /users/login 으로 표현

(RESTful API 설계를 타이트하게 따르지 않아도 됨)

회원 탈퇴 API Endpoint

- 회원 탈퇴 시 데이터베이스에서 바로 삭제하는 것이 아님

- 비활성 계정으로 만든 후 계정 복구가 가능해야 하므로 DELETE /users 를 사용하면 안됨

- 즉 사용자 테이블의 status를 active -> inactive로 변경

- PATCH를 사용해야 하므로 PATCH /users로 사용 가능

( 동일하게 특정 유저 정보를 수정해야 하는 '회원 정보 수정'의 경우 PATCH /users/id 사용 )

- 프론트엔드 개발 시 설계를 헷갈려 할 수 있으므로, 추가적인 정보를 더할 수도 있음

6.3 리소스 간 연관 관계가 있는 경우 ( 1 : N 관계 )

한 명의 교사가 여러 개의 교과목을 강의할 수 있다고 가정해보자.

이때 교사과 교과목은 1 : N 관계를 갖게 된다.

여기서 교과목의 목록을 조회하는 API를 설계해보자.

모든 교과목록을 조회하는 경우

1명의 교사가 여러개의 과목을 가르칠 수 있으므로,

위와 같이 교사의 계층관계를 더 높게 잡을 수 있을 것이다.

/users/subjects

특정 교사의 교과목록을 조회하는 경우

만약 특정 교사의 교과목 목록을 보고 싶다면

users 다음에 id를 넣어 특정 교사를 선택할 수 있을 것이다.

/users/id/subjects

하나의 교과목만 조회하는 경우

만약 특정 교사의 특정 교과목으로 설명하는 것이

더 의미 전달이 잘 되는 경우 아래와 같이 설계할 수 있다.

/users/id/subjects/id

혹은 단지 특정 교과목으로만 설명하는 것이

의미 전달이 더 잘 되는 경우 아래와 같이 설계할 수 있다.

/users/subjects/id

6.4 리소스 간 연관 관계가 있는 경우 ( N : M 관계 )

한 개의 게시글에는 여러 개의 해시태그를 달 수 있고,

한 개의 해시태그에는 여러 개의 게시물이 속할 수 있다고 가정해보자.

이때 게시글과 해시태그는 N : M 관계를 갖게 된다.

이 경우에는 둘 사이의 계층 관계를 파악하기 힘들어진다.

이런 경우에는 비즈니스 로직 상 더 중요한 대상을 계층 관계의 앞에 두자!

즉, 위의 경우에서 해시태그보다 게시물이 더 중요한 서비스이므로

게시글을 더 상위 계층으로 표현하는 것이 좋다.

/articles/hash-tag

6.5 세부적인 API 설계하기

앞서 작성한 Endpoint는 단순히 해당 API 의 역할에 대해서만 알려준다.

실제 동작 수행을 위해 필요한 정보를 포함하기 위해서는

아래의 4가지 정보를 포함해야 한다.

API 설계에서 포함해야 하는 키워드

- path variable

- quert string

- request body

- request header

1) Path Variable

- 단 하나, 특정 대상을 지목할 때 사용

- 중괄호 ( { } )로 감싸 식별 값을 표시

예를 들어 게시글 하나만을 조회하는 API를 설계한다고 해보자.

이때 우리는 서버에게 특정 게시글을 식별할 수 있는 데이터를 함께 넘겨주어야 한다.

이를 위해서는 id 에 게시글 식별 값을 같이 전달할 수 있다.

( id 에 들어가는 값은 게시글의 기본키가 된다.)

/users/articles/id

이때 id 는 문자 그대로 id 가 아닌,

게시글의 식별 값을 의미할 것이다.

따라서 API 명세서에는 path variable을 중괄호 ( { } ) 로 감싸 표시하게 된다.

GET /users/articles/{article-id}

이때 id 값을 보다 명확하게 표시하기 위해

article-id (articleId) 로 사용해 주는 것이 좋다.

2) Query String

- 검색 / 조회에 사용

- 따라서 GET 요청에서 주로 사용

- API 엔드포인트에 포함되지 않음

예를 들어 'umc' 단어가 포함된 게시글을 조회한다고 해보자.

해당 경우는 특정 하나의 게시글을 조회하는 것이 아니므로,

path variable이 아닌 query string을 사용하게 된다.

먼저 전달할 정보가 하나인 경우 아래와 같이 나타낼 수 있다.

GET /users/articles?name=umc

만약 전달할 정보가 여러 개인 경우,

& 를 이용하여 전달 값을 연결할 수 있다.

GET /users/articles?name=umc&owner=jimin

단 여기서 query string은 엔드포인트에 포함되지 않으므로,

엔드포인트는 GET /users/articles 임을 유의하자!

3) Request Body

- POST 방식에서 데이터를 URL에 노출하는 것은 굉장히 위험

- request body에 전달하고 싶은 데이터를 담음

- json / form-data 형태로 보냄

회원 가입 과정에서

이름 / 전화번호 / 닉네임을 서버에 전송하는 경우 request body는 아래와 같다.

{
  "name" : "유지민",
  "phoneNum" : "010-1111-2222",
  "nickName" : "yuja",
}

4) Request Header

- 전송에 관련된 메타데이터를 담는 부분

- 로그인을 위한 토큰을 헤더에 담기도 함

6.6 API 설계 예시

사용자 정보인 닉네임을 변경하기 위한 API 설계 예시를 살펴보자.

1) API Endpoint

- PATCH /users/{userId}

2) Request Body

{
 "nickname" : "yuja"
}

3) Request Header

Authorization : accessToken (String)

6.7 Spring Boot 프로젝트 세팅

프로젝트 세팅 방법은 아래의 블로그에 정리해 두었다.

https://wlalsu.tistory.com/10

[스프링 입문] 섹션 1.3 프로젝트 환경설정 (View 환경설정)

1.3.0 Spring Boot 기능 찾기 Spring은 Java 웹 어플리케이션 개발과 관련된 대부분의 기능을 제공하므로, 방대한 기능을 적절히 사용하기 위해서는, 필요한 기능을 찾을 수 있는 능력이 요구된다. Spring

wlalsu.tistory.com

프로젝트 생성 설정은 아래와 같이 진행하였다.

최용욱 'UMC Server 6주차 워크북' 내용을 기반으로 작성하였습니다.