헤엄쳐 해파리

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%ED%95%B5%EC%8B%AC-%EC%9B%90%EB%A6%AC-%EA%B8%B0%EB%B3%B8%ED%8E%B8#curriculum

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8

https://mangkyu.tistory.com/75

https://youwjune.tistory.com/43

메인 페이지에서 로그인 버튼을 누르면 로그인 폼만 나오는 게 아니라 헤더나 어사이드 부분은 그대로 유지하되 메인 부분만 로그인 창으로 변경되게 하고 싶었다. 이를 위해서는 두 가지 방법을 사용할 수 있다.

JavaScript 및 AJAX 사용 

로그인 버튼 클릭 시 JavaScript를 사용하여 AJAX 요청을 보내고 서버에서 로그인 폼을 받아와 메인 페이지의 특정 부분에 동적으로 추가한다.

이러한 방식의 문제점은 html의 요소를 문자로 다루기 때문에 홑따옴표와 쌍따옴표가 너저분하게 깔려있어서 알아보기도 힘들고 코딩하기는 더더욱힘들며 그 여파로 유지보수가 굉장히 힘들다라는 단점이 있다. 이 스파게티 소스는 종지부에는 본인이 만든 것도 헷갈리게 되는 현상이 발생한다.

서버 측 템플릿 이용

Spring MVC 또는 Thymeleaf와 같은 서버 측 템플릿 엔진을 사용해 메인 페이지를 생성할 때, 메인 페이지와 로그인 폼을 포함한 다른 페이지를 따로 생성하고, 로그인 버튼을 누를 때만 해당 부분을 로드하여 메인 페이지에 추가할 수 있다.

참고 페이지(+템플릿 사용의 자세한 설명)

https://stir.tistory.com/316

Classpath* 설정에 대해

https://developer-joe.tistory.com/225

https://pplenty.tistory.com/5

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/core/io/support/PathMatchingResourcePatternResolver.html

MessageConverter 정의 및 종류

정의

Spring framework에서 HTTP 요청 본문과 응답 본문을 java 객체로 변환하고 역으로 변환하는 역할을 담당하는 컴포넌트이다.

Spring MVC에서는 HTTP 요청이나 응답의 본문을 객체로 변환하거나, 객체를 HTTP 메시지로 변환하는데 사용된다.

주로 RESTful 웹 서비스에서 JSON이나 XML과 같은 형식의 데이터를 주고받을 때 사용한다.

@ResponseBody //응답
@RequestMapping(value="/hello", method=RequestMethod.POST)
public String hello(@RequestBody String param){ //요청
	return "result";
 }

위와 같이 어노테이션을 하게 되면 스프링은 messageConverter를 사용해 HTTP 요청이나 응답을 메세지로 변환하게 된다. 즉, 위처럼 파라미터 부분에 @RequestBody를 입력할 경우 파라미터 타입에 맞는(String) 메세지 컨버터를 선택한 뒤 HTTP 요청 본문을 통째로 메세지로 변환하여 파라미터에 바인딩하는 것이다.

*바인딩이란?

사용자가 웹 페이지의 폼에 입력한 데이터를 서버로 보낼 때, Spring MVC는 이 데이터를 컨트롤러의 메서드에 매개변수로 바인딩하여 처리한다. 이렇게 폼에서 입력한 데이터를 컨트롤러의 메서드에 매개변수로 바인딩하는 과정을 데이터 바인딩이라고 한다. 이 과정을 통해 사용자가 입력한 데이터를 컨트롤러에서 쉽게 사용할 수 있게 된다.

GET, POST 요청의 경우

• GET : GET 방식의 요청에는 사용되지 않는다. 메시지 컨버터는 HTTP 요청의 본문(body)에 포함된 데이터를 처리하는 데 사용되는데, GET요청의 경우 본문이 없기 때문에 메시지 컨버터를 사용할 필요가 없다.
• POST : POST 요청의 경우 요청 본문에 데이터를 담아 전송하기 때문에 이러한 데이터를 객체로 변환하기 위해 메시지 컨버터가 사용된다.

유용한 메시지 컨버터의 종류

• Jaxb2RootElementHttpMessageConverter :

- Spring에서 XML 형식의 데이터를 처리하는 메시지 컨버터 중 하나이다.

- 이 메시지 컨버터는 java 객체를 XML로 변환하거나, XML을 java 객체로 변환하는 데 사용된다.

- @XmlRootElement와 @XmlType이 붙은 클래스를 이용한다.

- 지원하는 미디어 타입은 application/xml, application/*+cml, text/xml이다.

• MashallingHttpMessageConverter

- 이 컨버터를 등록할 때는 maechaller와 unmarshaller를 설정파일에 등해줘야 한다.

- 지원하는 미디어 타입은 위와 동일.

- 주어진 XML 바인딩 프레임워크를 사용하여 java 객체와 XML 문서 간의 매핑을 수행한다. 

• MappingJacksonHttpMessageConverter

- Jackson 라이브러리를 기반으로 작성되었으며 JSON 데이터와 Java 객체 간의 매핑을 수행한다.
- 지원하는 미디어 타입은 application/json이다.

- 변환하는 오브젝트 타입의 제한은 없지만 프로퍼티를 가진 자바빈 스타일이나 HashMap을 이용해야 정확한 변환 결과를 얻을 수 있다.

*설정 파일 등록

import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.util.List;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        // 기본 메시지 컨버터 목록을 가져옴
        converters.add(new MappingJackson2HttpMessageConverter());
        // 다른 컨버터 등록하거나 기본 컨버터 삭제할 수도 있음
    }
}

참고 사이트/자세한 설명있음

https://joont92.github.io/spring/MessageConverter/

@RequestMapping ?

Spring 개발 시 특정 URL로 요청(Requst)을 보내면 Controller에서 어떤 방식으로 처리할지 정의한다.

 이 때 사용자로부터 들어온 요청을 특정 method와 매핑하기 위해 사용되는 어노테이션이 @RequestMapping이다.

• @RequestMapping은 Controller에서 사용되는데 DispatcherServlet이 Controller 파일을 찾고, 논리적 주소가 매핑된 Method를 찾기 위해서는 @Controller와 @RequestMapping이 작성되어야 한다
• URL과 Controller의 method 매핑을 설정하는 어노테이션
• URL 외에도 다양한 속성 지정 가능.

@RequestMapping에는 여러가지 속성들이 있는데 value와 method를 주로 사용한다.

• value는 요청받을 URL을 설정
• method는 어떤 요청으로 받을지 정의 (GET, POST, PUT, DELETE 등)

Controller
@RequestMapping(value = "/")
public class SampleController {
 
    @RequestMapping(value = "/getSample")
    public void getSample(HttpServletRequest request, HttpServletResponse reponse) throws Exception {        
        System.out.println("getSample");
    }
}

위의 예제처럼 소스 코드를 작성 후 localhost:8080/getSample 이라는 URL 요청이 올 경우 getSample 메서드가 호출된다.

https://backendcode.tistory.com/227

클릭 이벤트 

도서관련 웹페이지를 만드는 중에 a 이미지를 기본으로 설정해두고 커서를 올리면 b 이미지로 바뀌는 기능을 구현했다.

클릭하게 되면 상품의 페이지로 이동한다.

1. HTML 기능추가(.jsp 파일)

home.jsp 파일의 body 안에 입력해준다.

이미지 경로는 상대경로로 입력하면 되고 내 경우에는 설정이 끝났는데도 기능이 구현되지 않아서 코드를 뜯어보니 js 파일 경로가 잘못되어 있었다. 

내 경우는 resources/js/script.js 경로로 수정했더니 잘 작동되었다.

<body>
<div class="product-image">
  <a href="product-page.html"> <!-- 상품 페이지 링크 -->
    <img src="image1.jpg" alt="이미지" id="productImg">
  </a>
</div>
<script src="script.js"></script>
</body>

2. JavaScript 기능추가(.js 파일)

// JavaScript 파일 내에서 마우스 이벤트와 클릭 이벤트를 처리하여 이미지를 변경하고 페이지로 이동합니다.
const productImg = document.getElementById('productImg');

// 마우스를 올렸을 때의 처리
productImg.addEventListener('mouseenter', function() {
  // 마우스를 올렸을 때의 이미지 경로
  this.src = 'image1.jpg';
});

// 마우스를 내렸을 때의 처리
productImg.addEventListener('mouseleave', function() {
  // 마우스를 내렸을 때의 이미지 경로
  this.src = 'image2.jpg';
});

// 이미지를 클릭했을 때의 처리 (상품 페이지로 이동)
productImg.addEventListener('click', function() {
  window.location.href = 'product-page.html'; // 이동할 페이지의 URL
});

1. margin

margin의 속성값을 조절하여 버튼사이 간격조절

<button> 첫 번째 버튼</button>

<span style="margin: 0 10px;"></span>

<button> 두 번째 버튼</button>

2. 패딩(padding)을 이용한 간격 조절

<button style="margin-right: 10px;">첫 번째 버튼</button>

<button>두 번째 버튼</button>

 나의 경우 이렇게 적용했다.

 <button class="btn1" style="margin-right: 10px;" type="submit">

BootStrap 오픈소스 다운 받아 적용하기

1. 부트스트랩 다운로드

2. 압축을 풀고 index 파일을 더블클릭해서 열어준다.

3. 해당 페이지에서 마우스 우클릭 > 페이지 소스보기

4. 소스를 복사해서 기존 Spring 프로젝트 home.jsp 파일에 붙여넣기 해준다.

(html~ 라인부터)

5. 다운받은 폴더 내부에 있는 css, js 등의 폴더를 복사해서 resources 폴더에 넣는다.

6. home.jsp 파일에서 link 부분 코드를 알맞은 경로로 수정해준다.

(resources 폴더 안에 위치했으니 기존 경로 앞에 resources/를 추가했음)