🏷️ Annotation · Lombok · JS-JAVA 연동 · 프로젝트 회고 정리

---

🧩 [ Annotation ]

어노테이션(Annotation)은 추가적인 정보를 제공하는 메타데이터 역할을 하며,
코드의 가독성과 유지보수성을 높여준다.

어노테이션	설명
🎯 @Controller	HTTP 요청과 응답을 연결(매핑)하는 역할 → @Component가 포함되어 있음
⚙️ @Component	스프링 컨테이너에 Bean(객체)을 등록 및 생성 → 싱글톤 패턴과 유사한 역할
💬 @ResponseBody	HTTP 응답 데이터를 자동으로 변환(JSON 등)
🌐 @RequestMapping("/URL")	클래스 내 모든 메소드에 공통 URL 지정

---

🧠 [ Lombok ]

자주 사용되는 코드를 어노테이션으로 자동 생성하여 Dto / VO 클래스 설계를 단순화

⚙️ Lombok 설치 방법

1️⃣ 환경 설정 (IntelliJ IDE)
→ 설정 > Plugins > Lombok 검색 후 설치

2️⃣ 프로젝트 설정 (Gradle)
build.gradle 파일에 다음 코드 추가:

compileOnly 'org.projectlombok:lombok'
annotationProcessor 'org.projectlombok:lombok'

---

🧾 주요 어노테이션

어노테이션	기능 설명
🧱 @NoArgsConstructor	기본 생성자 자동 생성
🧩 @AllArgsConstructor	전체 매개변수를 받는 생성자 자동 생성
🔍 @Getter	모든 멤버변수에 Getter 메소드 자동 생성
✏️ @Setter	모든 멤버변수에 Setter 메소드 자동 생성 (생략 시 VO 형태, 읽기 전용)
🪄 @ToString	객체를 문자열로 변환할 때 멤버변수 값 출력

💡 Tip:
Dto 구성 시 멤버변수만 정의하면 자동으로 Getter/Setter, 생성자가 생성되어 코드를 간소화할 수 있다.

---

🌐 [ JS ↔ JAVA 연동 ]

항목	설명
⚙️ fetch 통신	비동기 방식으로 서버와 통신 (async / await)
🧾 마크업 접근	document.querySelector()를 통해 요소 선택
✏️ 값 가져오기	.value로 입력 값 추출
📦 객체화 및 전송	입력값을 객체로 만들어 JSON.stringify()로 변환 후 fetch의 body에 포함
🧩 HTML 삽입	생성된 HTML을 innerHTML을 통해 삽입

💻 예시 코드

const sendData = async () => {
    const input = document.querySelector('#userInput').value;
    const obj = { data: input };

    const option = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(obj)
    };

    const response = await fetch("/api/send", option);
    const result = await response.json();
    console.log(result);
}

---

💬 [ 프로젝트 회고 ]

이번 프로젝트를 통해 얻은 성장과 개선점을 정리

구분	내용
🤝 소통	활발한 의사소통으로 변경사항을 빠르게 공유할 수 있었다.
💡 학습	대화를 통해 서로의 부족한 부분을 배우며 성장함.
⚙️ 코드 적응	다양한 기능을 구현하며 코드에 익숙해짐.
🎨 다음 목표	창의적인 기능 구현 or 공공데이터 활용 계획.

---