2025-pictoletter.log

20250826 - @media 반응형

Tue, 26 Aug 2025 08:01:24 GMT

반응형

body{
background-color:lightblue;
}
/*화면 너비가 500 이하 일때*/
@media(max-width:500px){
body{
  background-color:red;
  font-size:16px;
}
}

/화면 너비가 601 이상 일때/ @media(min-width:601px){ body{ background-color:gold; font-size:26px; } }

안녕하세요

welcome

```






    
            Here
            There
            Some
            Nowhere

20250825 - CSS Display layout

Tue, 26 Aug 2025 04:24:19 GMT

lvh svh dvh

display layout






  
    레이아웃 배우기

  
  
    
        
            nav menu-1
            nav menu-2
            nav menu-3
            nav menu-4
        
    
    
        hello there 
    
    
        something
    
  
      
            Legal Notice
            SBS Academy
            leftright@
    
  



- side bar menu

    
        ▶
        ▼
    


    
        
            1차 메뉴 아이템 1
            
                2차 메뉴 아이템 1
                2차 메뉴 아이템 2
                2차 메뉴 아이템 3
                2차 메뉴 아이템 4
            
        
        
            1차 메뉴 아이템 2
            
                2차 메뉴 아이템 1
                2차 메뉴 아이템 2
                2차 메뉴 아이템 3
                2차 메뉴 아이템 4
            
        
        
            1차 메뉴 아이템 3
            
                2차 메뉴 아이템 1
                2차 메뉴 아이템 2
                2차 메뉴 아이템 3
                2차 메뉴 아이템 4
            
        
        
            1차 메뉴 아이템 4
            
                2차 메뉴 아이템 1
                2차 메뉴 아이템 2
                2차 메뉴 아이템 3
                2차 메뉴 아이템 4
            
        
    


/* 노말라이즈 */
body, ul, li {
    margin:0;
    padding:0;
    list-style:none;
}
a {
    color:inherit;
    text-decoration:none;
}
/* 커스텀 */
/* 좌측 사이드 바 시작 */
.left-side-bar {
    position:absolute;
    top:0;
    left:-225px;
    width:250px;
    height:100%;
    background-color:#efefef;
    transition: left .3s;
}
.left-side-bar:hover {
    left:0;
}
/* 좌측 사이드 바 - 상태 아이콘 */
.left-side-bar > .icon-status > span {
    display:block;
    text-align:right;
    padding:5px;
}
.left-side-bar > .icon-status > span:last-child {
    display:none;
}
.left-side-bar:hover > .icon-status > span:last-child {
    display:block;
}
.left-side-bar:hover > .icon-status > span:first-child {
    display:none;
}
/* 좌측 사이드 바 - 메뉴 박스 1 */
.left-side-bar > .menu-box-1 ul {
    background-color:#efefef;
}
.left-side-bar > .menu-box-1 > ul ul {
    display:none;
    position:absolute;
    left:100%;
    top:0;
}
.left-side-bar > .menu-box-1 > ul > li {
    position:relative;
}
.left-side-bar > .menu-box-1 ul > li > a {
    display:block;
    padding:10px;
    white-space:nowrap;
}
.left-side-bar > .menu-box-1 ul > li:hover > a {
    background-color:black;
    color:white;
}
.left-side-bar > .menu-box-1 > ul > li:hover > ul {
    display:block;
}
/* 좌측 사이드 바 끝 */
```



20250822 - 학습일지 - CSS
Fri, 22 Aug 2025 06:16:57 GMT

opacity transition - copen 재확인요div {
width: 200px;
height: 200px;
background-color: red;
transition: width 3s, opacity 3s;
opacity:0.22;
}


.class_div:hover {
  width: 100%;
  transition : width 100%;
  opacity:1;
}


- before after

    연예인
    연예인
    연예인
    연예인


ul > li {
    position: relative;
    margin: 20px;
    padding: 10px;
    background-color: pink;
    width: 100px;
}
ul > li::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background-color: black;
    bottom: 0;
    left: 0;
    transition: width .3s;
}
ul > li:hover::after {
    width: 100%;
}
- table css
.con {
  width: 1000px;
}
.con.table {
  width: 100%;
  border-collapse: collapse;
}
table th,
table td {
  border: 1px black solid;
  text-align: center;
  padding: 10px;
}
table tbody > tr:hover {
  background-color: blue;
}
table tbody > tr > td:hover {
  background-color: yellow;
}

  
    
      
        교시
        월
        화
      
    
    
      
        1교시
        수학
        영어
      
    
  

```


20250825 - 학습일지 -overflow 외
Fri, 22 Aug 2025 06:16:02 GMT

overflow 속성 추가 확인요
DIV{
WIDTH:500PX;
BORDER : 10PX RED SOLID;
white-space:nowrap;

text-overflow : ellipsis;
/*
overflow : hidden;
overflow-x : hidden;
text-overflow : ellipsis;... 처리

*/
}
Emmet 코딩
nav.menumox>ul>li*5>a{href=#}
nav.menumox>ul>li*5>a{href=#}{1차 메뉴구성}+ul>li*3>a{href=#}{2차메뉴구성}코드를 입력하세요
메뉴 따라하기
body, ul, li {
margin:0;
padding:0;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}


.menu-box-1 {
  text-align:center;
}
.menu-box-1 ul {
  background-color:#afafaf;
}
.menu-box-1 > ul {
  display:inline-block;
  padding:0 20px;
  border-radius:10px;
}
.menu-box-1 > ul > li {
  display:inline-block;
}
.menu-box-1 ul > li {
  position:relative;
}
.menu-box-1 ul > li > a {
  display:block;
  padding:10px;
  white-space:nowrap;
}
.menu-box-1 ul > li:hover > a {
  background-color:black;
  color:white;
}
.menu-box-1 > ul ul {
  display:none;
  position:absolute;
  top:100%;
  left:0;
}
.menu-box-1 > ul ul ul {
  left:100%;
  top:0;
}
.menu-box-1 ul > li:hover > ul {
  display:block;
}
.menu-box-1 > ul > li:last-child > ul ul {
  left:auto;
  right:100%;
}

  
    
      1차 메뉴 아이템 1
      
        
          2차 메뉴 아이템 1
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 2
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 3
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 4
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
      
    
    
      1차 메뉴 아이템 2
      
        
          2차 메뉴 아이템 1
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 2
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 3
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 4
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
      
    
    
      1차 메뉴 아이템 3
      
        
          2차 메뉴 아이템 1
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 2
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 3
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 4
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
      
    
    
      1차 메뉴 아이템 4
      
        
          2차 메뉴 아이템 1
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 2
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 3
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
        
          2차 메뉴 아이템 4
          
            3차 메뉴 아이템 1
            3차 메뉴 아이템 2
            3차 메뉴 아이템 3
            3차 메뉴 아이템 4
          
        
      
    
  
코드를 입력하세요
```


20250825 - 학습일지
Tue, 19 Aug 2025 04:12:56 GMT

active 상용 예시body, ul, li{
padding:0px;
margin:0px;
list-style:none;
}
a{
color : inherit;
text-decoration : none;
}
.menu-1{
    color : white;
    text-align:center;
          background: #4b545f;
          background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
}


.menu-1 > ul{
  text-align:center;
  padding : 0 10px;
}
.menu-1 > ul > li{ 
  display:inline-block;
  text-align:center;
}
.menu-1 > ul > li > a {
    padding : 10px;
    display: block;
}
.menu-1 > ul > li:hover > a {
    padding : 10px;
    display: block;
    color : black;
    background-color : white;
}
.menu-1 > ul > li.active > a {
  background-color: white;
  color: black;
}

  
    메뉴 목록 1
    메뉴 목록 2
    메뉴 목록 3
    메뉴 목록 4
  


- 시맨틱 태그
  
    창훈의 웹사이트
    
      홈
      소개
    
  

  
    
      
        최신 블로그 글
        HTML5의 시맨틱 태그에 대해 알아봅시다.
      
      
        추천 글
        
          CSS 기초
          JavaScript 입문
        
      
    
  

  
    © 2025 창훈. 모든 권리 보유.
  


- 3번 답

  
  
    
    
      
      메뉴 아이템 1
    
    
      
      메뉴 아이템 2
    
    
      
      메뉴 아이템 3
    
    
      
      메뉴 아이템 4
    
  

/* 노말라이즈 */
a {
  color:inherit;
  text-decoration:none;
}

/* 커스텀 */
/* 메뉴박스 */
.menu-box {
  text-align:center;
}
/* 메뉴 /
.menu-box > div {
  / 메뉴에는 배경색이 있다. /
  background-color:#dfdfdf;
  / 메뉴는 너비가 최대한 줄어든다. */
  display:inline-block;
  border-radius:5px;
  padding:0 10px;
}
/* 메뉴 아이템 /
.menu-box > div > div {
  / 메뉴 아이템은 너비가 최대한 줄어들고 한줄에 여러개 나온다. */
  display:inline-block;
}
/* 메뉴 아이템 텍스트 /
.menu-box > div > div > div {
  padding:10px;
  / 커서를 포인터로 바꿈 */
  cursor:pointer;
}
/* 마우스가 올려진 메뉴 아이템의 자식인 텍스트 */
.menu-box > div > div:hover > div {
  background-color:black;
  color:white;
}
- normalize 

  항목 1
  항목 2




링크 1
body, ul, li{
  padding:0px;
  margin:0px;
  list-style:none;
}
a {
  color:inherit;
  text-decoration:none;
}
```
- H 태그
```
H[1~6] tag
```
- div 태그
- ul[ol]/li
```

  항목 1
  항목 2
  항목
항목


  항목 1
  항목 2
  항목
항목

```


20250814 - 학습일지 - js/css/html
Thu, 14 Aug 2025 04:58:42 GMT
let, const
Block Scope는 변수나 상수가 중괄호 {}로 둘러싸인 블록 내부에서만 접근 가능하다는 의미.

Before ES6 (2015), JavaScript did not have Block Scope.
JavaScript had Global Scope and Function Scope.
ES6 introduced the two new JavaScript keywords: let and const.
These two keywords provided Block Scope in JavaScriptconst PI;
PI = 3.14159265359; // reference error 


// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"]; // ok
// You can change an element: // ok
cars[0] = "Toyota";
// You can add an element: // ok
cars.push("Audi");
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // ERROR
- const object
// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};
// You can change a property:
car.color = "red";
// You can add a property:
car.owner = "Johnson";
{ //-- from the new block scope
  const car = {type:"Fiat", model:"500", color:"white"};
  car = {type:"Volvo", model:"EX60", color:"red"}    // ERROR
}
// -- from the new block scope
const x = 2;     // Allowed
x = 2;           // Not allowed
var x = 2;       // Not allowed
let x = 2;       // Not allowed
const x = 2;     // Not allowed
{ //- from another new block scoppe
  const x = 2;   // Allowed
  x = 2;         // Not allowed
  var x = 2;     // Not allowed
  let x = 2;     // Not allowed
  const x = 2;   // Not allowed
}
- javascript hositing sample
alert (carName);
const carName = "Volvo"; // ERROR

### JavaScript Arithmetic Operators
![](https://velog.velcdn.com/images/2025-pictoletter/post/01a1dae3-1c11-4ed0-9e22-880f46966d1a/image.png)
### JavaScript Assignment Operators
![](https://velog.velcdn.com/images/2025-pictoletter/post/172748c8-9408-441f-ae92-f87af3d1aacd/image.png)
### JavaScript Comparison Operators
![](https://velog.velcdn.com/images/2025-pictoletter/post/731b1830-54c2-4508-a7b1-37005eca02ae/image.png)

- javascript 삼항연산자(ternary operator) 예
// if-else 구문
let status;
if (age >= 18) {
  status = '성인';
} else {
  status = '미성년자';
}
// 삼항 연산자 사용
let status2 = age >= 18 ? '성인' : '미성년자';
// 중첩 예시
let grade = score >= 90
  ? 'A'
  : score >= 80
    ? 'B'
    : score >= 70
      ? 'C'
      : 'F';
 // 가독성 예시 
// 1. 함수로 분리
function getGrade(score) {
  if (score >= 90) return 'A';
  if (score >= 80) return 'B';
  if (score >= 70) return 'C';
  return 'F';
}
// 2. 배열-반복 활용
const thresholds = [
  { min: 90, grade: 'A' },
  { min: 80, grade: 'B' },
  { min: 70, grade: 'C' },
];
function getGrade2(score) {
  const found = thresholds.find(t => score >= t.min);
  return found ? found.grade : 'F';
}
#### JavaScript Logical Operators
![](https://velog.velcdn.com/images/2025-pictoletter/post/308aaee2-dfcf-4259-a498-451a9a9bd33a/image.png)

#### JavaScript Type Operators
![](https://velog.velcdn.com/images/2025-pictoletter/post/373a3059-f87a-411a-b278-ccca902da16a/image.png)

#### JavaScript Bitwise Operators
![](https://velog.velcdn.com/images/2025-pictoletter/post/92bca01a-1fdc-48e8-8996-bf927fc25776/image.png)


20250813 - 학습일지 - js/css/html
Wed, 13 Aug 2025 09:50:04 GMT
javascript 개요


The var keyword was used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
The var keyword should only be used in code written for older browsers.

JavaScript Identifiers / Names
Identifiers are JavaScript names.
Identifiers are used to name variables and keywords, and functions.
The rules for legal names are the same in most programming languages.
A JavaScript name must begin with:

letter (A-Z or a-z)
A dollar sign ($)
Or an underscore (_)
Subsequent characters may be letters, digits, underscores, or dollar signs.JavaScript uses the Unicode character set.
Constant Array
// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];


// You can change an element:
cars[0] = "Toyota";
// You can add an element:
cars.push("Audi");
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // ERROR
#### document.getElementById






Demo JavaScript in Head

A Paragraph.



 
```
유사참조 : document.getElementById("demo").innerText = "Hello World";

Using console.log()







CSS

  1. hello
  2. hello
  n. hello
  3. hello
  4. hello
  a. hello
  5. hello
  6. hello



section, div{
  background-color: yellowgreen;
  display:inline-block;
}
section > div:nth-child(1){
  color:blue;
}
section > div:nth-of-child(2){
  background-color:blue;
}
section > div:last-child{
  color:green;
}
개념 - block 요소 좌측,가운데,우측 정렬하는 방법
div {
    width:100px;
    height:100px;
    background-color:red;
}
div:nth-child(2) {
    margin-left:auto;
    margin-right:auto;
}
div:nth-child(3) {
    margin-left:auto;    
}
div {
    width:100px;
    height:100px;
    margin-left:0; /* 이 코드는 사실 쓸 필요는 없다. 왜냐하면 원래 0 이니까 */
    background-color:red;
}

div:nth-child(2) {
    background-color:gold;
    margin-left:auto;
    margin-right:auto;
}

div:nth-child(3) {
    background-color:green;
    margin-right:0;
    margin-left:auto;
}

section {
    border:5px dotted gray;
}


20250811 - 학습일지
Mon, 11 Aug 2025 09:49:58 GMT
jpa specification : 동적 검색조건을 생성하는 인터페이스
    private Specification search(String kw) {
        return new Specification<>() {
            private static final long serialVersionUID = 1L;
            @Override
            public Predicate toPredicate(Root q, CriteriaQuery query, CriteriaBuilder cb) {
                query.distinct(true);  // 중복을 제거
                Join u1 = q.join("author", JoinType.LEFT);
                Join a = q.join("answerList", JoinType.LEFT);
                Join u2 = a.join("author", JoinType.LEFT);
                return cb.or(cb.like(q.get("subject"), "%" + kw + "%"), // 제목
                        cb.like(q.get("content"), "%" + kw + "%"),      // 내용
                        cb.like(u1.get("username"), "%" + kw + "%"),    // 질문 작성자
                        cb.like(a.get("content"), "%" + kw + "%"),      // 답변 내용
                        cb.like(u2.get("username"), "%" + kw + "%"));   // 답변 작성자
            }
        };
    }


20250808 - retrun viewName with binding
Fri, 08 Aug 2025 09:47:15 GMT
좋은 질문이에요! return "question_form"처럼 뷰를 다시 렌더링할 때 사용자가 입력한 값이 그대로 남아 있는 이유는 주로 다음과 같은 Spring MVC의 동작 방식과 개발자의 코드 처리 덕분입니다.

🧠 왜 입력값이 유지될까?
입력값이 유지되는 이유는 보통 다음 두 가지 방식 중 하나로 처리되기 때문입니다:

1️⃣ Model에 사용자 입력값을 다시 담아서 뷰에 전달
예를 들어, 사용자가 폼을 제출했는데 권한 문제나 내부 오류로 인해 등록이 실패한 경우, 컨트롤러에서 다음과 같이 처리합니다:
@PostMapping("/question/create")
public String createQuestion(@ModelAttribute QuestionForm questionForm, Model model) {
    if (권한없음 || 내부오류) {
        model.addAttribute("questionForm", questionForm); // 사용자가 입력한 값 유지
        model.addAttribute("errorMessage", "권한이 없습니다.");
        return "question_form"; // 입력값을 포함한 뷰 반환
    }

    // 정상 처리 로직...
}

@ModelAttribute로 받은 questionForm 객체는 사용자의 입력값을 담고 있음
이를 다시 model.addAttribute()로 뷰에 넘기면, 템플릿에서 해당 값을 그대로 출력 가능


2️⃣ Thymeleaf나 JSP에서 폼 필드에 바인딩된 값 출력
템플릿에서 다음과 같이 작성되어 있다면, questionForm의 필드 값이 자동으로 채워집니다:



th:value나 th:text는 모델에 담긴 객체의 값을 그대로 출력
따라서 사용자가 입력한 값이 사라지지 않고 유지됨


💡 추가 팁: BindingResult를 활용한 검증 오류 처리
입력값 검증 실패 시에도 입력값을 유지하려면 BindingResult를 함께 사용합니다:
@PostMapping("/question/create")
public String createQuestion(@Valid QuestionForm questionForm, BindingResult bindingResult) {
    if (bindingResult.hasErrors()) {
        return "question_form"; // 검증 실패 시 입력값 유지
    }

    // 등록 처리...
}
Spring은 BindingResult가 오류를 포함하고 있을 경우, 자동으로 입력값을 다시 뷰에 전달해줍니다.

✅ 요약



이유
설명



Model에 입력값을 다시 담음
컨트롤러에서 사용자 입력값을 뷰로 전달


템플릿에서 값 바인딩
${questionForm.title} 등으로 입력값 출력


BindingResult 사용
검증 오류 시 자동으로 값 유지



혹시 특정 상황에서 값이 사라지는 문제가 있다면, 코드 예시를 보여주시면 함께 분석해볼 수도 있어요!



20250808 - 학습일지 : Annotation
Fri, 08 Aug 2025 05:01:13 GMT

Annotation 을 "주석"이라고 번역하기에는 문제가 있음
TTA에서는 "원시데이터를 보강하는 프로세스. 정적 또는 동적 객체, 수행 작업, 환경조건과 같은 원시데이터를 설명하는 메타데이터를 포함"이라고 설명하고 있으나 조금 많이 부족한 설명을 참조한 것 같음(출처 : 단체표준 TTAK.KO-10.1498-Part1 자율주행 AI 학습용 데이터 참조 모델 - 제1부: 일반 요구사항)

1. @RequiredArgsConstructor (Lombok)

Lombok에서 제공하는 어노테이션 
클래스의 final 필드 또는 @NonNull 필드만을 매개변수로 받는 생성자를 자동으로 생성
불변 객체 설계와 Spring의 생성자 기반 의존성 주입에 매우 유용(먼 개뼉다구 같은 소리야).
적용대상
final 필드
@NonNull이 붙은 필드
즉, 필수로 초기화되어야 하는 필드들만 생성자의 매개변수로 포함.@RequiredArgsConstructor
public class UserService {
private final UserRepository userRepository;
private final PasswordEncoder passwordEncoder;
private String optionalField;
}
// 위 코드는 다음과 같은 생성자를 자동으로 생성한다.
public UserService(UserRepository userRepository, PasswordEncoder passwordEncoder) {
this.userRepository = userRepository;
this.passwordEncoder = passwordEncoder;
}
@Null 필드 포함@RequiredArgsConstructor
public class EmailService {
@NonNull
private String smtpServer;
private String senderName;
}




public EmailService(String smtpServer) {
    if (smtpServer == null) {
        throw new NullPointerException("smtpServer is marked non-null but is null");
    }
    this.smtpServer = smtpServer;
}
```



20250807 - 학습일지
Thu, 07 Aug 2025 09:33:01 GMT
form 방식 로그인과 로그아웃을 위한 SecurityConfig.java 등록
Spring Security http.formLogin() 메소드를 이용한 설정
 @Bean
    SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .authorizeHttpRequests((authorizeHttpRequests) -> authorizeHttpRequests
                        .requestMatchers(new AntPathRequestMatcher("/**")).permitAll())
                .csrf((csrf) -> csrf
                        .ignoringRequestMatchers(new AntPathRequestMatcher("/h2-console/**")))
                .headers((headers) -> headers
                        .addHeaderWriter(new XFrameOptionsHeaderWriter(
                                XFrameOptionsHeaderWriter.XFrameOptionsMode.SAMEORIGIN)))
                .formLogin((formLogin) -> formLogin
                        .loginPage("/user/login")
                        .defaultSuccessUrl("/"))
                .logout((logout) -> logout
                        .logoutRequestMatcher(new AntPathRequestMatcher("/user/logout"))
                        .logoutSuccessUrl("/")
                        .invalidateHttpSession(true))
        ;
        return http.build();
    }

    @Bean
    AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception {
        return authenticationConfiguration.getAuthenticationManager();
    }

람다식 미적용http.formLogin()
  .loginPage("/user/login")    //
  .defaultSuccessUrl("/");
람다식 적용    http.formLogin(formLogin -> 
  formLogin
  .loginPage("/user/login")               // 커스텀 로그인 페이지
  .loginProcessingUrl("/user/doLogin")    // 로그인 처리 URL
  .usernameParameter("email")             // 사용자명 파라미터 이름 변경
  .passwordParameter("passwd")            // 비밀번호 파라미터 이름 변경
  .defaultSuccessUrl("/dashboard")        // 로그인 성공 시 이동 경로
  .failureUrl("/user/login?error=true")   // 로그인 실패 시 이동 경로
);

안 쓰는 경우?**


OAuth2 로그인 (http.oauth2Login())
JWT 기반 인증 (필터 커스터마이징)
API 서버에서 토큰 기반 인증만 사용하는 경우

Spring Security http.formLogout() 메소드를 이용한 설정

logoutRequestMatcher : 로그아웃을 처리할 URL을 지정합니다. 기본은 POST /logout이지만, 여기서는 GET /user/logout도 허용하기 위해 AntPathRequestMatcher를 사용
logoutSuccessUrl("/") : 로그아웃 성공 후 리다이렉트할 경로입니다. 보통 홈이나 로그인 페이지로 설정
invalidateHttpSession(true) : 로그아웃 시 현재 HTTP 세션을 무효화합니다. 즉, 세션에 저장된 사용자 정보나 인증 정보가 모두 삭제..logout((logout) -> logout
  .logoutRequestMatcher(new AntPathRequestMatcher("/user/logout")) // get/post 방식 로그아웃 처리
  .logoutSuccessUrl("/")       //로그아웃 처리 후 url
  .invalidateHttpSession(true) // 로그아웃 후 세션 파기
  .deleteCookies("JSESSIONID")  // 쿠키 내 세션정보 파기
)
@Bean 생성

Spring에서 @Bean을 사용하는 이유는 객체를 직접 생성하지 않고, Spring이 대신 관리하도록 하기 위해서입니다. 이걸 "의존성 주입(DI, Dependency Injection)"이라고 함.
관련 학습사항 : @Component, @Service, @Configuration 등

id/password 불일치 처리
        
            
                사용자ID 또는 비밀번호를 확인해 주세요.
            
        

로그인 폼 양식과 같이 출력하는 경우. login?error 형식의 파라미디터 값이 전달되는 경우에만 화면출력됨. 로그인/아웃 상태 메뉴바 토글적용
      
          로그인
          로그아웃
      
Thymeleaf + Spring Security를 함께 사용할 때 로그인/로그아웃 링크를 사용자 ROLE 인증 상태에 따라 조건부로 보여주는 방식.SecurityConfig.java - 보안설정과 DB조회
User Repository 내 사용자 정보 찾기 기능 추가
package com.mysite.sbb.user;


import java.util.Optional;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository {
    Optional findByusername(String username);
}
- findByusername 메소드를 추가하여 SiteUser 정보 확인

#### com.mysite.sbb.user 패키지에 UserRole.java를 추가하여 관리자 유형관리
package com.mysite.sbb.user;
import lombok.Getter;
@Getter
public enum UserRole {
    ADMIN("ROLE_ADMIN"),
    USER("ROLE_USER");
UserRole(String value) {
    this.value = value;
}

private String value;
}
enum 열거 자료형을 이용하여 ADMIN, USRER 라는 상수를 등록하고 각각의 값을 부여. 이때 ROLE_ 이라는 접두사를 반드시 적용. @Setter가 없는 이유는 상수 선언이기 때문

#### UserSecurityService 서비스 생성 
package com.mysite.sbb.user;
import java.util.ArrayList;
import java.util.List;
import java.util.Optional;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;
import lombok.RequiredArgsConstructor;
@RequiredArgsConstructor
@Service
public class UserSecurityService implements UserDetailsService {
private final UserRepository userRepository;

@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
    Optional _siteUser = this.userRepository.findByusername(username);
    if (_siteUser.isEmpty()) {
        throw new UsernameNotFoundException("사용자를 찾을수 없습니다.");
    }
    SiteUser siteUser = _siteUser.get();
    List authorities = new ArrayList<>();
    if ("admin".equals(username)) {
        authorities.add(new SimpleGrantedAuthority(UserRole.ADMIN.getValue()));
    } else {
        authorities.add(new SimpleGrantedAuthority(UserRole.USER.getValue()));
    }
    return new User(siteUser.getUsername(), siteUser.getPassword(), authorities);
}
}
- @Override 적용 이유는 기존 메소드를 수정 사용하기 위해 적용
-  스프링 시큐리티가 로그인 시 사용할 UserSecurityService는 스프링 시큐리티가 제공하는 UserDetailsService 인터페이스를 구현(implements)해야 한다. 스프링 시큐리티의 UserDetailsService는 loadUserByUsername 메서드를 구현하도록 강제하는 인터페이스이다. loadUserByUsername 메서드는 사용자명(username)으로 스프링 시큐리티의 사용자(User) 객체를 조회하여 리턴하는 메서드. 사용자정보를 DB에서 조회한 이후 반환하는 기본값은 "UserDetails" 객체로서 Spring Security가 인증에 필요한 정보를 가지고 있음
![](https://velog.velcdn.com/images/2025-pictoletter/post/979cde7e-ae0b-4898-bc28-bc795f9509b7/image.png)
// 일반적 적용단계
@Service // 서비스계층임을 명시하면서 Spring이 자동으로 Bean에 등록하고 의존성 주입 대상으로 등록하기 위해 사용
public class CustomUserDetailsService implements UserDetailsService {
private final UserRepository userRepository;

public CustomUserDetailsService(UserRepository userRepository) {
    this.userRepository = userRepository;
}

@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
    User user = userRepository.findByUsername(username)
        .orElseThrow(() -> new UsernameNotFoundException("사용자를 찾을 수 없습니다: " + username));

    return new org.springframework.security.core.userdetails.User(
        user.getUsername(),
        user.getPassword(),
        getAuthorities(user)
    );
}

private Collection getAuthorities(User user) {
    return List.of(new SimpleGrantedAuthority("ROLE_" + user.getRole()));
}
}
```



20250805 - 학습일지
Tue, 05 Aug 2025 09:48:37 GMT
레포지토리(Repository)는 일반적으로 데이터 접근 계층에서 사용되는 인터페이스로, 데이터베이스와 상호작용하며 CRUD(Create, Read, Update, Delete) 연산을 수행합니다. Spring Data JPA를 사용하면 JpaRepository 인터페이스를 상속받아 기본적인 CRUD 메소드들을 자동으로 사용할 수 있습니다. 추가적으로 메소드 이름만으로 쿼리를 생성하거나, @Query 어노테이션을 사용하여 직접 쿼리를 정의할 수도 있습니다. 
Spring Data JPA 기본 제공 메소드:
save(entity): 엔티티 저장 또는 업데이트.
findById(id): ID로 엔티티 조회. 반환 타입은 Optional.
findAll(): 모든 엔티티 조회.
existsById(id): ID로 엔티티 존재 여부 확인.
deleteById(id): ID로 엔티티 삭제.
delete(entity): 엔티티 삭제.
deleteAll(): 모든 엔티티 삭제.
count(): 엔티티 개수 조회.
메소드 이름으로 쿼리 생성:
find...By, read...By, query...By, count...By, get...By 등의 접두사와 조건절을 조합하여 메소드 이름을 정의하면, 스프링 데이터 JPA가 자동으로 해당 쿼리를 생성합니다. 예를 들어, findByUsername(String username)은 username으로 엔티티를 조회하는 쿼리를 생성합니다.
@Query 어노테이션 사용:
@Query 어노테이션을 사용하여 JPQL 또는 네이티브 쿼리를 직접 정의할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다.
@Query("SELECT u FROM User u WHERE u.email = ?1")
User findByEmail(String email);


20250805 - 학습일지
Tue, 05 Aug 2025 06:44:13 GMT
스프링시큐리티 적용
의존성 추가
(... 생략 ...)

dependencies {
    (... 생략 ...)
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'
}

(... 생략 ...)

스프링시큐리티와 스프링부츠 버젼에 맞추어 사용되어야 함

root 폴더 내에 SecurityConfig.java 추가

SecurityConfig.java를 추가하기 전에는 접근시 아래의 화면이 전시된다

이때 아래의 생성 비밀번호를 입력하여 접근가능하다.


package com.mysite.sbb;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
//import org.springframework.context.annotation.*;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
// import org.springframework.*;

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    @Bean
    SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .authorizeHttpRequests((authorizeHttpRequests) -> authorizeHttpRequests
                        .requestMatchers(new AntPathRequestMatcher("/**")).permitAll())
                .csrf((csrf) -> csrf
                        .ignoringRequestMatchers(new AntPathRequestMatcher("/h2-console/**")))
        ;
        return http.build();
    }
}

AntPathRequestMatcher("/**").permitAll() 구문은 모든 root directory 에 대한 접근을 허가한 내용이다.CSRF(Cross-Site Request Forgery) 검증.
.csrf((csrf) -> csrf
                      .ignoringRequestMatchers(new AntPathRequestMatcher("/h2-console/**")))
X-Frame-Options는 웹 페이지가 iframe, frame, object 태그 안에서 렌더링될 수 있는지를 제어하는 HTTP 응답 헤더입니다. 주로 클릭재킹(clickjacking) 공격을 방지하기 위해 사용됩니다.
              .headers((headers) -> headers
                      .addHeaderWriter(new XFrameOptionsHeaderWriter(
                              XFrameOptionsHeaderWriter.XFrameOptionsMode.SAMEORIGIN)))
언제 어떤 옵션을 써야 할까?

공개 웹사이트: DENY 권장
내부 시스템에서 iframe 사용: SAMEORIGIN
특정 외부 도메인에서 iframe 허용: ALLOW-FROM은 비추천 → 대신 Content-Security-Policy: frame-ancestors 사용




20250801 - 학습일지 - 질문등록화면 만들기
Tue, 05 Aug 2025 02:22:09 GMT
question_list.html에서 질문등록하기 버튼추가


    
        (... 생략 ...)
    
    질문 등록하기

QuestionController 클래스에 /question/create Mapping 추가
public class QuestionController {
    (... 생략 ...)
    @GetMapping("/create")
    public String questionCreate() {
        return "question_form";
    }
}

질문 등록하기은 get method를 수신하기 때문에 @GetMapping("/create")를 선언하고 return "question_form"; 을 통해 템플릿을 출력한다.
= 현재 http://localhost:8080/question/create 상태임Question 등록 양식 만들기

templates 폴더에 question_form,html을 만들어 아래와 같이 등록

  질문등록
  
      
          제목
          
      
      
          내용
          
      
      
  


layout.html 템플릿 내역 : 


  <... 생략 ...>






Question 등록요청 처리 : QuestionController 수정

 버튼은 POST방식으로 데이터를 전송하기 때문에 이를 수신할 수 있도록 변경한다.package com.mysite.sbb.question;


(... 생략 ...)
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
(... 생략 ...)
public class QuestionController {
(... 생략 ...)

@GetMapping("/create")
public String questionCreate() {
    return "question_form";
}

@PostMapping("/create")
public String questionCreate(@RequestParam(value="subject") String subject, @RequestParam(value="content") String content) {

    this.questionService.create(subject, content); // 저장 
    return "redirect:/question/list"; // 질문 저장후 질문목록으로 이동
}
}
- POST와 REQUEST PARAMETER를 인식할 수있는 크래스를 IMPORT 하는 선언이 동시에 필요하다.
  - @GetMapping("/create")은 최초 입력화면을 전시하기 위함이고 @PostMapping("/create")은 데이터를 등록하기 위한 선언이다.
  - 질문 저장후 질문목록으로 이동하기 위해 return "redirect:/question/list"; 가 설정되어 있다.
- QuestionService 클래스의 create 메서드를 호출, subject, content를 저장할 수 있도록 처리 
- POST 방식으로 전송되는 입력결과를 처리하기 위해 선언된 questionCreate 메소드에는 subject, content 입력값을 매개변수로 선언되어 있다.

#### 수정결과 등록 : QuestionService.class 
(... 생략 ...)
import java.time.LocalDateTime;
(... 생략 ...)
public class QuestionService {
(... 생략 ...)

public void create(String subject, String content) {
    Question q = new Question();
    q.setSubject(subject);
    q.setContent(content);
    q.setCreateDate(LocalDateTime.now());
    this.questionRepository.save(q);
}
}
- QuestionService 클래스에 subject, content를 매개변수로 받아 Jpa save() 메소드를 호출하여 DB에 저장가능

### form & Spring Boot Validation
- build.grandle 내에 dependencies 추가
(... 생략 ...)
dependencies {
    (... 생략 ...)
    implementation 'org.springframework.boot:spring-boot-starter-validation'
}
(... 생략 ...)
- Spring Boot Validation 라이브러리 내 사용가능 내역
![](https://velog.velcdn.com/images/2025-pictoletter/post/fa192b79-e2ab-48e7-9392-4cd5a33e77fc/image.png)
#### QuestionForm.class 등록
- SprintBoot validation 기능을 사용하기 위해서는 정합성 검증 대상 form element가 class롤 정의되어야 한다. : QuestionForm.java
package com.mysite.sbb.question;
import jakarta.validation.constraints.NotEmpty;
import jakarta.validation.constraints.Size;
import lombok.Getter;
import lombok.Setter;
@Getter
@Setter
public class QuestionForm {
    @NotEmpty(message="제목은 필수항목입니다.")
    @Size(max=200)
    private String subject;
@NotEmpty(message="내용은 필수항목입니다.")
private String content;
}
- private String subject, content 상단에 선언된 @NotEmpty()는 필수항목을 표시함. @NotNull, @NotEmpty, @NotBlank을 구분하시오
- @Size(min, max, and more) 등을 제어할 수 있다.
사용예시 : @Size(min = 5, max = 20, message = "Name must be between 5 and 20 characters")

#### QuestionController.java 
- form validation을 수행하기 위해서 단순히 파라미터 값만을 수신하는 부분을 변경하는 것에서 출발한다.
(... 생략 ...)
import jakarta.validation.Valid;
import org.springframework.validation.BindingResult;
(... 생략 ...)
public class QuestionController {
(... 생략 ...)

@PostMapping("/create")
public String questionCreate(@Valid QuestionForm questionForm, BindingResult bindingResult) {
    if (bindingResult.hasErrors()) {
        return "question_form";
    }
    this.questionService.create(questionForm.getSubject(), questionForm.getContent());
    return "redirect:/question/list";
}
}
- 기존 QuestionControll 클래스의 메소드인 public String questionCreate의 파라미터 정의가 (@Valid QuestionForm questionForm, BindingResult bindingResult)으로 변경되어 있다.
- BindingResult 매개변수는 항상 @Valid 매개변수 바로 뒤에 위치해야 한다. 만약 두 매개변수의 위치가 정확하지 않다면 @Valid만 적용되어 입력값 검증 실패 시 400 오류가 발생한다.

#### question_form.html : validation 결과 반영

#### QuestionForm.java
#### 실제 검증 절차_텍스트_


20250801 - 학습일지 - Thymeleaf Page Layouts
Fri, 01 Aug 2025 05:47:25 GMT
Thymeleaf Page Layouts
layout.html - content body layout 적용예시



    
    
    
    Title
    


  
  
  


question_detail.html


  
  
  
      
          
          
              
                  
              
          
      
  
  
  
  
  
      
          
          
              
                  
              
          
      
  
  
  
  
      
      
  

question_list.html


  
      
      
          번호
          제목
          작성일시
      
      
      
      
          
          
              
          
          
      
      
  






20250731 - SpringBootTest 재정리
Fri, 01 Aug 2025 05:18:10 GMT
1. @SpringBootTest 으로 시작
@SpringBootTest
class SbbApplicationTests {

    @Autowired
    private QuestionRepository questionRepository; // 생성자 
2. testJpa
    @Test
    void testJpa() {
        Question q1 = new Question(); // Question class 의 q1 인스턴스 생성
        q1.setSubject("sbb가 무엇인가요?");             // question entity내 신규 subject 값 지정
        q1.setContent("sbb에 대해서 알고 싶습니다.");  // question entity내 신규 content 값 지정
        q1.setCreateDate(LocalDateTime.now());       // question entity내 신규 createDate 값 지정
        this.questionRepository.save(q1);  //         insert into question entity

        Question q2 = new Question();
        q2.setSubject("스프링부트 모델 질문입니다.");
        q2.setContent("id는 자동으로 생성되나요?");
        q2.setCreateDate(LocalDateTime.now());
        this.questionRepository.save(q2);  // 두번째 질문 저장
        /*
            questionRepository는 JpaRepository를 상속받은 인터페이스로, 
            save() 메서드를 통해 Question 객체 q1을 데이터베이스에 저장합니다.

            JpaRepository는 Spring Data JPA에서 제공하는 인터페이스로, 
            기본적인 CRUD 메서드들을 이미 정의하고 있습니다.
        */    
    }

@SpringBootTest는 Spring Boot에서 통합 테스트를 할 때 사용하는 어노테이션.  테스트 클래스가 실제 애플리케이션처럼 동작하는 환경에서 실행
자주 함께 쓰는 어노테이션

@Transactional : 테스트 후 DB 롤백
@Test : JUnit 테스트 메서드
@Autowired : 테스트 대상 주입


@Autowired : pring 프레임워크에서 의존성(Dependency) 주입을 위해 사용하는 어노테이션. Spring이 관리하는 빈(Bean) 중에서 타입에 맞는 객체를 자동으로 찾아 등록.

@Test : JUnit 프레임워크에서 테스트 메서드임을 표시하기 위해 사용되는 어노테이션. 선언된 다음 메서드는 테스트 실행 시 자동으로 호출되어 검증 로직 수행.


3. QuestionRepository 인터페이스
@Repository
public interface QuestionRepository extends JpaRepository {  // id 자료형을 선언
    Question findBySubject(String subject);
    Question findBySubjectAndContent(String subject, String content);
    List findBySubjectLike(String subject);
}

@Repository 인터페이스가 Spring의 Repository 컴포넌트임을 선언. 생략해도 자동으로 인식되지만 명시적 등록권고.
extends JpaRepository : Question 엔티티를 대상으로 하고, 기본 키(id)의 자료형은 Integer임을 명시.
Question findBySubject(String subject) : 엔터티 내 subject 값이 정확히 일치하는 Question을 하나 반환.  
** Question findBySubjectAndContent(String subject, String content);** : subject와 content가 모두 일치하는 Question을 하나 반환
List findBySubjectLike(String subject) : subject가 특정 패턴과 유사한 Question 목록을 반환합니다. 예: "Spring%" → "Spring Boot", "Spring Data" 등

4. Quesition 클래스
      Question q1 = new Question();
@Entity // db
@Getter
@Setter
public class Question {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    @Column(length = 200)
    private String subject;

    @Column(columnDefinition = "TEXT")
    private String content;

    private LocalDateTime createDate;

    // @OneToMany(mappedBy = "question", cascade = CascadeType.REMOVE)
    @OneToMany(mappedBy = "question", cascade = CascadeType.REMOVE, fetch = FetchType.EAGER)
    private List answerList;
}

@Id : JPA에서 @Id는 엔티티의 기본 키(Primary Key) 필드를 지정하는 어노테이션입니다. 이 어노테이션이 붙은 필드는 데이터베이스 테이블의 PK 컬럼과 매핑.
@GeneratedValue는 JPA에서 엔티티의 @Id 필드에 대한 키 생성 방식을 지정하는 어노테이션. strategy = GenerationType.IDENTITY를 사용하면 데이터베이스가 제공하는 자동 증가(Identity) 컬럼 기능을 통해 기본 키 값을 생
@OneToMany(mappedBy = "question", cascade = CascadeType.REMOVE, fetch = FetchType.EAGER) 
@OneToMany는 RDB에서 1:다 FK 관계를 설정을 위한 선언임
mappedBy = "question" 은 현재 entity.question 이 설정 대상, 다시 말해서 Answer 내에 question 컬럼이 존재하며, Answer.question은 Question.quesiont의 FK임을 명시. 
하단에 위치한 private List answerList; 선언에서 Answer 엔터티에 다수의 관계가 있음을 설명하고 있다. 



5. testJpa2()
    @Test
    void testJpa2() {
        List all = this.questionRepository.findAll();
        assertEquals(2, all.size());

        Question q = all.get(0);
        assertEquals("sbb가 무엇인가요?", q.getSubject());
    }

@Test : Junit 테스트 선언
findAll()은 JpaRepository가 제공하는 기본 메서드. List all = this.questionRepository.findAll() 은 question entity에 모든 정보를 조회한다는 뜻
*assertEquals(2, all.size()); *조회된 Question 객체의 수가 2개인지 확인합니다. 아닌 경우 오류 발생.
Question q = all.get(0); : Question 클래스 객체를 선언하여 db에서 가져온 객체 리스트에서 1 번째 값들을 부여




20250731 - 학습일지
Thu, 31 Jul 2025 09:49:36 GMT
static에 등록한 css 파일연결

staict 폴더에 등록한 경우
외부 링크를 이용한 경우

Answer 등록

AnswerController 클래스에서 POST Request를 수신하기 위해 RequestMapping, RequiredArgsConstructor, Controller annotation이 선언됨

자료 수신과 저장을 위한 questionService, answerService 객체 선언 
@RequestMapping("/answer")
@RequiredArgsConstructor
@Controller
public class AnswerController {
  private final QuestionService questionService;
  private final AnswerService answerService;

  @PostMapping("/create/{id}")
  // @ResponseBody
  public String createAnswer(Model model, @PathVariable("id") Integer id, @RequestParam(value="content") String content) {
      Question question = this.questionService.getQuestion(id);
      this.answerService.create(question, content);
      return String.format("redirect:/question/detail/%s", id);

  }
}
form action="/answer/create/3" method="post" 형식으로 정의된 client 로 부터 submit이 실행되면 createAnswer 메소드가 실행되면서 Model model 매개변수를 통해 컨트롤러에서 view 또는 service 전달할 데이터들을 객체화 함(스프링 MVC)

@PathVariable("id") Integer id 는 URL PATH로 정의 된 값(위 예시에 따르면 3)에 대한 정의

@RequestParam(value="content") String content 는 FORM DOM에서 선언된 POST.REQUEST에 포함된 객체 content를 처리하기 위해 매개변수를 정의 함. (textarea name="content")

Question question = this.questionService.getQuestion(id);  QuestionService 크래스에 선언된 public Question getQuestion(Integer id) 함수를 호출하여 question 인스턴스에 관련 값들을 db에서 가져옴

this.answerService.create(question, content); AnswerService 클래스 내에 선언된 create 메소드를 호출하여 그 결과를 db에 저장함 answerRepository.save(answer);

ToDolist.. should be continued... 
@RequiredArgsConstructor
@Service
public class AnswerService {
  private final AnswerRepository answerRepository;

  public void create(Question question, String content) {
      Answer answer = new Answer();
      answer.setContent(content);
      answer.setCreateDate(LocalDateTime.now());
      answer.setQuestion(question);
      this.answerRepository.save(answer);
  }
}
FORM : POST

 
 

th:action은 Thymeleaf에서 form의 action 속성을 설정할 때 사용하는 속성. 

일반적인 HTML에서는 action="/answer/create"처럼 경로를 지정하지만 Thymeleaf에서는 동적으로 값을 넣어야 할 때 ${...} 문법을 사용.

@{...}는 URL을 생성하는 Thymeleaf 문법


URL Perfix
import org.springframework.web.bind.annotation.RequestMapping; // url prefix

@RequestMapping("/question") // url prefix
... 중량 ----
    //@GetMapping("/question/list")
    @GetMapping("/list")    // url perfix
    public String list(Model model) {
        List questionList = this.questionService.getList();
        model.addAttribute("questionList", questionList);
        return "question_list";
    }

    //@GetMapping("/question/list")
    @GetMapping("/list")    // url perfix
    public String list(Model model) {
        List questionList = this.questionService.getList();
        model.addAttribute("questionList", questionList);
        return "question_list";
    }    
QuestionService
HTTP 응답 코드
200 : 요청이 정상적으로 처리(SUCCESS)
300 : 요청이 REDIRECT 됨
400 : 클라이언트 요청에 문제가 있을 때
500 : 서버 사이트 문제 시
1xx (Informational):
Indicates that the server has received the request and is continuing the process. Examples include 100 Continue and 101 Switching Protocols. 
2xx (Successful):
Indicates that the request was successfully received, understood, and accepted. Examples include 200 OK, 201 Created, and 204 No Content.
3xx (Redirection):
Indicates that further action needs to be taken by the client to complete the request, usually involving a redirection to a different URL. Examples include 301 Moved Permanently and 302 Found.
4xx (Client Error):
Indicates that the client's request contains an error and cannot be fulfilled by the server. Examples include 400 Bad Request, 401 Unauthorized, 403 Forbidden, and 404 Not Found. 
5xx (Server Error):
Indicates that the server failed to fulfill a valid request due to an issue on the server's side. Examples include 500 Internal Server Error, 502 Bad Gateway, and 503 Service Unavailable.



20250730 학습일지
Wed, 30 Jul 2025 09:49:42 GMT
Templates을 적용하기 위한 Controller 구현
@RequiredArgsConstructor
@Controller
public class QuestionController {
    private final QuestionRepository questionRepository; 

    @GetMapping("/question/list")
    public String list(Model model) { //org.springframework.ui.Model;
        List questionList = this.questionRepository.findAll();
        model.addAttribute("questionList", questionList);
        return "question_list";
    }
}
@RequiredArgsConstructor : Lombok 라이브러리에서 제공하는 어노테이션.필수 인자를 받는 생성자를 자동으로 만들어주는 기능으로 하단의 private final QuestionRepository questionRepository; 설정에 관여하고 있다. 관련 변수/값을 생성하거나 가져오는 과정을 생략할 수 있다.
떠라서 클래스 내에 import lombok.RequiredArgsConstructor; 이 먼저 선언되어야 한다.
QuestionRepository class 파일에는 @Repository가 선언되어 있어야 하며 관련 변수 특성이 등록되어 있다.
Model model :  Spring MVC에서 컨트롤러와 뷰 사이의 데이터를 전달하는 역할.

Spring에서 제공하는 인터페이스.(import org.springframework.ui.Model;)

컨트롤러 → JSP(또는 템플릿 뷰) 로 데이터를 실어서 보내주는 바구니 같은 역할.

내부적으로 Map처럼 key-value 구조로 동작
  List questionList = this.questionRepository.findAll();
  model.addAttribute("questionList", questionList);
  return "question_list";
클라이언트가 /question/list 요청

list() 메서드가 실행됨

questionRepository.findAll()로 데이터 조회

model.addAttribute()로 뷰에 데이터 전달

뷰 템플릿 question_list.html


Templates 을 이용한 view 구현

    
    
        제목
        내용
        생성일시
    
    
    
    
        
            [[${questionList[0].subject}]]
        
        
            [[${questionList[0].content}]]
        
        
            [[${questionList[0].createDate}]]
        
    
    
        
        
        
    
    



    
    
        ID
        제목
        내용
        생성일시
    
    
    
    
        
        
        
        
    
    
REDIRECT TO THE ROOT DIRECTORY WITH SPRINGBOOT
    @GetMapping("/")
    public String root() {
        return "redirect:/question/list";
    }
@ GetMapping annotation을 이용하여 사용자가 Root directory 로 접근했을 때 [site url : localhost]/question/list 으로 포워딩하게 하고 @GetMapping("question/list")가 선언된 곳의 return 값을 실행하게 함. 



20250728 - JAP에서 데이터 로딩
Mon, 28 Jul 2025 09:50:17 GMT
JPA(Java Persisitence API 는 자바의 객체관계맵핑(ORM, Object-Relational Mapping) 기술표준을 정의하는 인터페이스 모음으로 DB에 관련된 CRUD를 메소드를 통해 객체지향적 관리를 하기 위해 고안된 것이다. 
_ * JAP(Java Application Platform)에서 DB 로딩 방식은 일반적으로 JDBC, JNDI(Java Naming and Directory Interface), DBCP(Database Connection Pool), 그리고 JPA를 통해 이루어진다._
 엔티티가 연관 관계를 맺은 다른 엔티티를 언제 조회할지 결정하는 전략이 바로 로딩(fetch) 방식입니다.

EAGER: 대상 엔티티를 조회할 때 연관된 모든 엔티티를 즉시 함께 로드합니다.
LAZY: 실제로 연관 데이터를 사용할 때까지 로딩을 지연해 필요 시점에 조회합니다

JPA내 fetch default

필요하다면 아래와 같이 명시적으로 변경할 수 있다.
@OneToOne(fetch = FetchType.LAZY)
private Profile profile;

@ManyToOne(fetch = FetchType.EAGER)
private Team team;
사용예시
@Entity
public class Order {
  @Id @GeneratedValue
  private Long id;

  @OneToMany(mappedBy = "order", fetch = FetchType.LAZY) // LAZY 또는 EAGER 지정
  private List items = new ArrayList<>();
}

@Entity
public class OrderItem {
  @Id @GeneratedValue
  private Long id;

  @ManyToOne(fetch = FetchType.LAZY)
  private Order order;

  private String productName;
}
// 1) EAGER
List orders = em.createQuery("SELECT o FROM Order o", Order.class)
                       .getResultList();
 Order → OrderItem 관계를 fetch = FetchType.EAGER로 설정했다고 상상 -- 예시를 다시 찾자



20250728 - 학습일지
Mon, 28 Jul 2025 08:47:00 GMT
테스트 코드에서의 주의점
@Transactional을 테스트 메서드에 직접 선언해야 하는 이유는 다음과 같습니다:

테스트 클래스는 일반적으로 @SpringBootTest로 실행되며, 내부적으로 프록시 기반 AOP가 적용됩니다.
하지만 JUnit의 테스트 메서드는 프록시 대상이 아니기 때문에, 클래스에 @Transactional을 선언해도 메서드에 직접 선언하지 않으면 적용되지 않을 수 있습니다.
특히 @Transactional을 클래스에 선언하고 @Test 메서드에서 DB 접근을 할 경우, 트랜잭션이 제대로 적용되지 않아 LazyInitializationException이나 rollback이 되지 않는 문제가 발생할 수 있어요.
테스트에서 트랜잭션을 적용하고 싶다면 테스트 메서드에 직접 @Transactional을 붙이는 것이 안전

또는 @OneToMany 선언된 곳을 아래와 같이 수정
@OneToMany(mappedBy = "question", cascade = CascadeType.REMOVE)
@OneToMany(mappedBy = "question", cascade = CascadeType.REMOVE, fetch = FetchType.EAGER)
Spring에서 말하는 Proxy Mode는
AOP(Aspect-Oriented Programming)나 트랜잭션 처리 같은 기능을 적용하기 위해 프록시 객체를 생성하는 방식을 의미해요. 이 프록시는 실제 객체를 감싸서 메서드 호출을 가로채고, 필요한 부가 기능을 수행한 뒤 실제 메서드를 실행하게 됩니다. 

Proxy Mode가 사용되는 대표적인 예

@Transactional: 트랜잭션을 자동으로 관리하기 위해 프록시를 생성
@Scope(proxyMode = ScopedProxyMode.TARGET_CLASS): 스코프가 다른 빈을 주입할 때 프록시를 사용
@EnableAspectJAutoProxy(proxyTargetClass = true): AOP 적용 시 CGLIB 방식 강제

테스트 메서드에서의 프록시 한계
테스트 메서드는 일반적으로 프록시 객체로 감싸지지 않기 때문에, @Transactional 같은 어노테이션이 제대로 작동하지 않을 수 있어요. 그래서 테스트에서는 직접 메서드에 @Transactional을 붙여야 트랜잭션이 적용됩니다.
🌱 “Spring이 QuestionRepository 타입의 빈(bean)을 찾아...”란?
스프링 프레임워크는 의존성 주입(Dependency Injection) 을 통해 필요한 객체들을 자동으로 주입해줘요. 이 과정에서 “빈(bean)”이라는 단어가 아주 중요한데요:
빈(bean)이란?

스프링 컨테이너(Spring Container) 가 관리하는 객체를 뜻합니다.

우리가 @Component, @Service, @Repository, @Controller 등의 어노테이션을 붙이면 해당 클래스는 빈으로 등록됩니다.

빈은 스프링이 생성하고 필요할 때 꺼내서 사용하는 “등록된 객체” 라고 볼 수 있어요.
QuestionRepository는 어떻게 빈이 됐을까
@Repository
public interface QuestionRepository extends JpaRepository { }
@Repository 어노테이션 또는 JpaRepository를 확장했다는 사실 때문에 스프링 부트는 자동으로 이 인터페이스를 구현한 객체를 만들고 빈으로 등록해요. (@EnableJpaRepositories가 내장되어 있음)
그래서 @Autowired는 뭘 하는가

이 코드가 실행되면 스프링은 컨테이너 안을 뒤져서 QuestionRepository라는 타입을 가진 빈이 있는지 확인합니다.

빈을 발견하면 해당 필드에 자동으로 주입해주는 거예요!
즉, 개발자가 new QuestionRepository()로 객체를 만들 필요 없이, 스프링이 알아서 등록된 인스턴스를 가져와 넣어준다는 뜻입니다.


Question/Answer Repository
@Repository //- Tells Spring this interface is part of the persistence layer. jpa 규칙
/* JpaRepository: Inherits CRUD functionality.
→ 기본적인 생성(Create), 조회(Read), 수정(Update), 삭제(Delete) 기능 자동 제공.
- Answer: Entity class (엔티티 클래스)
- Integer: Primary key type (기본 키의 자료형)
* */
public interface AnswerRepository extends JpaRepository {
}
@Autowired
@Autowired // 클래스 객체 생성 자동화
private QuestionRepository questionRepository;

Spring이 QuestionRepository 타입의 빈(bean)을 찾아 자동으로 주입해주는 어노테이션이에요.
즉, 직접 객체를 생성하지 않아도 Spring이 알아서 필요한 객체를 넣어줍니다.
생성자나 setter를 사용하지 않고도 멤버 변수에 바로 주입할 수 있어요.
→ 쉽게 말하면, "Spring, 알아서 이 타입의 객체 좀 넣어줘!" 하는 거예요. 

리포지터리로 데이터베이스 관리하기 H2
테스트 실행 → 실제 어플리케이션 실행, → H2 콘솔에서 확인하기 

일련의 과정에서 로그 생성내역 확인 필요

또한 jpd 설정에 update 옵션 적용여부 확인

이유	설명
`Model`에 입력값을 다시 담음	컨트롤러에서 사용자 입력값을 뷰로 전달
템플릿에서 값 바인딩	`${questionForm.title}` 등으로 입력값 출력
`BindingResult` 사용	검증 오류 시 자동으로 값 유지

제목	내용	생성일시
[[${questionList[0].subject}]]	[[${questionList[0].content}]]	[[${questionList[0].createDate}]]