[14주차] Vue Router, Web, Servlet, ConnectionPool, Cookie, MVC 작성 순서

이맑음·2024년 3월 4일

Java 수업 필기

목록 보기

14/15

Vue Router 설정

사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것 = 라우팅
라우팅이 무엇이고 vue에서 라우팅 처리를 위해 사용하는 플러그인
vue cli prefetch 기능을 정확히 이해하고 컴포넌트 로딩 시점을 설계하는 방법을 익힌다

클라이언트에서 url 주소에 따라 페이지가 전환되는 것
vue 특징 : 프로젝트 내부에서 미리 url 주소를 정의하고, 각 주소마다 vue 페이지를 연결해놓는다
사용자가 메뉴를 클릭하거나 브라우저로 주소를 직접 갱신할 때 미리 정의된 url 주소로 해당하는 주소로 vue 페이지 화면(=컴포넌트)으로 전환한다

public : 정적 리소스들 위치
assert : png, css 파일들이 위치
component : vue component = 페이지
main.js : vue 실행시 제일 먼저 실행되는 파일
app.vue : 최상단
babel : 모듈에 관련된 설정들
2way binding
v-model : 양방향 데이터 바인딩

<template>
<div>
    <input type="number" v-model.number="numberModel">
    <br>
    <textarea v-model="message"></textarea>
    <br>
    <select v-model="city">
        <option value="02">Seoul</option>
        <option value="032">Incheon</option>
    </select>
    <br>
    <label><input type="checkbox" v-model="checked" value="seoul">seoul</label>
    <label><input type="checkbox" v-model="checked" value="busan">busan</label>
    <label><input type="checkbox" v-model="checked" value="jeju">jeju</label>
    <br>
    <span>checked:{{checked}}</span>
  <br>
    <label><input type="radio" v-model="picked" value="seoul">seoul</label>
    <label><input type="radio" v-model="picked" value="busan">busan</label>
    <label><input type="radio" v-model="picked" value="jeju">jeju</label>
    <br>
    <span>picked:{{picked}}</span>
  <img v-bind:src="imgSrc">
</div>
</template>

<script>
export default {
    data() {
        return {
            numberModel : 123456,
            message: '여러 줄 입력이 가능한 어저고',
            city : '032',
            checked: [],
 			picked: '', 
            // radioValue1 : 'seoul',
            // radioValue2 : 'busan',
            // radioValue3 : 'jeju',
  			imgSrc: 'https://ko.vuejs.org/images/logo.png'
        }
    },
}
</script>

찾아보기

클래스 바인딩 처리 방법
인라인 스타일 바인딩
리스트 랜더링 방법 v-for -> 다중 데이터 처리 방식
랜더링 문법 복습 : v-if, v-show -> 차이점
v-on:click, v-on:key, v-on:change?(select tag)
computed, watch 속성 정리

Mock server

실제 서버처럼 클라이언트로부터 요청을 받으면 응답하는 가짜 서버
postman 사용 : api 개발을 위한 협업 플랫폼 -> 테스트, 모니터링, 공유 서비스 이용

vue ui
vue add router
babel 사용시 typescript 안써도 ㅇㅇ
vue 3.x

윈도우 : bin->service.bat install
맥 : tomcat 9.0 설치->core->tar.gz->shell에서 bin으로 이동->./startup.sh=실행
프로젝트 생성 후 configuration edit->vm options, application context = "/", default : chrome 등 기본설정 해주기
한글 깨지면 -> help-> edit custom vm options->"-Dfile.encoding=UTF-8"추가
settings->file encoding -> utf-8로 전부 변경

this.$emit("부모로데이터를보낼이름", 같이 보낼 데이터...)
v-on:"자식이데이터를보낸이름"="실행될메서드"...

프로젝트 구성

main-java = 백엔드
webapp-webinf = 프론트

Web Servlet

servlet = web에서 동작하는 클래스
.jsp 파일은 변경해도 서버 재시동X 그러나 servlet.class 파일은 서버 재시동O

@WebServlet(name = "helloServlet", value = "/hello-servlet")
public class HelloServlet extends HttpServlet {
    private String message;

    public void init() {
        message = "Hello World!";
    }

	//컨테이너가 request, response을 내려준다
    //localhost:8080/hello-servlet 접속시 doGet() 실행
    //http통신이 이루어진다 = tcp기반의 신뢰있는 통신
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html");

        //new()하지 않는다-> 서버를 실행하면 컨테이너 안에 다 올라와있다
        PrintWriter out = response.getWriter();
        out.println("<html><body>");
        out.println("<h1>" + message + "</h1>");
        out.println("</body></html>");
    }

    public void destroy() {
    }
}
---------------------------------------------------------------
//%=서버가 해석하는 애노테이션, @=디렉티브
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

웹 기본 동작

request/response
브라우저(클라이언트)에서 자신이 원하는 정보를 전달하기 위해 get/post 방식을 이용

get방식 : 주소창에 직접 원하는 데이터를 적거나 링크를 클릭해서 호출
post방식 : 입력화면에서 필요한 내용을 작성한 후에 submit같은 버튼을 클릭해서 호출, 데이터와 주소를 따로 보낸다

서버는 브라우저로 응답을 보내는데 요청 내용이 정적/동적 데이터에 따라 다르게 처리한다
정적데이터를 처리하는 서버 : WebServer
동적 : WAS(WebApplicationServer)->tomcat(webserver+webcontainer)
server side programming : 동적으로 상황에 맞게 서버에서 데이터를 만들어 보내는 방식

동시에 여러 요청이 들어온다면 어떻게 처리할까
서버에서 문제가 생기면 어떻게 처리할가
어떤 방법으로 데이터 전송을 최적화 할 수 있을까
분산 환경이나 분산처리와 같은 문제점이 무엇이 있고 어떻게 해결?

J2EE

서블릿 기술/jsp 기술

Jsp

//calcResult.jsp
<body>
<h1>NUM1 : ${param.num1}</h1>
<h1>NUM2 : ${param.num2}</h1>
<h1>SUM : ${Integer.parseInt(param.num1)+Integer.parseInt(param.num2)}</h1>
</body>

GET방식 입력 화면 설계

브라우저는 /input 주소를 호출
/input에 서블릿 InputController 호출, GET 방식일 때만 동작하도록 작성
...

RequestDispatcher

Java Servlet API에서 제공하는 인터페이스
서블릿 간의 통신 또는 서블릿에서 JSP 페이지로의 포워딩과 같은 기능을 수행하는데 사용
웹 애플리케이션에서 서블릿이나 JSP 페이지 간의 요청 처리 및 리소스 공유를 위해 활용

PRG 패턴

POST 제출
사용자가 작업을 수행하여 서버에 데이터 전송
Redirect 리다이렉션
post 요청 처리 후, 서버가 사용자를 다른 페이지로 리다이렉션하여 새로운 get요청 생성
GET 가져오기
리다이렉션된 페이지는 get요청을 처리하여 결과를 사용자에게 출력

HttpServletRequest

Http 메시지의 형태로 들어오는 요청에 대한 정보를 파악하기 위해 제공
getRequestDispatcher() : 데이터 전달

HttpServletResponse

브라우저로 전송하기 위해서 데이터를 만들어내는데 필요한 기능들을 제공
sendRedirect() : 브라우저에 이동을 지시

모델과 서비스 계층

표현 <--> 비지니스 <--> 데이터 접근 <--> DB
컨트롤러 모델 DAO
뷰
컨트롤러에서는 화면에 필요한 데이터를 화면쪽으로 전달해주는데 이런 데이터들을 담당하는 객체를 모델(Model)이라고 한다
JSP로 전달된 모델은 EL 등을 이용해서 처리한다
JSP는 EL과 JSTL을 이용한다

3-tier

표현 계층
서비스(비지니스) 계층
영속 계층

현재 접속한 url에서 새로고침하면 post 방식으로 이루어진다
service 실제 처리들을 모아놓은 패키지
enum타입 사용시의 장점 : 싱글톤

EL

${}
EL 표현식 : jsp가 실행될 때 즉시 반영, 객체 프로퍼티에서 값을 꺼낼때 사용한다
getter/setter를 호출할 수 있다

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
...
<ul>
    <c:forEach var="num" begin="1" end="10">
        <li>${num}</li>
    </c:forEach>
</ul>
<c:if test="${list.size()%2==0}">
    짝수
</c:if>
<c:if test="${list.size()%2!=0}">
    홀수
</c:if>
<c:choose>
    <c:when test="${list.size()%2==0}">짝수</c:when>
    <c:otherwise>홀수</c:otherwise>
</c:choose>

Connection Pool

미리 커넥션을 연결해두고 보관하면서 필요할 때마다 사용 후 반환하는 개념
Connection Pool 라이브러리 : DBCP, C3PO, HikariCP

표현계층, 비지니스계층-> DTO :
데이터 전송을 위해 사용, VO만으로 표현 할 수 없는 데이터를 DTO에 담아 표현
데이터 접근 계층-> VO :
데이터의 표현과 전달을 위한 용도로 사용
DB의 테이블의 컬럼들을 가져와 담는 객체(getter만 존재)

Log4j2

level 설정
Appender

웹 mvc 구조를 이용하면 어떤 장점이 있나? 단점은? 기존의 pojo 와 다른점은?
장점 : 확실하게 책임과 역할을 구분해서 작업을 진행할 수 있다
단점 : 여러 개의 코드를 만들어야 하는 것 -> 반복적인 작업 -> 여러 개의 컨트롤러
역할의 구분의 확실하기 때문에 코드 관리가 용이하다
단점은 컨트롤러에서 서비스를 부르는 코드가 중복된다
web-mvc 구조로(jdbc연동) 구현한 작성 코드들에 대한 개선사항
여러 개의 컨트롤러를 작성하는 번거로움
동일한 로직의 반복적인 사용
예외 처리의 부재
반복적인 메소드 호출
스프링 프레임워크

톰캣 카탈리나 홈, 카탈리나 베이스 가 뭔지 공부
톰캣 User Guide 1~11(class loading) 까지 공부
https://tomcat.apache.org/tomcat-9.0-doc/index.html

세션, 쿠키, 필터, 리스너 개념, 동작원리 -> 로그인 처리
page(object)
(http)request
(http)response
session
application
exception

웹은 과거의 상태를 유지하지 않는다 = stateless -> 기존 사용자에를 기억하지 않는다
요청과 응답을 하나의 단위로 처리하면서 기존 사용자에 대한 정보를 기억하지 않는다
-> sendRedirect할 때 req,resp destory
무상태 특징으로 인해 기존의 방문자를 기억하기 위한 특별한 메커니즘을 사용 = httpsession, cookie, jwt
세션트래킹 = 로그인 유지를 위한 모든 기능

쿠키 : 문자열로 만들어진 데이터의 조각
서버와 브라우저 사이에서 요청이나 응답시에 주고받는 형태로 사용
(name, values) 페어 구조

Cookie를 주고받는 시나리오

브라우저가 최초로 서버를 호출하는 경우 해당 서버에서 발행한 쿠기가 없다면 브라우저는 아무것도 전송하지 않는다
서버에서는 응답메시지를 보낼때 쿠키를 보내준다. (set-cookie) http 헤더를 이용
브라우저는 쿠키를 받은 후 정보를 읽고, 쿠키는 유효기간을 보고 메모리상에서 처리할 것인지 파일로 보관할 것인지 판단한다
브라우저가 보관하는 쿠키는 다음에 다시 브라우저가 해당 서버에 요청을 보낼대 http 헤더에 cookie라는 헤더 이름과 함께 전달한다
서버에서는 필요에 따라 브라우저가 보낸 쿠키를 읽고 사용한다

Cookie를 생성하는 방법

서버에서 자동 발행->Tomcat에서는 JSESSIONID 라는 이름으로 발행
개발자가 코드를 통해서 직접 발행->response.addCookie()

세션을 이용한 로그인 체크

사용자가 로그인에 성공하면 httpsession을 이용해서 해당 사용자의 공간(세션 컨텍스트)에 특정한 객체를 이름고 함께 저장
로그인 체크가 필요한 컨트롤러에서는 현재 사용자의 공간에 지정된 이름(key)으로 객체가 저장되어 있는지 확인한 수 객체가 존재한다면 해당 사용자는 로그인된 사용자로 간주하고 그렇지 않으면 로그인 페이지로 이동시킨다
필터를 이용한 로그인 체크
filter = 특정한 서블릿이나 JSP에 도달하는 과정에서 필터링 역할을 하는 서블릿 API 객체 @WebFilter
여러 개를 적용할 수 있다

VO -> DAO -> DTO -> (enum)Service -> Controller
VO (Value Object): 데이터를 담는 자바 객체
DAO (Data Access Object): 데이터베이스와의 상호작용을 추상화한 객체
DTO (Data Transfer Object): 클라이언트와 서버 간의 데이터 전송을 위한 객체
View------Controller-----Model-----DB
jsp-------Controller(DTO)-----Service(DAO)------DAO(VO)

MapperUtil() {
this.modelMapper = new ModelMapper();
this.modelMapper.getConfiguration()
.setFieldMatchingEnabled(true)
.setFieldAccessLevel(Configuration.AccessLevel.PRIVATE)
.setMatchingStrategy(MatchingStrategies.STRICT);
} 주석달기

이맑음

이전 포스트