[토이프로젝트 개발일지 01] 일기 기록 웹 설계

엄청 오랜만에 글 쓰는 것 같은데 ㅠ.ㅠ

그동안 정처기나 토익스피킹 딴 거라든가 졸업작품 한 것도 정리하고 싶었지만 일단 머릿속으로만 기억했다가...

취업 준비하면서 백엔드 제대로 공부할 겸

다른 토이 프로젝트 시작하는 건 정리가 필요해서 먼저 쓰게 됐다 ㅎㅎ

 

우선 코드 작성하기 전에 개발 목적과 화면 설계부터 정리하고 시작!

 

---

1. 개발 목적

• 게시판 형식의 일기 기록 웹 사이트를 만들어서 직접 사용한다.
• 로그인, 회원가입 기능을 만들고 인증/인가 구현 방법에 대해 자세히 학습한다. (Spring Security, JWT 등)
• RESTful API를 설계하고 구현한다.
• 데이터베이스를 설계하고 구현한다.
• 테스트 코드를 작성해 본다.
• 최종적으로 AWS등을 이용해 서버를 배포하는 방법을 학습한다.

그동안 여러 개인 프로젝트 /  팀 프로젝트를 하면서 AI나 지도 등 외부 API 연동하는 방법, 기본적인 REST API와 데이터베이스 설계 및 구현 방법은 익혔지만, 인증/인가에 대해서는 정확히 구현해 본 적이 없다.

그냥 프론트엔드에서 로컬 스토리지로 저장해서 로그인 유지하는 것처럼 보이게 하는 방법으로 해서(서버는 로그인 모름) 보안도 취약하고 제대로 구현한 게 아니라고 느꼈다. 그래서 이번에는 제대로 구현해 보기!

 

또 서버 배포도 그동안은 cloudType으로 간단하게 배포해 봤는데, 이번에는 가능하면 AWS를 사용해 보고 싶다. 배포에 관해서도 아직 지식이 부족해서 제대로 공부해 보고 싶다.

추가로 테스트 코드 작성하는 것도 해보고 싶다. ㅎㅎ

 

하여튼 그래서 공부용 + 평소에 필요했던 거 만들기로 해서 일기 웹 프로젝트로 결정~~

 

---

2. 기술 스택

• BE: Java, Spring Boot, JPA
• FE: HTML, CSS, Javascript -> 같은 폴더에서 간단하게, 백엔드와 API 통신하는 식으로 구현
• Database: MariaDB(실제 DB, 배포용), H2(테스트 코드용)
• 인증/인가: Spring Security, JWT
• 배포: AWS - EC2 (스프링 서버 배포, 여기에 MariaDB 설치하는 식으로 함(RDS까지 배포하면 무료 사용량 넘칠까 봐))

 

-그 외 요구 사항

• DB는 변동될 수 있으니 우선 인터페이스로 놓고, 구체적으로는 MariaDB와 H2(단순 테스트용 메모리DB)로 바꾸어서 상황에 맞게 사용할 수 있도록 구현함.
• domain, controller, service, repository 계층으로 패키지 관리함.
• DTO로 필요한 정보만 담아 캡슐화, 보안성을 높이고 오버헤드를 줄이면서 효율적인 데이터 송수신 관리하도록 함. (컨트롤러에서 DTO로 받고 서비스로 넘긴 다음에 다시 DTO로 받음)
• 설정 정보
  • application.yml: 기본 정보 작성 (깃허브 올려도 됨)
  • application-local.yml: 데이터베이스 정보나 JWT 토큰 등 민감한 정보 작성 (gitignore로 깃허브 올라가지 않게 함)
  • application-prod.yml: EC2 우분투 서버에만 존재하는 설정 파일. EC2에 설치한 MariaDB 정보 담음 -> 환경변수로 관리

 

---

3. 화면 설계

1) 시작 화면 (로그인 화면)

• 처음 웹 사이트 들어가면 화면 상단 중앙에 ‘My Diary’ 로고가 크게 띄워지다가, 1초 후에 폰트 크기 작아지면서 상단으로 조금 올라가고 중앙에 로그인 UI 나타남.
  • 아이디, 비밀번호 입력 칸 있음
  • 밑에는 회원가입 하기 버튼 있음
  • 회원가입은 아이디, 비밀번호, 닉네임 입력. 비밀번호는 4자리 이상이며, 아이디는 다른 사용자와 중복 불가.

2) 메인 화면 (로그인 성공 시 나오는 화면)

• 화면 중앙에 캘린더 배치(다이어리 수첩 느낌 프론트 꾸미기) → 오늘 날짜에 하늘색으로 표시됨
• 캘린더에서 각 날짜 클릭하면 해당 날짜의 일기 화면으로 이동
• 일기가 작성된 날짜엔 녹색으로 표시 (오늘 날짜인데 글 작성하면 하늘색이 우선됨)
• 전체적인 테마는 하늘색, 녹색, 핑크색 등 파스텔 톤에 심플하면서 귀여운 테마
• 화면 상단 중앙에는 ‘(사용자 닉네임) Diary’으로 제목 로고 있음. 상단 우측에는 ‘로그아웃’버튼 있음(누르면 로그아웃하고 로그인 화면으로 이동)

3) 일기 화면 (메인 화면의 캘린더 날짜 누르면 나오는 화면)

• 게시판처럼 심플하게 목록 형태로 해당 날짜의 전체 글 목록 나타남. (최신 글이 상단에 오게끔 정렬, 각 글은 제목과 작성 시간만 나타나 있음.)
• 목록 상단 우측에는 ‘글쓰기’ 버튼 있음. → 누르면 글 작성 화면으로 이동
• 각 글 누르면 상세 조회 화면으로 이동.

4) 글 작성/수정 화면

• 제목과 내용 입력하는 칸 있음. (칸 구분은 그냥 선으로만 함. (핸드폰 메모 앱 같은 UI)
• 우측 상단에 ‘저장’버튼과 ‘취소’버튼 있음. (누르면 글 전체 조회 화면으로 이동)

5) 상세 조회 화면

• 제목, 내용, 작성 시간, 수정 시간 나옴.
• 우측 상단에 ‘수정’ 버튼 있음.

 

---

4. 데이터베이스 설계

1) 요구사항 분석

화면 설계 내용에 따라, 저장이 필요한 항목들만 추출하여 엔티티 속성으로 담는다.

• diary 엔티티
  • 제목
  • 내용
  • 작성 시간 (자동 저장)
  • 수정 시간 (자동 저장)
• user 엔티티
  
  • 아이디
  • 비밀번호
  • 닉네임

☆처음 고민
: 캘린더의 날짜 별로 일기를 저장해야 하니까, 그러면 캘린더 엔티티도 만들어서 따로 저장하고 연관 관계를 구성해야 하나?
-> diary 엔티티에 날짜 정보를 넣은 다음에, 이후에 캘린더 날짜를 클릭하면 해당 날짜 글만 조회해서 갖고 오는 형식으로 하면 될 듯

 

2) 연관 관계 

한 명의 사용자가 여러 일기를 작성하므로 연관 관계는 다음과 같다.

user : diary = 1: N

 

이때 N쪽이 연관 관계의 주인(수정 가능)이기 때문에 외래키(FK)를 갖는다.

또한 @ManyToOne이므로 기본 즉시 로딩 패치 전략에서 Lazy 지연 로딩 설정으로 바꾼다. (추후 N+1 문제 대비)

반대쪽은 코드 상에서 mapped by를 통해 연결한다. (@OneToMany)

 

3) 최종 DB 설계 

[diary]	[user]
id (PK)	id (PK)
title	loginId
content	password
createdAt	nickname
updatedAt
diaryDate
userId (FK)

 

 

※ ERD 그리는 사이트 (MySQL Workbench에서 create문 추출해서 했음)

https://dbdiagram.io/home

dbdiagram.io - Database Relationship Diagrams Design Tool

 

---

5. 아키텍처 설계

-전체 흐름

 

-애플리케이션 아키텍처

 

※ 표 그리는 사이트 (회로 설계 전공 과제에서 엄청 썼던 곳...)

https://app.diagrams.net/

Flowchart Maker & Online Diagram Software

 

-spring security 아키텍처 (이건 인터넷 표이지만 이대로 흐름 따라감)

1. 로그인 요청

↓

UserController

↓

UserService

↓

JWT 토큰 생성

↓

응답 바디(DTO)에 토큰 반환

---

 

2. 이후 모든 API 요청

↓

HTTP Header: Authorization: Bearer {token}

↓

JwtFilter (OncePerRequestFilter)

-토큰 유효성 검증한 다음에 SecurityContext에 인증 정보 저장

↓

Controller

-@AuthenticationPrincipal로 userId 꺼내 씀

(쿼리 파라미터 대신에, SecurityContext에 저장해두었으니 필요할 때마다 꺼내 쓸 수 있음)

 

---

6. API 설계 / 명세서

 

노션에서 아래 사진처럼 각 기능마다 request / response를 명세화했다. ㅎㅎ

 

1) 사용자 API

-회원가입 / 로그인

☆처음엔 Map으로 안 하고 그냥 String으로 문자열만 반환했었는데, 그렇게 하니까 프론트엔드에서 json으로 처리하려고 했는데 단순 문자열이라 파싱 오류나서 아래처럼 오류가 났었다.

그래서 Map을 이용해서 json처럼 반환하는 걸로 수정한 상태이다. (이에 대한 자세한 설명은 이후에~~)

 

---

2) 글 API

-월별 글 등록 날짜 조회 / 날짜별 글 전체 목록 조회

 

-글 상세 조회 / 글 작성

 

-글 수정 / 삭제

 

---

7. 프로젝트 세팅

먼저 Spring의 복잡한 환경 설정을 간단하게 자동으로 해 주는 Spring Boot를 사용하기 위해 아래 사이트에서 파일을 생성한다.

https://start.spring.io

▣ 일단 우측 의존성 추가에 신경 쓰느라 지금 봤는데 좌측에 Configuration을 선택하는 게 있었다... 이후에 코드에서 Yml로 바꿨는데 미리 선택할 수 있는 것 같다. 

그리고 최신 버전으로 4.0.3 기본으로 선택했는데, 나중에 AWS에서 EC2로 배포할 때 jackson 파일을 사용하는 과정에서 오류가 발생했다. 그게 스프링부트 버전이 높아서 내리면 괜찮다고 하는데, 이미 코드를 작성해 놓은 상태라 혹시 꼬일까 봐 우선 EC2에선 jackson 관련한 yml 설정을 지우는 걸로 했다... 그래도 다행히 프론트엔드에서 파싱 오류가 나진 않아서 괜찮았는데, 추후에 더 테스트 해 보고 방법을 결정해야겠다.

 

 

의존성을 추가한 다음에 파일을 생성하고, 인텔리제이에서 해당 프로젝트 폴더의 build.gradle 파일을 선택하면 프로젝트가 열린다. 여기에 JWT와 H2 관련한 의존성을 더 추가한다.

build.gradle

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

group = 'toyProj'
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-security'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	implementation 'org.springframework.boot:spring-boot-starter-webmvc'
    
	//JWT (jjwt 라이브러리)
	implementation 'io.jsonwebtoken:jjwt-api:0.12.3'
	runtimeOnly    'io.jsonwebtoken:jjwt-impl:0.12.3'
	runtimeOnly    'io.jsonwebtoken:jjwt-jackson:0.12.3'

	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'org.mariadb.jdbc:mariadb-java-client'
	annotationProcessor 'org.projectlombok:lombok'
    
	testImplementation 'org.springframework.boot:spring-boot-starter-data-jpa-test'
	testImplementation 'org.springframework.boot:spring-boot-starter-security-test'
	testImplementation 'org.springframework.boot:spring-boot-starter-validation-test'
	testImplementation 'org.springframework.boot:spring-boot-starter-webmvc-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
    
	//H2 인메모리 DB - Repository 테스트용
	testRuntimeOnly 'com.h2database:h2'
}

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

 

 

application.yml 관해서도 작성한다. (처음엔 여기에 DB와 JWT까지 다 적었다가 깃허브 올릴 때 따로 분리했다.)

application.yml

server:
  port: 8080

spring:
  profiles:
    active: local

  jpa:
    hibernate:
      ddl-auto: update  #개발 중엔 update, 운영에는 validate
    show-sql: true
    properties:
      hibernate:
        format_sql: true

    #LocalDate / LocalDateTime JSON 직렬화 설정
    #이게 없으면 날짜가 배열([2026, 3, 17])로 내려와서 프론트에서 파싱 오류남
    jackson:
      serialization:
        write-dates-as-timestamps: false
      time-zone: Asia/Seoul

application-local.yml을 같이 실행하기 위해서는 여기에 profiles: active: local을 꼭 적어줘야 한다. 

EC2에선 오류나는 jackson 라인을 다 없앴는데 그래도 파싱 오류는 나지 않았다. 아마 프론트에서 따로 코드를 추가했었는데 그 덕분에 괜찮은 것 같다. 아니면 springBoot에서 자동으로 해 줘서 괜찮거나 아직 테스트가 부족해서 오류를 못 잡은 거일 수도 있는데 이 부분은 더 공부를 해야겠다...

 

 

cmd에서 MySQL DB를 생성, 계정과 권한 설정한 걸 토대로 local yml에 그 정보를 적어준다.

jwt secret에는 토큰 (마음대로 설정, 256bit 이상)과 만료 시간을 적어준다.

cmd

mysql -u -root -p
(비밀번호 입력)

//DB 생성
CREATE DATABASE (DB 이름 입력);

//계정 생성 (예전에 다른 DB에서 쓴 계정이라도 이름과 host가 똑같으면 오류남. DB명대로 새로 만드는 게 나음)
CREATE USER '(user명)'@'localhost' IDENTIFIED BY '(비밀번호)';

//계정에 권한 부여
GRANT ALL PRIVILEGES ON (DB명).* TO '(user명)'@'localhost';

//저장
FLUSH PRIVILEGES;

 

application-local.yml

#절대 깃허브에 올리면 안 됨 -> gitignore에 파일명 추가
spring:
  datasource:
    url: jdbc:mariadb://localhost:3306/____
    username: ____
    password: ____
    driver-class-name: org.mariadb.jdbc.Driver

jwt:
  secret: "_____________________________________" #256bit 이상 필요
  expiration: 86400000 #24시간 (ms 단위)

 

 

여기까지 하면 설정은 끝났고, 이제 코드 작성을 위해 패키지와 파일을 구성한다. 

인텔리제이에서 아래와 같이 패키지 구조를 설계했다.

 

기본적으로 domain, controller, service, repository 계층으로 나눠지고

그 사이에서 데이터를 송수신할 dto, 

인증/인가를 위한 security,

예외처리 통합을 위해 exception 패키지를 추가했다. (<-이거 안 하면 백엔드에서 예외처리 넘겨도 프론트엔드에서 단순히 500에러라고만 받아서 뭔 내용인지 자세히 모르기 때문에, 정확히 400 ~(메시지 오류 내용)등을 받을 수 있도록 코드를 추가했다.)

 

또한 이후에 추가한 test 파일들은 다음과 같다.

test 코드를 작성할 땐 본 파일 구조와 똑같이 해야 자동으로 그에 맞게 테스트를 돌려주니, 여기에서도 동일하게 패키지 구조를 따랐다.

---

내용이 길어져서 코드 작성은 그다음 글로~.~