Skip to content

1주차 Contoller(HTTP)

Jump to bottom
Namju Kim edited this page May 16, 2024 · 1 revision

Chapter 01 스프링 시작하기

1.1 스프링이란?

Java 기반 애플리케이션 개발을 지원하는 오픈소스 애플리케이션 프레임워크

  • JAVA로 다양한 어플리케이션을 만들기 위한 프로그래밍 틀
  • 쉽고 빠르고 안전하게 Java 프로그래밍을 만들 수 있다.

1.2 스프링 애플리케이션 초기 설정하기

1.2.1 Spring Boot 프로젝트 생성하기

spring initializr에 접속하여 프로젝트를 생성한다.

start.spring.to로 검색하여 접속하게 되면 화면에 뜨게된다.

먼저 화면의 왼쪽을 보게되면 다음과 같은 선택사항이 있는데 본인이 원하는 것을 선택하면 된다

  • Project
  • language
  • Spring Boot
  • Project
  • Package
  • Java

그리고 화면의 오른쪽을 보게되는데 중요한것이 있다

  • Dependencies 라는 친구인데 프로젝트에 사용할 라이브러리에 추가하는 것이다.

추가하는 방법은 Dependencies의 옆을 보면 Add Dependencies라는 버튼이 있는데
이 버튼을 클릭하여 원하는것을 추가한 후

화면의 밑에 있는 GENERATE라는 버튼을 눌려
다운로드 하고 사용하고자 하는 디렉토리에 압축시켜주면 끝~~~~~

1.3 스프링 애플리케이션 작성하기

1.3.1 웹 요청 처리하기

HTTP 통신

  • GET

    • 웹 페이지에 대한 정보를 URL에 담아서 요청하는 것
    • 일반적으로 데이터가 URL에 노출되어 보안에 취약함.
    • ex) 게시글 번호, 웹페이지 검색엔진 검색어 등 공개가 되어도 상관 없는 정보

  • POST

    • 웹 페이지에 대한 정보를 URL이 아닌 Body에 담아서 요청하는 것
    • URL에 데이터가 노출되지 않기 때문에 GET방식 보다 보안이 높은 편
    • ex) ID, PW, 개인정보 등 공개가 되면 안되는 정보

  • @GetMapping

    • 간단하게 특정 GET 요청을 받을 때 사용할 메서드를 프레임워크에 알려주는 것

memo.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>김남주의 요리조리 메모교실</title>
  </head>
  <body>
    <div class="box">
      <h1>김남주의 요리조리 메모교실</h1>
      <h2 th:text="${title}">메모 제목</h2>
      <h3 th:text="${content}">메모 내용</h3>
      <div>남주의 봄 공부</div>
    </div>
  </body>
</html>

FirstController.java

@Controller
public class FirstController {
    @GetMapping("/memo")
    public String getAllMemo(Model model,
                             @RequestParam String title,
                             @RequestParam String content) {
        model.addAttribute("title", title);
        model.addAttribute("content", content);
        return "memo"; //
    }
}

요청

localhost:8080/memo?title=Hello Spring&content=This is Spring Study

결과

image

  • @PostMapping
    • 특정 POST 요청을 받을 때 사용할 메서드를 프레임워크에 알려주는 것

Controller

@Slf4j
@Controller
public class FirstController {
    @PostMapping("/login.do")
    public String loginPost(@RequestParam String username, @RequestParam String password) {
        log.info("Username: {} password: {}", username, password);
        return "redirect:/index.html";
    }
}

요청

localhost:8080/login.do

결과

image image

참고자료

1.3.2 HTML 정적 페이지

TODO: 이준혁

정적 페이지의 특징

웹 서버에 저장된 html 문서를 클라이언트에게 전송하는 웹페이지

사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹페이지를 보게된다

모든 사용자는 같은 결과의 웹페이지를 서버에 요청 하고 응답 받는다

ex) 홈페이지 회사 소개, 음식 메뉴, 포트폴리오 등

정적 페이지의 장점

요청에 대한 파일만 전송하면 되기 때문에 서버간 통신이 거의 없고 속도가 빠르다

단순한 문서들로만 이루어져 있어서 어떤 호스팅서버에서도 동작 가능하므로 구축하는데 드는 비용이 적다

백업, 복원이 쉽다

정적 페이지의 단점

저장된 정보만 보여주기 때문에 서비스가 한정적이다

추가, 수정, 삭제 등의 작업을 서버에서 직접 다운받아 편집 후 업로드도 수정을 해줘야 하기 때문에 관리가 번거롭다

1.3.3 템플릿 엔진(Thymeleaf, mustache)이란?

지정된 Template양식과 데이터가 합하여 HTML문서를 출력하는 SW 동적인 WebPage를 구성할 때, 요청과 관련된 다양한 DATA의 정해진 양식입니다.

필요성

  • 효과적인 코드 : 기존의 HTML보다 간단한 문법 사용
  • 높은 재 사용성 : Data만 바뀌는 경우에 효과적으로 사용 (보통 WebPage는 비슷한 형식을 가짐)
  • 용이한 유지 보수 : 하나의 Template에 여러 Page를 Randering 가능

기능

  • View Code(HTML)과 Data Logic Code(DB)를 분리함

  • 각각의 역할을 나누어 View에서는 Controller에서 온 DATA를 Template에 넣어 웹페이지 제공

  • Server Side Template Engine/ Client Side Template Engine로 나뉨

    Server Side Template Engine

server 쪽에서 Template를 구성하는 방식 DB, API의 데이터를 Template에 맞춘 HTML을 Client에 response하는 역할 ex) JSP, Thymeleat, FreeMarker 등..

🔄 동작과정
  1. Client(brower)의 Request를 server로 보낸다.
  2. Server는 Request를 받아 Data를 처리한다.
  3. Template에 맞춰 Data를 뽑는다.
  4. Data를 HTML에 넣는다.
  5. HTML을 Client에게 Response한다.

Client Side Template Engine

Client 쪽에서 Template를 구성하는 방식 HTMl 형태로 코드를 작성하며, 동적으로 *DOM을 그리게 해주는 역할 ⇒ 동일한 웹페이지를 다양하게 표현 ex) Mustache, Squirrelly

DOM(Document Object Model)

웹페이지의 기본 형태인 문서를 객체화한 모델입니다. 즉, 브라우저가 서버로부터 받은 웹 문서(ex HTML)를 랜더링 하여 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM 이라고 합니다

🔄 동작과정
  1. Client(brower)의 공통 프레임을 Template로 제작
  2. Server에서 Data를 받는다.
  3. Template에 맞춰 Data를 넣음 ⇒ DOM 객체에 동적으로 Data 변경

1.4 MVC 패턴이란?

MVC의 역할과 실행 흐름

  • 컨트롤러 - 클라이언트의 요청 받음
    • src > main > java > 기본 패키지 > controller 패키지 안에 자바 클래스 파일을 생성합니다.
  • 뷰 - 최종 페이지 만듦
    • 생성 위치 : src > main > resources > templates 디렉터리 안에 만듭니다.
  • 모델 - 뷰에 데이터를 전달

hi 페이지의 실행 흐름

<프로젝트 구조>

Untitled

  1. 클라이언트가 url에 요청 입력

    1Untitled

  2. 컨트롤러가 url의 요청에 따라 메서드를 수행

  3. 모델 객체를 매개 변수로 가져오고 변수를 생성해서 뷰 템플릿에 데이터 전달

    → 변수에 따라 다른 뷰 템플릿 페이지 출력

  4. 메서드를 끝내기 전에 파일 이름을 반환

    FirstController.java

    package com.example.firstproject.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller // 컨트롤러임을 선언하는 어노테이션
public class FirstController {
    @GetMapping("/hi") // url에 localhost:8080/hi로 접속하면 greetings.mustache 파일을 반환하라는 뜻
    public String niceToMeetYou(Model model){ // model을 통해 변수 등록 가능해짐.
        model.addAttribute("username", "동동");
        return "greetings"; // greetings.mustache 파일 반환
    }
    @GetMapping("/bye")
    public String byeMan(Model model){
        model.addAttribute("username", "동동");
        return "goodbye";
    }
}

  5. templates 디렉터리에서 해당 파일을 찾아서 웹 브라우저로 전송함.

    doc 입력하고 tab키 누르면 아래 구조 바로 입력됨.

    greetings.mustache

    <html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>{{username}}님 ️안녕하세요!</h1>
</body>
</html>

Copyright 2024. GDSC-DEU All rights reserved.

Clone this wiki locally