soidev 님의 블로그

[DB 성능 최적화] | 인덱스부터 파티셔닝, 샤딩까지

soidev — Thu, 26 Mar 2026 15:06:34 +0900

지금까지 면접을 많이 봤는데 대규모 트래픽시 어떻게 해야할건지 라는 질문을 많이 받았다

그래서 오늘 이거에 대해 정리해보겠다

1. 데이터가 많아지면 발생하는 문제

백엔드 개발을 하다 보면 처음엔 빨랐던 서비스가 데이터가 쌓일수록 느려지는 걸 경험하게 된다. 작년에 진행한 상담 예약 시스템처럼 예약 기록이나 AI 리뷰 요약 데이터가 조 단위로 쌓인다면, 단순한 쿼리로는 한계가 온다. 이때 효과적으로 데이터를 관리하기 위해 인덱스, 파티셔닝, 샤딩 같은 전략이 필요하다.

2. 인덱스(Index) 이해하기

인덱스는 책의 맨 뒤에 있는 **'색인'**과 같다. 테이블 전체를 다 뒤지지 않고도 원하는 정보가 있는 위치로 바로 점프하는 기술이다.

원리: B-Tree 구조를 사용해 검색 속도를 높인다.
장점: 특정 상담사 예약 현황을 조회하거나 날짜별로 정렬할 때 성능이 비약적으로 좋아진다.
주의점: 데이터가 추가되거나 수정될 때마다 인덱스도 갱신해야 하므로 쓰기 성능은 조금 떨어진다. 꼭 필요한 컬럼에만 전략적으로 걸어야 한다.

3. 파티셔닝(Partitioning)으로 쪼개기

인덱스만으로 감당이 안 될 정도로 테이블이 무거워지면, 테이블을 물리적으로 나누는 파티셔닝을 고려해야 한다.

방식: 보통 '연도별'이나 '월별'로 데이터를 나눈다.
핵심 (Partition Pruning): "2026년 3월 예약"을 조회하면 DB는 2024, 2025년 데이터 파티션은 아예 무시하고 해당 파티션만 뒤진다.
장점: 오래된 상담 이력을 백업하거나 삭제할 때, DELETE 문 대신 파티션 자체를 날려버리면 되기 때문에 부하가 거의 없다.

4. 샤딩(Sharding)으로 서버 분산하기

파티셔닝이 한 컴퓨터 안에서 구역을 나누는 거라면, 샤딩은 데이터를 여러 대의 서버에 나눠 담는 수평 확장(Scale-out) 전략이다.

원리: '샤드 키(Shard Key)'를 기준으로 데이터를 분산한다.
- 예시: 서울 지역 상담 데이터는 A 서버, 부산 지역은 B 서버에 저장.
장점: 단일 서버의 하드웨어 한계를 넘어서서 이론적으로 무한한 확장이 가능하다.
단점: 서버가 여러 대라 데이터를 한꺼번에 조인(Join)하기 어렵고 시스템 복잡도가 올라간다.

5. DB 최적화 구조도

Plaintext

[사용자 요청] (예: 특정 상담사 예약 조회)
        │
        ▼
   ┌─────────────┐
   │  Query Optimizer │  ← 인덱스가 있는지 확인
   └─────────────┘
        │
        ├─ [Index 활용] ──▶ B-Tree 탐색 후 데이터 즉시 반환
        │
        └─ [데이터가 너무 많다면?]
                │
                ▼
   ┌──────────────────────────┐
   │      Partitioning        │  ← 테이블을 날짜별로 분할
   │ (2025 파티션 | 2026 파티션)  │
   └──────────────────────────┘
                │
                ▼
   ┌────────────────────────────────┐
   │            Sharding            │  ← 서버 자체를 여러 대로 분산
   │ [Shard 1 (서울)]  [Shard 2 (부산)] │
   └────────────────────────────────┘

6. 요약 및 결론

무조건 최신 기술을 쓰는 게 답은 아니다. 서비스의 규모에 맞춰서 단계적으로 접근해야 한다.

Index: 조회 조건이 명확하고 특정 컬럼 검색이 잦을 때 기본으로 설정.
Partitioning: 대규모 예약 이력처럼 시간순 데이터 관리가 힘들 때 도입.
Sharding: 서비스가 전국 단위로 커져서 단일 서버 리소스가 부족할 때 최종 단계로 고려.

결론: 예약 시스템처럼 데이터 정합성과 속도가 모두 중요한 도메인에서는 이 세 가지를 적재적소에 배치하는 아키텍처 설계 능력이 중요하다.

[개인 서버 운영] | 라즈베리파이 이해하기

soidev — Mon, 29 Sep 2025 21:02:29 +0900

1. 라즈베리파이(Raspberry Pi)란?

라즈베리파이는 신용카드 크기의 작은 컴퓨터지만, 일반 PC처럼 운영체제를 설치하고 프로그램을 실행할 수 있다.

저렴한 가격과 작은 크기 때문에 개인 서버, IoT 기기, 홈서버 등 다양한 용도로 활용된다.

즉, 집에서도 라즈베리파이를 서버처럼 켜두고, 외부에서 접속해 서비스를 운영할 수 있다.

2. 라즈베리파이를 서버로 사용하기

라즈베리파이를 서버로 활용한다는 것은, 다른 컴퓨터나 스마트폰 등에서 접속해서 정보를 주고받는 역할을 맡긴다는 뜻이다.

서버 역할을 하는 라즈베리파이는 항상 켜져 있어야 하며, 외부에서 접근 가능한 환경을 만들어야 한다.

그럼 외부에서 어떻게 접속할 수 있는지 네트워크 구조를 이해해야 한다.

3. 내부망과 외부망 이해하기

3-1. 내부망(Private Network)

집이나 사무실에서 여러 장치가 연결되는 네트워크
내부 장치끼리는 서로 접속이 가능하지만, 외부 인터넷에서는 바로 접근할 수 없다.
예시: 172.30.1.37 같은 IP
ipconfig 명령어를 통해 확인할 수 있는 IP가 바로 내부망 IP다.

3-2. 공유기와 ISP

외부 인터넷과 연결되는 장치는 **공유기(Gateway)**를 통해 연결된다.
ISP(예: KT, SKT, LG)는 공유기에 Public IP를 부여한다.
공유기는 내부 장치들에게 Private IP를 할당하고, 외부 요청은 포트포워딩을 통해 특정 장치로 전달한다.
내부망 IP는 다른 집에서도 똑같이 쓸 수 있지만, 공유기 뒤에 있기 때문에 충돌이 없다.

3-3. 기지국 = 거대한 공유기

우리가 흔히 말하는 기지국은 통신사에서 여러 공유기를 관리하는 장치다.
기지국을 통해 다른 공유기나 장치와 통신이 가능하다.

4. 라즈베리파이를 외부에서 접속하기

집 안에서 라즈베리파이를 켰다고 해서 외부에서 바로 접속할 수 있는 것은 아니다.

외부 접속을 위해서는 포트포워딩과 DDNS 설정이 필요하다.

4-1. 포트포워딩(Port Forwarding)

공유기는 내부망과 외부망을 구분하기 때문에, 외부에서 들어오는 요청이 라즈베리파이까지 도달하지 못한다.
포트포워딩은 외부에서 들어오는 특정 포트를 라즈베리파이 내부 IP와 포트로 연결해주는 기능이다.
예시: 외부에서 5022번 포트로 접속 → 공유기가 이를 라즈베리파이 SSH 포트로 전달 → 접속 가능

4-2. 도메인 연결과 유동 IP

대부분 가정용 인터넷은 유동 IP를 사용한다.
즉, 집의 공인 IP는 시간이 지나면 바뀌므로 도메인 연결만으로는 접속 불가
해결책: DDNS(Dynamic Domain Name Service)
- 스크립트나 프로그램으로 5분마다 현재 Public IP를 확인
- 도메인에 IP를 자동으로 업데이트
- 이렇게 하면 유동 IP 환경에서도 도메인으로 라즈베리파이에 접속 가능
- 단점: IP 변경 시 평균 2~3분 정도 접속 불가 가능

5. 웹서버 포트와 HTTPS

기본 HTTP 포트: 80번, HTTPS 포트: 443번
포트포워딩을 설정할 때, 서버가 사용하는 포트와 공유기의 포트가 일치해야 외부에서 정상 접속 가능
포트 충돌이나 설정 오류 시, 웹서버가 돌아도 접속이 되지 않거나 HTTP만 가능할 수 있다.
필요하면 HTTPS를 위해 인증서 설치 후 443번 포트를 연결해야 한다.

[외부 인터넷] (도메인: www.내도메인.com)
        │
        │  요청
        ▼
   ┌─────────────┐
   │   DNS 서버   │  ← 도메인 요청 시 현재 Public IP 확인
   └─────────────┘
        │
        │
        ▼
   ┌─────────────┐
   │   ISP 기지국  │  ← 통신사에서 제공하는 Public IP
   └─────────────┘
        │
        │
        ▼
   ┌─────────────┐
   │ 공유기(Gateway) │  ← 포트포워딩 설정 필요
   │ Public IP     │
   │ (유동 IP)     │
   └─────────────┘
        │
        │  포트포워딩: 외부 5022 → 라즈베리파이 22
        ▼
   ┌─────────────┐
   │ 라즈베리파이    │  ← 내부망 IP: 172.30.1.37
   │ 서버 역할      │
   │ SSH/웹서버 실행 │
   └─────────────┘
        │
        ▼
   [내부 장치들]  ← 라즈베리파이와 같은 내부망 장치들은 직접 접속 가능

구조 설명

외부 인터넷에서 도메인으로 접속하면, ISP 기지국 → 공유기 순서로 요청이 전달된다.
공유기에서 포트포워딩 설정을 통해 요청을 라즈베리파이로 보낸다.
라즈베리파이는 내부망 IP를 가지고 있으며, SSH나 웹서버 등 요청을 처리한다.
내부 장치끼리는 공유기 없이도 서로 접속 가능하다.

[React] 게시판 만들기_1

soidev — Thu, 17 Jul 2025 10:12:16 +0900

backend : spring

frontend : react

package.json > dependencies : 18.3.1버전

스프링에서 build.gradle이거랑 똑같은 파일이라고 생각하면됨

package-lock.json react를 의존하는 라이브러리를 연쇄적으로 설치함

npm install

npm install react-router-dom

npm install axios

npm run dev

public,src,index.html,package.json 만 들고가면 됨 깃이나 다른데서 이 소스를 하고싶을때

public 쪽은 기본 이미지 들어감. spring에서 static에있던것들을 여기선 public에다가 넣음

src > jsx,component,service

페이지별로 폴더를만들고

얘에 있는 공용을 만들기??

파일구조는 파일마다 컴포넌트 하기 이런식으로

링크. : 액터/기능/페이지 user/board/loginPage

라우터는 언제든지 할 수 있는거?!?

import { useState } from "react";
import BottomNavigation from "../../commons/component/Bottomnavigation";

export default function RegisterPage() {

    //상태변수를 만든다.
    const [accountName,setAccountName] = useState('123123');

    return (
        <>
            <div className="container-fluid">
                <div className="row">
                    <div className="col">
                        회원 가입<br/>
                        아이디: <input value={accountName} type="text" placeholder="아이디" /><br/>
                        비번: <input type="password" placeholder="비번" /><br/>
                        닉넴: <input type="text" placeholder="닉네임" /><br/>
                        성별 : <input type="radio" name="gender" />남
                        <input type="radio" name="gender" />여<br/>
                        생일: <input type="date" placeholder="생년월일" /><br/>
                        이메일: <input type="text" placeholder="이메일" /><br/>
                        폰넘버: <input type="text" placeholder="폰넘버" /><br/>
                        <button className="btn btn-primary">회원 가입</button>
                    </div>
                </div>
            </div>

            <BottomNavigation />
        </>
    );
}

글자를 쓸 때마다 onchange가 발생함 그래서

123123 부분에 안 고쳐지고 안 바뀐다.

const handleAccountNameChange = (e) => {
        setAccountName(e.target.value);
    };
    
    .....
    
    
 아이디: <input onChange={handleAccountNameChange} value={accountName} type="text" placeholder="아이디" /><br/>

이런식으로 이벤트를 가져오면 123123부분이 수정되면서 알아서 랜더링 된다!

하지만 지금 input이 10개 정도 있는데 state랑 eventhandle를 10개씩 만들기는 너무 귀찮고 하니 다른 방법

import { useState } from "react";
import BottomNavigation from "../../commons/component/Bottomnavigation";
import axios from "axios";
import { useNavigate } from "react-router-dom";

export default function RegisterPage() {
    
    //state입력양식에 엮는것 젤 중요함
    const [formData, setFormData] = useState({
        accountName: '',
        password: '',
        nickname: '',
        email: '',
        gender: '',
        birth: '',
        phone: ''
    });

    // console.log(formData);
    
    const handleChange = (e) => {
        //굉장히 중요한 문법
        //변수선언해서 바로 값을 넘어주는 문법
        //구조분해문법
        //type,checked는 체크박스용임 그냥 쓰샤!
        const { name, value,type,checked } = e.target;
        
        const newValue = type === 'checkbox' ? checked : value;     //체크 박스 없어도 이거 써도 작동되나요? 네 됩니당 그냥 쓰세요 달력도 value임
        // 체크 박스일땐 value가 true false로 넘어옴 하지만 지금 라디오 버튼이라 value가 문자로 넘어옴


        //... : 원래값을 그대로 쓰겠다는 것
        //name은 accountName, value는 입력한 값
        //setFormData는 상태변수의 setter함수
        //formData는 상태변수의 현재값
        //이렇게 하면 formData의 값이 바뀌면서 랜더링이 다시 이루어지면서 화면에 입력한 값이 보임 이렇게 하면 상태변수의 값을 바꿀 수 있다.
        setFormData({
            ...formData,
            [name]: value
        });
    }

    //post같은 거 쓸 땐  axios이런거 쓸 때 async() 활용
    const navigate = useNavigate(); //href 하면 웹브라우저가 request해서 웹브라우저가 깜박임 근ㄷ게 react에선 무조건 깜박임 안됨 그래서 navi로 활용

    const handleSubmit = async()=>{
        //http://localhost:8080/api/user/register post로 axios로 전송
        const response = await axios.post('http://localhost:8080/api/user/register',formData);
        //.data =json

        //  여러 예외 처리 해야될 수 도 있음.

        alert("회원가입이 완료 되었습니다.");   //이거말고 다른 디자인으로 활용 가능

        //성공시 로그인 페이지로 이동
        navigate('/user/board/login');
    }


    return (
        <>
            <div className="container-fluid">
                <div className="row">
                    <div className="col">
                        회원 가입<br/>
                        아이디: <input onChange={handleChange} name="accountName" value={formData.accountName} type="text" placeholder="아이디" /><br/>
                        비번: <input onChange={handleChange} name="password" value={formData.password} type="password" placeholder="비번" /><br/>
                        닉넴: <input onChange={handleChange} name="nickname" value={formData.nickname} type="text" placeholder="닉네임" /><br/>
                        {/* 처음부터 초기값을 주면 된다??? */}
                        성별 : <input onChange={handleChange} name="gender" checked={formData.gender=='M'} value='M'  type="radio" />남
                        <input onChange={handleChange} name="gender" checked={formData.gender=='F'} value='F' type="radio" />여<br/>
                        생일: <input onChange={handleChange} name="birth" value={formData.birth} type="date" placeholder="생년월일" /><br/>
                        이메일: <input onChange={handleChange} name="email" value={formData.email} type="text" placeholder="이메일" /><br/>
                        폰넘버: <input onChange={handleChange} name="phone" value={formData.phone} type="text" placeholder="폰넘버" /><br/>
                        <button onClick={handleSubmit} className="btn btn-primary">회원 가입</button>
                    </div>
                </div>
            </div>

            <BottomNavigation />
        </>
    );
}

axios : Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
Promise(ES6) API 사용
요청과 응답 데이터의 변형
HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경

# HTTP Methods

클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단

이 Method중 Axios 통신하면서 가장 많이 사용되는 메소드를 정리해보았다.

1. GET

GET : 입력한 url에 존재하는 자원에 요청을 한다.

문법

axios.get(url,[,config])

Q) Get이 데이터를 받아오는 것이라고 했는데, 저는 로그인을 구현할때 GET을 사용했는데요?

GET으로 로그인을 구현했을때 웹 사이트 주소창의 형태를 잘 보면 이러한 형태가 나온다.

www.server.com/login?accountName=t0001&pw=1111  // 실제로 없는 사이트

웹 사이트 뒤에 쿼리스트링이 붙여진 것을 확인할 수 있다.

✅ GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이다.

2. POST

POST : 새로운 리소스를 생성(create)할 때 사용한다.

문법

axios.post("url주소",{
  data객체
    },[,config])

POST 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

Q) Post는 새로운 리소스를 생성할 때 사용되는데 그러면 언제 POST를 사용하나요?

✅ 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.

3. Delete

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

문법

axios.delete(url,[,config]);

✅ Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.

4. PUT

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용된다.

문법

axios.put(url[, data[, config]])

✅ PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.

이제 이 회원가입 프론트앤드 코드를 마무리하면 백엔드로 보내야하니까 axios로 보냈지만

cors 오류가 떴음 이유가 뭐냐 백엔드는 8080 프론트는 5173 서로 서버 주소가 다르니까 백쪽에서 코드를 건드려야함

@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:5173")
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS","PATCH")
            .allowedHeaders("*")
            .allowCredentials(true);
    }

이 포트번호에서 날라오는 ajax는 허용해주겠다

원래는 따로 webconfig.java 따로따로 해야하는데 나는 지금 security 거기다 통합해서 overide 해줌

아래 강사님 코드처럼 여기 하나에다가 하는게 더 좋음 코드상

[Spring] | final project 댓글 구현

soidev — Thu, 10 Jul 2025 14:11:14 +0900

오늘 할일

Spring MVC 웹 애플리케이션 흐름 정리

1. RequestMapping & 파라미터 처리

✅ 요청 매핑

@RequestMapping("/process")
public String processForm(@ModelAttribute User user) {
    // form 데이터가 자동으로 User 객체에 매핑됨
}

@ModelAttribute: 폼에서 넘어온 여러 개의 파라미터를 객체로 받아 처리
DTO 객체와 필드명이 같으면 자동으로 매핑됨

✅ 단일 파라미터 처리

@RequestMapping("/login")
public String login(@RequestParam String accountName,
                    @RequestParam String password) {
    // 단일 파라미터를 직접 받아옴
}

2. DB 연동 – MyBatis 사용 흐름

✅ MyBatis 구성 흐름

인터페이스 정의

public interface UserMapper {
    User selectByAccount(String accountName);
}

2. XML 매핑 파일

<select id="selectByAccount" resultType="User">
    SELECT * FROM users WHERE account_name = #{accountName}
</select>

쿼리 1개 = 메서드 1개 = XML 태그 1개
SQL은 XML에, 메서드는 인터페이스에 정의

3. 로그인 처리 흐름

로그인 요청 → @RequestParam으로 값 받기
MyBatis로 DB에서 SELECT
로그인 성공 시 HttpSession에 사용자 정보 저장
이후 인증 체크는 세션 기반으로 처리

session.setAttribute("loginUser", user);

4. Redirect의 의미

return "redirect:/home";

HTML을 바로 응답하는 게 아님
브라우저에게 다시 요청하라고 지시함
즉, 2번 요청이 발생함 (POST-Redirect-GET 패턴)

5. 게시판 & Thymeleaf 문법

✅ 로그인 여부에 따른 처리

<div th:if="${session.loginUser != null}">
    <p th:text="${session.loginUser.name} + '님 환영합니다'"></p>
    <a th:href="@{/logout}">로그아웃</a>
</div>

th:if: 조건부 렌더링
th:text: 텍스트 출력
th:href: 링크 처리

6. 수정(Form) 화면에서 hidden 태그가 필요한 이유

<input type="hidden" name="id" th:value="${post.id}" />

기본키(ID) 값을 숨겨서 전송하기 위함
사용자는 수정 시 id 값을 볼 수 없지만, 서버는 어떤 게시물을 수정할지 알아야 함
수정 처리는 보통 POST로 이루어지므로 id를 form에 포함해야 함

7. List vs Map – 반복문 처리

List: 반복문(th:each) 돌릴 때 사용
Map: 특정 key로 객체를 꺼낼 때 사용
(DTO와 비슷한 방식으로 속성 접근 가능)

<!-- List 예시 -->
<tr th:each="item : ${postList}">
    <td th:text="${item.title}"></td>
</tr>

<!-- Map 예시 -->
<p th:text="${userMap['admin'].name}"></p>

댓글 기능 구현

1.먼저 db에다 fp_comment 테이블 만들기

Create Table fp_comment(
id int primary key auto_increment,
articleId int,
userId int,
message VARCHAR(3000),
created_at DATETIME default NOW(),
FOREIGN KEY (articleId) REFERENCES fp_article(id) ON DELETE CASCADE,
FOREIGN KEY (userId) REFERENCES fp_user(id) ON DELETE CASCADE
);

foreign key 사용한 이유 :
외래키를 댓글(CommentDto)을 등록할 때 이 댓글이 어떤 글(articleId)에 속하고, 누가(userId) 썼는지를 알아야 함
두 테이블을 연결하는 다리역할(다른테이블의 기본키 참조)
데이터 무결성을 위해
on delete cascade : foreign key로 테이블 간 관계를 연결해놨을 때, 부모 테이블의 행이 삭제되면 자식 테이블의 연관된 행도 자동으로 삭제되게 해주는 옵션

처음엔 외래키 설정 안 했을 시 → articleId넘기려고할때 자꾸 db든 서버든 articleId가 null값이 들어감

1. articleId가 null로 저장되는 문제

폼이나 DTO에서는 값이 들어왔는데, DB에는 null로 들어가는 경우 많음
왜? 외래키 없으면 DB가 “이 값 진짜 존재하는 article인지” 검사 안 함
실수로 빠지거나, 컨트롤러에서 안 넣어줘도 DB는 에러 없이 그냥 null 저장

2. 존재하지 않는 게시글 ID로 댓글 저장 가능

예: articleId = 999 이렇게 저장해도 DB는 에러 안 냄
실제로는 그런 게시글이 없는데, 댓글만 DB에 저장됨 → 고아 데이터 생김

3. JOIN 쿼리에서 에러 나거나 결과 없음

댓글은 있는데 articleId가 null이거나, 존재하지 않는 게시글 ID라면?
조인할 때 결과 안 뜨거나 null 뜸 → 프론트에서 에러 나기 딱 좋음

CommentDto 생성

package com.ca.finalproject.dto;

import java.time.LocalDateTime;

import lombok.Data;

@Data
public class CommentDto {
    private int id; // 댓글 고유 번호 (PK)
    private int articleId; // 어떤 게시글에 달린 댓글인지
    private int userId; // 댓글 작성자
    private String message; // 댓글 내용
    private LocalDateTime createdAt; // 작성 시각
}

readArticlePage.html에다 form 추가

<div class="row mb-4">
    <div class="col-md-12">
        <form action="/board/writeComment" method="post">
        <input type="hidden" name="articleId" th:value="${articleData.articleDto.id}" />
            <div class="input-group">
                <span class="input-group-text">
                	<i class="bi bi-chat-dots"></i>
                </span>

                <input type="text" name="message" class="form-control" placeholder="댓글을 입력하세요" required>

                <button type="submit" class="btn btn-primary">작성</button>
            </div>
        </form>
    </div>
</div>

사용자는 그냥 댓글만 입력해 (<input type="text" name="message" ...>).
form이 submit될 때 articleId도 함께 서버로 전송됨 (숨겨진 상태로).
서버는 이 articleId를 보고 “이 댓글은 몇 번 게시글에 달린 거구나” 판단.
댓글 DB에 저장할 때 그걸 같이 넣음.

BoardController.java

@RequestMapping("writeComment")
public String writeComment(CommentDto commentDto,HttpSession session){
    UserDto sessionUser = (UserDto) session.getAttribute("sessionUserInfo");
    // System.out.println("sessionUser: " + sessionUser);

    if (sessionUser == null) {
        System.out.println("로그인 세션이 없습니다.");
        return "redirect:/user/loginPage"; // 로그인 안된 경우 로그인 페이지로 보냄
    }

    commentDto.setUserId(sessionUser.getId());
    boardService.writeComment(commentDto);
    return "redirect:/board/readArticlePage?id=" + commentDto.getArticleId();
}

BoardServiceImpl.java

public void writeComment(CommentDto commentDto){
	commentSqlMapper.insertComment(commentDto);
}

public List<Map<String, Object>> getCommentListByArticleId(int articleId){
    List<Map<String, Object>> resultList = new ArrayList<>();
    List<CommentDto> commentList = commentSqlMapper.findCommentsByArticleId(articleId);

    for(CommentDto commentDto : commentList){
        Map<String, Object> map = new HashMap<>();
        map.put("commentDto", commentDto);
        UserDto userDto = userSqlMapper.findUserById(commentDto.getUserId());
        map.put("userDto", userDto);
        resultList.add(map);
    }

    return resultList;
}

CommentSqlMapper.java

package com.ca.finalproject.board.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.ca.finalproject.dto.CommentDto;

@Mapper
public interface CommentSqlMapper {
    public void insertComment(CommentDto commentDto);
    public List<CommentDto> findCommentsByArticleId(int articleId);
    public int countCommentsByArticleId(int articleId);
}

CommentSqlMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.ca.finalproject.board.mapper.CommentSqlMapper">
<select id="findCommentsByArticleId" >
SELECT * FROM fp_comment WHERE articleId = #{articleId} ORDER BY created_at ASC
</select>

<insert id="insertComment">
INSERT INTO fp_comment (articleId,userId,message)
VALUES (#{articleId},#{userId},#{message});
</insert>

<select id="countCommentsByArticleId">
select count(*) from fp_comment where articleId=#{articleId}
</select>

</mapper>

근데 여기서 문제점 발견... db에단 commentCount가 연결안됨..

하지만 화면 출력,콘솔 출력은 잘됨

뭐가 문제일까..

다시 해보쟈

[React] | Vite 설치, JSX 문법, 컴포넌트까지 정리

soidev — Thu, 10 Jul 2025 13:52:39 +0900

React 프로젝트 시작하기 (Vite + React)

1. Node.js 설치

공식 웹사이트: https://nodejs.org/ko/download
Node.js는 자바스크립트 실행 환경
필수 도구: node와 npm이 함께 설치됨

Node.js — Node.js® 다운로드

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

2. Vite로 React 프로젝트 생성

npm create vite@latest projectname1

projectname1은 원하는 프로젝트 폴더명

3. 프로젝트 세팅

cd projectname1
npm install         # 필요한 패키지 설치
npm run dev         # 개발 서버 실행 (Ctrl + F5)

서버 종료: Ctrl + C

주요 파일 및 구조

package.json

JavaScript 프로젝트의 설정 파일
Java에서의 build.gradle과 유사

index.html

React가 렌더링되는 진입점
<div id="root"></div> ← 여기에 React 앱이 붙음 (가장 중요)

JSX와 컴포넌트 기본

JSX란?

JavaScript + HTML = JSX
JavaScript 내부에서 HTML처럼 마크업 작성 가능

JSX 문법 특징

컴포넌트는 하나의 최상위 엘리먼트만 반환 가능
❌ 오류:
jsx

return (
  <div>안녕</div>
  <div>안녕</div>
);

✅ 올바른 방식:

return (
  <div>
    <div>야호</div>
    <div>반갑</div>
  </div>
);

또는 빈 태그 <> </> 사용 가능:

return (
  <>
    <div>야호</div>
    <div>반갑</div>
  </>
);

닫는 태그 필수
- <img> 태그 등도 <img /> 형식으로 닫아야 함
- <br> → <br />로 작성

스타일 및 컴포넌트

index.css

초기 설정 CSS
원하면 전부 삭제해도 무방
컴포넌트 작성 (파일 확장자: .jsx)

리액트전용 컴포넌트파일 : jsx 파일을 만들어야함

import './MyAppButton.css';

//매우 작은 컴포넌트
//컴포넌트 안쪽에 호출할수있고 그 안에 또 호출할 수 있음
//children = 정해져 있는 변수 명
function MyAppButton({children}) {
    return(
        <div className='my-button'>{children}</div>
    )
}

export default MyAppButton;

children: 컴포넌트 내부에서 전달된 내용
{}: JSX 안에서 JavaScript 표현식을 사용함
재사용 가능한 작은 UI 단위 만들기 용이

JSX 참고: https://ko.react.dev/learn/writing-markup-with-jsx

JSX로 마크업 작성하기 – React

The library for web and native user interfaces

ko.react.dev

[Open AI] API 키 발급하기 & 카드 등록

soidev — Fri, 27 Jun 2025 15:24:48 +0900

프로젝트 하면서 open ai 를 한번 사용해보기로했다

https://openai.com/ 여기 메인 화면에서 로그인을 하면 아래 사진에 있는 화면으로 이동한다

이 화면으로 들어올 것이다

검색으로 API Keys 라고 치면

아니면 https://platform.openai.com/account/api-keys

이 화면으로 들어온다 create new secret key 누르면

name 은 표기되어 있는대로 Optional 항목이기 1때문에 , 꼭 써줄 필요 없지만 나중에 구분하기 위해 추가했다

그리고 create secret key 누르면 api 발급 완료!

2. 내 키 목록 확인하기

처음 만들어둔 키가 user 기반이라 Settings > Your profile > User API keys로 접근하여 확인이 가능했다.
프로젝트 API 키 목록은 API keys에서 바로 확인할 수 있다.

프로젝트를 사용하여 API 키를 정리할 수 있는데, 관련 공식 문서는 아래 링크를 참고하면 된다.
https://help.openai.com/en/articles/9186755-managing-your-work-in-the-api-platform-with-projects

이제 이 key 발급한 걸 활용하려면 카드 등록을 해야한다

Billing 페이지로 이동 -> add payment details 누르고 카드 정보 입력

정보 입력 다음 누르면

이 화면이 뜬다 나는 지금 제일 최소로 5달러만 적었다

자동결제하면 문제 될 수 있으니 절대 yes 금지!!

이제 이 api를 활용하기 위해 환경변수 설정

터미널 키기

touch ~/.zshrc   <= 파일 만들기
nano ~/.zshrc     여기서 파일 안에 환경변수 export 하기
export OPENAI_API_KEY='key'
source ~/.zshrc
echo $OPENAI_API_KEY

여기까지 다하면 내 키발급한 코드가 나올것임 그럼 성공!!

참고용

https://alltipz.com/6

open ai api key 발급하기 (feat. make 로 자동화 연동)

1. open ai 홈페이지에 가서 회원가입을 해준다. https://platform.openai.com/docs/overview회원가입을 마치고 나면 오버뷰 화면을 볼 수 있다. 2. 키 발급을 위해 하단 링크로 키 관리 페이지로 입장. (혹

alltipz.com

[Spring] 카카오페이 단건결제 API

soidev — Sat, 21 Jun 2025 02:30:56 +0900

카카오페이 api사용하려면 일단 카카오페이 파트너에 가입 후
애플리케이션 등록
web 테스트용 도메인 등록
테스트용으로서 Secret key(dev) 사용

내 예제 → 기부버튼 누르면 자동으로 만원씩 후원하게끔 할 것!<단건결제>

내 예제 hml

참고용 문서 : https://developers.kakaopay.com/docs/payment/online/single-payment

카카오페이 | 개발자센터

새로운 기회와 가치를 함께 만들어봐요

developers.kakaopay.com

application.properties

# application.properties

kakao.api.secret-key=카카오에서발급받은REST_API_키
kakao.api.cid=TC0ONETIME
kakao.api.approval-url=http://localhost:8080/donation/success
kakao.api.cancel-url=http://localhost:8080/donation/cancel
kakao.api.fail-url=http://localhost:8080/donation/fail

각자 발급받은 테스트용 어플리케이션키 넣기

kakao.api ~ 이건 변수명이라 다른거로 가능

applicaiotn.properties에선 다 변수명이라 자유롭게 쓸수있음!

https://velog.io/@ryuneng2/%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%8E%98%EC%9D%B4-API-%EC%97%B0%EB%8F%99-%ED%8C%9D%EC%97%85%EC%B0%BD%EB%9D%84%EC%9A%B0%EA%B8%B0-%EA%B2%B0%EC%A0%9C%EC%8A%B9%EC%9D%B8-%EA%B5%AC%ED%98%84

[Spring Boot] 카카오페이 API 연동 - 팝업창 띄우기 및 결제승인까지

카카오페이를 구현하기 위해 여러 자료를 참고해서 코드를 작성해보았으나, 작동하지 않았다. 꽤 최신 블로그 글(약 6개월 전 포스팅)을 참고해보기도 했지만, 여전히 오류만 날 뿐이었다. 도대

velog.io

이거 보고 참고

계속 오류가 떴음 왜냐 구버전인 예제가 많아서 초보개발자인 나에겐... 오류 고치는게 너무 오래걸렸음

오류가 났던 코드..

package com.choongang.univ.barrierfree.donation.service;

import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.*;
import org.springframework.stereotype.Service;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.web.client.RestTemplate;

@Service
public class DonationService {

    @Value("${kakao.api.secret-key}")
    private String secretKey;

    @Value("${kakao.api.cid}")
    private String cid;

    @Value("${kakao.api.approval-url}")
    private String approvalUrl;

    @Value("${kakao.api.cancel-url}")
    private String cancelUrl;

    @Value("${kakao.api.fail-url}")
    private String failUrl;

    public Map<String, Object> kakaoPayReady() {
        RestTemplate restTemplate = new RestTemplate();

        // 1. Header
        HttpHeaders headers = new HttpHeaders();
        headers.set("Authorization", "SecretKey " + secretKey);  
        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED); // ✅ 중요

        System.out.println("Headers: " + headers.toString());

        // 2. Body
        MultiValueMap<String, String> body = new LinkedMultiValueMap<>();
        body.add("cid", cid);
        body.add("partner_order_id", "donation_001");
        body.add("partner_user_id", "anonymous_donor");
        body.add("item_name", "장애학생 기부");
        body.add("quantity", "1");
        body.add("total_amount", "10000");
        body.add("vat_amount", "0");
        body.add("tax_free_amount", "0");
        body.add("approval_url", approvalUrl);
        body.add("cancel_url", cancelUrl);
        body.add("fail_url", failUrl);

        HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<>(body, headers);

        String url = "https://open-api.kakaopay.com/online/v1/payment/ready";

        ResponseEntity<Map> response = restTemplate.postForEntity(url, request, Map.class);

        return response.getBody();
    }

    public Map<String, Object> kakaoPayApprove(String tid, String pgToken) {
        RestTemplate restTemplate = new RestTemplate();

        HttpHeaders headers = new HttpHeaders();
        // headers.set("Authorization", secretKey);
        headers.set("Authorization", "KakaoAK " + secretKey);
        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
        MultiValueMap<String, String> body = new LinkedMultiValueMap<>();
        body.add("cid", cid);
        body.add("tid", tid);
        body.add("partner_order_id", "donation_001");
        body.add("partner_user_id", "anonymous_donor");
        body.add("pg_token", pgToken);

        HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<>(body, headers);

        // String url = "https://open-api.kakaopay.com/online/v1/payment/approve";
        String url = "https://kapi.kakao.com/v1/payment/approve";
        


        ResponseEntity<Map> response = restTemplate.postForEntity(url, request, Map.class);

        return response.getBody();
    }

    private HttpHeaders getHeaders() {
        HttpHeaders headers = new HttpHeaders();
        headers.set("Authorization", "카카오페이 개발자센터에서 발급받은 Secret key(dev) 입력");
        headers.set("Content-type", "application/json");

        return headers;
    }
}

오류가 난 이유

url도 다르고 header.set하는게 구버전으로 했었음
https://open-api.kakaopay.com/online/v1/payment/~
content-type도 구버전으로..
HashMap으로도 해야함
만약에 하시면 이제 지금 버전으로 꼭 문서 꼼꼼히 읽으셔야겠음..!!
adminkey가 아니라 이제 secret-key

그래서 지금 고친 버전

package com.choongang.univ.barrierfree.donation.service;

import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.*;
import org.springframework.stereotype.Service;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.web.client.RestTemplate;

@Service
public class DonationService {

    @Value("${kakao.api.secret-key}")
    private String secretKey;

    @Value("${kakao.api.cid}")
    private String cid;

    @Value("${kakao.api.approval-url}")
    private String approvalUrl;

    @Value("${kakao.api.cancel-url}")
    private String cancelUrl;

    @Value("${kakao.api.fail-url}")
    private String failUrl;

    public Map<String, Object> kakaoPayReady() {
        RestTemplate restTemplate = new RestTemplate();

        // 1. Header
        HttpHeaders headers = new HttpHeaders();
        headers.set("Authorization", "SECRET_KEY " + secretKey);
        headers.setContentType(MediaType.APPLICATION_JSON);

        Map<String, Object> body = new HashMap<>();
        body.put("cid", cid);
        body.put("partner_order_id", "donation_001");
        body.put("partner_user_id", "anonymous_donor");
        body.put("item_name", "장애학생 기부");
        body.put("quantity", 1);
        body.put("total_amount", 10000);
        body.put("vat_amount", 0);
        body.put("tax_free_amount", 0);
        body.put("approval_url", approvalUrl);
        body.put("cancel_url", cancelUrl);
        body.put("fail_url", failUrl);

        HttpEntity<Map<String, Object>> request = new HttpEntity<>(body, headers);

        String url = "https://open-api.kakaopay.com/online/v1/payment/ready";

        ResponseEntity<Map> response = restTemplate.postForEntity(url, request, Map.class);

        return response.getBody();
    }

    public Map<String, Object> kakaoPayApprove(String tid, String pgToken) {
        RestTemplate restTemplate = new RestTemplate();

        HttpHeaders headers = new HttpHeaders();
        headers.set("Authorization", "SECRET_KEY " + secretKey);
        headers.setContentType(MediaType.APPLICATION_JSON);

        Map<String, Object> body = new HashMap<>();
        body.put("cid", cid);
        body.put("tid", tid);
        body.put("partner_order_id", "donation_001");
        body.put("partner_user_id", "anonymous_donor");
        body.put("pg_token", pgToken);

        HttpEntity<Map<String, Object>> request = new HttpEntity<>(body, headers);

        // String url = "https://open-api.kakaopay.com/online/v1/payment/approve";
        // String url = "https://kapi.kakao.com/v1/payment/approve";
        String url = "https://open-api.kakaopay.com/online/v1/payment/approve";

        ResponseEntity<Map> response = restTemplate.postForEntity(url, request, Map.class);

        return response.getBody();
    }

    private HttpHeaders getHeaders() {
        HttpHeaders headers = new HttpHeaders();
        headers.set("Authorization", "카카오페이 개발자센터에서 발급받은 Secret key(dev) 입력");
        headers.set("Content-type", "application/json");

        return headers;
    }
}

Controller

package com.choongang.univ.barrierfree.donation.controller;

import java.util.Map;

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.HttpClientErrorException;

import com.choongang.univ.barrierfree.donation.service.DonationService;

import jakarta.servlet.http.HttpSession;
import lombok.RequiredArgsConstructor;

@RestController
@RequestMapping("api/donation")
@RequiredArgsConstructor
public class DonationRestController {

    private final DonationService donationService;

    // 카카오페이 결제 준비
    @PostMapping("/kakaoPayReady")
    public ResponseEntity<?> kakaoPayReady(HttpSession session) {
        try {
            Map<String, Object> response = donationService.kakaoPayReady();
            session.setAttribute("tid", response.get("tid")); // 결제 승인용 TID 저장
            return ResponseEntity.ok(response);
        } catch (HttpClientErrorException e) {
            return ResponseEntity
                .status(e.getStatusCode())
                .body(Map.of("error", "카카오페이 준비 요청 실패", "message", e.getResponseBodyAsString()));
        } catch (Exception e) {
            return ResponseEntity
                .internalServerError()
                .body(Map.of("error", "서버 오류", "message", e.getMessage()));
        }
    }

    // 카카오페이 결제 성공 후 호출
    @GetMapping("/success")
    public ResponseEntity<?> kakaoPaySuccess(@RequestParam("pg_token") String pgToken, HttpSession session) {
        String tid = (String) session.getAttribute("tid");
        if (tid == null) {
            return ResponseEntity
                .badRequest()
                .body(Map.of("error", "TID 누락", "message", "결제 준비가 선행되지 않았습니다."));
        }

        try {
            Map<String, Object> response = donationService.kakaoPayApprove(tid, pgToken);
            return ResponseEntity.ok(response);
        } catch (HttpClientErrorException e) {
            return ResponseEntity
                .status(e.getStatusCode())
                .body(Map.of("error", "카카오페이 승인 요청 실패", "message", e.getResponseBodyAsString()));
        } catch (Exception e) {
            return ResponseEntity
                .internalServerError()
                .body(Map.of("error", "서버 오류", "message", e.getMessage()));
        }
    }
}

성공!!!!

근데 내가 response로 받아서 결제완료하면 페이지가 html이 아니라 json 데이터값들 보여지는게 뜸

이제 성공 페이지 구현

완료!!!! 휴우 드디어 끝났다!!!

날짜만 약간 바꾸면 결제 test 끝@@

[Spring] final project_3차

soidev — Mon, 12 May 2025 17:55:24 +0900

REST API (백엔드)

REST API는 백엔드에서 데이터를 처리하고 응답을 JSON으로 주는 방식.
@RestController는 반환값이 html이 아니라 json이라는 걸 의미함.
사용자는 서버에 데이터를 요청하면, 서버는 JSON으로 응답을 돌려줌.

→ 예) /api/user/isExistsAccountName?accountName=abc 요청하면

{ "result": true } 같은 JSON 응답이 옴.

AJAX (프론트엔드)

AJAX는 HTML 페이지를 새로고침하지 않고, 자바스크립트를 통해 서버에 비동기 요청을 보내는 기술.
과거엔 XMLHttpRequest를 썼지만, 지금은 fetch()로 많이 씀.

→ 즉, 사용자가 아이디를 입력하면 fetch()로 서버에 REST API 요청 → JSON 응답 받기

→ 페이지 새로고침 없이 바로 결과 보여줌!

추가 개념 정리: 웹브라우저 역할 & @ResponseBody / @RestController

왜 아이디 중복 확인은 백엔드에서 해야 할까?

웹브라우저(프론트)는 HTML, CSS, JavaScript만 다룸 → DB 접근 못 함
아이디가 이미 있는지 확인하려면 → DB에서 SELECT COUNT(*) 같은 쿼리 필요
그래서 **백엔드 서버(Spring)**가 DB를 조회하고 결과를 알려줘야 함

즉, 백엔드에 요청(Request)을 보내서 결과(Response)를 받아오는 구조 필요

@ResponseBody란?

이 어노테이션을 쓰면, **함수의 return 값이 HTML이 아니라 데이터(JSON)**로 클라이언트에 응답됨
보통 컨트롤러 메서드는 View 이름(html 파일 경로)을 리턴하는데,
@ResponseBody가 붙으면 → return 값이 JSON, 문자열, 숫자 그대로 전송됨

@RestController란?

@Controller + @ResponseBody를 합친 것
이 어노테이션을 클래스에 붙이면 → 이 안의 모든 메서드는 자동으로 JSON 리턴
매번 @ResponseBody 쓰기 귀찮을 때 클래스 단위로 처리 가능

그래서 JSON API 만들 땐 대부분 @RestController를 씀

근데 리턴타입을 Map<String, Object>으로 많이 사용함
그 이유 : json은 key-value 구조다 → Java의 Map<String, Object>와 매우 유사함
이걸 Java에서 간단하게 표현하려면 Map이 가장 편하다:

그럼 이걸로 뭘 해야 돼?

사용자 입력값(아이디)을 백엔드 함수의 파라미터로 전달
백엔드는 이 값을 기반으로 DB에서 중복 여부를 확인
확인한 값을 JSON 형식으로 리턴
프론트는 JSON 응답을 받아서 JS로 사용자한테 메시지 보여줌

회원가입 아이디 중복 체크

register.html

아이디 : <input onblur="confirmAccountName()" id="inputAccountName" name="accountName" type="text">

<br>

button추가 중복확인!

RestController.java

package com.ca.finalproject.user.controller;

import java.util.HashMap;

import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.RestController;

import com.ca.finalproject.user.service.UserServiceImpl;

@RestController //@Controller + @ResponseBody : body는 json이다

@RequestMapping("api/user")

public class RestUserController {

@Autowired

private UserServiceImpl userService;

@RequestMapping("isExistsAccountName")

public Map<String,Object> isExistsAccountName(@RequestParam("accountName") String accountName){

Map<String,Object> map = new HashMap<>();

map.put("result", userService.isExistsAccountName(accountName));

return map;

}

@RestController: 반환값을 JSON 형태로 자동 변환
@RequestParam("accountName"): 쿼리스트링에서 파라미터 받음
Map<String,Object>로 { "result": true/false } 형태 반환

UserSqlMapper.java

//회원 존재 여부

public int countuserByAccountName(String accountName);

UserSqlMapper.xml

select count(*) from fp_user fu where fu.account_name=#{accountName}

</select>

register.html

function confirmAccountName(){

//아이디를 눌렀을때에 그 아이디가 필요한것?

const inputAccountName = document.getElementById("inputAccountName");

// inputAccountName.value; // 이 값ㅂ이 이미 가입한 녀석이냐?

//restapi를 이제 js로 호출할 것

//AJAX - js로 링크 변경 없이 페이지 내에서 백엔드에 요청(requeset) 하는 기술

fetch(`/api/user/isExistsAccountName?accountName=${inputAccountName.value}`)

.then(response=>response.json())

.then(json =>{ //여기가 reutnr된 값임

//여기서부터는 그냥 js 일반적인 능력 활용 필요!! 나중엔 여기가 죽어나갈 구간

// 백엔드 응답 후 여기부터 실행됨!!(비동기)

const accountnameErrorTextBox = document.getElementById("accountnameErrorTextBox")

if(json.result==true){

accountnameErrorTextBox.style.color="red";

accountnameErrorTextBox.innerText="이미 사용중인 아이디입니다."

isConfirmedAccountname=false;

}else{

accountnameErrorTextBox.style.color="green";

accountnameErrorTextBox.innerText="사용 가능한 아이디입니다."

isConfirmedAccountname=true;

}

})

;

}

fetch()로 서버에 AJAX 방식의 요청을 보냄 (accountName=입력값)
.then(response => response.json()): JSON 파싱
.then(json => {...}): 결과에 따라 텍스트 색과 메시지 변경

좋아요기능 구현

-- 좋아요T

CREATE TABLE fp_like (

id INT PRIMARY KEY AUTO_INCREMENT ,

article_id INT,

user_id INT,

created_at DATETIME DEFAULT NOW()

);

LikeDto.java

package com.ca.finalproject.dto;

import java.time.LocalDateTime;

import lombok.Data;

@Data
public class LikeDto {
    private int id;
    private int articleId;
    private int userId;
    private LocalDateTime createdAt;
}

BoardSqlMapper.java

 //좋이요
    public void createLike(@Param("articleId") int articleId,@Param("userId") int userId);
    public void deleteLike(@Param("articleId") int articleId,@Param("userId") int userId);
    public int countByArticleIdAndUserId(@Param("articleId") int articleId,@Param("userId") int userId);
    public int countByArticleId(@Param("articleId") int articleId);

BoardSqlMapper.xml

<!-- 좋아요 -->
<insert id="createLike">
	Insert into fp_like(article_id,user_id) VALUES(#{articleId},#{userId});
</insert>

<delete id="deleteLike">
	delete from fp_like where article_id=#{articleId}, and user_id=#{userId};
</delete>

<select id="countByArticleIdAndUserId">
	select count(*) from fp_like fl where fl.article_id=#{articleId} and fl.user_id=#{userId};
</select>

<select id="countByArticleId">
	select count(*) from fp_like fl where fl.article_id=#{articleId}
</select>

BoardServiceImpl.java

 //좋아요
    public void like(int articleId, int userId){
        boardSqlMapper.createLike(articleId, userId);
    }

    public void unlike(int articleId, int userId){
        boardSqlMapper.deleteLike(articleId, userId);
    }

    public boolean isMyLike(int articleId,int userId){
        return boardSqlMapper.countByArticleIdAndUserId(articleId, userId)>0;
    }

    public int getTotalLikeCount(int articleId){
        return boardSqlMapper.countByArticleId(articleId);
    }

RestBoardController.java

package com.ca.finalproject.board.controller;

import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.ca.finalproject.board.service.BoardServiceImpl;
import com.ca.finalproject.dto.UserDto;

import jakarta.servlet.http.HttpSession;

@RestController
@RequestMapping("api/board")
public class RestBoardController {

    @Autowired
    private BoardServiceImpl boardService;

    @RequestMapping("like")
    public Map<String,Object> like(HttpSession session, @RequestParam("articleId") int articleId){
        UserDto sessionUserInfo = (UserDto)session.getAttribute("sessionUserInfo");
        boardService.like(articleId, sessionUserInfo.getId());

        Map<String,Object> map = new HashMap<>();
        map.put("result", "success");
        return map;
    }

    @RequestMapping("unlike")
    public Map<String,Object> unlike(HttpSession session, @RequestParam("articleId") int articleId){
        UserDto sessionUserInfo = (UserDto)session.getAttribute("sessionUserInfo");
        boardService.unlike(articleId, sessionUserInfo.getId());

        Map<String,Object> map = new HashMap<>();
        map.put("result", "success");
        return map;
    }

    @RequestMapping("isLiked")
    public Map<String, Object> isLiked(HttpSession session, @RequestParam("articleId") int articleId){
        Map<String, Object> map = new HashMap<>();
        UserDto sessionUserInfo = (UserDto)session.getAttribute("sessionUserInfo");
        map.put("result", boardService.isMyLike(articleId, sessionUserInfo.getId()));
        return map;
    }

    @RequestMapping("totalLikeCount")
    public Map<String,Object> totalLikeCount(@RequestParam("articleId") int articleId){     //이경우는 세션 필요없음 로그인 하지 않아도 카운트가 보여야하니까..
        Map<String, Object> map = new HashMap<>();

        map.put("result", boardService.getTotalLikeCount(articleId));

        return map;
    }
}

readArticle.html

<script>안에다가 넣기

function like(){
    //로그인 안 했을때
    if(mySessionId==null){ //null인 경우는 로그인 하지않았따
    //alert과 비슷한데 버튼이 두개 나옴
    if(confirm("로그인 후 이용 가능합니다. 로그인 페이지로 넘어갈래?")){
    	location.href="/user/loginPage";
    }
    return;
	}

    //로그인 했을 때 : like insert하면됨
    fetch(`/api/board/like?articleId=${articleId}`)
        .then(response=> response.json())
        .then(json=>{
            renderHeart();
            renderTotalCount();
    	});
    }

function unlike(){
    //로그인 했을 때 : like insert하면됨
    fetch(`/api/board/unlike?articleId=${articleId}`)
        .then(response=> response.json())
        .then(json=>{
            renderHeart();
            renderTotalCount();
    });
}

function renderTotalCount(){
    fetch(`/api/board/totalLikeCount?articleId=${articleId}`)
        .then(response=>response.json())
        .then(json=>{
            const countBox= document.getElementById("countBox");
            countBox.innerText=json.result;
    });
}

function renderHeart(){
            fetch(`/api/board/isLiked?articleId=${articleId}`)
                .then(response=>response.json())
                .then(json=>{
                    const heartBox = document.getElementById("heartBox");
                    if(json.result == true){
                        heartBox.classList.add("bi-heart-fill");
                        heartBox.classList.remove("bi-heart");
                        heartBox.setAttribute("onclick","unlike()");
                    }else{
                        heartBox.classList.remove("bi-heart-fill") ;
                        heartBox.classList.add("bi-heart");
                        heartBox.setAttribute("onclick","like()");
                    }
                });
 }
        

window.addEventListener("DOMContentLoaded",()=>{
            //여기가 사실상 시작점
            setMySessionId();
            renderTotalCount();
});

body에다가 넣기

<!-- 추천 -->
<div>
    <i id="heartBox" onclick="like()" class="bi bi-heart text-danger"></i> <span id="countBox"></span>
</div>

[Spring] final project_2차

soidev — Mon, 12 May 2025 17:54:57 +0900

2차

카테고리(다중 취미),검색,페이징,파일업로드,암호화, 인터셉터,메일인증, 인터셉터, 자바스크립트 기초

단일값이 아니라 여러값을 넣을때

제1정규화원칙때문에

checkbox는 똑같은 이름으로 설정

링크구조로... http의 프로토콜의 정상적인 케이스

파라미터 받을때 Requestparam으로 받고 List로 받으면됨

insert되자마자 primary키가 필요한 경우 : 그때는 쿼리가 두번 실행해야함 mybatis에서 selectKey라는걸 사용함

파라미터값이 안 넘아왔을시에 에러가 이런 오류!

글쓰기할때 파일도 올리기

닉네임 : <span th:text="${session.sessionUserInfo.nickname}"></span>

<br>

제목 : <input name="title" type="text"><br>

내용 : <br>

이미지 : <input name="uploadFiles" type="file" multiple accept="image/*"> <br>

</form>

@RequestMapping("writeArticleProcess")

public String writeArticleProcess(HttpSession session,

@ModelAttribute ArticleDto params,

@RequestParam("uploadFiles") List<MultipartFile> uploadFiles){

//객체를 받을땐 requestparam이 아니라 modelAttribute로 해야함

try {

for(MultipartFile multipartFile : uploadFiles){

String filename = multipartFile.getOriginalFilename();

multipartFile.transferTo(new File("/Users/soi/uploadFiles/"+filename));

}

} catch (Exception e) {

e.printStackTrace();

}

//userid값이 0임 , session을 가져와야함

UserDto sessionUserDto = (UserDto)session.getAttribute("sessionUserInfo");

params.setUserId(sessionUserDto.getId());

boardService.writeArticle(params);

return "redirect:/board/mainPage"; //글을 다쓰면 메인페이지로 넘어갈것!

}

uploadFile

uploadFiles: 서버가 갖고있는 폴더, 클라이언트에선 없는폴더

aaa.jpg는 클라이언트에만 갖고있는 파일

컨트롤러의 역할 : 요청을 담당하는 역할

web과 관련된 코든느 컨트롤러

이메일 인증

먼저 2단계 인증까지 한다음에 여기 들어가서

https://myaccount.google.com/security

Google 계정

myaccount.google.com

앱 비밀번호 만들기

buil.gradle - 외부 라이브러리 추가

implementation 'org.springframework.boot:spring-boot-starter-mail'

application.properties

#메일 세팅

spring.mail.host = smtp.gmail.com

spring.mail.port = 587

spring.mail.username = ~~~@gmail.com

spring.mail.password=앱비번

spring.mail.properties.mail.smtp.starttls.enable=true

spring.mail.properties.mail.smtp.starttls.required=true

spring.mail.properties.mail.smtp.auth=true

gmail 쓸 것인걸 선언
구글에서는 587번 포트 제공
내 이메일 주소 추가
앱비번 넣기 아래서부터는 메일 마다 다 다를듯?
암호화하겠다는거
중간자머시기 암호화기법을 추가하겠다는거?

UserServiceImpl.java

일단 먼저 메일 보내보기!

@Autowired

private JavaMailSender javaMailSender;

javamailsender 추가 : 얘를 이용해서 메일 보낼수있음(인터페이스임)

//메일 보내기

try{

MimeMessage mimeMessage = javaMailSender.createMimeMessage();

MimeMessageHelper mimeMessageHelper = new MimeMessageHelper(mimeMessage,"utf-8");

mimeMessageHelper.setSubject("제목 .. 입니다");

mimeMessageHelper.setText("내용 입니다. 야호!!",true); //true를 넣으면 html코드로 날라감

mimeMessageHelper.setTo(userDto.getEmail());

mimeMessageHelper.setFrom("aaa@aaa.com","FP 관리자"); //한글이 안들어감 첫번쨰,

javaMailSender.send(mimeMessage);

}catch(Exception e){

e.printStackTrace();

}

javaMailSender : 실제론 얘가 메일을 보낸 것
MimeMessage : 메시지 구성요소들(약간 컨테이너? 라고 생각하면될듯)
근데 mimemessage얘 혼자보내기 껄끄러우서 helper 등장
try..catch문 쓰는 이유 ?

처음에 회원가입할땐 오류가 뜸

이유 : naver.com로 해야하는데 naver,com으로 해서.. 잘 확인하고 치쟈! 나중엔 console창 띄우게 할것

성공

MailAuthDto.java 추가

package com.ca.finalproject.dto;

import java.time.LocalDateTime;

import lombok.Data;

@Data

public class MailAuthDto {

private int id;

private int userId;

private String authKey;

private String isCompleted;

private LocalDateTime completedTime;

private LocalDateTime createdAt;

}

UserSqlMapper.java

//메일 인증

public void createMailAuth(@Param("userId") int userId, @Param("authKey") String authKey);

public void updateMailAuth(String authKey);

우리가 컨트롤러에서 정보를 통하게하는데 Filter->intercetor->Controlled에 도착

[Spring] | 세션,쿠키,Session,Cookie

soidev — Fri, 2 May 2025 10:54:00 +0900

gpt 출처

세션(Session)이란?

세션은 일반적으로 클라이언트가 서버에 접속한 하나의 단위를 의미함.
즉, 클라이언트와 서버 간의 연결 상태를 일정 시간 동안 유지하기 위한 수단.
HTTP는 비연결성(stateless) 프로토콜이기 때문에, 요청이 끝나면 서버는 해당 클라이언트를 잊어버림.
그래서 클라이언트를 식별하기 위해 세션을 사용함.

세션의 동작 방식

클라이언트가 로그인 등의 요청을 보냄
- 서버는 이 요청에 대해 세션 저장 공간(메모리) 을 생성함.
- 이때 세션 ID(고유한 값) 를 생성해서 클라이언트에게 쿠키로 전달함.
쿠키의 역할
- 쿠키는 클라이언트(Web Browser) 측에 저장됨.
- request를 보낼 때마다 자동으로 쿠키를 서버에 전달함.
- 서버는 쿠키에 담긴 세션 ID를 보고 어떤 사용자인지 판단함 → 인증의 핵심!
예시 흐름
- 클라이언트가 로그인 → session.setAttribute()로 서버에 사용자 정보 저장
- 서버는 세션 ID를 클라이언트에게 쿠키로 전달
- 이후 요청마다 쿠키에 담긴 세션 ID로 서버는 클라이언트를 식별함

쿠키 vs 세션

저장 위치	클라이언트(브라우저)	서버(메모리)
보안	낮음 (브라우저에서 접근 가능)	상대적으로 높음
생명 주기	브라우저가 종료될 때까지 or 설정한 만료 시간까지	기본 30분 (설정 가능)
용도	사용자 정보 저장 (간단한 내용)	로그인 상태 등 서버에 보관할 중요한 정보

세션 관련 특징

같은 브라우저 내에서는 쿠키를 공유함 (같은 사용자로 간주됨)
브라우저를 새로 열면 쿠키가 없을 수도 있음 → 세션도 새로 생성
로그아웃하면 서버 메모리에서 세션 공간 자체를 제거함
하지만 쿠키는 클라이언트에 그대로 남아있을 수 있음
세션은 기본적으로 30분간 유지됨 (서버 설정으로 변경 가능)

로그아웃을 하면 램에 저장했던 것을 아예 그 공간자체를 날려버림
근데 쿠키 쪽에선 살아있으 서버쪽에서 이 메모리는 어떻게 되는지 아냐?
저 세션은 타임라인이 정해져있음 디폴트가 30분임
저 파일명으로 설정시간은 바꿀 수 있음

⚠️ 시스템 규모에 따른 고려사항

소규모 또는 모노리식(Monolithic) 시스템에서는 세션 방식이 적합함
하지만 중대형 시스템이나 분산 시스템에서는 세션 방식이 부적합할 수 있음
- 이유: 세션은 서버 메모리에 저장되므로 서버 간 정보 공유가 어려움
- 대안: JWT 토큰 기반 인증 방식 등 사용

서버쪽에서 session과 관련된 코드가 실행되면
loginProcess실행될때, spring에서는 이때 세션의 쿠키가 안 날라오면 새로운 세션 저장공간을 생성함.
id값을 서버 램쪽에다 부여함 ex- value값, 이 세션을 클라이언트에다가 '이걸 쿠키로 저장해'라고 넘김
이 클라이언트는 저 밸류값 저것을 요청을 할 때마다 여기에 있는 쿠키 값을 무조건 넘기게 되어있음
그럴때마다 이것은 인증의 핵심!!! 요청할때마다 클라이언트에 있는 쿠키를 서버에게 전달을 하면 인식을 한다 (session.setAttribute)
f5은 메인페이지 계속 요청하는 것..

똑같은 웹브라우저가 두세명 있어도 쿠키가 아예 없는 것들도 있음 그럴땐 그냥 널값이 뜬다?
하나의 웹브라우저는 쿠키를 공유해
즉 계속 새로고침해도 http프로토콜은 요청하고 끊어버리는 순간 값을 알 수 없음