1화 | 똑바로해라 시작하기 – Spring Boot + PostgreSQL 연동, Claim API 만들고 Web Submit까지 연결

✅ 오늘은 “웹 화면에서 입력 → API 호출 → DB 저장 → 조회로 검증” 흐름을 완성했다.

(로컬에서 진짜로 돌아가는 MVP를 만드는 날)

 

---

 

1) 오늘 목표

✅ Spring Boot API 서버 로컬 기동 (8080)

✅ PostgreSQL 로컬 연결(5432)

✅ Claim API 최소 구현

• POST /claims 저장
• GET /claims?limit=N 조회✅ Web /submit에서 실제 저장까지 검증
• ✅ CORS 설정 (web 3000 → api 8080 허용)

 

---

 

2) Day2에서 완성한 전체 흐름

Web (localhost:3000) → API (localhost:8080) → DB(PostgreSQL) 저장 → GET 조회로 검증

작업하면서 중요한 건 “기능을 예쁘게 만드는 것”이 아니라

한 번이라도 end-to-end로 데이터가 들어가고 나오는 흐름을 만드는 것이었다.

 

---

 

3) Java 21 / Gradle 이슈 해결

 

처음에는 Gradle 테스트에서 Java toolchain 관련 오류가 났다.

결론적으로 Java 21을 인식시키는 설정을 잡고 해결했다.

export JAVA_HOME=$(/usr/libexec/java_home -v 21)
export PATH="$JAVA_HOME/bin:$PATH"
java -version

 

---

 

4) PostgreSQL 연결 문제 해결 (Connection refused)

 

Spring Boot를 띄우는 과정에서 아래 오류가 발생했다.

 

• Connection to localhost:5432 refused

 

이건 대부분 “DB가 안 떠있음 / DB 설정이 없음”으로 발생한다.

PostgreSQL이 정상 기동되고, DB가 준비되면 Spring 로그에서 다음을 확인할 수 있다.

 

• HikariPool Start completed
• Database JDBC URL: jdbc:postgresql://localhost:5432/ttokbaro

 

---

 

5) Claim API 최소 구현 (POST + GET)

 

오늘 만든 API는 “저장하고 조회할 수 있는 최소 기능”으로 구성했다.

 

(1) POST /claims — 저장

curl -X POST http://localhost:8080/claims \
  -H "Content-Type: application/json" \
  -d '{"sourceUrl":"https://example.com","text":"test"}'

(2) GET /claims?limit=N — 최신순 조회

curl -s "http://localhost:8080/claims?limit=5"

 

 

---

 

6) CORS 설정 + Preflight(OPTIONS)로 검증

 

웹(3000)에서 API(8080)로 요청하려면 CORS 허용이 필요하다.

그래서 local 개발 환경 기준으로 CORS를 열고, OPTIONS 요청으로 검증했다.

curl -i -X OPTIONS http://localhost:8080/claims \
  -H "Origin: http://localhost:3000" \
  -H "Access-Control-Request-Method: POST"

정상이라면 다음 헤더가 보인다.

 

• Access-Control-Allow-Origin: http://localhost:3000
• Access-Control-Allow-Credentials: true
• Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,OPTIONS

CORS preflight 헤더 확인

---

 

7) Web /submit 연동 → DB 저장 검증까지 완료

 

이제 웹 화면에서 제출을 하면, API가 호출되고 DB에 저장되어야 한다.

제출 후에는 “API 조회로 실제 저장됐는지” 바로 확인했다.

curl -s "http://localhost:8080/claims?limit=5"

 

이번에 웹에서 제출한 데이터가 실제로 들어온 것을 확인했다.

 

예시(실제 결과):

[
  {
    "id": 3,
    "sourceUrl": "https://example.com/abc",
    "text": "웹에서 첫 제출 테스트",
    "createdAt": "2026-01-25T11:23:31.106135Z"
  }
]

 

웹 제출 → DB 저장 확인

---

 

8) 오늘의 결론 (핵심 요약)

✅ Day2의 핵심은 ‘기능 추가’가 아니라 ‘연결’이었다.
Web → API → DB가 한 번 붙고 나니까, 이제부터는 기능을 훨씬 빠르게 확장할 수 있다.

 

---

 

9) Day3 할 일 (다음 단계)

 

1. /claims 피드 페이지(web) 만들기 — 저장된 Claim을 화면에서 바로 확인
2. Claim에 status 추가(PENDING/PROCESSED/FAILED) — 다음 AI 처리 파이프라인 준비
3. (가능하면) 크롬 확장 → submit 자동 채우기 UX