성장하는 맛이 있지

[코드트리 후기] 북마크 학습 루틴 만들기

J_yoonS — Sun, 7 Jun 2026 09:11:04 +0900

코딩 테스트 플랫폼을 이용하다 보면 학업 스케줄로 인해 학습 흐름이 자주 끊겼다. 며칠 만에 다시 접속하면 이전에 어디까지 공부했는지, 어떤 부분에서 막혔었는지 기억이 나지 않아 감을 잡는 데 시간을 허비했다.

코드트리의 북마크 기능은 끊어진 학습 흐름을 바로 연결해주는 시스템적 도구였다.

학습 도중 완벽히 이해하지 못했거나 나중에 다시 봐야 할 문제를 폴더별로 즉시 지정해 저장했다. 이 방식을 통해 시간이 부족한 평일에는 취약 지점을 마킹만 해두고, 여유가 생기는 시점에 북마크 대시보드만 열어 곧바로 복습을 재개할 수 있었다.

효율적인 복습을 위한 북마크 분류 기준

완벽하지 않은 문제
- 겨우 맞혔거나 구현 시간이 오래 걸려 추후 재도전이 필요한 문제
다시 풀기
- 시간적 여유가 있을 때 타이머를 켜고 혼자 힘으로 다시 풀어볼 문제

시간이 부족할 때는 새로운 문제를 무리하게 풀기보다, 북마크 폴더에 모아둔 문제들을 나란히 열어두고 구조적 차이점만 직관적으로 비교했다. 시스템의 모아보기 기능을 활용하는 것만으로도 복습의 밀도가 높아졌다.

시스템 기반의 유연한 복습 루틴

매일 일정량의 진도를 나가야 한다는 압박감에서 벗어나, 학업 일정에 맞춘 유연한 프로세스를 정립했다.

트레일 학습 및 마킹 (평일) : 새로운 개념을 학습하며 정체되었던 문제를 예외 없이 북마크에 저장했다.
북마크 대시보드 체크 (공백기) : 풀이 시간이 부족한 날에는 새로운 문제를 푸는 대신 북마크된 취약점 리스트를 눈으로 검토했다.
집중 복습 및 해결 (주말) : 학업 과제가 끝난 여유 시간에 북마크 시스템을 열어 저장된 문제들을 집중적으로 풀었다.

이번 주는 학업 스케줄로 인해 목표 XP를 채우지 못하는 날이 많았다. 하지만 북마크 시스템에 취약 문제들이 시각화되어 저장되어 있었기 때문에, 진도가 멈춘 상태에서도 불안감 없이 효율적으로 복습을 진행할 수 있었다.

깃허브 연동을 통한 학습 기록

매일매일 빈틈없이 잔디를 심는 연속성 시스템에 얽매이지 않았다. 대신 연동해둔 깃허브(GitHub) 자동 기록 기능을 통해, 간헐적으로 공부하더라도 학습 흔적이 누적되는 것에 의미를 두었다.

주말이나 여유 시간에 몰아서 해결한 문제들이 깃허브에 한꺼번에 기록되는 것을 보며 나름의 학업 밸런스를 확인했다. 스트릭 기능에 스트레스를 받기보다, 코드트리의 시스템을 개인 라이프스타일에 맞춰 유연하게 변형하여 활용했다.

총평

코드트리는 매일 꾸준히 풀 수 있는 사용자뿐만 아니라, 학업 등으로 인해 간헐적으로 공부할 수밖에 없는 환경에서도 유용한 시스템을 제공했다.

내가 멈춘 지점을 기억해주는 트레일, 끊어진 흐름을 이어주는 북마크, 속도에 맞춰 누적되는 깃 연동 기능이 유기적으로 맞물려 독학 페이스를 유지하는 데 도움이 되었다. 앞으로도 시스템 기능을 적극 활용하여 나만의 속도로 학습을 이어갈 계획이다.

https://www.codetree.ai/ko/no-free-lunch-2026/?ref=5R8GAC

3년 만에 돌아온, 코드트리 청약 통장 챌린지 | 코드트리

매주 학습 납입하고 7주 만기 채우면 코드트리 8월까지 무료. 매주 추첨권을 모아 맥북·에어팟·애플워치 응모까지. 신청 인원에 따라 조기마감될 수 있어요.

www.codetree.ai

해당 링크로 코드트리 통약 챌린지 참여하기!

[코테 공부] 잔디 심기로 코딩테스트 1일 1문제 습관 형성하기 (feat. 코드트리)

J_yoonS — Mon, 1 Jun 2026 18:24:48 +0900

청약챌린지 3주차이다. 3회차 미션을 진행하며 가장 크게 느낀 점은, 코딩테스트 공부에서 중요한 것은 '매일 엄청난 양을 푸는 것'이 아니라 '흐름이 끊기더라도 다시 공부방으로 돌아오는 루틴을 만드는 것'이다. 그리고 코드트리가 제공하는 여러 동기부여 장치들이 이 루틴을 유지하는 데 매우 현실적인 도움이 되었다.

1. 학습 의지를 깨우는 카톡 리마인더

일과가 바쁘다 보면 "오늘 알고리즘 문제 풀어야지" 하는 생각조차 잊어버릴 때가 많다. 그때 도착하는 코드트리의 알림톡 리마인더는 공부 흐름이 완전히 끊기지 않도록 붙잡아주는 역할을 해준다.

설령 시간이 부족해 문제를 직접 풀지 못하는 날이더라도, 알림을 보고 접속하여 개념 설명을 다시 읽거나 이전 오답 해설을 복기하는 식으로 학습 밀도를 유지할 수 있다.

이런식으로 알림이 온다.

2. 깃허브(GitHub) 잔디 심기 공식 연동

개발자로서 기술 역량을 기록하고 꾸준함을 증명하는 데 있어 GitHub의 초록색 잔디는 매우 직관적인 지표이다.

기존에는 외부 확장 프로그램을 사용하여 풀이를 연동하곤 했는데, 코드트리는 플랫폼 내부에서 공식적으로 Repository 연동 및 폴더명 커스텀 설정을 지원하여 굉장히 편리하다.

5월달은 코드트리 덕분이라 해도 과언이 아니다.

제출한 정답 코드가 자동으로 GitHub에 커밋되는 것을 보며, 내가 투자한 시간이 증발하지 않고 기록으로 남는다는 것을 확실히 느낄 수 있었다. 가장 좋은 점은 문제가 폴더별로 깔끔히 정리되어 내가 풀었던 문제들을 직관적으로 볼 수 있다는 점이다.

맨 왼쪽 사진처럼 문제가 폴더별로 정리되고, 해당 폴더에 들어가면 자동으로 README에 남겨진다.

내가 어떻게 풀었는지 자동으로 기록된다.

3. 고립감을 해소하는 라이브 챌린지 현황 및 단체 미션

혼자서 문제를 풀다 보면 쉽게 지치기 마련이다. 하지만 코드트리 대시보드에서는 다른 참여자들이 실시간으로 문제를 풀고 학습하는 현황이 라이브로 업데이트되어 자연스러운 자극을 받을 수 있다.

특히 이번 3회차에는 공동 경험치 10만을 모아 함께 보상을 받는 단체 미션이 존재하여, 개인 학습임에도 불구하고 '다 함께 참여하고 있다'는 유대감을 느낄 수 있었다.

이번 3회차를 하면서 느낀점은 코드트리의 시스템이 꾸준한 학습 습관을 유지하는데 분명히 도움되는 플랫폼이라는 점이다.

학업과 과제, 프로젝트를 병행하다 보면 현실적으로 변수가 많아서 쉽지 않겠지만, 코드트리의 알림톡과 동기부여 장치들을 활용해 매일 작은 문제라도 풀어나가며 문제 푸는 습관을 형성할 계획이다. 4주차까지 아자아자!

https://www.codetree.ai/ko/no-free-lunch-2026/?ref=5R8GAC

3년 만에 돌아온, 코드트리 청약 통장 챌린지 | 코드트리

www.codetree.ai

상기 링크로 코드트리 이용이 가능합니다!

[코드트리] Sorting(정렬) 알고리즘 약점 극복 학습 후기

J_yoonS — Fri, 22 May 2026 10:49:19 +0900

코드트리 챌린지를 시작하면서 Sorting 챕터부터 학습을 진행했다.

솔직히 정렬은 쉬울 거라 생각했는데 생각보다 챙겨야 할 게 많았다.

코드트리 커리큘럼 구조

Trail 2. 여기서부터 알고리즘 학습이다.

Functions부터 시작해서 Recursive Functions → Sorting → Simulation → Exhaustive Search → Case Work → Ad-Hoc 순서로 이어진다.

Trail은 선택할 수 있어서 자신의 수준이나 목표에 맞게 시작점을 고를 수 있다.

단순히 문제만 나열하는 방식이 아니라, 각 챕터 안에서 기본 → 연습 → 테스트 순서로 문제가 구성되어 있어서 개념을 익히고 바로 적용해보는 흐름이 자연스럽게 만들어진다.

처음에는 이 구조가 그냥 문제 묶음처럼 보였는데, 직접 따라가보니 기본 문제에서 개념을 잡고, 연습 문제에서 조건이 조금씩 붙고, 테스트 문제에서 내가 진짜 이해했는지 확인하는 흐름이 꽤 잘 설계되어 있다는 걸 느꼈다.

Sorting 학습에서 달라진 풀이 감각

실제 학습 화면

기본 문제에서 Arrays.sort() 감각을 익혔다.

예를 들어 기본 문제인 오름내림차순 정렬은 이렇게 풀었다.

Arrays.sort(arr);
for (int i = 0; i < n; i++) {
    System.out.print(arr[i] + " ");
}
System.out.println();

for (int i = n - 1; i >= 0; i--) {
    System.out.print(arr[i] + " ");
}

처음엔 내림차순을 따로 다시 정렬해야 하는 줄 알았는데,

오름차순 정렬 후 역순으로 출력하면 된다는 걸 이때 정리했다.

정렬은 쉬워 보이지만 막상 문제에 적용하려고 하면 헷갈리는 부분이 생겼다. 단순히 오름차순, 내림차순 정렬만 하면 되는 줄 알았는데, 기준이 두 개 이상이거나 특정 조건에 따라 정렬 방식이 바뀌는 경우에는 처음 접근 자체가 달라져야 했다.

기본 문제에서는 Arrays.sort() 같은 내장 함수를 활용하는 감각을 익혔고, 연습 문제로 넘어가면서 comparator를 직접 구현하거나 정렬 기준을 세분화하는 연습을 했다. 테스트 문제에서는 정렬만으로 해결이 되는 문제인지, 아니면 정렬 이후 추가 처리가 필요한지를 판단하는 게 중요했다.

이 과정에서 정렬 문제를 볼 때 "뭘 기준으로 정렬할 것인가"를 먼저 정리하고 코드를 작성하는 습관이 조금씩 생겼다.

기본 → 연습 → 테스트를 따라가며

코드트리에서 좋았던 점은 같은 개념을 반복하되, 매번 조금씩 다른 방식으로 적용해볼 수 있다는 점이었다. 기본 문제만 풀었을 때는 "이거 알겠는데?" 싶었는데, 테스트 문제에서 막히는 경우가 있었다. 그때 내가 개념을 몰라서 틀린 건지, 구현을 실수한 건지를 구분할 수 있어서 다음에 뭘 보완해야 할지가 명확해졌다.

해설과 모범코드를 내 코드랑 비교해보는 것도 도움이 됐다. 같은 결과를 내더라도 훨씬 간결하게 쓰는 방식을 보면서 내 풀이에서 불필요한 부분이 어디인지 확인할 수 있었다.

다른 서비스와 비교했을 때

백준이나 프로그래머스는 문제는 많지만 내가 뭘 먼저 풀어야 할지 기준이 없어서, 결국 아무 문제나 풀다가 방향을 잃는 경우가 많았다. 코드트리는 커리큘럼 순서가 잡혀 있어서 일단 따라가기만 하면 된다는 점이 달랐다. 특히 어떤 유형이 약한지 갭체크로 확인하고 거기서부터 시작할 수 있다는 게 실질적으로 도움이 됐다.

https://www.codetree.ai/ko/no-free-lunch-2026/?ref=5R8GAC

3년 만에 돌아온, 코드트리 청약 통장 챌린지 | 코드트리

www.codetree.ai

해당 링크를 통해 갭체크 테스트가 가능하다.

[코드트리 솔직후기] 왕초보의 코딩테스트, 갭체크로 실력 진단받기

J_yoonS — Sat, 16 May 2026 10:09:04 +0900

이제 슬슬 코딩테스트 준비해야하는데.. 백준으로 할까하다...

얼마전에 서비스 종료 되었다는 안타까운 소식을 듣게 되어

나 같은 초보는 어디서 실력을 쌓아야 차근차근 성장할 수 있을까 하고 한참을 방황하다 찾게 된 코드트리.

https://www.codetree.ai/ko

Codetree: Master Coding Interviews - Data Structures & Algorithms

Master algorithms, ace tech interviews, and elevate your coding skills with Codetree's systematic curriculum and expert-crafted problem sets.

www.codetree.ai

UI도 깔끔하고 무엇보다 들어가자마자 눈에 띈 '갭 체크 진단'

코딩테스트는 1년전에 부트캠프 다닐때 테스트 겸 봤던게 처음이자 마지막이었던지라 내 (처참한)실력이 어느정도인지

궁금하기도 했고. 내 레벨에 따라 그에맞는 커리큘럼을 자동으로 추천해준다기에 거리낌없이 시도해봤는데

역시나!.. 결과는 처참했다. 어려운 문제는 당연하고 심지어 중간 난이도 조차 문제를 이해하기가 어려워서 (...)

나 지금 아주 심각하구나 하고 객관적인 내 실력과 마주할 수 있었다.

첫번째 문제

본인의 실력, 어떤 방향으로 향상시키고자 하는 방향을 선택 한 후 화면을 넘기면

첫 문제 테스트부터 시작한다.

여느 다른 코딩테스트 사이트와 마찬가지로 문제와 본인이 선택한 언어에 맞는 코드베이스를 제공해주고

내가 나머지 코드를 채우고 테스트한 뒤 제출하는 형식이다.

첫번째 문제는 단순 계산이었기에 간단한 연산을 입력하였고.

두번째 문제부터 반복문, 제어문이 나왔고

세번째 문제부터는 논리적으로 연산하는 부분이 시작되어

스스로 내 자신이 안타까움에 탄식을 자아냈다.. (나 고작 이것뿐이구나.. 알긴 알았다만..ㅎ)

정답을 맞추면 내가 문제를 푸는 과정의 화면과 함께 옆에 코멘트를 달아준다.

논리적 사고가 부족한 나는 3번째 문제부터 어려워져서 뭐.. 결국 거의 포기한 것과 다름 없고 결과는!..

네,,그래요 놀랍지 않군요

이런식으로 적나라하게(?) 내가 무엇이 부족하고 어떤 개념을 길러야하는지 가감없이 코멘트를 달아준다.

부족한 부분을 알아야 기본기 생략없이 탄탄히 실력을 쌓아올릴 수 있기에

이렇게 세밀하게 알려주는 방식이 굉장히 좋았다.

이렇게 테스트 한 결과를 기반으로 챕터를 추천해준다.

무엇보다 첫 난이도는 크게 어렵지 않게 시작하기 때문에 기본적인 개념을 쌓은 뒤 문제를 시작할 수 있다.

물론 진단결과를 토대로 시작하지 않고 원하는 챕터부터 시작이 가능하다.

하지만 나는 기본개념을 확실히 잡고 가길 원해서 진단결과 나온 약한 챕터부터 문제를 풀고 있는 중이다.

물론 그 개념이 if 문부터 시작이라 스스로 회의감이 들기는 하지만 ㅎㅎ..

이런들 어찌하리 어제보다 더 나은 내일이 내 모토기에 이렇게 차근차근 실력을 쌓다보면

어려운 난이도도 쉽게 풀 수 있는 날이 언젠가 오지 않을까 하면서 매일 한시간씩 꾸준히 코드트리를 하는 중이다!

이런식으로 풀더별로 문제를 모아볼 수 있다.

무엇보다.. 깃허브 커밋까지 지원하여 내가 맞춘 문제만 자동커밋할 수 있다.

즉 꾸준히 문제만 풀면 깃허브 잔디로 내 성실함까지 증명이 가능하다!

정확히 4일전 부터 코드트리를 시작하여..

개발자라면 알것이다.. 깃허브에 잔디가 쌓일때 느끼는 그 뿌듯함이란..ㅎㅎ

https://www.codetree.ai/ko/no-free-lunch-2026/?ref=5R8GAC

3년 만에 돌아온, 코드트리 청약 통장 챌린지 | 코드트리

www.codetree.ai

추천코드: 5R8GAC

링크를 통해 가입하고 추천코드를 입력하면 500포인트를 얻을 수 있습니다.

추가로 문제를 풀때마다 추천인과 가입자 모두 +5 포인트를 받을 수 있는데,

전 매일 같이 문제를 풀고 있기 때문에 가입자에게도 좋은 추천인 제도입니다! ☺️

매일 출석체크 인증!

이 글을 읽고 온 초보개발자, 취업준비생, 신입개발자 혹은 성장하길 바라길 누군가!

모두 같이 열심히 준비하여 꼭 원하는 목표를 이루길 바랍니다 :)

어제보다 더 나은 내일의 나를 꿈꾸며

앞으로도 꾸준히 코딩테스트 공부한 내용을 적도록 하겠습니다!

개인프로젝트 AWS EC2 배포 후기 (Spring Boot + React)

J_yoonS — Wed, 13 May 2026 11:43:32 +0900

배포경험은 처음이기에 초보자가 접근하기 쉽다는 AWS EC2로 개인프로젝트를 배포했다.

https://aws.amazon.com/ec2/

Amazon EC2 - 클라우드 컴퓨팅 용량 - AWS

Amazon EC2는 프로세서, 스토리지, 네트워킹, OS 및 구매 모델의 다양한 옵션을 제공하며, 클라우드에서 안전하고 크기 조정 가능한 컴퓨팅을 제공합니다.

aws.amazon.com

1. AWS EC2 인스턴스 생성

AWS EC2 인스턴스 생성 (t2.micro, Ubuntu, 서울 리전)
보안 그룹 포트 오픈: 22(SSH), 80(HTTP), 443(HTTPS), 8080(Spring Boot)

1) AWS EC2 인스턴스 생성

6개월간은 Free plan이 가능하여 새로 가입을 했는데 region을 잘못보고 Sydney 로 설정하여

다시 Seoul로 설정한 뒤 재포를 했다. 헛수고 하지 않기 위해 꼭 Region 확인 후 'Launch instance'

상단에 있는 'Asia Pacific(Seoul)

Instance Luanch 과정에서 생성된 .pem키는 꼭 잘 저장해놓도록 하자.

EC2 환경에 빌드할때 필요하다.

Public IP 또한 EC2에 올릴때 필요하다.

2) 인바운드 규칙 탭 추가하기

HTTPS 포트 443 → 0.0.0.0/0
HTTP 포트 80 → 0.0.0.0/0
Custom TCP 포트 8080 → 0.0.0.0/0

2. EC2 환경 설정

SWAP 메모리 설정 (t2.micro 메모리 부족 대비)
Java 17 설치
MySQL 설치 및 DB 생성, 비밀번호 설정

최대한 free plan 한도에서 진행하려 하니 터미널이 자주 멈추는 현상이 발생했다.

찾아보니 t2.micro 메모리가 1GB밖에 안 돼서 Spring Boot를 띄우는 것만으로도 벅찬 것 같아

SWAP 메모리를 띠로 설정해 주었다.

*SWAP은 EC2 안에 있는 디스크를 메모리처럼 쓰는 것.

1) SWAP 메모리 설정

sudo fallocate -l 1G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

2) 프로젝트는 Java17 과 MySQL 로 설정 했기때문에 클라우드 환경에도 동일하게 설치해준다.

sudo apt update
sudo apt install -y openjdk-17-jdk
sudo apt install -y mysql-server

3) MySQL 접속하여 DB와 유저 설정을 한다.

sudo mysql

접속되면, root 비밀번호 설정

CREATE DATABASE workout_diary;
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'yourpassword';
FLUSH PRIVILEGES;
EXIT;

3. DB 마이그레이션

MySQL Workbench로 로컬 DB export
scp로 EC2에 업로드
EC2에서 import

Windows에서 SQL 파일을 export하면 파일 앞에 보이지 않는 특수문자가 붙는다. MySQL이 이걸 읽으면 에러가 난다. mysqldump 명령어로 해결하려 했지만 계속 실패해서 결국 MySQL Workbench로 export하니 해결됐다.

1) DB export -> 파일을 export 해서 EC2 환경에 올린다. (MySQL Workbench 접속)

Dump Data Only → Dump Structure and Data 로 변경
Export to Self-Contained File 선택 (단일 파일로)
Include Create Schema 체크
Start Export 클릭!

2) scp로 EC2에 올리기

scp -i "C:\Users\dhwkd\workout server.pem" "C:\Users\dhwkd\OneDrive\문서\dumps\Dump20260511.sql" ubuntu@your-ec2-ip:~

3) EC2 터미널에서 DB import

mysql -u root -p'your-password' workout_diary < ~/Dump20260512.sql

4. Spring Boot 배포

application.properties 수정 (SSL 비활성화, 포트 8080)
CORS 설정 (배포 URL 추가)
mvnw clean package -DskipTests 빌드
scp로 jar 파일 업로드
nohup java -jar 백그라운드 실행

Spring Boot 배포전에 application.properties 포트번호 변경, CORS 설정에 배포 URL을 추가한다.

*도메인은 Duck DNS 의 무료 도메인을 이용했다. (계정 한개당 1개 무료 도메인 가능)

1) 포트번호, 배포 URL 추가

# Server web port
server.port=8080

configuration.setAllowedOrigins(Arrays.asList(
        "https://localhost:3000",
        "https://dailylift.duckdns.org"
));

private String[] theAllowedOrigins = {
        "https://localhost:3000",
        "https://dailylift.duckdns.org"
};

2) Spring Boot 빌드 > jar파일 EC2에 업로드

cd C:\exercise-library\02-backend\workout-diary\workout-diary
.\mvnw.cmd clean package -DskipTests

scp -i "C:\Users\dhwkd\gymrat server.pem" "C:\exercise-library\02-backend\workout-diary\workout-diary\target\diary-0.0.1-SNAPSHOT.jar" ubuntu@your-ec2-ip:~

3) nohup java -jar 백그라운드 실행

sudo cp -r ~/build/* /var/www/html/
nohup java -jar ~/diary-0.0.1-SNAPSHOT.jar > ~/app.log 2>&1 &

5. React 배포

.env.production 생성 (배포 API URL)
npm run build 빌드
scp로 build 폴더 업로드
Nginx로 정적 파일 서빙

1) .env.production 생성

기존에 .env 파일만 존재했는데, 이럴 경우 배포 주소와 local 환경 테스트를 분리할 수가 없어서

매번 포트번호를 수정하는게 불편하여 .env.production 과 .env 파일로 나누었다.

[React 환경 변수 우선순위]

npm start (로컬) → .env.local > .env
npm run build (빌드) → .env.production > .env

따라서 파일을 나눠서 관리한다

.env → REACT_APP_API='http://localhost:8080/api' (로컬용)
.env.production → REACT_APP_API='https://dailylift.duckdns.org/api' (배포용)

2) npm run build 빌드 > PowerShell-EC2에 업로드

cd C:\exercise-library\03-frontend\react-library
npm run build

scp -i "C:\Users\dhwkd\workout server.pem" -r "C:\exercise-library\03-frontend\react-library\build" ubuntu@52.64.44.192:~

3) Nginx 설치 > React 파일 복사 > Nginx 설정

sudo apt install -y nginx

sudo cp -r ~/build/* /var/www/html/

sudo tee /etc/nginx/sites-available/default << 'EOF'
server {
    listen 80;
    server_name gymrat.duckdns.org;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name gymrat.duckdns.org;

    ssl_certificate /etc/letsencrypt/live/gymrat.duckdns.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/gymrat.duckdns.org/privkey.pem;

    location / {
        root /var/www/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:8080;
    }
}
EOF

6. 도메인 & HTTPS

DuckDNS 무료 도메인 생성
Let's Encrypt SSL 인증서 발급 (certbot)
Nginx 설정 (HTTP → HTTPS 리다이렉트, API 프록시)

1) DuckDNS 무료 도메인 생성

https://www.duckdns.org/

-> 도메인 설정 후, EC2 IP 주소를 입력한다.

DuckDNS는 certbot 자동 인증이 안 돼서 수동으로 TXT 레코드를 등록해서 인증했다.

certbot이 알려주는 값을 DuckDNS URL에 직접 입력하는 방식이다.

2) SSL 인증서 받기 > certbot이 TXT레코드 값 알려주면 이메일 주소 입력 > Y

sudo apt install -y certbot python3-certbot-nginx
sudo systemctl stop nginx
sudo certbot certonly --manual --preferred-challenges dns -d dailylift.duckdns.org

3) DuckDNS에 TXT 레코드 추가하기 > URL에 입력 후 OK 뜨면 bash Enter 누르기

https://www.duckdns.org/update?domains=dailylift&token=여기에토큰&txt=여기에TXT레코드

7. Auth0 설정

Allowed Callback URLs 추가
Allowed Logout URLs 추가
Allowed Web Origins 추가

배포하면서 okta.oauth2.audience 를 배포 도메인으로 바꿨더니 401 에러가 발생했다. Auth0 API의 Identifier(http://localhost:8080)와 설정값이 달라서 토큰 검증이 실패한 것이었다. Identifier는 변경이 불가능하므로 Spring Boot와 React 설정을 다시 http://localhost:8080 으로 맞춰서 해결했다.

8. 트러블슈팅

위 과정에서 겪은 주요 이슈들은 각 단계에 기재했으나 한눈에 보기 위해 정리했다.

SWAP 없으면 Spring Boot 실행 중 멈춤 (2번 참고)
BOM 문제로 SQL import 실패 → Workbench export로 해결 (3번 참고)
.env.production vs .env.local 우선순위 문제 (5번 참고)
SSL 인증서는 DuckDNS CAA 문제로 manual DNS 방식 사용 (6번 참고)
Auth0 audience 불일치 → http://localhost:8080 으로 맞춤 (7번 참고)

HTTP 와 REST 컨트롤러 (REST API 구현)

J_yoonS — Thu, 20 Mar 2025 11:18:11 +0900

HTTP 요청코드
- 클라이언트가 보낸 요청이 성공했는지 실패했는지 알려주는 코드.
- 응답은 100~500번대까지 5개의 그룹으로 나뉘어져 있다.

상태 코드	설명
1XX(정보)	요청이 수신돼 처리 중입니다.
2XX(성공)	요청이 정상적으로 처리됐습니다.
3XX(리다이렉션 메시지)	요청을 완료하려면 추가 행동이 필요합니다.
4XX(클라이언트 요청 오류)	클라이언트의 요청이 잘못돼 서버가 요청을 수행할 수 없습니다.
5XX(서버 응답 오류)	서버 내부에 에러가 발생해 클라이언트 요청에 대해 적절히 수행하지 못했습니다.

요청이 성공했을 때 200, 데이터 생성을 완료했을 때는 201 을 반환.
요청한 정보를 찾을 수 없을 때 404, 서버에 오류가 났을 때 500 을 반환.

서버는 클랄이언트의 요청에 대한 응답으로 화면(view)가 아닌 데이터(data)를 사용하는데,
이때 사용하는 응답 데이터가 JSON(JavaScript Object Notation) 이다.

[JSON 데이터 예시]

{
    "id" : 1,
    "name" : "Park",
    // 키 값으로 또 다른 JSON 데이터와 배열 사용 가능
    address : {
    		"Street": "Nambu Street 151",
            "suite": "Central Villat 301",
              ...
  	},
    "likes" : {"singing", "reading", "writing"}
}

REST API 의 응답 표준으로 사용하는 JSON 은 키와 값의 쌍으로 된 속성으로 데이터를 표현한다.
JSON 의 값으로 또 다른 JSON 데이터나 배열을 넣을 수 있다.

REST API 의 구현 과정

REST : HTTP URL로 서버의 자원(resource) 을 명시하고, HTTP 메서드(POST, GET, PATCH/PUT, DELETE) 로 해당 자원에 대해 CRUD(생성, 조회, 수정, 삭제) 하는 것을 의미한다.
API : 클라이언트가 서버의 자원을 요청할 수 있도록 서버에서 제공하는 인터페이스(interface).
REST API : REST 기반으로 API를 구현한 것. -> 클라이언트가 기기에 구애받지 않고 서버의 자원을 이용할 수 있다.

REST API 를 구현하려면 URL (REST API의 주소) 을 설계해야 한다.

앞서 만든 Article 데이터를 CRUD(생성, 조회, 수정, 삭제) 하기 위해 REST API 주소를 다음과 같이 설계한다.

[REST API 설계]

HTTP Method	REST API URL
GET (목록조회)	/api/articles
GET (단일조회)	/api/articles/{id}
POST (생성)	/api/articles
PATCH (수정)	/api/articles/{id}
DELETE (삭제)	/api/articles/{id}

설계를 끝냈다면, RestController를 생성한다.

[api/ArticleApiController]

@RestController
public class ArticleApiController {
    @Autowired
    private ArticleRepository articleRepository;
    // GET
    @GetMapping("/api/articles") 
    public List<Article> index() {
        return articleRepository.findAll();
    }

Article 묶음을 반환하므로 반환형이 List<Article>인 index() 메서드를 정의한다.
return 문에는 articleRepository 의 findAll() 메서드를 사용해 DB 에 저장된 모든 Article을 가져와 반환한다.
@Autowired : articleRepository 를 선언하기 위해 의존성을 주입한다.

[API tester]

GET 요청과 해당 URL 주소로 요청하면 JSON 형식으로 목록값이 잘 반환된다.

이제 단일값을 조회해보자.

[api/Article/ApiController]

    // POST
    @GetMapping("api/articles/{id}")
    public Article show(@PathVariable long id) {
        return articleRepostory.findById(id).orElse(null);
    }

[API tester]

단일값 조회 성공

조회에 이어 POST를 RestController에 구현해보자.

[api/ArticleApiController]

    @PostMapping("api/articles")
    public Article create(@RequestBody ArticleForm dto) {
        Article article = dto.toEntity();
        return articleRepository.save(article);
    }

@RequestBody : 요청 시 본문(Body)에 실어 보내는 데이터를 create() 메서드의 매개변수로 받기위해 선언.
받은 dto를 DB에서 활용할 수 있도록 Entity로 변환해 article 에 넣고, articleRepository를 통해 DB에 저장.

[API tester]

POST 요청 성공.

PATCH, 수정 구현은 아래와 같다.

[api/ArticleApiController]

// PATCH
@PatchMapping("api/articles/{id}")
public ResponseEntity<Article> update (@PathVariable long id, @RequestBody ArticleForm dto) {
    // 1. DTO -> Entity 변환하기
    Article article = articleRepository.toEntity(); // 서비스 통해 게시글 수정
    // 2. 타깃 조회하기
    Article target = articleRepository.findById(id).orElse(null);
    // 3. 잘못된 요청 처리하기
    if (target == null || id !=article.getId()) {
             return ResponseEntity.status(HttpStatus.BAD_REQUEST).build(null);
    // 4. 업데이트 및 정상 응답(200) 하기
    target.patch(article)
    Article updated = articleRepository.save(target);
    return ResponseEntity.status(HttpStatus.OK).body(updated);
}

ReponseEntity : Rest 컨트롤러의 반환형, 즉 RESP API 의 응답을 위해 사용하는 클래스이다.
- REST API 요청을 받아 응답할 때 이 클래스에 HTTP 상태코드, 헤더, 본문을 실어 보낼 수 있다.
HTTPStatus : HTTP 상태 코드를 관리하는 클래스로, 다양한 Enum 타입과 관련한 메서드를 가진다.
- 열거형으로, 여러 상수로 이루어진 고정 집합을 가진다.
- 200 : HTTPStatus.OK,
- 201 : HTTPStatus.CREATED
- 400 : HTTPStatus.BAD_REQUEST

수정할 내용이 있는 경우에만 수정 가능하도록 patch() 메서드를 만들어준다.

[entity/Article]

public void patch(Article article) {
    if (article.getTitle() != null) {
        this.title = article.title;
    if  (article.getContent() != null) {
        this.content = article.content;
        }
    }
}

if 문으로 article(수정 Entity) 의 title 이 null 이 아닐 경우에만, this(target) 의 title을 갱신해 준다.

*content 또한 동일.

[API tester]

PATCH 요청 성공.

PATCH URL 의 id('1') 변수와 BODY 부분의 id ('1') 요청이 일치해야 한다.

마지막으로 DELETE 이다.

[api/ArticleController]

    // DELETE
    @DeleteMapping("/api/articles/{id}")
    public ResponseEntity<Article> delete (@PathVariable long id) {
        // 1. 대상 찾기
        Article target = articleRepository.findById(id).orElse(null);
        // 2. 잘못된 요청 처리하기
        if (target == null) {
        return ResponseEntity.status(HTTPStatus.BAD_REQUEST).body(null);
        }
        // 3. 대상 삭제하기
        articleRepository.delete(target);
        return ReponseEntity.status(HTTPStatus.OK).build();
    }

잘못된 요청일 경우 ResponseEntity 에 BAD_REQUEST, 본문(body) 에는 null 을 실어보낸다.
잘못된 요청이 아닐 경우 대상 Entity 를 삭제한다.
그리고 HTTPStatus.OK, 본문(body) 에는 null 대신 body 응답이 없는 객체를 생성한다. (즉, null과 동일)

[API tester]

DELETE 요청 완료.

DB 조회

DB 조회를 통해, id = 1 번열이 성공적으로 삭제 되었음을 확인할 수 있다.

**출처 : 스프링부트3 자바 백엔드 개발 입문 (홍팍 지음)

[게시판/삭제] 게시글 삭제하기

J_yoonS — Wed, 19 Mar 2025 11:30:18 +0900

게시판에서 글을 삭제하는 과정은 다음 순서로 이루어진다.

클라이언트가 HTTP 메서드로 특정 게시글의 삭제를 요청한다.
삭제 요청을 받은 컨트롤러는 repostiory를 통해 DB에 저장된 데이터를 찾아 삭제한다.(데이터가 있는 경우)
삭제가 완료됐다면 클라이언트를 결과 페이지로 리다이렉트 한다.
- 클라이언트에 삭제 완료 메시지도 띄어주기 위해 RedirectAttributes 클래스를 사용한다.
- 해당 클래스의 addFlashAttribute() 메서드는 리다이렉트 된 페이지에서 사용할 일회성 데이터를 등록할 수 있다.

[articles/show.mustache]

<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>
<a href="/articles/{{article.id}}/delete" class="btn btn-danger">Delete</a>
<a href="/articles">Go to Article List</a>

삭제 링크 URL를 추가한다.

[controller/ArticleController]

@GetMapping("/articles/{id}/delete")
    public String delete(@PathVariable Long id, RedirectAttributes rttr) {
        log.info("삭제 요청이 들어왔습니다");
        // 1. 삭제할 대상 가져오기
        Article target = articleRepository.findById(id).orElse(null);
        log.info(target.toString());
        // 2. 대상 엔터티 삭제하기
        if (target != null) {
            articleRepository.delete(target);
            rttr.addFlashAttribute("msg", "삭제됐습니다!");
        }
        // 3. 결과 페이지로 리다이렉트하기
        return "redirect:/articles";
    }

@PathVariable : 특정 게시글을 삭제하기 위해 대표값인 id 를 사용하기 위해 매개변수로 가져온다.
articleRepository.findById(id) : DB에 해당 id를 가진 데이터를 찾는다.
- 찾으면 Article 타입의 target 변수에 저장하고, 못 찾으면 null을 반환한다.
articleRepository.delete(target) : 메서드로 대상을 삭제한다.
RedirectAttributes 객체의 addFlashAttribute() 메서드를 활용하여 리다이렉트 시점에 한번에 사용할 데이터를 등록.
- 객체명.addFlashAttributes(넘겨_주려는_키_문자열, 넘겨_주려는_값_객체)

[layouts/header.mustache]

{{#msg}}
<div class="alert alert-primary alert-dismissible">
    {{msg}}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{/msg}}

{{#msg}} , {{/msg}} : msg 창 사용범위 지정.
<div> 태그 : 메시지 창 작성.

리다이렉트 페이지와 함께 삭제 메시지 창이 잘 뜨게된다. 성공!

**출처 : 스프링부트3 자바 백엔드 개발 입문 (홍팍 지음)

[게시판/수정] 게시글 수정하기

J_yoonS — Wed, 19 Mar 2025 10:47:27 +0900

데이터 수정은 크게 2단계로 나눠진다.

1. <수정 페이지> 만들고 기존 데이터 불러오기

2. 데이터를 수정해 DB 에 반영한 후 결과를 볼 수 있게 <상세 페이지>로 리다이렉트하기.

1딘계 동작원리

2단계 동작원리

1단계부터 구현해보자.

상세페이지에 edit(수정) 으로 이동하는 링크를 연결한다.

[articles/show.mustahce]

<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>
<a href="/articles">Go to Article List</a>

href 속성 값의 URL을 보면 id가 article의 속성이므로 {{article.id}} 로 표시했다.

{{#article}, {{/article}} 형식으로 지정한 경우 -> {{id}} 만 써도 되지만 그게 아니므로 '.' (점)을 사용하여 표시한다.

이제 Edit 요청을 받을 컨트롤러를 연결한다.

[controller/ArticleController]

    @GetMapping("/articles/{id}/edit")
    public String edit(@PathVariable Long id, Model model) {
        // 수정할 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);
        // 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity);
        // 뷰 페이지 생성하기
        return "articles/edit";
    }

@PathVariable : id 값을 변수로 사용하여 가져오기 위해 annotation 설정.
Model : 객체를 담을 모델을 사용하기 위해 메서드의 매개변수로 설정.
수정할 데이터 가져오기 : articleRepository의 findById(id) 메서드로 데이터를 찾아 가져온다.
- 만약 데이터를 찾지 못하면 null을 반환하고, 데이터를 찾았다면 Aticle 타입의 articleEntity 로 저장한다.
모델에 데이터 등록하기 : articleEntity를 article로 등록.

controller 를 생성했으니 이제 DB 에 저장된 데이터를 수정페이지로 가져와 화면에 출력해보자.

[articles/new.mustache]

{{#article}} <!--article 사용범위 지정 -->
<form class="container" action="/articles/update" method="post">
    <div class="mb-3">
        <label Class="form-label">제목</label>
        <input type="text" class="form-control" name="title" value="{{title}}">
    </div>
    <div class="mb-3">
        <label Class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content">{{content}}</textarea>
    </div>
    <a href="/articles/{{id}}">Back</a>
</form>
{{/article}}

※<input> 태그로 생성한 입력 요소의 초기값은 value 속성으로 정의하지만, <textarea> 태그로 생성한 여러줄의 입력
요소는 콘텐츠 영역에 초깃값을 정의한다,

화면 출력 모습 (title, content 가 정상 출력된다.)

클라이언트와 서버 간 처리 흐름을 4가지로 나누어 생각해보자.

MVC(Model-View-Controller) : 서버 역할을 분담해 처리하는 기법
JPA(java Persistence API) : 서버와 DB 간 소통에 관여하는 기술
SQL(Structured Query Language) : DB 데이터를 관리하는 언어
HTTP(HyperText Transfer Protocol) : 데이터를 주고받기 위한 통신 규약

HTTP 메서드- 클라이언트와 서버 간에 데이터를 전송할 때는 통신 규약 즉, 프로토콜을 따른다.
- 프로토콜(protocol) 은 기기 간에 각종 신호 처리 방법, 오류 처리, 인증 방식 등을 규정하고 있다.
- 그 중 HTTP는 웹 서비스에 사용하는 프로토콜로, 클라이언트의 다양한 요청을 메서드를 통해 서버로 보낸다.
- 대표적인 메서드는 POST(데이터 생성 요청), GET(조회), PATCH/PUT(수정), DELETE(삭제) 이다.

데이터 관리	SQL	HTTP
데이터 생성(Create)	INSERT	POST
데이터 조회(Read)	SELECT	GET
데이터 수정(Update)	UPDATE	PATCH(PUT)
데이터 삭제(Delete)	DELETE	DELETE

이제 2단계이다.

2단계는 데이터를 수정해 DB 에 반영한 후 결과를 볼 수 있게 <상세 페이지>로 리다이렉트 해야한다.

[articles/edit.mustache]

{{#article}} <!--article 사용범위 지정 -->
<form class="container" action="/articles/update" method="post">
    <input name="id" type="hidden" value="{{id}}">
    <div class="mb-3">
        <label Class="form-label">제목</label>
        <input type="text" class="form-control" name="title" value="{{title}}">
    </div>
    <div class="mb-3">
        <label Class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content">{{content}}</textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <a href="/articles/{{id}}">Back</a>
</form>
{{/article}}

※ <form> 태그는 옛날에 만들어진 규격이라 PATCH 메서드를 지원하지 않기 때문에 POST로 요청한다.

수정 폼에서 서버로 보낼 때는 id 값을 보내야 하므로 type="hidden" 속성으로 숨겨서 전송한다.

[dto/ArticleForm]

@AllArgsConstructor
@ToString
public class ArticleForm {
    private Long id;
    private String title; // 제목을 받을 필드
    private String content; // 내용을 받을 필드

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

수정 폼에서 id를 추가했으므로, DTO에도 id를 추가한다.

[controller/Articlecontroller]

@PostMapping("/articles/update")
    public String updateArticle(ArticleForm form) {
        log.info(form.toString());
        // 1. DTO를 엔터티로 변환하기
        Article articleEntity = form.toEntity();
        log.info(articleEntity.toString());
        // 2. 엔터티를 DB에 저장하기
        // 2.1 DB에서 기존 데이터 가져오기
        Article target = articleRepository.findById(articleEntity.getId()).orElse(null);
        // 2.2 기존 데이터값 갱신하기
        if (target != null) {
            articleRepository.save(articleEntity); // 엔터티를 DB에 저장(갱신)
        }
        // 3. 수정 결과 페이지로 리다이렉트하기
        return "redirect:/articles/" + articleEntity.getId();
    }

수정 폼에서 전송한 데이터는 DTO로 받기 때문에, ArticleForm을 매개변수로 추가한다.
DTO-> Entity로 변환하는 form.toEntity() 메서드를 호출해 반환값을 articleEntity 이름으로 받는다.
데이터 생성이 아닌, 수정하기 위해 기존 데이터를 가져온다.
- 이때는 리파지토리를 이용하여 articleRepository.findById() 메서드를 호출한다.
- findById() 메서드는 repository에서 자동 제공하는 메서드로, 괄호 안에는 찾는 id값을 작성한다.
- findById(articleEntity.getId()) 메서드를 호출해 반환받은 데이터를 Article 타입의 target 변수에 저장한다.
- 데이터가 없다면 null 을 반환한다.
기존 데이터를 가져오고 나면 articleRepository.save() 메서드로 기존 데이터를 갱신한다.
데이터를 수정하면 수정된 내용이 반영된 상세 페이지로 이동하도록 redirect 시켜준다.
-URL의 id 부분은 Entity에 따라 매번 바뀌어야 하므로, articleEntity의 getId() 메서드를 호출한다.

디버깅 로그

'가가가가' -> '가나다라' 수정.

redirect 페이지인 /articles/1 로 이동하고, 제목과 내용도 수정한 대로 잘 바뀌었다. 성공!

**출처 : 스프링부트3 자바 백엔드 개발 입문 (홍팍 지음)

[게시판/조회] 게시글 읽기 (단건, 목록)

J_yoonS — Tue, 18 Mar 2025 11:02:38 +0900

웹 페이지에서 게시글을 등록하면 서버를 통해 DB 에 저장된다.

이렇게 저장된 데이터를 웹 페이지에 출력하는 과정은 다음과 같다.

로직을 이해했으면 코드를 통해 실제 데이터를 조회해보자.

[cotroller/ArticleController]

    @GetMapping("/articles/{id}")
    public String show(@PathVariable Long id, Model model) { // 매개변수로 id 받아오기
        log.info("id = " + id); // id 잘 받아오는지 확인

@PathVariable : URL 요청으로 들어온 전달값을 컨트롤러의 매개변수로 가져온다.

	// 1. id를 조회해 데이터 가져오기
       Article articleEntity = articleRepository.findById(id).orElse(null);

findById(id).orElse(null) : id 값으로 데이터를 찾을때 id값이 없으면 null을 반환.

@GetMapping("/articles/{id}")
    public String show(@PathVariable Long id, Model model) { // 매개변수로 id 받아오기
        log.info("id = " + id); // id 잘 받아오는지 확인

        // 1. id를 조회해 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null); 
        // 2. 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity);

Model : MVC 패턴에 따라 조회한 데이터를 뷰 페이지에서 사용하기 위해 객체로 받는다.
model.addAttribute : 모델에 데이터를 등록한다.

@GetMapping("/articles/{id}")
    public String show(@PathVariable Long id, Model model) { // 매개변수로 id 받아오기
        log.info("id = " + id); // id 잘 받아오는지 확인

        // 1. id를 조회해 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null); 
        // 2. 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity);
        // 3. 뷰 페이지 반환하기
        return "articles/show";
    }

return "articles/show";

가져온 데이터를 모델에 등록했으니 마지막으로 사용자에게 보여줄 뷰 페이지를 반환한다.

[articles/show.mustache]

{{#article}}
<tr>
    <th>{{id}}</th>
    <td>{{title}}</td>
    <td>{{content}}</td>
</tr>
{{/article}}

'#' 과 '/' 로 범위를 정하고, 모델 article에 담긴 객체를 클라이언트에서 출력하기 위해 '{{}}' 를 사용한다.

model 에 데이터가 담겨있다는 가정하에 해당 controller URL 로 조회하면

데이터가 성공적으로 조회된다.

이제 단일값이 아닌 list를 조회해보자.

위에서는 Entity를 반환했다면, 목록을 조회할 때는 엔티티의 묶음인 list를 반환한다.

[controller/ArticleController]

    @GetMapping("/articles") // 다중데이터 목록 조회
    public String index(Model model) {

        // 1. 모든 데이터 가져오기
        ArrayList<Article> articleEntityList = articleRepository.findAll();
        // 2. 모델에 데이터 등록하기
        model.addAttribute("articleList", articleEntityList);
        return "articles/index";
    }

※ List 를 사용할 경우, findAll() 메서드가 반환하는 데이터 타입은 Iterable 이기 때문에 오류 메시지가 발생한다.

Iterable, Collection, List 인터페이스의 관계.

따라서 익숙치 않은 Iterable 대신, ArrayList를 사용하기 위해 articleRepository 의 부모인
CurdRepository의 메서드를 오버라이딩 해준다.

[repository/ArticleRepository]

public interface ArticleRepository extends CrudRepository<Article, Long> {

    @Override
    ArrayList<Article> findAll();
}

[articles/index/mustache]

    {{#articleList}}
        <tr>
            <th>{{id}}</th>
            <td><a href="/articles/{{id}}">{{title}}</a></td>
            <td>{{content}}</td>
        </tr>
    {{/articleList}}

단일 조회와 마찬가지로 model 에 담긴 객체를 클라이언트에서 출력한다.

임시로 data.sql 에 담긴 객체들

목록 조회 성공!

**출처 : 스프링부트3 자바 백엔드 개발 입문 (홍팍 지음)

롬복(lombok)을 이용한 리팩터링(refactoring)

J_yoonS — Tue, 18 Mar 2025 09:49:46 +0900

Lombok을 추가함으로써 getter(), setter(), construction(), toString() 과 같은 메서드를 간소화할 수 있다.

또한 로깅 기능을 통해 println() 을 log()로 대체하여 수행 과정을 기록으로 남길 수 있다.

Lombok을 사용하기 위해 하기 사진과 같이 lombok을 gradle에 추가한다.

[build.gradle]

룸북으로 코드를 리팩터링 하여 코드의 구조와 성능을 개선해보자.

리팩터링(refactoring) : 코드의 기능에는 변함이 없이 코드의 구조 또는 성능을 개선하는 작업.

먼저 구조를 개선할 대상은 DTO 이다.

[dto/ArticleForm]

@AllArgsConstructor
@ToString
public class ArticleForm {
    private Long id;
    private String title; // 제목을 받을 필드
    private String content; // 내용을 받을 필드

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

@AllArgsConstructor : title, content 를 매개변수로 하는 생성자가 자동으로 만들어진다.
@Tostring : toString() 메서드를 사용하는 것과 같은 효과가 나타난다.

[entity/Article]

@AllArgsConstructor
@ToString
@Entity // DB테이블 생성.
public class Article {
    @Id // 대표값 선언
    @GeneratedValue(strategy = GenerationType.IDENTITY) // DB가 id 자동 생성
    private Long id;

    @Column
    private String title;

    @Column
    private String content;
}

Entity 또한 DTO와 같이 @AllArgsConstructor & @Tostring을 추가하여 코드구조를 개선한다.

[controller/ArticleController]

println() 문으로 데이터를 검증하면 기록에 남지 않을뿐더러 서버 성능에도 악영향을 끼친다.

@S1f4j : 로깅 기능을 위한 어노테이션. 디버깅 기록을 남길 수 있다.
println() 대신 -> log.info() 형태로 디버깅한다.

[게시판/생성] 새 글 작성하기

J_yoonS — Mon, 17 Mar 2025 11:22:16 +0900

<form> 태그를 택배와 비유하여 송장에 수령자와 배송형태(Get, Post) 를 적어 서버에 전송한다.

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

이 객체를 DTO(Data Transfer Object) 로 받은 데이터는 최종적으로 DB(Database) 에 저장된다.

[ArticleController]

@Controller
 public class ArticleController {
     @Autowired
     private ArticleRepository articleRepository;

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

[articles/new.mustache]

<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>

● action: URL 연결 주소를 적는다. action="/articles/create" : 페이지로 폼 데이터를 전송한다.

● method: 속상 값으로 get, post 2가지로 설정할 수 있다.

폼 데이터를 받을때 DTO 에 담아 받으니 이제 DTO를 만든다. (그릇 역할)

[dto/ArticleForm]

public class ArticleForm {
     private String title; // 제목을 받을 필드
     private String content; // 내용을 받을 필드
 
     // 전송받은 제목과 내용을 필드에 저장하는 생성자 추가
     public ArticleForm(String title, String content) {
         this.title = title;
         this.content = content;
     }
 
     // 데이터를 잘 받았는지 확인할 toString() 메서드 추가
     @Override
     public String toString() {
         return "ArticleForm{" +
                 "title='" + title + '\'' +
                 ", content='" + content + '\'' +
                 '}';
     }

1. 제목과 내용을 전송할 필드 2개(title, content) 를 선언한 후

2. 전송받은 제목과 내용을 필드에 저장하는 생성자를 추가한다.

3. 폼 데이터를 잘 받았는지 확인하기 위해 toString() 메서드를 추가한다.

[ArticleController]

 @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를 엔터티로 변환
         Article article = form.toEntity();
         System.out.println(article.toString());
         // 2. 리파지터리로 엔터티를 DB에 저장
         Article saved = articleRepository.save(article);
         return "";
     }
 }

폼에서 전송한 데이터를 createArticle() 메서드의 매개변수로 받아온다.

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

[articles/new.mustache]

         <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>

위에서 적었던 HTML을 다시 살펴보면 name 를 DTO 필드와 일치 시킴으로써 해당 필드와 연결된다.

단! DB는 SQL언어를 사용하기 때문에 자바 언어를 이해하지 못하기에 JPA를 사용하여 명령을 내린다.

● JPA: (Java Persistence API) 자바 언어로 DB에 명령을 내리는 도구이다.

JPA의 핵심 도구로는 엔티티(entity)와 리파지토리(repository) 가 있다.

● 엔티티(entity) : 자바 객체를 DB가 이해할 수 있게 만든 것으로, 이를 기반으로 테이블이 만들어진다.

● 리파지토리(repository) : 엔티티가 DB 속 테이블에 저장 및 관리될 수 있게 하는 인터페이스.

DTO 가 Entity 로 변환후 DB에 저장된다.

[ArticleController]

     @PostMapping("/articles/create")
     public String createArticle(ArticleForm form) {
         System.out.println(form.toString());
         // 1, DTO를 엔터티로 변환
         Article article = form.toEntity();
         System.out.println(article.toString());
         // 2. 리파지터리로 엔터티를 DB에 저장
         Article saved = articleRepository.save(article);
         return "";
     }

위와 같이 DTO를 엔터티로 변환후 Reposiory로 Entity를 DB에 저장하게 된다.

이제 차근차근 form.toEntity(), articleRepository.save() 메서드를 만들어보자.

[entity/Article]

@Entity
public class Article {
    @Id // 대표값 선언
    @GeneratedValue(strategy = GenerationType.IDENTITY) // DB가 id 자동 생성
    private Long id;

    @Column
    private String title;

    @Column
    private String content;

● @Entity : Entity 선언

● @Id : Entity 의 대표값 지정

● @GeneratedValue : 자동 생성 기능 추가(숫자가 자동으로 매겨짐)

● @Column : 필드 선언, DB 테이블의 해당열(title, content) 과 연결됨.

[entity/Article]

@Entity
public class Article {
    @Id // 대표값 선언
    @GeneratedValue(strategy = GenerationType.IDENTITY) // DB가 id 자동 생성
    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 + '\'' +
                 '}';
     }
 }

DTO와 마찬가지로 Entity 또한 생성자와 toString() 메서드를 추가한다.

또한, DTO를 Entity로 변환시키는 toEntity() 메서드를 위해 ArticleForm(DTO)에 해당 메서드를 추가한다.

다시 ArticleForm 으로 돌아간다.

[dto/ArticleForm]

public class ArticleForm {
     private String title; // 제목을 받을 필드
     private String content; // 내용을 받을 필드
 
     // 전송받은 제목과 내용을 필드에 저장하는 생성자 추가
     public ArticleForm(String title, String content) {
         this.title = title;
         this.content = content;
     }
 
     // 데이터를 잘 받았는지 확인할 toString() 메서드 추가
     @Override
     public String toString() {
         return "ArticleForm{" +
                 "title='" + title + '\'' +
                 ", content='" + content + '\'' +
                 '}';
     }
 
     public Article toEntity() {
         return new Article(null, title, content);
     }
 }

해당 DTO는 id가 없지만, Entity로 변환하기 위해 리턴값은 null, title, content 로 채워준다.

이제 최종적으로 Respository에 저장하기 위해 ArticleRepository 인터페이스를 생성한다.

[repository/ArticleRepository]

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

● CrudRepository : JPA에서 제공하는 인터페이스로 이를 상속해 Entity를 관리(생성, 조회, 수정, 삭제) 할 수 있다.

● Article : 관리 대상 Entity의 클래스 타입. (여기서는 Article)

● Long : 관리 대상 Entity의 대표값 타입. Article.java 파일에 가면 id를 대표값으로 지정했는데, id의 타입은 Long이다.

*참고로 id는 1로 출력되는 것이 정상. (글쓴이는 다른 아이디 생성 후 출력하여 id=7로 출력됨)

최종적으로.

1. Form에서 제출한 title, content -> DTO(ArticleForm) 로 객체에 담겨 서버로 전송되어

2. Controller에 의해 DTO -> Entity(Article) 로 변경되고

3. @GeneratedValue 로 자동생성된 id와 함께 Entity객체가 ArticleRepository로 저장됨을 확인 할 수 있다.

DB에도 성공적으로 저장됨을 확인할 수 있음.

● 레코드(record) : 행 단위인 테이블의 '한 행' 을 일컫는다.

**출처 : 스프링부트3 자바 백엔드 개발 입문 (홍팍 지음)

스프링 부트 (Spring boot) 의 특징

J_yoonS — Wed, 26 Feb 2025 21:12:19 +0900

스프링부트 특징

톰캣, 제티, 언더토우 같은 WAS(web application server)가 내장되어 있어서 설치 하지 않아도 독립적으로 실행 가능하다.
빌드 구성을 단순화하는 Spring boot Starter 제공하다,
XML 설정을 하지 않고 자바 코드를 모두 작성할 수 있다.
JAR을 이용해서 자바 옵션만으로도 배포가 가능하다.
애플레이케이션의 모니터링 및 관리 도구인 스프링 엑츄에이터 (Spring actuator) 제공한다.

스프링 VS 스프링부트

	스프링	스프링 부트
목적	엔터프라이즈 애플리케이션 개발을 더 쉽게	스프링의 개발을 더 빠르고 쉽게 하기
설정 파일	개발자가 수동으로 구성	자동 구성
XML	일부 파일은 XML로 직접 생성하고 관리	사용하지 않음.
인메모리 데이터베이스 지원	지원하지 않음	인메모리 데이터베이스 자동 설정 지원
서버	프로젝트를 띄우는 서버(ex. 톰캣, 제티) 를 별도로 수동 설정	내장형 서버를 제공하여 별도 설정 필요 X

1, IOC / DI 를 기초로 하는 스프링 코드.

- 여기에서 사용하는 @Autowired 는 스프링 컨테이너에 있는 빈을 주입하는데

빈은 ? 쉽게 말해 스프링 컨테이너에서 관리하는 객체이다.

@Component
public class MyBean {
}

빈을 등록하기 위해서는 @Component 어노테이션을 붙여서 Bean 클래스를 관리해준다.

*IOC(Inversion Of Control / 제어의 역전) : 객체의 생성과 관리를 개발자가 하는 것이 아니라 프레임워크가 대신하는 것.

*DI(Dependency Injection / 의존성 주입) : 외부에서 객체를 주입받아 사용하는 것.

2. 스프링의 또다른 개념 AOP(Aspect Oriented Programming) : 관점 지향 프로그래밍.

- 부가 관점 / 핵심관점을 나누어서 관심 기준으로 모듈화하는 것을 의미한다.

-> 핵심 관점 코드에만 집중할 수 있게되어, 프로그램의 변경과 확장에도 유연하게 대응할 수 있다.

[AOP설명]

https://adjh54.tistory.com/133#1.%20AOP%20%EC%9A%A9%EC%96%B4%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1-1

[Java] Spring Boot AOP(Aspect-Oriented Programming) 이해하고 설정하기

해당 글에서는 Spring AOP에 대해 이해하고 환경설정을 해보는 방법에 대해서 공유를 목적으로 작성한 글입니다.1) Spring AOP(Aspect-Oriented Programming, AOP)1. AOP 용어 이해하기 Spring AOP란?- Spring AOP는

adjh54.tistory.com

3. 이식 가능한 서비스 추상화 PSA(Potable Service Abstraction)

- 스프링에서 제공하는 기술들을 추상화해 개발자가 쉽게 사용하는 인터페이스.

ex) Mapping & Class & Annotation('@') , DB에 접근하기 위한 JPA, JDBC 같은 것들, WAS 또한 PSA의 예시 중 하나이다.

[PSA설명]

https://sabarada.tistory.com/127

[Spring] Spring의 핵심기술 PSA - 개념과 원리

안녕하세요. 오늘은 오랜만에 Spring에 대해서 이야기 해보고자합니다. [Spring] Spring의 정의와 기본 개념 포스팅에서 Spring의 대표적인 핵심가치 3가지로 IoC, AOP, PSA가 있다고 말씀드렸었습니다. 그

sabarada.tistory.com

* PSA(Potable Service Abstraction / 의식가능한 서비스 추상화) : 어느 기술을 사용하던 일관된 방식으로 처리하도록 하는 것.

게시글 단건 저장 & 조회

J_yoonS — Sun, 23 Feb 2025 12:43:33 +0900

전체 로직 : Controller -> Serivce 호출 -> Repository 호출 -> 최종적으로 넘어온 Json값은 post entity로 저장

[PostController]

@Slf4j
@RestController
@RequiredArgsConstructor 
public class PostController {

        private final PostService postService;

        @PostMapping("/posts")
        public void post(@RequestBody @Valid PostCreate request) {
            postService.write(request);
    }

        // posts/{postId} -> 글 한개만 조회
        @GetMapping("/posts/{postId}")
        public PostResponse get(@PathVariable Long postId) {
            return postService.get(postId);
        }

@RequiredArgsContstrctor -> @autowired 보다 권고되는 이유

선언만으로도 생성자 주입이 가능하게 된다.

① 순환 참조 방지

② 테스트 코드 작성 용이

③ 코드 악취 제거

④ 객체 변이 방지 (final 가능)

1. 게시글 작성 메서드

- Json형태로 받아오기 위해 @RequestBody 사용, @Valid 는 유효성검사를 해준다.

그리고 게시글을 작성하는 postSerivce.write 메서드 가 실행된다. (하단 Service 참고.)

2. 게시글 정보 조회 메서드

- postService.get(postId);를 호출하여 게시글 정보를 가져오고, 이를 PostResponse 형태로 반환한다.

https://madplay.github.io/post/why-constructor-injection-is-better-than-field-injection

**@RequiredArgsContstrctor -> @autowired 보다 권고되는 이유 참고.

[PostService]

@Slf4j
@Service
@RequiredArgsConstructor
public class PostService {

    private final PostRepository postRepository;

    public void write(PostCreate postCreate) { // jsonBody 에서 꺼내와서 생성자 형태로 넘겨주고 있음.
        Post post = Post.builder()
                    .title(postCreate.getTitle())
                    .content(postCreate.getContent())
                    .build();

        postRepository.save(post);
    }

    public PostResponse get(Long id) {
        Post post = postRepository.findById(id) // warning
                .orElseThrow(()-> new IllegalArgumentException("존재하지 않는 글입니다."));


        PostResponse response = PostResponse.builder()
                .id(post.getId())
                .title(post.getTitle())
                .content(post.getContent())
                .build();

        return response;

    }

}

1. 새로운 게시글을 생성하고 저장하는 메서드

- Post.builder()를 사용하여 Post 객체를 생성, postCreate에서 제목과 내용을 가져와서 설정한다.

- postRepository.save(post); 를 호출하여 생성한 Post 객체를 데이터베이스에 저장한다,

public interface PostRepository extends JpaRepository<Post, Long> {
}

*postRepository는 JDBC 역할의 JpaRepository 를 상속받는다.

2. 게시글의 생성과 조회

- postRepository.findById(id)를 호출하여 주어진 ID에 해당하는 게시글을 조회하여. 게시글이 존재하지 않는 경우IllegalArgumentException을 발생시킨다.

- 게시글이 존재할 경우, PostResponse 객체를 생성하여 게시글의 ID, 제목, 내용을 포함하여

PostResponse 반환한다. (하단 DTO 참고)

[게시글 조회를 위한 DTO : PostResponse]

@Getter
public class PostResponse {

    private final Long id;
    private final String title;
    private final String content;

    // 생성자 오버로딩
    public PostResponse(Post post) {
        this.id = post.getId();
        this.title = post.getTitle();
        this.content = post.getContent();
    }

    @Builder
    public PostResponse(Long id, String title, String content) {
        this.id = id;
        this.title = title.substring(0, Math.min(title.length(), 10));
        this.content = content;
    }

}

this.title = title.substring(0, Math.min(title.length(), 10));

- 제목의 글자수를 최대 10글자로 잘라서 저장한다.

[게시글 생성을 위한 DTO : PostCreate]

@Setter
@Getter
@ToString
@NoArgsConstructor
public class PostCreate {

    @NotBlank(message = "타이틀을 입력하세요.")
    private String title;

    @NotBlank(message = "콘텐츠를 입력해주세요.")
    private String content;

    @Builder
    public PostCreate(String title, String content) {
        this.title = title;
        this.content = content;
    }

}

@NotBlank -> null 또는 blank 가 들어오면 에러를 발생시킨다. (Message 를 통해 내가 원하는 문구 가능.)

빌더 패턴의 장점
1. 필요한 데이터만 설정할 수 있다.
2. 유연성을 확보할 수 있다.
3. 가독성을 높일 수 있다.
4. 불변성을 확보할 수 있다.

https://velog.io/@bey1548/JAVA-%EB%B9%8C%EB%8D%94-%ED%8C%A8%ED%84%B4Builder-Pattern%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

[JAVA] 빌더 패턴(Builder Pattern)을 사용해야 하는 이유

필요한 데이터만 설정할 수 있음유연성을 확보할 수 있음가독성을 높일 수 있음불변성을 확보할 수 있음예를 들어 User 객체를 생성하는데 age라는 parameter가 필요 없는 상황이라고 가정.생성자나

velog.io

**빌더패턴의 장점 참고.

[게시글을 DB에 저장하기 위한 Entity : Post]

@Getter
@Entity
@NoArgsConstructor(access = AccessLevel.PUBLIC)
public class Post {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id; //자동생성

    private String title;

    @Lob
    private String content;

    @Builder
    public Post(String title, String content) {
        this.title = title;
        this.content = content;
    }

}

JPA 엔티티 클래스

@Lob : 큰 데이터를 저장하는데 사용한다.

@GeneratedValue(strategy = GenerationType.IDENTITY) -> ID값 자동생성 한다.

[각 클래스의 역할]

• PostCreate: 게시글 생성을 위한 요청 데이터 구조 (클라이언트 → 서버).
• PostResponse: 게시글 조회 시 반환되는 응답 데이터 구조 (서버 → 클라이언트).
• Post: 데이터베이스에 저장되는 Entity

데이터 검증

J_yoonS — Sat, 22 Feb 2025 13:40:45 +0900

https://spring.io/blog/2013/11/01/exception-handling-in-spring-mvc

validation을 위해 gradle 에 implementation 을 넣고

    implementation 'org.springframework.boot:spring-boot-starter-validation'
}

public class PostCreate {

    @NotBlank(message="타이틀을 입력해주세요.")
    private String title;

@NotBlank(message="타이틀을 입력해주세요.")

dto 에 @NotBlank를 추가하면, null & blank를 검사해줘서 값이 들어올 경우 error를 발생시켜준다.

-> message 를 직접 입력할 수 있다.

@PostMapping("/posts")
public String post(@RequestBody @Valid PostCreate params) throws Exception {
    log.info("params={}", params.toString());

    return "Hello World";
}

추가로 Postcontorller 클래스, @RequestBody 옆에 @Vaild를 적어준다.

@PostMapping("/posts")
public String post(@RequestBody @Valid PostCreate params,BindingResult result) {
    log.info("params={}", params.toString());

    return "Hello World";
}

BindingResult 를 넣으면, error문으로 무엇이 들어있는지 확인 가능하다.

@PostMapping("/posts")
        public Map<String, String> post(@RequestBody @Valid PostCreate params,BindingResult result) {
            if (result.hasErrors()) {
                List< FieldError> fieldErrors = result.getFieldErrors();
                FieldError firstFieldError = fieldErrors.get(0);
                String fieldName = firstFieldError.getField(); // title
                String errorMessage = firstFieldError.getDefaultMessage(); // ..에러 메시지

                Map<String, String> error = new HashMap<>();
                error.put(fieldName, errorMessage);
                return error;
            }

            return Map.of();
        }
}

결과로 무엇이 들어왔는지 알고 싶을경우, BindingResult 를 List화 시켜서 볼 수 있다.

1, FieldEorros 를 배열로 받아서, 첫번째 배열을 firstFildError 로 받는다.

2. fieldName 은 title, errorMessage 에러메시지를 나타낸다.

3. 값을 Map으로 받아서 나타낸다.

4. return 값은 Map.of();

*JsonPath 에 대한 검증방법 (Object & List 정도 알아두면 좋음.)

출처 : https://bomz.tistory.com/29

Spring Boot 에서 JUnit5 , MockMvc 를 이용하여 JSon 응답 값 검증하기

전 포스팅으로 Spring Boot 기반에서 JUnit5 를 이용하여 테스트 진행법을 작성했다 이번에는 기존 포스팅에서 실수로 빼먹은 응답 값 유효성 검증 방법을 작성한다 GET 요청 import static org.springframework

bomz.tistory.com

*더 쉽게 검증하는 방법.

https://spring.io/blog/2013/11/01/exception-handling-in-spring-mvc

Exception Handling in Spring MVC

NOTE: Revised April 2018 Spring MVC provides several complimentary approaches to exception handling but, when teaching Spring MVC, I often find that my students are confused or not comfortable with them. Today I'm going to show you the various options avai

spring.io

@controllerAdvice -> 개별이 아닌, 모든 예외처리 가능.

@ControllerAdvice
class GlobalControllerExceptionHandler {
    @ResponseStatus(HttpStatus.CONFLICT)  // 409
    @ExceptionHandler(DataIntegrityViolationException.class)
    public void handleConflict() {
        // Nothing to do
    }
}

응답값은 409에러로 발생.

코드에 적용

@ControllerAdvice
public class ExceptionController {

    @ResponseStatus(HttpStatus.BAD_REQUEST)
    @ExceptionHandler(Exception.class)
    public void exceptionHandler() {
        System.out.println("하하하");
    }

BAD_REQUEST // 에러 400으로 응답.

@ResponseStatus(HttpStatus.BAD_REQUEST)
@ExceptionHandler(MethodArgumentNotValidException.class)
public void exceptionHandler(MethodArgumentNotValidException e) {
    // MethodArgumentNotValidException
    // e.getField()

}

MethodArgumentNotValidException 발생 했을때만 해당 메서드가 실행되도록 변경.

    @ResponseStatus(HttpStatus.BAD_REQUEST)
    @ExceptionHandler(MethodArgumentNotValidException.class)
    @ResponseBody
    public Map<String, String> invalidRequestHandler(MethodArgumentNotValidException e) {
        FieldError fieldError = e.getFieldError();
        String field = fieldError.getField();
        String message = fieldError.getDefaultMessage();

        Map<String, String> response = new HashMap<>();
        response.put(field, message);
        return response;
    }

@responseBody 를 통해서 HashMap -> Json 형태로 응답할수 있다.

client 에서 요청값이 잘못 됐을때, 사용자에게 피드백을 보여주기 위해 사용.

validation object 는 값이 필드별로 어떻게 잘못됐는지 알려주기 위해 사용.