[Hanaro] 48일차 / Spring Boot (어노테이션, Thymeleaf, Request Mapping)

백엔드 개발 심화(JAVA)

 

01 Web Applicaiton 개발 환경 세팅 및 Architecture 이해

• Spring boot Dir 환경
  • src/main/java
    • Controller, Service, Repository, DTO, Entity 등 서버 사이드에서 필요한 자바 클래스 생성
    • 프로젝트 생성 시 만든 package를 기반으로 이후 새롭게 만들어 사용
  • src/main/resources/static
    • Thymeleaf를 이용하여 웹 애플리케이션에 필요한 이미지, CSS, JS 등 기입
  • src/main/templates
    • Thymeleaf를 이용하여 개발 시 화면 파일 작성 (JSP 미사용)
  • src/main/webapp/view
    • JSP를 이용하여 개발 시 View에 해당하는 JSP 작성
  • application.properties
    • 전체 웹 애플리케이션의 환결 설정
    • Port, DB 등의 정보
  • pom.xml 또는 build.gradle
    • 외부 라이브러리 또는 빌드 선언 부
• Spring Boot Architecture
  • Server Side Rendering (JSP, Thymeleaf)
    • Client → Controller (view) → JSP → Client
    • Contrller → DTO → DAO → DB
  • Client Side Rendering (React, Vue)
    • Postman Client (json)→ Controller → Service → DTO → DB

 

02 Servlet & JSP를 이용한 MVC 이해

• MVC (Model View Controller)
  • MVC란 사용자 인터페이스와 비즈니스 로직을 분리하여 개발하는 것
  • MVC는 Model1과 Model2로 나누어져 있으며 일반적인 MVC는 Model2를 지칭한다.
  • Model
    • 애플리케이션의 정보나 데이터, DB 등을 말한다.
  • View
    • 사용자에게 보여지는 화면, UI를 말한다.
    • Model로부터 데이터를 얻고 표시한다.
  • Controller
    • 데이터와 비즈니스 로직 사이의 상호 동작 관리
    • 모델과 뷰를 통제하고 직접적인 상호 소통을 하지 않도록 관리
• MVC1
  • View와 Controller를 모두 JSP가 담당하는 형태
  • JSP 하나로 유저의 요청을 받고 응답을 처리한다.
  • User (Client) - View, Controller (JSP) - Model (Java Bean) - DB
• MVC2
  • 요청을 Servlet이 먼저 받는다.
  • Controller와 View가 분리되어 있다.
  • User (Client) - Conteroller (Servlet) - View
  • User (Client) - Controller (Servlet) - Model (Java Bean) - DB - Model - View - User
• Spring MVC
  • Client - Controller - JSP
  • Client - Controller - DTO(Model) - DAO(Model) -DB
• 스프링부트 프로젝트 생성
  • Dependencies 기본 선택
    • Spring Web
    • Spring Web Service
    • Spring Boot DevTools
    • Lombok
    • SpringData JPA
    • H2 Database
    • MySQL Driver
    • Thymeleaf
    • 등등

 

03 Spring & Spring MVC 이해 및 실습

• 라이브러리 (Library)
  • 필요한 기능들이 모여있는 코드들의 집합
  • 남이 만든 라이브러리를 가져다가 사용할 수 있다.
• 프레임워크 (Framework)
  • 기본적으로 필요한 기능을 갖추고 있는 개발 환경 제공
• @SpringBootApplication
  • 3가지의 어노테이션을 합쳐놓은 어노테이션이다.
  • @ComponentScan
    • @Component가 붙은 클래스를 찾아서 Bean으로 등록한다.
  • @EnableAutoConfiguration
    • 스프링 프레임워크의 기본적인 기능을 활성화할 때 사용하는 어노테이션
  • @SpringBootConfiguration
    • @Configuration이 붙은 클래스 (웹 애플리케이션의 설정 정보를 담는 클래스)를 스프링 프레임워크의 설정 클래스로 등록한다.
• Bean (빈)
  • 스프링 프레임워크에서 관리하는 자바 클래스 객체를 의미
  • 싱글톤이며 같은 이름의 빈은 선언 불가
  • 첫글자는 소문자
• 클래스를 빈으로 만드는 어노테이션 2가지
  • @Bean
    • Config 클래스 안에서 사용되고, 주로 외부 라이브러리 사용 시 사용
  • @Component
    • 개발자가 직접 작성한 클래스에 주로 사용
    • 빈의 이름을 직접 지정할 수 있다.
      • @Component(”이름”)
• 자바 빈을 생성하는 방법 2가지
  • @Confiration + @Bean
  • @Component + @Autowired
    • 필드(멤버 변수) 주입 (일반적인 방법)
    • setter 주입
    • 생성자(constructor) 주입 (추천하는 방법)
• POJO (Plain Old Java Object)
  • 스프링에서 빈 생성시 POJO 클래스를 이용한다.
  • POJO란 EJB와 달리 순수한 자바 클래스
  • 스프링 컨테이너에 저장되는 자바 객체는 특정 인터페이스를 구현하거나 특정 클래스를 상속받지 않아도 된다는 뜻
  • getter/setter/생성자(constructor)만 추가해서 빈을 만든다.
• @Controller
  • HTTP 요청을 처리하는 컨트롤 클래스에 붙인다.
  • GET/POST/PUT/DELETE 요청 등을 처리한다.
  • @GetMapping(”경로”)
    • HTTP GET 요청을 처리하는 함수에 붙인다.
    • 내부적으로 메소드는 Servlet으로 동작한다.
    • 기본 요청 URL: localhost:8080/
  • @ResponseBody
    • 응답을 문자열(JSON)로 응답한다는 의미
  • @Autowired
    • 스프링 빈을 필드로 주입할 때 작성
      • private Member member1;
    • 클래스를 멤버 변수로 선언하고 그위에 어노테이션 작성
• 스프링 빈을 주입 받는 방법
  • 필드 주입

    •  	@Autowired
          private Member member1;
      
          @GetMapping("field")
          @ResponseBody
          public String field() {
              return "field() 호출됨 - " + member1.getName();
          }

  • setter 주입

    •   	private Member member3;
        	
          @Autowired
          public void setMember(Member member) {
              this.member3 = member;
          }
      
          @GetMapping("setter")
          @ResponseBody
          public String setter() {
              return "setter() 호출됨: " + member3.getName();
          }

  • 생성자(constructor) 주입 - 추천 방법
    • final 키워드 사용 가능 (객체 재할당 방지)
    • 생성자로서 미리 주입 받을 수 있다. (null safety 제공)

        **private final Member member4;
        
        @Autowired
        public MainController(Member member) {
            this.member4 = member;
        }**
    
        @GetMapping("constructor")
        @ResponseBody
        public String constructor() {
            return "constructor() 호출됨: " + member4.getName();
        }
    

• Lombok이 지원하는 어노테이션 종류 (코드없이 함수와 생성자 자동 생성)
  • @Getter
    • 클래스 위에 작성하면 getter 함수 없이 자동 생성
  • @Setter
    • 클래스 위에 작성하면 setter 함수 없이 자동 생성
  • @NoArgsConstructor
    • 클래스 위에 작성하면 기본 생성자 자동 생성
  • @AllArgsConstructor
    • 클래스 위에 작성하면 매개변수 생성자 자동 생성
  • @RequiredArgsConstructor
    • final 필드나 @NonNull이 붙은 필드만 매개변수로 받는 생성자 자동 생성
  • @NonNull
    • null을 허용하지 않는 객체 빈 자동 생성
  • @Nullable
    • null을 허용하는 객체 빈 자동 생성
  • @ToString
    • toString 메소드 자동 생성
  • @EqualsAndHashCode
    • equals, hashCode 메서드 자동 생성
  • @Data
    • @Getter, @Setter, @ToString, @EqualsAndHashCode, @RequiredArgsConstructor을 모두 한꺼번에 설정해주는 어노테이션
• Request Mapping의 종류
  • HTTP 요청에 대한 경로와 응답 메서드를 정의한다.
  • @GetMapping
    • 사용자의 HTTP GET 요청에 대한 응답 경로와 메서드 정의
    • GET은 SELECT의 기능, 서버에 데이터를 가져와 보여줄 때
      • 캐시가 남아있어 보안적인 측면은 좋지 않지만 전송속도가 빠르다.
      • 파라미터가 url에 노출된다.
  • @PostMapping
    • POST 요청에 대한 응답 경로와 메서드 정의
    • POST는 INSERT의 기능, 서버 값이나 상태를 바꿀 때
      • CREATE, UPDATE, DELETE에 사용되며 캐시가 남아있지 않아 보안적인 측면에서 좋다.
      • Request body에 데이터가 들어가기 때문에 파라미터가 url에 노출되지 않는다.
    • HTML Form 태그 submit은 GET/POST 요청밖에 없다.
    • jQuery의 Ajaxs나 JS의 fetch함수, JS모듈(node모듈)의 axios함수
    • RESTful API로 호출할때 GET/POST/PUT/DELETE 요청이 사용됨. select/insert/update/delete
  • @PutMapping
    • PUT 요청에 대한 응답 경로와 메서드 정의
    • PUT은 자원의 전체 교체
  • @DeleteMapping
    • DELETE 요청에 대한 응답 경로와 메서드 정의
  • @PatchMapping
    • PATCH 요청에 대한 응답 경로와 메서드 정의
    • 업데이트 작업 시 사용
    • PATCH는 자원의 부분 교체
  • @RequestMapping
    • 모든 타입의 요청 처리 가능
      • @RequestMapping(value = "/", method = RequestMethod.GET)
      • @RequestMapping(value = "/", method = RequestMethod.POST)
• Thymeleaf
  • 타임리프란 템플릿 엔진의 일종이며 html 태그에 속성을 추가하여 동적 HTML로 값을 출력한다.
  • 사용 전 설정
    • 의존성 추가
      • implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    • application.properties 추가

      • #타임리프
        #캐시 off : html파일을 수정시마다 매번 내려준다.
        spring.thymeleaf.cache=false
        #html 파일 위치 지정
        spring.thymeleaf.prefix=classpath:/templates/
        #파일 확장자
        spring.thymeleaf.suffix=.html

  • 컨트롤러에 Model 클래스를 매개변수로 받은 서블릿 메서드 작성
    • Model 클래스
      • Model 클래스란 스프링에서 데이터를 담아서 전달하는 용도의 클래스
      • 서블릿 메서드에 매개변수로 선언하면 스프링 컨테이너(컨텍스트)에서 자동 주입된다.
        • 메서드명(Model model)
      • model.addAttribute(”attribute이름”, “attribtue값”); 형태로 작성
    • 컨트롤러에서 html 파일 경로로 return
      • return "redirect:index"; 또는 return "forward:index"; 또는 return "index";
    • 예시

      • @GetMapping("index")
            public String index(Model model) {
                model.addAttribute("name_text", "홍길동");
                return "index";
            }

  • html 파일 작성
    • <p th:text="${ name_text }">innerText</p> 와 같이 태그 안에 th:text=”${ attributeName }” 을 작성하면 값이 주입된다.
    • input 태그 안에는 name=”attributeName”을 작성해야 값이 연결된다.
      • <input typeof="text" name="id" value="" placeholder="아이디" required>
    • 예시

      • Form 태그에서 GET 방식으로 서버에 데이터 전달하기
        <form action="index-param" method="get">
            <input typeof="text" name="id" value="" placeholder="아이디" required>
            <input typeof="password" name="pw" value="" placeholder="암호" required>
            <button type="submit">전송</button>
        </form>
        
        Form 태그에서 POST 방식으로 서버에 데이터 전달하기
        <form action="index-param" method="post">
            <input typeof="text" name="id" value="" placeholder="아이디" required>
            <input typeof="password" name="pw" value="" placeholder="암호" required>
            <button type="submit">전송</button>
        </form>

• redirect와 forward의 차이
  • redirect
    • 내부 변수값을 버리고 페이지 이동 (타 사이트 이동시)
  • forward
    • 내부 (세션, 모델) 변수값을 가지고 페이지 이동 (내부 URL로 이동시)
• HTML에서 서버로 데이터를 전송하는 방법 (Front-end)
  • HTML Form 태그
    • GET/POST 방식으로 submit 한다.
  • JavaScript Fetch() 함수
    • GET/POST/PUT/DELETE 방식으로 전송한다.
  • JQuery Lib에서 ajax() 함수
    • GET/POST/PUT/DELETE 방식으로 전송한다.
  • Axios 모듈에서 axios() 함수
    • GET/POST/PUT/DELETE 방식으로 전송한다.
  • 디버깅 툴
    • POSTMAN, THUNDER 등 사용
• GET 방식으로 요청 파라미터의 데이터를 받을 수 있다.
  • URI(URL)
    • localhost:8080/index-param?id=hong&pw=1234
      • id: hong
      • pw: 1234
• @RequestParam
  • 매개변수에서 요청 파라미터를 가져오는 어노테이션 (뷰에서 사용자가 작성한 값을 가져온다)
  • 매개변수에 (@RequestParam 데이터타입 변수명) 작성
  • 예시
    • public String indexParam(@RequestParam String id, @RequestParam String pw) { ... }
• button 태그
  • <button></button>
    • 기본 버튼 태그는 submit 버튼으로 동작
  • <button type=”submit”></button>
    • submit 버튼으로 동작
  • <button type=”button” onclick=”alert(’클릭됨’);”></button>
    • 버튼 클릭시 alert 창 출력