관심쟁이 영호

velog로 이사합니다!

관심쟁이 영호 — Mon, 20 Sep 2021 18:20:11 +0900

블로그를 새롭게 이사하게 되었습니다!

주소는

jkijki12 (YoungHo-Cha) - velog

Database 이름 짓기 어려우세요? DB를 사용하면서 누구나 Naming에 대해서 고민한 적이 있을 것이다.나 또한 "이게 맞나?"라고 생각하며, 이름을 결정한 적이 많았다.Database Naming RuleSchemaTableColumnPrimary

velog.io

입니다!

놀러오세용!

[#5 이미지 검색 프로젝트] python http 서버 만들기

관심쟁이 영호 — Sun, 19 Sep 2021 21:39:31 +0900

이전 포스팅에서는 데이터를 DB에 INSERT 하는 것 까지 완성했다.

[#4 이미지 검색 및 최저가 검색] Python - MySQL 연동하기!

오늘은 앞서 스크래핑한 내용을 MySQL에 저장하는 작업을 할 것이다. [#2 Search Shop & Price] 크롤링 2탄 ㅣ Json 형태 크롤링하기 ㅣ Ajax 동적으로 크롤링하기 이전에 포스팅한 [#1 SSP] 크롤링을 해보자!

bestkingit.tistory.com

우리의 목표를 다시 생각해보면,

"스프링 Server (http/Get) 크롤링 요청 -> 파이썬 Server 크롤링 후 DB 저장 -> True 리턴"

이다.

그래서 오늘은 파이썬을 통하여 http 통신이 가능한 서버를 만들어 보자!

모듈 다운로드

필요한 모듈은 다음과 같다.

from flask import Flask, jsonify, request
import naverCrawl

naverCrawl

먼저 http로 get요청을 받을 경우에 크롤링을 해야 하기 때문에, "naverCrawl"을 import 해준다.

flask

파이썬에서 서버를 생성하도록 돕는 모듈이다.

jsonify

문자열을 json 형식으로 변경해주는 모듈이다.

설치를 해보자.

pip install flask

코드 적용

from flask import Flask, jsonify, request
import naverCrawl

app = Flask(__name__)

@app.route('/get_data')
def doCrawl():
    
    query = request.args["query"]

    
    check = naverCrawl.doCrawling(query)
    
    return jsonify(check = check)

if __name__ == '__main__':
    app.run(host="localhost", port="9000", debug=True)

나는 host : localhost / port : 9000으로 실행하였다.

debug 속성은 True를 했을 경우, 디버그 모드가 on 되어 코드를 수정하면 항상 서버에 반영되도록 한다.

그럼 요청을 해보자!

올바르게 Response가 온 것을 볼 수 있다!!!!

확장 프로그램을 통해서 요청을 해보자.

내가 사용할 확장 프로그램은 다음과 같다.

Talend API Tester - Free Edition

Visually interact with REST, SOAP and HTTP APIs.

chrome.google.com

짜란! 잘 도착했다 ㅎㅎㅎㅎㅎ

굳!

파이썬 서버는 완료했다.

이제 스프링으로 넘어가자!

[#3 이미지 검색 프로젝트] API 응답 객체화(클래스화?) 하기!

관심쟁이 영호 — Sun, 19 Sep 2021 20:21:48 +0900

크롤링한 내용을 list를 통해서 전달하지 않고 객체를 생성하여 getter, setter로 편하게 이용하고 싶어서 작업을 조금 더 하려고 한다!

코드는 다음과 같다.

클래스 생성

model.py

class model():
  title = ''
  price = ''
  type =''
  fileName =''
  link =''
  filePath = ''

  def __init__(self):
        self.name = '정보 없음'
        self.type = '정보 없음'
        self.address = '정보 없음'
        self.price ='정보 없음'
        self.filePath = '정보 없음'
        self.link = '정보 없음'
        

  def setTitle(self, title):
        self.title = title
  
  def getTitle(self):
      
    return self.title
  
  def setPrice(self, price):
        self.price = price
  
  def getPrice(self):
    
    return self.price
  
  def setType(self, type):
        self.type = type
  
  def getType(self):
    
    return self.type

  def setFileName(self, fileName):
        self.fileName = fileName
  
  def getFileName(self):
    
    return self.fileName
  def setLink(self, link):
        self.link = link
  
  def getLink(self):
    
    return self.link
  def setFilePath(self, filePath):
        self.filePath = filePath
  
  def getFilePath(self):
      
    return self.filePath

파이썬에서 고유하게 지원하는 get / set 모듈이 있을 것이다. 하지만 모듈에는 별도의 추가 내용이 있을 것이므로, 가볍게 사용하기 위해서 내가 원하는 함수만 선언하여 만들었다.

내가 수집할 내용은

title : 상품 이름

link : 상품 링크

price : 상품 가격

fileName : 저장된 사진 이름

filePath : 저장된 사진의 경로

type : 상품 타입 (검색 단어로 지정했다. 나중에 where 절을 이용하기 위해서 적어두었다.)

크롤링 클래스에 적용하기

해야하는 적용은 다음과 같다.

크롤링 내용을 model 클래스로 적절하게 파싱 하고, DB 저장 클래스로 보낸다.

1. 방금 생성한 model 클래스 정보를 가져온다.

import model

2. 모델을 생성하고 초기화해준다.

      getModel = model.model()
      getModel.setTitle(title)
      getModel.setPrice(price)
      getModel.setLink(link)
      getModel.setType(searchModel)
      getModel.setFileName(fileName)
      getModel.setFilePath(filePath)
      DAO.insertData(getModel)

DAO는 insert를 할 클래스이다.

[#4 이미지 검색 프로젝트] Python - MySQL 연동하기!

관심쟁이 영호 — Sun, 19 Sep 2021 20:03:39 +0900

오늘은 앞서 스크래핑한 내용을 MySQL에 저장하는 작업을 할 것이다.

[#2 Search Shop & Price] 크롤링 2탄 ㅣ Json 형태 크롤링하기 ㅣ Ajax 동적으로 크롤링하기

이전에 포스팅한 [#1 SSP] 크롤링을 해보자! SSP에서 가장 핵심적인 크롤링을 해보자. 목차 툴 라이브러리 설치 User-Agent 쿠팡에서 정보 긁어오기 네이버에서 정보 긁어오기 번개장터에서 정보 긁어

bestkingit.tistory.com

MySQL DB 준비하기

MySQL을 설치한다.

- 생략 -

MySQL DB를 생성한다.

CREATE DATABASE crawl CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci;

show databases;

CREATE DATABASE "생성할 DB 이름" CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci;

- 지정해준 DB이름으로 DB를 생성한다. 문자 세팅은 utf8로 한다!

SHOW DATABASES;

- 생성된 DATABASE를 모두 보여준다.

아래와 같이 생성된 것을 볼 수 있다.

TABLE을 생성하자.

CREATE TABLE model (

    title TEXT NOT NULL, 
    price TEXT, 
    link TEXT, 
    imagePath TEXT, 
    fileName TEXT
    
    );

	타입(길이)	NULL	DEFAULT
title	TEXT	X	-
price	TEXT	O	-
imagePath	TEXT	O	-
fileName	TEXT	O	-
link	TEXT	O	-

크롤링 과정에 title, price, imagePath, fileName, link를 받아온다.

내용 중에, 암호화가 되어 있는 부분이 있어서 길이를 예상할 수가 없었다. 그래서 TEXT로 타입을 지정해주었다.

Python - MySQL 연동하기

1. pymysql을 설치한다.

pip install pymysql

2. Python과 연결할 계정을 설정해준다.

conn = pymysql.connect(host= "localhost", user="root", password="1234", db="crawl", charset="utf8")

여기서

"host" 부분을 특정 ip로 할 경우, MySQL DB 서버에 접근할 수 있다. (대형 서비스를 운영하는 실무에서는 이렇게 하겠지!)

3. cursor를 설정한다.

curs = conn.cursor()

커서란?

"데이터베이스 커서(Cursor)는 일련의 데이터에 순차적으로 액세스할 때 검색 및 "현재 위치"를 포함하는 데이터 요소이다." - 위키백과

다시 말하자면,

db를 운용할 때, 많은 양의 데이터를 쓰고나 뽑거나 수정하거나 해야 한다.

해당 조작을 하기위해서는 현재 위치에 대한 정보가 필요하다. 현재 위치에 대한 정보를 cursor가 가지게 된다.

4. sql을 작성한다.

sql = "insert into model (title, price, link, data_type, fileName, imagePath) VALUES ("+ '\''+str(getModel.getTitle()) + '\''', '+ '\''+ str(getModel.getPrice())+'\'' + ', '+ '\''+str(getModel.getLink()) + '\''+', ' + '\''+ str(getModel.getType()) + '\''+', '+ '\''+str(getModel.getFileName())+'\''+', '+ '\''+str(getModel.filePath)+'\'' + ')'

이렇게 하드코딩 처럼 작성하는 것을 싫어한다..

관련 모듈이 있는지 다음에 찾아보자!

5. sql을 보내자

curs.execute(sql)

sql이 연결된 db에서 실행된다.

execute를 하게 되면, MySQL에서 트랜잭션이 실행된다. 그리고 보낸 sql이 실행된다.

이렇게 하면 완료되는 것이 아니다. 트랜잭션을 종료해야 데이터 변경에 대한 일이 완료가 된다.

6. commit 하자

conn.commit()

commit을 하게 되면 insert를 해주었던 내용이 MySQL에 최종 저장이 된다.

7. conn을 종료해주자.

def close_conn(self):
        conn.close()

최종 코드

import pymysql
import model
from typing import Type


def get_db():

    return pymysql.connect(host= "localhost", user="root", password="1234", db="crawl", charset="utf8")

def insertData(getModel: Type[model.model]) :

    
    conn = get_db()
    curs = conn.cursor()
    sql = "insert into model (title, price, link, data_type, fileName, imagePath) VALUES ("+ '\''+str(getModel.getTitle()) + '\''', '+ '\''+ str(getModel.getPrice())+'\'' + ', '+ '\''+str(getModel.getLink()) + '\''+', ' + '\''+ str(getModel.getType()) + '\''+', '+ '\''+str(getModel.getFileName())+'\''+', '+ '\''+str(getModel.filePath)+'\'' + ')'
    curs.execute(sql)

    
    conn.commit()
    
    

def close_conn() :
    conn.close()

"close_conn"을 하나의 함수에서 빼놓은 이유는 반복해서 insert를 할 것이기 때문이다. 매번 close를 하게 되면 그 또한 낭비라고 생각이 된다.
get_db라고 함수를 새롭게 정의한 이유는 서버로 요청이 올 때 마다 connection을 새롭게 지정해주어야 하기 때문이다.

테스트

크롤링 클래스에서 DB INSERT 클래스 실행을 해보자!

올바르게 적용된 것을 알 수 있다!

[#8 Spring Boot 정주행] 유연한 컨트롤러 만들기 ㅣ Handler, Adapter, 다형성

관심쟁이 영호 — Thu, 16 Sep 2021 17:43:32 +0900

지금까지 여러 종류의 모양을 반환하는 컨트롤러를 만들어보았다.

path부터 modelAndView 까지.. 계속해서 발전해왔다.

[#6-1 Spring Boot 정주행] MVC 프레임워크를 직접 만들어보자

이전에 포스팅한 글에서 서블릿 dispatcher를 통해서 JSP를 반환하는 것까지 성공했다! 하지만 문제가 있었다. 이번 포스팅에서는 해당 문제들을 짚어보고 하나씩 해결해보면서 MVC 프레임워크를 만

bestkingit.tistory.com

[#6-2 Spring Boot 정주행] View Path를 없애보자! ㅣ MVC 프레임워크 만들기

이전 포스팅에서 FrontController를 통해서 공통 처리를 가능하게 하였다. 하지만 View의 Path를 설정하는 부분과, Servlet에서 View & 또 다른 Servlet으로 넘겨주는 함수가 모든 컨트롤러에 적용된다는 것

bestkingit.tistory.com

[#7 SpringBoot 정주행] ViewResolver를 만들어보자!

[#6-2 Spring Boot 정주행] View Path를 없애보자! ㅣ MVC 프레임워크 만들기 이전 포스팅에서 FrontController를 통해서 공통 처리를 가능하게 하였다. 하지만 View의 Path를 설정하는 부분과, Servlet에서 View..

bestkingit.tistory.com

근데.. 개발자의 입장에서 modelAndView 1개만 반환해야 한다면 답답할 수 있다.

model과 view가 필요가 없는데, modelAndView를 반환해야하기 때문이다.

그래서!!

개발자가 무엇을 반환하든 상관없는 모양으로 만들어보자!

먼저 뒷내용을 이해하려면 객체의 "다형성"에 관해서 잘 알아야한다.

혹시나 모른다면! 다음 글을 보도록 하자.

[JAVA]추상클래스와 추상메서드에 대해서! ㅣ Abstract

오늘은 추상클래스와 추상메서드에 대해서 공부를 해볼 계획이다. 추상클래스? 추상클래스는 완성하지않은 메서드를 가지고 있는 클래스를 말한다! 한마디로, 몸통부분인 "{}"가 없는 것을 말한

bestkingit.tistory.com

[JAVA] 인터페이스 ㅣ Interface

오늘은 인터페이스에 관해서 공부를 할 예정이다. (출간된 "자바의 정석" 책을 참고했습니다.) 인터페이스란? - 추상 메서드의 집합이다. (추상 메서드 : 구현을 하지않은 메서드) - 모든 멤버가 pu

bestkingit.tistory.com

어댑터와 핸들러

어댑터와 핸들러를 이해하기 전에, 위에서 이야기했던 내용을 계속해서 해보자.

개발자들은 반환 값을 상관하지 않고 여러 가지 방식 중에서 자기가 원하는 것을 반환하고 싶다.

(model, view, path, string 기타 등등..)

그러기 위해서는 어떻게 해야 할까?

다음 그림을 보자.

이해하기 힘들 수 있다. 천천히 보자.

핸들러란?

이전에 사용했던 Controller랑 똑같은 개념이다.

핸들러 어댑터란?

핸들러가 어떠한 값을 보내든 ModelAndView로 바꾸어주는 어댑터라고 할 수 있다.

어댑터는 "Stirng -> ModelAndView", "Model -> ModelAndView", "void -> ModelAndView" 등등 가능한 모든 반환 값을 ModelAndView로 바꾸어주는 역할을 한다.

왜 필요한가?

이제 제대로 이해해보자.

개발자가 어떤 값을 컨트롤러로 반환할지 모른다.

그래서 개발자가 어떠한 값을 리턴하더라도 상관없이 그 값을 ModelAndView로 바꾸어주기로 하자.

그렇게 되는 경우 리턴 값을 딱히 신경 쓰지 않아도 될 것이다.

해야 할 작업

1. 먼저, 반환할 값에 타입에 따라 어댑터를 생성해준다. 그리고 Front Controller에 어댑터를 추가해준다.

FrontController.java 추가

//...//

private void initHandlerAdapters() {
 handlerAdapters.add(new ControllerV3HandlerAdapter());
 handlerAdapters.add(new ControllerV4HandlerAdapter()); //V4 추가
}

//...//

2. handlerAdapter 생성

public interface MyHandlerAdapter {

    boolean support(Object handler);

    Model handle(HttpServletRequest request, HttpServletResponse response,
                 Object handler) throws ServletException, IOException;
};

handle : 어댑터는 각 반환 값을 ModelAndView로 바꾸어주는 로직을 추가한다.

support : Front Controller가 해당 어댑터가 사용자가 요청한 내용을 처리할 수 있는지 확인하기 위한 support 메소드를 추가해준다.

3. 특정한 반환 값을 대처하는 Adapter를 만들자.

public class ControllerV3HandlerAdapter implements MyHandlerAdapter {
	 @Override
	 public boolean supports(Object handler) {
	 return (handler instanceof ControllerV3);
	 }
	 @Override
	 public ModelView handle(HttpServletRequest request, HttpServletResponseresponse, Object handler) {
 	ControllerV3 controller = (ControllerV3) handler;
 	Map<String, String> paramMap = createParamMap(request);
	 ModelView mv = controller.process(paramMap);
	 return mv;
 }
 
 //...//

ControllerV3는 ModelView의 타입을 반환하는 컨트롤러이다.

최종적으로 ModelView로 FrontController에 반환해준다.

그럼 다른 타입을 반환하는 내용을 보자.

@Override
 public ModelView handle(HttpServletRequest request, HttpServletResponseresponse, Object handler) {
 	
    ControllerV4 controller = (ControllerV4) handler;
 	Map<String, String> paramMap = createParamMap(request);
	 Map<String, Object> model = new HashMap<>();
	 String viewName = controller.process(paramMap, model);

 	ModelView mv = new ModelView(viewName);
 	mv.setModel(model);

 	return mv;
 }

ControllerV4는 viewName인 String을 반환하는 Controller이다.

viewName을 ModelView로 바꾸어 리턴하는 모습이다.

이렇게 컨트롤러(핸들러) 반환 값에 따른 어댑터를 전부 생성해주면 어떤 반환 값이던 ModelAndView(ModelView)로 Front Controller가 받을 수 있을 것이다.

4. FrontController는 어댑터 check와 어댑터 실행을 전담한다.

다음 코드를 보며 이해해보자.

@Override
 protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 	Object handler = getHandler(request);
 	if (handler == null) {
 		response.setStatus(HttpServletResponse.SC_NOT_FOUND);
 		return;
 	}
    
	 MyHandlerAdapter adapter = getHandlerAdapter(handler);
 	ModelView mv = adapter.handle(request, response, handler);
 	MyView view = viewResolver(mv.getViewName());
 	view.render(mv.getModel(), request, response);
 	}
    
    //요청에서 uri를 뽑는 메소드
 	private Object getHandler(HttpServletRequest request) {
 	String requestURI = request.getRequestURI();
 	return handlerMappingMap.get(requestURI);
 	}
    
    // 해당 요청을 다룰 수 있는 adapter 찾기
 	private MyHandlerAdapter getHandlerAdapter(Object handler) {
 	for (MyHandlerAdapter adapter : handlerAdapters) {
 		if (adapter.supports(handler)) {
 			return adapter;
 	}
 }

코드를 보면 handler를 얻고, 해당 핸들러가 지원하는지, support로 체크를 한다.

support 체크를 통과하여 어댑터를 찾으면 해당 어댑터의 handle을 호출한다.

해당 어댑터는 핸들러(컨트롤러)를 실행하게 된다. 그리고 컨트롤러의 반환 값을 ModelAndView로 변환하여 리턴한다.

ModelAndView를 받은 Front Controller는 ModelAndView를 ViewResolver를 거쳐 올바른 path로 바꾸어주고 view에 Model을 넘겨준다.

지금까지 했던 과정의 끝에 도달했다.

내용을 보자.

굳!

모든 구조를 이해했다.

아주 놀랍게도....

이 구조가 스프링이랑 똑같다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

(스프링은 더 많다 참고로)

스프링에서는 거의 모든 타입의 어댑터, 뷰 리졸버가 구현되어 있다.

끝!

다음 시간부터는 스프링에 대해서 공부해보자!

해당 포스팅은 "인프런 - 김영한 개발자님의 스프링 MVC 1편"을 참고하여 작성되었습니다.

[#2 이미지 검색 프로젝트] 크롤링 2탄 ㅣ Json 형태로 Request하기 ㅣ Ajax 동적으로 API 요청하기

관심쟁이 영호 — Thu, 16 Sep 2021 01:39:19 +0900

이전에 포스팅한

[#1 SSP] 크롤링을 해보자!

SSP에서 가장 핵심적인 크롤링을 해보자. 목차 툴 라이브러리 설치 User-Agent 쿠팡에서 정보 긁어오기 네이버에서 정보 긁어오기 번개장터에서 정보 긁어오기 툴 language : python 3.9.7 ide : Visual Studio

bestkingit.tistory.com

포스팅을 계속해서 코딩하다 보니까 치명적인 오류를 발견하였다.

문제와 해결

네이버 홈페이지를 들어가 보았다. 처음에 페이지가 로드되었을 때는 5개 정도의 상품이 로드되었다.

그리고 스크롤이 어느 정도 내려가야 Ajax-Json 통신으로 데이터를 새롭게 받는 것을 볼 수 있다.

이전 코드로 작성된 크롤링을 실행하면, 올바르게 작성되었지만 상품이 5개까지 밖에 없다..

그래서 수정하기로 했다!

-Json 통신을 수행하는 URL을 찾아라!!

"검색" 버튼을 클릭했을 때, 날아가는 URL을 찾아야 한다.

실제 사이트에서 network탭에서 찾아보자.

저기서 어떤 것인지 감이 안 온다.. 처음엔 막막했다.

하나씩 눌러가며 뒤져보아도, 데이터가 넘어오는 것을 알아볼 수가 없었다.

그래서 header에 Request URL을 전부 복붙 하여 URL GET 요청을 하나하나 해보기 시작했다.

어랍쇼? 이게 되네? 이걸 나진이(-틀-)?

오오오오오옹오오오오오오 JSON 넘어온다!!!!!

이 글을 보는 누군가도 "네이버 쇼핑"에서 답답한 심정을 느꼈을 것이다.

십 년 묵은 체증이 내려가길 바란다.

그러면 이거 바로 받아야지?

근데 그전에... 나는 스크롤을 통해서 요청을 했지만 크롤링 프로그램에선 어떻게 요청을 보내야 하나?

페이지 URL을 보내면 또 5개가 나올 텐데?

그래서 찾아본 곳이 다음 블로그 글이다! 도움이 많이 되었다.

selenium사용하지 않고 네이버쇼핑 검색결과 크롤링하기

네이버 쇼핑의 검색 결과가 필요해졌습니다. 검색 페이지 크롤링하면 되니까 어렵지 않게 할 수 있을 거라고 생각했었는데 그게 아니었습니다. 대신 검색정보를 담고 있는 JSON파일을 찾을 수 있

kwonkyo.tistory.com

Ajax 요청 보내기

Ajax를 Get Method로 보냈을 건데.. 내가 어떻게 만드냐..?

네이버 회사에서 나온 것일 텐데

그래서 좋은 방법을 알았지~~

cURL (bash)로 복사해주자!

※ cURL 이란? : cURL은 다양한 프로토콜 요청을 지원해주는 것이라고 생각하자!

저기에서 내가 복사한 것은, 내가 보낸 요청을 cURL (bash)로 다운로드가 되는 것이다.

저러한 cURL을 파이썬 코드로 변환해주는 사이트로 가자!

Convert curl command syntax to Python requests, Ansible URI, browser fetch, MATLAB, Node.js, R, PHP, Strest, Go, Dart, Java, JSO

Language Ansible Browser (fetch) Dart Elixir Go Java JSON Node.js (fetch) Node.js (request) MATLAB PHP Python R Rust Strest

curl.trillworks.com

여기서 Python 코드로 변환하여 복붙 하면 Json 호출 끝

호출받은 것에서 내가 필요한 데이터를 추출하여 뽑아보자!

import requests #requests 라이브러리 import
import json

# http header 설정
headers = {
    'authority': 'search.shopping.naver.com',
    'sec-ch-ua': '"Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"',
    'accept': 'application/json, text/plain, */*',
    'sec-ch-ua-mobile': '?0',
    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36',
    'sec-ch-ua-platform': '"Windows"',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'sec-fetch-dest': 'empty',
    'referer': 'https://search.shopping.naver.com/search/all?query=%EB%AA%A8%EC%9E%90&frm=NVSHATC&prevQuery=%EB%83%89%EC%9E%A5%EA%B3%A0',
    'accept-language': 'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7',
    'cookie': 'NNB=NOLCMFH6MS3WA; NDARK=Y; _ga=GA1.2.36707839.1627031989; _ga_7VKFYR6RV1=GS1.1.1627031988.1.1.1627032122.60; nx_ssl=2; AD_SHP_BID=23; spage_uid=; sus_val=VXtY32Une32saj6a3yBFPHvC',
}

# parameter 설정
params = (
    ('query', '\uBAA8\uC790'),
    ('catId', '50000181'),
)


# 받은 Json 저장
response = requests.get('https://search.shopping.naver.com/api/search/aside', headers=headers, params=params)

# json을 리스트로 받기
itemlist = json.loads(response.text)


# 추출하려는 값의 key를 입력
for i in itemlist['luckyToday']['items']:
    title = i['productName']
    price = i['price'] 
    print('productName=',title,'price=',price)

굳!

완료!

또 다른 문제

받아오는 데이터의 크기를 보니까 13개의 상품을 받아온다..

그럼... 2페이지는..? 3페이지는? 노답이다..

그래서 request 요청에 대해서 조금 만져보았다.

다음 사진을 보자.

잘 보일지는 모르겠다..

params 설정 부분에 "pagingIndex"의 value를 바꾸어주었다.

계속해서 데이터가 바뀌는 것을 볼 수 있었다. (페이지 개념이겠지!)

1000, 800 등과 같은 아주 큰 수로 설정했을 때, 1000과 800에서의 데이터는 똑같다.

너무나 큰 수를 입력하게 되면, 가장 마지막의 데이터를 Response 한다.

전략

크롤링할 때, "pagingIndex"의 value를 기준으로 여러 번 한다.

previous data를 가지고 새롭게 받은 데이터가 previous data와 같다면 크롤링을 종료한다.

(더 이상 반환받을 데이터가 없기 때문에!)

previous data를 가져야 하는 이유

어떤 데이터를 입력받아 크롤링을 실행할지, 모른다.

사용자가 말도 안 되는 검색어를 입력한다면? 결과 페이지가 2개로 작을 수도 있다. 없을 수도 있다. 그래서 요청을 하고 이전에 응답을 받은 값을 저장해두었다가 다음 요청에 대한 응답이랑 비교를 해준다. 같은 값이 나오면 while문을 종료한다.

너무나 많은 메모리를 소모하지 않을까?

previous 변수에 계속해서 새로운 값을 할당해서 변수로 인한 고정적인 메모리 사용은 계속해서 유지가 된다.

(그리고 크롤링 서버는 크롤링과 DB Write만 하기 때문에 비교적 메모리 여유가 있을 것이다!)

but, 많은 요청이 들어온다면 (고정적 메모리 사용) x 데이터가 없는 요청 수.. 거의 무한으로 증가할 수 있다.

지금은 많은 고민을 하지 않고, 개발을 하자.

추 후에, 홀수의 응답 값 내용만 비교 또는 마지막 5개의 응답 값 내용만 비교 등등으로 고치면 된다!

문제 해결하기

먼저 1~9의 pagingIndex를 요청하도록 코드를 작성하였다.

import requests #requests 라이브러리 import
import json

#헤더는 고정이다.
headers = {
    'authority': 'search.shopping.naver.com',
    'sec-ch-ua': '"Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"',
    'accept': 'application/json, text/plain, */*',
    'sec-ch-ua-mobile': '?0',
    'logic': 'PART',
    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36',
    'sec-ch-ua-platform': '"Windows"',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'sec-fetch-dest': 'empty',
    'referer': 'https://search.shopping.naver.com/search/all?query=%EB%AA%A8%EC%9E%90&frm=NVSHATC&prevQuery=%EB%AA%A8%EC%9E%90',
    'accept-language': 'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7',
    'cookie': 'NNB=NOLCMFH6MS3WA; NDARK=Y; _ga=GA1.2.36707839.1627031989; _ga_7VKFYR6RV1=GS1.1.1627031988.1.1.1627032122.60; nx_ssl=2; AD_SHP_BID=23; spage_uid=; BMR=s=1631641124319&r=https%3A%2F%2Fm.blog.naver.com%2FPostView.naver%3FisHttpsRedirect%3Dtrue%26blogId%3Dteenager4282%26logNo%3D220962394004&r2=https%3A%2F%2Fwww.google.com%2F; sus_val=G6C9UIqZv3AcfjeJP38FmfXG',
}


responseList = [] # previous랑 비교하기 위한 로직이다.
number = 1
while number < 10 :
  print('number = ',number)
  pageingIndex = number
  params = (
    ('sort', 'rel'),
    ('pagingIndex', 9),
    ('pagingSize', '20'),
    ('viewType', 'list'),
    ('productSet', 'total'),
    ('deliveryFee', ''),
    ('deliveryTypeValue', ''),
    ('frm', 'NVSHATC'),
    ('query', '\uBAA8\uC790'),
    ('origQuery', '\uBAA8\uC790'),
    ('iq', ''),
    ('eq', ''),
    ('xq', ''),
  )
  response = requests.get('https://search.shopping.naver.com/api/search/all', headers=headers, params=params)
  # json을 리스트로 받기
  itemlist = json.loads(response.text)
  # 추출하려는 값의 key를 입력
  for i in itemlist['shoppingResult']['products']:
      title = i['productName']
      price = i['price'] 

      print('productName=',title,'price=',price)

  number = number + 1

python이 익숙하지 않다 보니.. 코드가 개판 같기도 하고..

콘솔을 살펴보자!

2, 3, 4 마다 달라지는 모습을 볼 수가 있다.

ㅇㅋ 일단 number 값에 따라 다른 request 완료.

그럼 이제 받은 response를 이전에 받은 response와 같은지 비교해보자!

단, 첫 번째 비교에는 list가 null 값이니 number가 1일 때는 로직이 수행되지 않도록 한다.

import requests #requests 라이브러리 import
import json

headers = {
    'authority': 'search.shopping.naver.com',
    'sec-ch-ua': '"Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"',
    'accept': 'application/json, text/plain, */*',
    'sec-ch-ua-mobile': '?0',
    'logic': 'PART',
    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36',
    'sec-ch-ua-platform': '"Windows"',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'sec-fetch-dest': 'empty',
    'referer': 'https://search.shopping.naver.com/search/all?query=%EB%AA%A8%EC%9E%90&frm=NVSHATC&prevQuery=%EB%AA%A8%EC%9E%90',
    'accept-language': 'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7',
    'cookie': 'NNB=NOLCMFH6MS3WA; NDARK=Y; _ga=GA1.2.36707839.1627031989; _ga_7VKFYR6RV1=GS1.1.1627031988.1.1.1627032122.60; nx_ssl=2; AD_SHP_BID=23; spage_uid=; BMR=s=1631641124319&r=https%3A%2F%2Fm.blog.naver.com%2FPostView.naver%3FisHttpsRedirect%3Dtrue%26blogId%3Dteenager4282%26logNo%3D220962394004&r2=https%3A%2F%2Fwww.google.com%2F; sus_val=G6C9UIqZv3AcfjeJP38FmfXG',
}

previousItemList = []
preResponse = ''
number = 1
while number < 100 :
  print('number = ',number)
  pageingIndex = number
  params = (
    ('sort', 'rel'),
    ('pagingIndex', pageingIndex),
    ('pagingSize', '20'),
    ('viewType', 'list'),
    ('productSet', 'total'),
    ('deliveryFee', ''),
    ('deliveryTypeValue', ''),
    ('frm', 'NVSHATC'),
    ('query', '\uBAA8\uC790'),
    ('origQuery', '\uBAA8\uC790'),
    ('iq', ''),
    ('eq', ''),
    ('xq', ''),
  )
  response = requests.get('https://search.shopping.naver.com/api/search/all', headers=headers, params=params)
  # json을 리스트로 받기
  itemlist = json.loads(response.text)
  
  # 첫번째 호출에는 list가 비교가 안되니 continue를 한다.
  if number == 1 :
      number = number + 1
      previousItemList = itemlist
      continue
    #아래 if문 비교를 수정해야할 듯 하다..
  if previousItemList['shoppingResult']['products'][0]['productName'] == itemlist['shoppingResult']['products'][0]['productName']:
    print('같아서 끝-----')
    break
  
  previousItemList = itemlist
  
  
  # 추출하려는 값의 key를 입력
  for i in itemlist['shoppingResult']['products']:
      title = i['productName']
      price = i['price'] 

      print('productName=',title,'price=',price)
    


  number = number + 1

로직은 완성되었다.

똑같은 응답이 왔을 때(더 이상 받을 값이 없을 때), 반복문을 종료하도록 만들자.

예시로 number를 10000부터 받도록 해보았다.

위의 코드에서 number = 1을 10000으로 바꾸자.

그리고 continue가 포함되어있는 if 체크를 10000으로 바꾸어주자.

number = 10000

# 10번만 돌리자!
while number < 10011 :

  if number == 10000 :
      number = number + 1
      previousItemList = itemlist
      continue

결과는

첫 번째 호출 때는 같은 응답을 받았는지 체크를 할 필요가 없어서 넘어갔다.

두 번째 호출 때는 10000의 호출과 똑같은 값이어서

while문을 종료한 모습이다.

코드가 너무 어지럽다..

이제 리펙토링을 해보자.

리팩토링

import requests #requests 라이브러리 import
import json

# Request에서 사용될 header 생성
headers = {
    'authority': 'search.shopping.naver.com',
    'sec-ch-ua': '"Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"',
    'accept': 'application/json, text/plain, */*',
    'sec-ch-ua-mobile': '?0',
    'logic': 'PART',
    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36',
    'sec-ch-ua-platform': '"Windows"',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'sec-fetch-dest': 'empty',
    'referer': 'https://search.shopping.naver.com/search/all?query=%EB%AA%A8%EC%9E%90&frm=NVSHATC&prevQuery=%EB%AA%A8%EC%9E%90',
    'accept-language': 'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7',
    'cookie': 'NNB=NOLCMFH6MS3WA; NDARK=Y; _ga=GA1.2.36707839.1627031989; _ga_7VKFYR6RV1=GS1.1.1627031988.1.1.1627032122.60; nx_ssl=2; AD_SHP_BID=23; spage_uid=; BMR=s=1631641124319&r=https%3A%2F%2Fm.blog.naver.com%2FPostView.naver%3FisHttpsRedirect%3Dtrue%26blogId%3Dteenager4282%26logNo%3D220962394004&r2=https%3A%2F%2Fwww.google.com%2F; sus_val=G6C9UIqZv3AcfjeJP38FmfXG',
}

## 함수 부분 ##
#####################################################################################################################

def isRepeat(previousItemList, itemList) :
    
    #같은 값을 응답받으면 True 리턴
    if previousItemList['shoppingResult']['products'][0]['productName'] == itemList['shoppingResult']['products'][0]['productName']:
        print('같아서 끝-----')
        return True
    #아니면 False 리턴
    return False

def printData(itemList) :
    # 추출하려는 값의 key를 입력
    for i in itemList['shoppingResult']['products']:
      title = i['productName']
      price = i['price'] 
      print('productName=',title,'price=',price)

def makeRequestAndGetResponse(number) :
    pageingIndex = number

    params = (
      ('sort', 'rel'),
      ('pagingIndex', pageingIndex),
      ('pagingSize', '20'),
       ('viewType', 'list'),
       ('productSet', 'total'),
       ('deliveryFee', ''),
      ('deliveryTypeValue', ''),
        ('frm', 'NVSHATC'),
       ('query', '\uBAA8\uC790'),
       ('origQuery', '\uBAA8\uC790'),
      ('iq', ''),
      ('eq', ''),
      ('xq', ''),
     )

    
    response = requests.get('https://search.shopping.naver.com/api/search/all', headers=headers, params=params)
    return response

## 로직부분 ##
#####################################################################################################################

# 중복 체크를 위한 변수
previousItemList = []

number = 1
while number < 100 :
  print('number = ',number)
  
  # 네이버를 향한 Request 생성 and 네이버로부터 response 받기
  response = makeRequestAndGetResponse(number)

  # json을 리스트로 받기
  itemList = json.loads(response.text)
  
  # 첫번째 호출에는 list가 비교가 안되니 continue를 한다.
  if number == 1 :
      number = number + 1
      previousItemList = itemList
      printData(itemList)
      continue
  
  # 반복 응답 Check Method
  # 응답이 같은 값으로 반복되었는지 확인하는 메서드를 실행한다. True일 경우 중복이라서 break
  if isRepeat(previousItemList, itemList) :
      break
  
  previousItemList = itemList
  
  printData(itemList)
  number = number + 1

훨씬 깔끔하쥬?

다음에는 mySQL에 저장하는 작업을 해보자.

[#1 이미지 검색 프로젝트] 크롤링을 해보자!

관심쟁이 영호 — Tue, 14 Sep 2021 17:42:25 +0900

SSP에서 가장 핵심적인 크롤링을 해보자.

툴

language : python 3.9.7
ide : Visual Studio Code
Browser : Google Chrome

라이브러리 설치

VS Code에서 개발할 폴더를 생성한다.
터미널을 켠다.
개발 폴더로 디렉터리가 설정되어 있지 않아 있다면, cd 명령어를 통해서 현재 프로젝트 폴더로 이동해주자.

Requests 라이브러리 설치

다음 명령어를 입력하자.

pip install requests

Requests 라이브러리는 html을 받아오는데 도움을 주는 라이브러리이다.

beautifulsoup4 라이브러리 설치

다음 명령어를 입력하자.

pip install beautifulsoup4

beautifulsoup4 라이브러리를 통해서 Requests 라이브러리가 받아온 html의 내용을 추출할 것이다.

lxml 라이브러리 설치

pip install lxml

xml 코드 사용을 도와주는 라이브러리이다.

(html이 대표적인 xml코드)

User-Agent

User-Agent는 어떠한 정보를 서버에 요청했을 때, 어느 경로를 통해서 해당 요청을 했는지 알려주는 식별자라고 생각하면 된다.

서버 입장에서는 요청한 주체가 휴대폰 or 웹 브라우저 or 기타 중에서 무엇인지 모른다. 그래서 User-Agent를 통해서 식별하도록 약속하였다.

평소에 사용하고 있는 Chrome, Explorer, iphone, galaxy에서 자동으로 해당 User-Agent를 삽입해준다.

그래서 우리는 모른다!

User-Agent가 필요한 이유는 휴대폰에 보여주는 화면과 컴퓨터로 보여주는 화면이 다르기 때문이다. 또한 Chrome과 Explorer가 또 다르다.

그래서 필요하다!

예시

Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B405

위의 예시를 보면

- 브라우저 종류

- 기기 종류

- 기기 cpu 종류

- 기기 os 종류

등등 많은 정보를 가지고 있다.

User-Agent를 확인해보자. 다음 링크를 들어가 보자!

What is my user agent?

Every request your web browser makes includes your User Agent; find out what your browser is sending and what this identifies your system as.

www.whatismybrowser.com

링크에 들어가면 다음 사진과 같은 글이 보일 것이다.

나는 window, chrome을 이용하여 접속했다!

쿠팡에서 정보 긁어오기

코드에 대해서 설명 없이 바로 시작하는 감이 있지만, 코드를 보면 바로 이해가 갈 것이다.

가장 먼저, 쿠팡 사이트 URL이 필요하다.

쿠팡을 접속하여 링크를 가지고 오자!

1. 쿠팡에 접속한다.

2. 검색창에 아무거나 검색해본다.

3. URL을 확인한다.

4. 다른 것을 검색해보자.

나는 "니트"를 검색했다.

5. URL을 확인해보자.

6. 어떤 점이 달라지는지 확인해보자.

URL을 통해서 GET 방식으로 요청하는 것이다.

파라미터는 component, q, channel이 있다. component와 channel은 모르겠고, q에 검색하려는 내용을 넣을 수 있다는 것을 알 수 있다.

7. 찾으려는 내용이 어떻게 구성되어있는지 살펴보자.

내가 찾으려는 내용은 다음 사진에 나와있는 가격과 제목이다.

개발자 도구를 실행하여 해당 태그에 대한 정보를 보자.

제목은

"div 태그"와 "class = name" 이라는 것을 알 수 있다.

가격은

"strong 태그" 와 "class = price-value"이다.

그럼 코딩을 해보자!

import requests #requests 라이브러리 import
from bs4 import BeautifulSoup # BeautifulSoup 라이브러리 import

# User-Agent 지정
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36'}

# 긁어오려는 사이트 URL
url = "https://www.coupang.com/np/search?component=&q=가디건&channel=user"

# res에는 해당 url의 html이 들어있다.
res = requests.get(url, headers= headers)

# 받아온 html을 soup에 입력
soup = BeautifulSoup(res.text, "lxml")

# 추출한 후 print
print(soup.find("div", attrs ={"class":"name"}).get_text())
print(soup.find("strong", attrs ={"class":"price-value"}).get_text())

URL : 내용을 보면 "가디건"을 통해서 입력했다는 것을 알 수 있다. 사용자가 입력한 값에 따라 해당 "가디건" 부분을 수정해주면 된다.

soup.find : 태그를 찾는 메서드이다. 속성을 추가로 기입하여 더 상세히 찾을 수 있다.

출력 화면은..

정상적으로 출력된 것을 볼 수 있다.

가장 먼저 해당 값이 나왔다고 해당 게시물이 최상단에 있는 것은 아니다.

이유는 html 구조를 css를 통해서 조작했을 가능성이 높기 때문이다!

이제 이러한 내용을 긁어왔을 때, 이미지 객체 추출 작업, DB insert 작업을 해주면 그만이다.

네이버에서 정보 긁어오기

위의 쿠팡과 같은 방법으로 수행한다.

수행한 사이트는 "네이버 쇼핑"이다.

import requests #requests 라이브러리 import
from bs4 import BeautifulSoup # BeautifulSoup 라이브러리 import

# User-Agent 지정
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36'}

# 긁어오려는 사이트 URL
url = "https://search.shopping.naver.com/search/all?query=신발&cat_id=&frm=NVSHATC"

# res에는 해당 url의 html이 들어있다.
res = requests.get(url, headers= headers)

# 받아온 html을 soup에 입력
soup = BeautifulSoup(res.text, "lxml")

# 추출한 후 print
print(soup.find("a", attrs ={"class":"basicList_link__1MaTN"}).get_text())
print(soup.find("span", attrs = {"class":"price_num__2WUXn"}).get_text())

크롤링해서 정상적으로 받아와 지는 것을 볼 수 있다.

다음으로는 받아온 데이터를 입맛에 맞게 변형해주고 해당 데이터들을 mySQL에 저장해보자.

[#0 이미지 검색 프로젝트] 프로젝트 계획

관심쟁이 영호 — Tue, 14 Sep 2021 16:04:59 +0900

이번에 새롭게 구상한 프로젝트를 실시할 예정이다.

프로젝트에 대한 전반적인 계획을 보자!

SSP - Search Shop & Price

해당 프로젝트는 이미지 검색, 최저가 검색을 구현하는 서비스이다.

목적

이 서비스를 개발하게 된 이유는 다음과 같다.

친구가 특이한 스타일의 옷을 찾고있었다. 
친구가 검색한 검색어는 "등에 지퍼가 있는 후드티"였다. 
나올리가 있나... 
많이 답답해보였다. 생각해보니까 나 또한 같은 문제로 검색에 어려움을 느낀적이 있다. 

개발해보자!

전체적으로 어려울 것이라 생각되어 덜컥 겁이 났다.

근데 "세상 살다 보면 이것보다 어려운 문제들이 많은데 이것도 성공하지 못하면 다른 문제는 어쩔래? 라는 생각이 들어, 바로 개발해야겠다는 생각이 들었다.

본론으로 돌아가 목적을 다시 이야기하자면,

이미지 검색 서비스를 개발하여 많은 사람들에게 좀 더 나은 세상을 살아갈 수 있게 도와주기 위함이다.

데이터 입출력 및 기술스택

데이터는 어디서 구하나?

데이터는 Python의 BeautifulSoup을 이용하여, 크롤링을 할 예정이다.

크롤링 사이트는 네이버, 쿠팡이다. (더 추가할 수도, 줄일 수도 있다.)

데이터 입출력

입력

Python이 동작하는 서버는 DB Insert만 수행한다.

출력

자바/스프링 서버에서 DB를 읽어와서, 사용자에게 http - json 형태로 Response 해준다.

DB 기술 스택

mySQL을 이용할 예정이다.

DB 분산화

DB Replication을 이용하여 master - slave1, slave2까지 구현할 예정이다.

아직 정확히는 정하지 않았지만 MMM or MHA 방식을 구현할 예정이다.

(DB 분산화에 대한 공부가 부족하여 계획에서 문제가 있을 수도..)

※ 이미지 검색에 필요한 이미지 인식 컴포넌트? 들에 대한 데이터도 추가할 예정이다. 공부해야 확실히 말할 수 있을 것 같아서 일단 생략해둔다.

데이터 구성

데이터 내용은 다음과 같이 구성할 예정이다.

NAME : 실제 웹사이트에 등록된 상품 이름
URL : 해당 상품의 href
PRICE : 해당 상품의 가격
이미지 인식에 필요한 기타 데이터들..

서버

서버는 총 2~3개가 될 듯하다.

프론트 서버

웹에서 동작하는 프론트 서버가 될 듯하다. (프론트 실력이 없어서 아주 저급할 수도..)

JS를 이용하여 사용자가 Canvas에 그림을 그려 검색을 하면, 그림을 분석하여 자바/스프링 서버에 넘긴다.

백엔드 서버

자바/스프링으로 구성된 서버다. 프론트와 http - json 통신을 한다. DB에서 출력을 주로 한다. 가능하면 수정도 적용할 것이다.

- 백엔드 서버 분산화

임시 서버를 2~3개 더 생성할 예정이다. (해당 내용은 공부가 부족하다.. 공부하고 수정하자!)

서버 2개는 AWS를 사용할 예정이다.

DB 서버

앞서 이야기했던, python으로 구성할 예정이다. 해당 서버는 백엔드와 소통하지 않는다. 단순 입력만 한다.

일정

구체적인 일정은 아직 생각 중이다.

개략적으로 보면 다음과 같다.

	9월 3주	9월 4주	10월 1주	10월 2주	10월 3주	10월 4주	11월 1주	11월 2주	11월 3주
크롤링 구현	O	O
DB 설계	O	O	O	O	O	O
백엔드 구현			O	O	O	O	O	O	O
프론트엔드 구현						O	O	O	O
이미지 인식 구현						O	O	O	O
DB 서버 분산화			O	O	O	O	O	O	O
백엔드 서버 분산화					O	O	O	O	O
배포									O
기타 및 유지보수	O	O	O	O	O	O	O	O	O

버전 관리

툴 : git / github

브랜치 전략 : main / develop / release / hotfix / feature

백엔드 api 설계

- 추후에 포스팅할 예정이다.

걱정

학교 공부, ADYB 프로젝트, CS 공부, 자바 공부, 코드 공부... 많다!!!!!!!

그래도 해야지 ㅋㅋㅋ

파이팅이다.

미래의 영호야

[#1 코드로 이해하는 객체지향 설계] 객체, 설계

관심쟁이 영호 — Mon, 13 Sep 2021 21:15:20 +0900

대망의 첫 장이다.

아 시작하기 전에, 저자님이 핵심적으로 전해주는 말이 있다.

해당 책은 프로그래밍 패러다임의 "객체지향 패러다임"에 대해서 설명하는 책이다.

객체지향 패러다임은 계속해서 발전하고 변화하고 있다. 우리가 공부하는 "객체지향 패러다임"은 버스 노선 중 1개다.

우리는 현재의 정류소에서 "객체지향 패러다임" 버스를 탑승할 뿐이다. 탑승하여(책을 이해하여) 패러다임의 종점까지 함께 달려보자!

1장 객체, 설계

1장에서 저자님은 추상적인 이론에 대한 설명보단, 코드를 통해서 몸소 느껴봄을 강조한다.

코드를 통해 객체지향 프로그램을 설계하고 유지 보수하는 데 필요한 원칙과 기법을

알아보고 핵심적인 내용을 정리해보자!

1장에서의 저자님이 말하고자하는 의견은,

"좋은 설계를 하여야 한다."

그렇다면 좋은설계는 무엇일까?

"오늘 요구하는 기능을 온전히 수행하면서 내일의 변경을 매끄럽게 수용할 수 있는 설계"

위에서 말하는 좋은설계는 어떻게 하는 걸까?

"객체지향 설계를 하도록 노력해야한다."

"객체지향 설계"는 어떻게 해야 하는 걸까?

책에서는 절차 지향의 예시 코드를 통해서 비유를 해주었다. 1장에서 나오는 "객체지향으로의 첫걸음"은 다음과 같다.

"캡슐화"를 이용하여 의존성을 제거하자.

의존성이란 무엇일까?

말 그대로 하나의 객체가 다른 객체에 의존하고 있다는 것을 말한다. 의존성이 많이 존재하게 된다면 아주 작은 요구사항이 변경되었을 때, 체인 효과가 일어나 아주 거대한 유지보수가 필요할 수도 있다.

의존성을 최대한 제거하여 각 객체마다 독자적인 "책임"을 가지도록 하여야 한다.

책임이란?

책임을 각 객체에게 나누어주는 것이 "객체지향 설계"의 핵심이다.

책임을 각 개체에게 나누어주면, 요구사항이 변경되어 유지보수가 필요할 때 해당 객체만 바꾸어주면 되는 효과가 있다.

2장 객체지향 프로그래밍

2장에서의 저자님이 말하는 핵심은 다음과 같다.

"코드를 유연하게 하라."

코드를 유연하게 한다는 것이 무슨 말일까?

"유연"을 책에서는 예시를 통해서 설명해주니, 보고 이해한 내 생각을 써본다.

"하나의 코드를 고정시키고 성격이 비슷한 객체들을 해당 코드 1개로만 운영하는 것"

쓰고 보니 좀 이상하다.. 다시 이야기하자면,

"자판기를 떠올려라. 자판기의 음료수 캔들은 같은 틀을 가지고 있지만 전부 다른 음료수이다. 자판기는 어떤 음료수가 올지 모르는 상태에서 틀만 정해두었을 뿐이다."라고 생각하자.

코드를 유연하게 하는 것 또한 비슷하다.

코드를 어떻게 유연하게 할까?

저자가 추천하는 핵심적인 방법은 다음과 같다.

"상속과 인터페이스를 이용하라"

상속과 인터페이스의 다형성을 이용하는 방법이 대표적이다.

※ 아주아주 비슷한 게 "오버 로딩"이 있다. "오버 로딩"은 파라미터에 따라 다른 코드를 동작시킬 수 있다. 하나 다형성을 이용한 코드는 일괄처리되는 것이 특징(파라미터를 넘긴 다음 동작이 달라짐!!)이다.

다형성이란 무엇인가?

"동일한 파라미터를 전송하지만 실제로 어떤 메서드가 실행될 것인지는
메세지를 수신하는 객체의 클래스가 무엇이냐에 따라 달라진다"

1~2장에서는 객체지향 프로그래밍을 구성하는 다양한 요소와 구현 기법을 살펴봤다.

클래스, 추상 클래스, 인터페이스를 조합해서 객체지향 프로그램을 구조화하는 기본적인 방법과 상속을 이용해 다형성을 구현하는 기법을 소개했다.

다음 시간에는 "역할, 책임, 협력"을 좀 더 상세히 알아보도록 하자!

[#0 오브젝트 - 코드로 이해하는 객체지향 설계] 정주행 시작!

관심쟁이 영호 — Mon, 13 Sep 2021 18:03:01 +0900

문득 답답한 마음에 가까운 서점을 가서 IT 서적을 둘러보았다.

수많은 서적중에서 유난히 나의 눈길을 끌었던 책이 있다.

그 책의 이름은 "오브젝트 / 코드로 이해하는 객체지향 설계" - 조영호 지음" 이었다.

책을 펴보지도 않았다. 그냥 너무 읽고싶었다.

무작정 구매를 했다.

구매를 하고 목차를 살펴보니, 내가 매일매일 고민했던 객체에 관해서 수많은 예시와 다양한 시각으로 풀어서 꼭꼭 눌러담은 느낌이었다.

정성들여 책을 정독할 것이지만, 객체에 대한 나의 호기심을 100% 채워줄 수는 없을 것이다..

(객체는 너무 방대하니까!)

하지만, 단 1%라도 채울 수 있다면 나는 만족이다!

앞으로 매일매일 이 책을 읽으며 내가 다시 읽을 수 있도록 요약 정리를 해볼 예정이다.

그리고 TOPDOWN 방식으로 웹 API 디자인 > Clean Code & Effective Java를 읽어볼 예정이다!

순탄하게 완료하기를..

[#7 SpringBoot 정주행] ViewResolver를 만들어보자!

관심쟁이 영호 — Mon, 13 Sep 2021 14:42:59 +0900

[#6-2 Spring Boot 정주행] View Path를 없애보자! ㅣ MVC 프레임워크 만들기

bestkingit.tistory.com

이전 포스팅에 문제점이 있었다.

문제는

- path에 "/WEB-INF/views/"와 ". jsp"의 중복

- HttpServletRequest, HttpServletResponse의 불필요한 사용

이번 포스팅에서 viewResolver를 통해서 위의 문제를 해결해볼 것이다.

Model 추가

지금까지는 서블릿에 종속적인 HttpServletRequest를 사용해왔다! 또한 Model도 request에 저장했다. 이제 서블릿에 종속적인 성격을 없애고, view path까지 전달하는 Model을 생성해보자!

Model 코드는 다음과 같다.

Model.java

public class Model {
    private String viewTitle;
    private Map<String, Object> model = new HashMap<>();
    public Model(String viewTitle) {
        this.viewTitle = viewTitle;
    }
    public String getViewName() {
        return viewTitle;
    }
    public void setViewName(String viewName) {
        this.viewTitle = viewName;
    }
    public Map<String, Object> getModel() {
        return model;
    }
    public void setModel(Map<String, Object> model) {
        this.model = model;
    }
};

viewTitle : Controller가 반환하는 view의 이름이다.
model : Controller가 View에 전달하려는 데이터이다.

Controller 수정

다음으로는 Controller가 Model객체를 이용하도록 바꾸어주어야 한다.

UserRegisterController.java 수정

public class UserRegisterController implements TestController{

    private UserRepository userRepository = UserRepository.getInstance();

    @Override
    public Model logic(Map<String, String> requestResponseMap) throws ServletException, IOException {
		
        /*
        * 서블릿으로 넘어온 내용 파싱
        */
        String username = (String) requestResponseMap.get("username"); 
        int age = Integer.parseInt((String) requestResponseMap.get("age"));
 
 
 		//이 부분에서 validation 처리 해야 함! (인터셉터나 필터링으로 낚아채서 해도되고..)
		
        /*
        * Repository에 User 정보 저장
        */
        User user = new User(Long.parseLong(username), age);
        userRepository.save(user);
		
        /*
        * 사용자에게 반환할 View의 정보를 담고있는 Model 생성 후 반환
        */
        Model model = new Model("userList");
        model.getModel().put("user", user);

        return model;

    }

UserListController.java 수정

public class UserListController implements TestController{

    private UserRepository userRepository = UserRepository.getInstance();
    @Override
    public Model logic(Map<String, String> requestResponseMap) throws ServletException, IOException {
        List<User> users = userRepository.findAll();

        Model model = new Model("users");
        model.getModel().put("users", users);

        return model;
    }
};

BoardListController.java 수정

public class BoardListController implements TestController{

    //board Repository 필요

    @Override
    public Model logic(Map requestResponseMap) throws ServletException, IOException {

        String path = "boardlist";
        
        //board Repository에서 board정보를 찾고 Model의 Map에 해당 Object를 저장해야함
        return new Model(path);
    }
};

이 전에는 View를 직접 만들어 넘겨주었다.

하지만 이제는 Model이라는 객체를 따로 만들어서 반환을 해준다.

FrontController 수정

Controller가 반환하는 타입이 바뀌었으니, FrontController에도 적용해주어야 한다. 그리고 pathTitle로 반환이 되므로, FrontController에서 suffix, prefix를 더해주는 작업을 해야 한다.

다음 코드는 해당 기능들을 적용한 코드이다.

FrontController.java

//servlet/test로 시작하는 모든 URI요청은 여기로 받는다.
@WebServlet(name = "frontController", urlPatterns = "servlet/test/*")
public class FrontController extends HttpServlet {

    private Map<String, TestController> controllerList = new HashMap<>();

// Controller는 총 3개이다.
    public FrontController(){
        controllerList.put("servlet/test/boardList", new
                BoardListController());
        controllerList.put("servlet/test/register", new
                UserRegisterController());
        controllerList.put("servlet/test/Users", new
                UserListController());
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse
            resp)
            throws ServletException, IOException {
        String requestURI = req.getRequestURI();
        TestController controller = controllerList.get(requestURI);
        if (controller == null) {
            resp.setStatus(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

		// 서블릿에서 넘어온 request와 response를 Map에 담아준다.
        Map<String, String> requestResponseMap = createParamMap(req);
        
        // Contrller에서 반환하는 Model을 받는다.
        Model afterControllerModel= controller.logic(requestResponseMap);
		
        // Model에 있는 viewTitle을 받는다.
        // getter에 오타가 있다.. (예제 코드를 보며 쓰다보니..)
        String viewName = afterControllerModel.getViewName();
		
        // viewTitle에 suffix와 prefix를 붙이는 viewResolver를 동작시킨다.
        View view = viewResolver(viewName);
        
        // view로 넘겨준다.
        view.render(afterControllerModel.getModel(), req, resp);


    }
    
    // 서블릿으로부터 넘어오는 req, resp를 Map에 파싱해주는 메소드
    private Map<String, String> createParamMap(HttpServletRequest request) {
        Map<String, String> requestResponseMap = new HashMap<>();
        request.getParameterNames().asIterator()
                .forEachRemaining(paramName -> requestResponseMap.put(paramName,
                        request.getParameter(paramName)));
        return requestResponseMap;
    }
    
    // viewTitle에 suffix와 prefix를 붙여주는 메소드
    private View viewResolver(String viewName) {
        return new View("/WEB-INF/views/" + viewName + ".jsp");
    }
}

주석을 하나씩 달아두었다.

전체적인 흐름을 순서대로 보자!

사용자의 요청이 온다.
FrontController로 가장 먼 저 도착한다.
FC는 요청 정보를 보고 해당하는 Controller의 logic 함수를 실행한다.
Controller는 로직을 수행하고 Model 객체(이제.. view 데이터, view title을 곁들인)를 반환한다.
FC는 Model을 받고 model의 view title을 view Resolver를 통해 suffix, prefix를 붙여준다.
view를 실행한다.

글을 마치며..

서블릿 종속성을 제거했다!
view 코드 중복 문제를 해결했다!

또또또또또또 문제가 있다..ㅋㅋㅋㅋ

문제는

개발자가 귀찮다. Model - View구조를 생각하며 하기엔 너무 힘겹다.

매번 객체를 만들어주고 객체를 반환해주고..

그래서 다음 포스팅에서는 개발자가 편하게 개발할 수 있는 방향으로 코드를 수정해보자!

[#6-2 Spring Boot 정주행] View Path를 없애보자! ㅣ MVC 프레임워크 만들기

관심쟁이 영호 — Sun, 12 Sep 2021 17:18:37 +0900

이전 포스팅에서 FrontController를 통해서 공통 처리를 가능하게 하였다.

하지만 View의 Path를 설정하는 부분과, Servlet에서 View & 또 다른 Servlet으로 넘겨주는 함수가

모든 컨트롤러에 적용된다는 것을 알 수가 있었다.

이번 포스팅은 View Path 중복 코드 문제를 해결한다.

그리고 이전 포스팅의 코드를 계속해서 사용할 예정이다.

[#6 Spring Boot 정주행] MVC 프레임워크를 직접 만들어보자

bestkingit.tistory.com

전략

생각해보자.

view의 Path 설정 코드가 중복되는 것을 막기위해서는 어떻게 해야 할까?

내 생각에는 다음 방법을 사용하면 좋을 듯하다.

1. View 라는 새로운 객체를 만든다.
2. 컨트롤러에서 View 객체에 Path를 지정한다.
3. 컨트롤러는 FrontController에 View를 리턴한다.

말로 해서 잘 이해가 안 될 수도 있다.

그래서 코드로 직접 보도록 하자!

코드 적용

가장 먼저 View를 생성해보자.

View.java 생성

public class View {

    private String path;

    public View(String path){

        this.path = path;

    }

    public void render(HttpServletRequest request, HttpServletResponse
            response) throws ServletException, IOException {
        RequestDispatcher dispatcher = request.getRequestDispatcher(path);
        dispatcher.forward(request, response);
    }
};

render를 보면 이전에 중복 문제가 있던 코드가 있는 것을 볼 수가 있다.

도메인도 하나 추가해보자.

User.java 생성

public class User {

    Long name;
    int age;

    public User(){
        ;
    }
    public User(Long userName, int userAge){
        this.name = userName;
        this.age = userAge;
    }
    public Long getName() {
        return name;
    }

    public void setName(Long name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

};

해당 User를 저장할 Repository도 만들어보자!

UserRepository.java 생성

public class UserRepository {

    private static Map<Long, User> store = new HashMap<>();
    private static long sequence = 0L;
    private static final UserRepository instance = new UserRepository();
    public static UserRepository getInstance() {
        return instance;
    }
    private UserRepository() {
    }
    public User save(User user) {
        user.setName(++sequence);
        store.put(user.getName(), user);
        return user;
    }
    public User findById(Long id) {
        return store.get(id);
    }
    public List<User> findAll() {
        return new ArrayList<>(store.values());
    }
    public void clearStore() {
        store.clear();
    }


};

Spring의 IOC, DI를 이용하면 Static 없이 편하게 사용할 수 있겠지만, 현재는 스프링을 사용하지 않으니까 Static으로 임시적으로 싱글톤 Repository를 사용하자!

그리고 Controller를 더 만들어보자. (각자 다른 Path와 logic 메서드를 가지기 위해서)

UserRegister.java 추가

public class UserRegisterController implements TestController{

    private UserRepository userRepository = UserRepository.getInstance();

    @Override
    public View logic(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String username = req.getParameter("username");
        int age = Integer.parseInt(req.getParameter("age"));
        User user = new User(Long.parseLong(username), age);
        userRepository.save(user);
        req.setAttribute("user", user);
        return new View("/WEB-INF/views/userList.jsp");

    }
};

UserListController.java 추가

public class UserListController implements TestController{

    private UserRepository userRepository = UserRepository.getInstance();
    @Override
    public View logic(HttpServletRequest request, HttpServletResponse
            response) throws ServletException, IOException {
        List<User> users = userRepository.findAll();
        request.setAttribute("users", users);
        return new View("/WEB-INF/views/members.jsp");
    }
};

BoardListController.java 추가

public class BoardListController implements TestController{

    //board Repository 필요

    @Override
    public View logic(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String path = "/WEB-INF/views/boardlist.jsp";

        //board List를 request에 포함 시켜 return 해야 함.

        return new View(path);
    }
};

FrontController.java 수정

FrontController에도 수정해야 할 부분이 있다!

View가 추가되었으니, Controller가 뱉은 View의 render를 실행해주는 메서드를 추가해야 한다!

다음 코드를 보자.

@WebServlet(name = "frontController", urlPatterns = "servlet/test/*")
public class FrontController extends HttpServlet {

    private Map<String, TestController> controllerList = new HashMap<>();

    public FrontController(){
        controllerList.put("servlet/test/boardList", new
                BoardListController());
        controllerList.put("servlet/test/register", new
                UserRegisterController());
        controllerList.put("servlet/test/Users", new
                UserListController());
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse
            resp)
            throws ServletException, IOException {
        String requestURI = req.getRequestURI();
        TestController controller = controllerList.get(requestURI);
        if (controller == null) {
            resp.setStatus(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        View view= controller.logic(req, resp);

        view.render(req, resp);

    }
}

이제 완벽히 수행하는 것을 볼 수 있다!

최종적으로 완성한 내용을 그림으로 도식화해보자.

문제점

또또... 문제가 있다.

path에 "/WEB-INF/views/"와 ". jsp"가 중복된다.

그리고

HttpServletRequest, HttpServletResponse가 꼭 필요하진 않다!

그래서 다음 포스팅에는 해당 문제점을 해결하는 방향대로 가보자!!

해당 포스팅 글은 : 인프런의 "김영한 개발자님의 강의 - Spring MVC 1편"을 참고하여 작성했습니다.

[#6-1 Spring Boot 정주행] MVC 프레임워크를 직접 만들어보자

관심쟁이 영호 — Sun, 12 Sep 2021 16:21:38 +0900

이전에 포스팅한 글에서 서블릿 dispatcher를 통해서 JSP를 반환하는 것까지 성공했다!

하지만 문제가 있었다.

이번 포스팅에서는 해당 문제들을 짚어보고 하나씩 해결해보면서

MVC 프레임워크를 만들어보는 과정을 가질 것이다.

(참고로 Spring 또한 해당 역사를 밟아오면서 발달한 것이다!)

[#5 Spring Boot 정주행] HTTP로 HTML을 응답해보자!

이번 시간에는 서버를 만들어서 html을 리턴해보자! 먼저 서버를 만들자. 다음에 나오는 코드는 이전 시간에 했던 프로젝트에서 계속 유지한다. [#3 Spring Boot 정주행] HttpServletRequest, HttpServletResponse

bestkingit.tistory.com

문제점

이전 포스팅의 글에서는 여러 가지의 문제점이 있었다. 문제점은 다음과 같다.

1. 포워드의 중복이 생겼다.

사용자가 여러가지의 요청을 하는데, 해당 요청을 할 때마다 다음과 같은 코드가 삽입된다.

// view가 저장되어있는 path 
String Path = ""/WEB-INF/views/test.jsp";

RequestDispatcher dispatcher = req.getRequestDispatcher(Path);
dispatcher.forward(req, resp);

2. 사용되지 않을 때가 있는 코드

"HttpServletRequest req / HttpServletResponse resp" 둘 중 1개가 쓰이지 않을 경우도 있다.

그렇게 된다면 쓸 때 없는 메모리 낭비가 생기게 된다.

3. 공통처리가 힘들다

기능이 점차적으로 증가할 것인데, dispatcher를 하나하나 지정 해주고 기능 따라 메서드까지 호출해야 함에 문제가 생길 수 있다.

FrontController

프론트 컨트롤러가 무엇일까?

다음 그림을 통해서 비교해보자.

프론트 컨트롤러 도입 전

프론트 컨트롤러 도입 후

그림으로 보면 바로 알 수 있을 것이다.

프런트 컨트롤러는 사용자의 요청을 가장 먼저 받게 된다.

그리고 요청에 따라 다른 Controller를 호출해준다.

이렇게 나눈 이유가 무엇일까??

이쪽에서 언급한 문제점들을 개선하기 위함이다.

FrontController에서 사용자의 요청에 대한 "공통 처리"를 할 수 있기 때문이다.

FrontController를 도입 하기 전에는 모든 Controller 앞에 "공통적인 로직"이 존재하는 것을 알 수 있다. 공통적인 로직의 코드가 어렵고 길다면 매우 힘들 것이다.

이제 FrontController에 해당 공통 로직을 한 번만 입력된다.

좀 더 간편해졌다.

이제 프론트 컨트롤러를 직접 만들어보자.

FrontController 만들기

생성 순서를 생각해보자.

특정 요청을 FrontController로 받기
요청을 받고, 공통 로직을 수행한다.
요청에 해당하는 Controller를 호출한다.
사용자에게 html, json 등을 리턴해준다.

특정 요청을 FrontController로 받기

FrontController.java 생성

//servlet/test로 시작하는 모든 URI요청은 여기로 받는다.
@WebServlet(name = "frontController", urlPatterns = "servlet/test/*")
public class FrontController extends HttpServlet {

    private Map<String, TestController> controllerList = new HashMap<>();

    public FrontController(){
        controllerList.put("servlet/test/", new
                UserController());
        controllerList.put("servlet/test/register", new
                UserController());
        controllerList.put("servlet/test/users", new
                UserController());
    }

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse
            response)
            throws ServletException, IOException {
        String requestURI = request.getRequestURI();
        TestController controller = controllerList.get(requestURI);
        if (controller == null) {
            response.setStatus(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        controller.logic(request, response);
    }
}

FrontController이다.
사용자의 요청에 따라 다른 컨트롤러를 호출해줄 HashMap을 가진다.
각 url에 따라 다른 Controller를 호출한다. (현재는 1개의 컨트롤러가 끝이다.)
"service" 메서드에서 들어온 uri에 따라 매핑된 controller를 찾고 해당 controller의 logic 메서드를 호출한다.

TestController.java 생성

public interface TestController {

    void logic(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException;


};

자바 인터페이스 다형성을 통해서 서로 다른 객체를 하나의 HashMap에 저장하고, 호출하기 위해서 필요한 Interface를 선언해준다.
이 interface를 구현하는 Controller는 logic이라는 메서드를 통해 컨트롤러 기능을 한다.

UserController.java 생성

public class UserController implements TestController{

    @Override
    public void logic(HttpServletRequest request, HttpServletResponse
            response) throws ServletException, IOException {
        String viewPath = "/WEB-INF/views/test.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);
        dispatcher.forward(request, response);
    }
};

TestController를 구현하는 것이다.
Controller만의 고유한 기능을 logic에서 수행하여야 한다.

코드 해설

사용자가 URI를 통해서 요청한다.
가장 먼저 FrontController에 요청이 도착한다.
FrontController의 service 메서드에서 요청 URI에 맞는 Controller를 찾아서 호출한다. 없으면 상태 코드를 SC_NOT_FOUND로 설정한다.
Controller의 login 함수가 실행되고, 해당하는 view를 사용자에게 리턴해준다.

이제 공통적인 로직을 FrontController에서 수행할 수 있게 되었다.

service 함수에서 URI 매핑을 성공하면, 해당하는 매핑에 따라 다른 로직을 적용하거나

여러 개의 Controller에 공통적인 처리를 할 수 있을 것이다.

문제점 2

아직 문제가 있다.

컨트롤러에 다음과 같은 코드가 있다.

String viewPath = "/WEB-INF/views/test.jsp";

RequestDispatcher dispatcher = request.getRequestDispatcher(viewPath);

dispatcher.forward(request, response);

해당 코드를 계속해서 적용하는 방식으로 정하게 된다면

모든 컨트롤러에 해당 코드가 포함되어 있게 된다.

그래서 다음 포스팅에서는 viewPath와 서블릿을 넘기는 forward 메서드를 별도로 빼줄 것이다!

[#5 Spring Boot 정주행] HTTP로 HTML을 응답해보자!

관심쟁이 영호 — Fri, 10 Sep 2021 16:36:42 +0900

이번 시간에는 서버를 만들어서 html을 리턴해보자!

먼저 서버를 만들자.

다음에 나오는 코드는 이전 시간에 했던 프로젝트에서 계속 유지한다.

[#3 Spring Boot 정주행] HttpServletRequest, HttpServletResponse 이용해보자! ㅣ 서블릿 체험

오늘은 이전 포스팅에서 다루었던 서블릿을 코드로 직접 확인하자! 목차 프로젝트 생성 HttpServletRequest 확인 HttpServletResponse 확인 프로젝트 생성 스프링으로 시작할 것이다. 1. 스프링 부트 프로젝

bestkingit.tistory.com

@WebServlet(name = "ServletTest", urlPatterns = "/servlet")
public class HttpServletTest extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setContentType("text/html");
        resp.setCharacterEncoding("utf-8");

        PrintWriter httpBodyWriter = resp.getWriter(); //HttpServletResponse 객체에 존재하는 HTTP Body writer

        httpBodyWriter.write("<!DOCTYPE html>\n" +
                "<html>\n" +
                 "<head>\n" +
                 " <meta charset=\"UTF-8\">\n" +
                 " <title>Title</title>\n" +
                 "</head>\n" +
                 "<body>\n" +
                  "<form action=\"/servlet/users/save\" method=\"post\">\n" +
                  " id: <input type=\"text\" name=\"id\" />\n" +
                  " password: <input type=\"text\" name=\"password\" />\n" +
                  " <button type=\"submit\">등록</button>\n" +
                  "</form>\n" +
                 "</body>\n" +
                "</html>\n");


    }
};

이제 크롬을 켜서 localhost:8080/servlet로 URI를 보내보자!

크롬 브라우저를 통해 spring에서 등록한 "/sevlet"을 요청했다.

그리고 서버에서 html을 생성하여 다시 응답해준 것을 볼 수 있다.

그래서 위 사진과 같이 입력 폼이 2개가 나왔다.

마찬가지로

우리가 "www.naver.com" 을 입력하면 네이버 홈이 나오는 것도 같은 원리이다!

문제가 있다.

위 코드에서 정의된 "writer"을 통해서 html을 써넣으려니(자바 코드에 html 코드를 써넣으려니..)

보기에 너무 불편하고 java, html 코드가 같이 있어서 매우 힘들다..

그래서 html을 만들어놓고 지정한 부분만 동적으로 html 코드가 생성되도록 해보자!

다음은 JSP를 이용하여 HTML코드에 JAVA코드를 심어 놓은 것이다!

<%@ page import="hello.servlet.domain.member.MemberRepository" %>
<%@ page import="hello.servlet.domain.member.Member" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
// request, response 사용 가능
 	MemberRepository memberRepository = MemberRepository.getInstance();
 	System.out.println("save.jsp");
 	String username = request.getParameter("username");
 	int age = Integer.parseInt(request.getParameter("age"));
 	Member member = new Member(username, age);
 	System.out.println("member = " + member);
 	memberRepository.save(member);
%>
	<html>
		<head>
 		<meta charset="UTF-8">
		</head>
		<body>
			성공
			<ul>
 				<li>id=<%=member.getId()%></li>
 				<li>username=<%=member.getUsername()%></li>
 				<li>age=<%=member.getAge()%></li>
			</ul>
			<a href="/index.html">메인</a>
		</body>
	</html>

출처 : 인프런 - Spring MVC 1편 (김영한 개발자님) 강의의 예제 코드

html 코드에 자바코드를 심었다.

그럼 서블릿에서 html 코드를 하나하나 보내지않아도 된다.

JSP는 html 코드 안에 있는 자바코드이며

전역객체, 자바 함수, 변수 등등을 사용할 수 있다.

이렇게 한다면 서블릿에서 해당 html 파일을 호출하는 코드를 추가해야할 것이다.

컨트롤러를 다음 코드처럼 바꾸어 주자!

@WebServlet(name = "ServletTest", urlPatterns = "/servlet")
public class HttpServletTest extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        // view가 저장되어있는 path
        String Path = ""/WEB-INF/views/test.jsp";

        // dispatcher에 path 등록
        RequestDispatcher dispatcher = req.getRequestDispatcher(Path);

        // dispatcher를 통해서 view를 리턴
        dispatcher.forward(req, resp);


    }
};

dispatcher.forward : 다른 jsp나 서블릿으로 이동시켜주는 dispatcher의 메서드이다.

참고로 jsp를 사용하려며 관련 라이브러리를 다운로드받아야 한다.

더더욱 알아보기가 편해졌고 코드 오류도 덜 나게 되었다!

또 문제가 있다.

위의 JSP 코드를 보면 JSP 1개에 너무나 많은 기능이 있는 것이다.

수백, 수천 줄이 포함되어야 할

실무 코드에서 HTML에 대한 코드 뿐만 아니라, 비즈니스 로직까지 포함되게 되면

너무나 많은 코드와 너무나 많은 기능을 가지고 있을 것이다.

더군다나, JSP내용이 그대로 HTML 코드에 나와 위험하다.

그래서 이또한 코드로 분리를 해야 한다.

그래서 MVC 패턴이 나오게 되었다.

그럼 MVC가 무엇인지 알아보자!

M : Model

V : View

C : Controller

이다.

Model : 뷰에 그려 넣을 내용을 담아두는 객체이다. 사용자에 따라, 행동에 따라 다른 내용을 가지고 있다.

View : 뷰에서는 Model에 들어있는 내용에 따라 동적으로 화면을 그린다.

Controller : HTTP 요청을 받고 필요한 작업(유효성 검사, http 검사 등등)들을 수행한 다음, 비즈니스 로직을 실행한다. 그리고 뷰에 넘어갈 모델에 필요한 내용을 담아준다.

그림을 통해서 살펴보자!

위의 그림에서 보면

View에서 사용자 요청
Controller가 모델을 조작 및 응답할 View 선택
선택된 View는 컨트롤러로부터 받은 Model을 보며 View 생성

Model, Controller, View가 서로 상호작용하며 움직이는 것을 볼 수 있다.

글을 마치며

html 코드에 자바코드를 심어놓는 작업을 마쳤다.

하지만

여러가지의 문제가 있다.

다음 글에서 해당 문제와 해결하는 과정을 밟아보자!

[#4 Spring Boot 정주행] Http에 대해서 알아보자!

관심쟁이 영호 — Fri, 10 Sep 2021 15:38:04 +0900

살아오면서 한 번쯤은 HTTP라는 단어를 들어본 적이 있을 것이다.

오늘은 그렇게 들어보았던 HTTP에 대해서 공부를 해볼 것이다!

URI? URL? URN?

URI, URL, URN과 같은 단어도 분명 한번은 들어보았을 것이다.

먼저 위키백과에서 나온 설명을 보자!

URL

URL은 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 즉, 컴퓨터 네트워크와 검색 메커니즘에서의 위치를 지정하는, 웹 리소스에 대한 참조이다. 쉽게 말해서, 웹 페이지를 찾기위한 주소를 말한다.

URN

URN은 urn:scheme 을 사용하는 URI를 위한 역사적인 이름이다. URN은 영속적이고, 위치에 독립적인 자원을 위한 지시자로 사용하기 위해 1997년도 RFC 2141 문서에서 정의되었다.

URI

통합 자원 식별자(Uniform Resource Identifier, URI)는 인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에서 요구되는 기본 조건으로서 인터넷 프로토콜에 항상 붙어 다닌다.

흠.. 뭔가 어렵다..

쉽게 풀어서 이야기하자면,

URI는 URL과 URN을 포함하고 있는 넓은 개념이다.

URL은 www.naver.com/news와 같이 naver에 있는 news라는 리소스를 지칭하는 것이다.

인터넷 환경에서 효율적인 주소가 될 수 있다.

HTTP?

HTTP는 무엇일까?? 먼저 서버와 클라이언트간의 통신에 대해서 생각해보자!

1. 사용자가 ID와 PASSWORD값을 입력하고 "로그인"버튼을 누른다.

2. 서버로 로그인을 한다는 "요청"이 인터넷망을 통해서 넘어간다.

여기서 말하는 "요청"은 어떤 식으로 날아가게 되는걸까?

방법은 수십 가지가 될 것이다.

LOGIN
ID: COCA
PASSWORD: 123

이렇게 날아갈 수도 있고,

COCA&PASSWORD

이렇게도 가능하고,

방법은 수백만 가지가 될 수 있다! 해당 서버의 개발자 마음대로 짤 수가 있다.

근데 여기서 개발자마다 자기의 방식대로 하게 된다면..?

난장판이 된다..

그래서! 개발자들 간에 규약을 만들었다.

기본적인 HTTP 구조를 먼저 보자!

HTTP 요청 메시지의 예이다.

GET /apple?id=coca&password=123 HTTP/1.1
Host: www.naver.com

기타 내용(없어도 댐)

HTTP 응답 메세지의 예이다.

HTTP/1.1 200 OK
Content-Type:text/plain;charset=UTF-8
Content-Length: 500

hi!

우리가 실생활에서 작성하는 보고서의 양식처럼

요청과 응답에 양식을 넣어

거기에 맞추어서 요청과 응답을 하도록 Protocol이라는 규약을 만들었다.

그중에서 가장 많이 쓰이고 효율적이라고 평가되는 것이 HTTP 프로토콜이다!

좀 더 쉽게 이야기를 다시 하면!

편지를 쓸 때,

To. & From. 을 넣는 형식이 있다.

이것 또한 프로토콜인 것이다!

HTTP Header

위에서 보았던 예시로 살펴보자.

GET /apple?id=coca&password=123 HTTP/1.1
Host: www.naver.com

GET : HTTP 메서드를 표현한다.

/apple : 해당 사이트에 요청하는 리소스

? : 리소스를 요청하며 함께 보내는 데이터의 시작

id=coca&password=123 : id와 password를 보냄

HTTP/1.1 : HTTP 버전

위와 같이 HTTP 메시지에는

프로토콜에 따라서 의미가 부여되어있다.

헤더에는 HTTP 전송에 필요한 부가정보가 포함되어있다.

바디 데이터에 대한 정보나, 바디 크기, 애플리케이션 정보, 캐시 정보 등등이 엄청나게 많다.

HTTP Method?

URI를 통해서 "www.naver.com/user" 라고 하면,

서버에서는 어떤 행동을 해야 할지 모른다.

user를 보여달라는 것인가?

user를 수정하라는 뜻인가?

그래서 행위를 표현하는 메서드를 같이 포함한다.

HTTP 메서드는 GET, POST, PUT, DELETE, PATCH, CONNECT 등등 많은 종류가 있다.

대표적으로 사용되는

GET, POST, DELETE를 보자!

GET : 단순 조회를 요청하는 메서드이다. 시작 라인에 명시되어있다.

POST : 수정을 요청하는 메서드이다.

DELETE : 삭제를 요청하는 메서드다.

명시적으로 나타내는 것이므로, GET을 통해 수정 요청도 가능하다.

하지만 최근에 HTTP 메서드를 기반으로 서버를 만드는 RestFulAPI가 유행하는 추세이다.

그래서 각각의 의미에 맞는 메서드를 사용하는 습관을 들이자!

HTTP Status

HTTP 상태 코드란?

클라이언트가 요청을 보내었을 때, 서버 측에서 HTTP 응답이 온다.

여기서 성공, 실패, 처리 중, 클라이언트 에러, 서버 에러 등등 갖가지의 경우가 있다.

그것을 상태 코드로 명시를 해준다.

상태 코드는 다음과 같다.

100~199 : 요청 수신 성공 및 처리 중

200~299 : 성공

- 200 : 요청 성공 및 정상적 응답

- 201 : 요청 성공 및 새로운 리소스 생성

- 202 : 요청 접수 및 처리 완료 x

- 204 : 요청 성공 및 응답 데이터 없음

300~399 : Redirection

- 300 : Multiple Choices

HTTP Header

그럼 헤더를 상세히 살펴보자!

GET /apple?id=coca&password=123 HTTP/1.1
Content-Type: application/json
Content-Length:18
Content-Language: ko

{"name":"youngho"}

Content-Type : 보내는 데이터의 미디어 타입과 문자 인코딩에 대한 정보이다.
- text/html; charset-utf-8 : html 형식이라는 타입을 데이터로 이룰 때, 지정해주는 타입이다.
- application/json : json 형태의 타입을 데이터로 이룰 때, 지정해주는 타입이다.
- image/png : image 파일의 타입을 데이터로 이룰 때, 지정해주는 타입이다.
Content-Encoding : 데이터를 압축하기 위해서 사용한다.
- gzip
- deflate
- identity
Content-Language : 데이터의 언어를 표현한다.
Content-Length : 바이트 단위로 데이터의 길이를 표현한다.
From: 이메일 정보
Referer: 이전의 웹 페이지 주소
User-Agent : 요청 유저의 애플리케이션 정보
Server : 요청을 처리하는 서버의 소프트웨어 정보
Date : 메시지 생성 날짜
Host : 요청한 호스트의 정보
Location : 페이지 리다이렉션
Authorization : 클라이언트의 인증 정보
Cookie : 클라이언트가 서버에서 받은 쿠키를 저장하고, 다시 요청 시 전달
Set-Cookie : 서버에서 클라이언트로 쿠키를 전달하고, 웹 브라우저가 해당 쿠키를 저장

[#3 Spring Boot 정주행] HttpServletRequest, HttpServletResponse 이용해보자! ㅣ 서블릿 체험

관심쟁이 영호 — Thu, 9 Sep 2021 17:39:17 +0900

오늘은 이전 포스팅에서 다루었던 서블릿을 코드로 직접 확인하자!

프로젝트 생성
HttpServletRequest 확인
HttpServletResponse 확인

프로젝트 생성

스프링으로 시작할 것이다.

1. 스프링 부트 프로젝트 생성

https://start.spring.io/ 에서 프로젝트를 생성한다.

Project : Gradle

Language : Java

Packaging : war

Dependencies : spring web, lombok

나머지는 있는 그대로 만들자!

ide 툴로 해당 폴더의 build.gradle을 open 해준다.

생성된 gradle 코드는 다음과 같다.

plugins {
	id 'org.springframework.boot' version '2.5.4'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'
	id 'war'
}

group = 'start'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	annotationProcessor 'org.projectlombok:lombok'
	providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

test {
	useJUnitPlatform()
}

2. @ServeletComponent 등록

ServletApplication.java (start.io 에서 입력한 name에 따라 이름이 다르다!)

@SpringBootApplication
@ServletComponentScan
public class ServletApplication {

	public static void main(String[] args) {
		SpringApplication.run(ServletApplication.class, args);
	}

}

3. HttpServlet 생성

서블릿이 오면 전담할 클래스가 필요하다.

@WebServlet(name = "ServletTest", urlPatterns = "/servlet")
public class HttpServletTest extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.service(req, resp);
    }
};

- urlPatterns에 맞추어 http 요청이 들어오면 서블릿 컨테이너는 해당 클래스의 service 메서드를 실행한다.

- 이때, http의 내용을 파싱 하여 HttpServletRequest, HttpServletResponse 객체로 넘겨준다.

그럼 해당 Request와 Response를 확인해보자.

HttpServletRequest 확인하기

Request는 사용자의 요청을 말한다. 여기에서는 Http 내용을 말한다!

코드는 다음과 같이 구성했다.

HttpServletTest.java

@WebServlet(name = "ServletTest", urlPatterns = "/servlet")
public class HttpServletTest extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        System.out.println("request : " + req);
        System.out.println("parameter : " + req.getParameter("id"));
        System.out.println("ContextPath : " + req.getContextPath());
        System.out.println("Cookies : " + req.getCookies());
        System.out.println("Method : " + req.getMethod());
        System.out.println("RequestURI : " + req.getRequestURI());
        System.out.println("ContentLength : " + req.getContentLength());

    }
};

이제 크롬을 켜서 다음 uri로 요청을 보내보자!

http://localhost:8080/servlet?id=abc123

그리고 콘솔창을 확인해보자.

request : org.apache.catalina.connector.RequestFacade@1787a475
parameter : abc123
ContextPath : 
Cookies : null
Method : GET
RequestURI : /servlet
ContentLength : -1

위와 같이 콘솔창에 출력되는 것을 확인할 수 있다.

그렇다. 서블릿 컨테이너가 http 요청을 알아서 올바르게 잘라준다.

우리는 get@()만 호출하면 원하는 데이터를 얻을 수 있다!

너무 편하다!

HttpServletResponse

그럼 반대로 우리가 Http 형식으로 String을 만들어야 한다.

이 또한 만만치 않은 작업이다. 띄어쓰기, 알파벳, 대소문자 중에 1개라도 틀리면 올바른 요청이 아니기 때문이다!

그래서 이번에도 서블릿 컨테이너를 통해 Http Response를 생성해보자!

코드는 다음과 같다.

HttpServletTest.java

@WebServlet(name = "ServletTest", urlPatterns = "/servlet")
public class HttpServletTest extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        System.out.println("response : " + resp);
        resp.setContentType("text/plain");
        System.out.println("set content-type : " + resp.getContentType());

    }
};

그럼 다음 내용으로 요청하고 콘솔창을 보자!

http://localhost:8080/servlet

크롬 브라우저를 통해서 http response를 살펴보았다.

다음과 같은 내용이 왔다.

Request URL: http://localhost:8080/servlet
Request Method: GET
Status Code: 200 
Remote Address: [::1]:8080
Referrer Policy: strict-origin-when-cross-origin
Connection: keep-alive
Content-Length: 0
Content-Type: text/plain
Date: Thu, 09 Sep 2021 08:33:42 GMT
Keep-Alive: timeout=60
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Host: localhost:8080
sec-ch-ua: "Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36

정말 길다..

서블릿 컨테이너가 저 많은 내용을 알아서 붙여서 보내주었다!

정말 편리하다.

위에서 확인했듯이, 서블릿 컨테이너를 이용함으로 인해서 http 요청 및 http 응답을 아주 편하게 이용할 수 있다.

[#2 Spring Boot 정주행] 웹 기본 구조, 서블릿, HTTP

관심쟁이 영호 — Thu, 9 Sep 2021 17:03:29 +0900

이번에는 웹에서 이루어지는 상호 작용을 전반적으로 살펴보고

몇 가지의 기술 들을 살펴볼 것이다.

웹 기본 구조

사용자와 서버로 나누어 생각해보자!

우리가 네이버에서 "뉴스" 버튼을 클릭하면 뉴스 화면으로 이동한다.

실제로 내부에서는 어떻게 이루어질까??

다음을 보면서 이해해보자!

사용자가 "뉴스" 버튼을 클릭한다.
사용자의 웹 브라우저가 요청 메시지를 보낸다. (ex. naver.com/news)
naver.com가 DNS를 거쳐 naver의 ip주소로 변경되어 보내진다. (ex. 192.123.123/news)
192.123.123/news 정보가 웹 애플리케이션 서버를 거쳐 http 메시지로 변경된다.
naver의 서블릿 컨테이너로 해당 http 메세지가 도착한다.
naver의 서블릿 컨테이너는 http 메세지를 읽고 그에 해당하는 내용을 사용자의 웹브라우저에게 돌려준다.
사용자의 웹브라우저는 해당 내용을 읽고 사용자가 이용할 수 있게 변환해서 보여준다.

HTTP

HTTP는 Protocol이다. 다음 포스팅에 더 상세히 살펴볼 예정이다.

이번에는 가볍게만 다루자!

컴퓨터와 컴퓨터간에 정보를 주고받는다.

위의 예시에서 사용자가 뉴스가 보고 싶어서 뉴스 버튼을 클릭했다.

그때 생성되는 http를 보면

POST /save HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded
username=kim&age=20

위와 같이 생성된다.

더 많은 정보를 담을 수 있다.

각각의 내용은 정보를 주고받으면서 서로 필요한 내용을 가지고 있다.

서블릿

서블릿은 위키백과에서 다음과 같이 설명한다.

"자바 서블릿(Java Servlet)은 자바를 사용하여 웹페이지를 동적으로 생성하는 서버 측 프로그램 혹은 그 사양을 말하며, 흔히 "서블릿"이라 불린다."라고 한다.

위의 예시에서 보면

웹 애플리케이션이 생성한 http 메시지를 읽고 그에 해당하는 동작을 수행하는 naver 측의 java 프로그램이다!

서블릿에는 여러 가지의 기능이 있다.

HTTP를 자동으로 파싱 해준다.

java로 코드를 짠다고 생각하자. 위와 같은 http가 도착하였다.

POST인지 GET인지 for문을 돌려서 contains 함수를 통해 확인해야 한다.

Content-Type은 무엇인지 확인해야 한다. 귀찮다..

자바 서블릿에서는 HTTP 메시지가 도착하면 알아서 파싱을 해준다. 그래서 우리는 getContentType()과 같이 메서드 호출만 하여 해당 요청 내용을 확인할 수 있다.

또한 응답 메시지도 HTTP 형식으로 자동으로 만들어준다!!

다음 글은 서블릿을 직접 사용해보자!

[#1 Spring Boot 정주행] Spring & Spring Boot가 무엇인가?

관심쟁이 영호 — Thu, 9 Sep 2021 16:12:44 +0900

아는 동생이 개발자를 준비해보겠다고 전화가 왔다.

백엔드를 지망하고 있어서 대표적인 Spring 공부를 추천했다.

그런데 동생이 "그래서 Spring이 무엇인가요?"라고 물었다.

명쾌하게 대답하지 못하는 내 자신을 보았다.

"Spring은 웹 개발을 하기 위해서 각종 도구와 기술이 집약되어있는 프레임워크야"라고 이야기했지만,

솔직히 나도 완벽히 이해하지 못하고 있는 느낌이다.

그래서 이번 기회에 Spring MVC 구조를 살펴보며 차근차근 다루어볼 예정이다.

이번 포스팅 글의 목적은 다음과 같다.

Spring & Spring Boot란 무엇인가?

JAVA

가장 먼저 JAVA가 무엇인지 알아야 될 것 같다.

대부분의 사람들이 알 거라고 생각한다!

JAVA란 "자바(Java)는 자바로 기술된 프로그램 개발 및 실행을 할 수 있는 소프트웨어 모임의 총칭이다." - 위키백과

라고 한다.

비유를 하여 내 생각대로 정리를 하자면,

JAVA는 마치 모래성의 모래와 같다고 생각한다.

모래의 기본적인 점성, 강도 등등을 이용하여 모래성을 만든다.

웹 애플리케이션 또한,

JAVA의 특성을 이용하여 짓는 모래성과 같다.

JAVA의 메모리 조작, 연산, 객체지향 개념 등등을 이용하여 웹 애플리케이션을 만드는 것이다.

그래서 가장 먼저 배우는 것이 C, JAVA, Python 등과 같은 프로그래밍 언어를 배우는 것이다.

(걸을 줄 알아야 뛸 것이고, 점프를 할 것이고..)

Web Application

웹 애플리케이션은 무엇일까? 이것을 이해하기 위해서는 가장 먼저 애플리케이션에 대해서 알아두어야 할 것이다.

애플리케이션이란 다음과 같다.

"특정한 일을 하도록 설계된 프로그램"이다.

JAVA를 처음 배우며, "Hello World"를 출력해본 적이 있을 것이다.

그 또한 "Hello World를 출력하는 Application"이라고 부를 수 있다.

그럼 웹 애플리케이션은 무엇인가?

요약해서 말하자면, "웹 애플리케이션이란 웹 상에서 동작하는 애플리케이션이다."

말 그대로 이야기하는 것과 같아서 나도 당황스럽다..ㅋㅋㅋ

출처 : https://velog.io/@aerirang647/2020-02-06-1502-%EC%9E%91%EC%84%B1%EB%90%A8-91k6acegdu

위의 그림에서 "WAS"가 웹 애플리케이션이다.

"웹을 통해 어떠한 요청을 하면 요청에 따라 동적인 동작을 하도록 설계된 프로그램이다."

더 쉽게 이야기하자면,

네이버에서

"뉴스" 버튼을 클릭 시, 뉴스 화면

"웹툰" 버튼을 클릭 시, 웹툰 화면

"메일" 버튼을 클릭 시, 메일 화면이 나온다.

네이버 회사 컴퓨터에 해당 버튼이 클릭되면, 해당하는 화면이 나오도록 JAVA로 코딩되어 있을 것이다.

그게 웹 애플리케이션이다!

귀차니즘

지금까지 살아오면서 로그인을 해본 적 있을 것이다.

로그인은 모든 페이지가 비슷하다.

ID와 PASSWORD를 입력하고

맞으면 로그인 성공

맞지 않으면 로그인 실패

모든 페이지가 2가지의 값을 입력받고 해당하는 입력이 올바른 입력인지 웹 애플리케이션이 체크를 하게 된다.

그럼 그에 해당하는 코드를 웹 애플리케이션에 써넣었을 것이다.

매번 같은 코드를 입력해야 하는데 귀찮다..

그래서 이러한 코드를 하나의 뭉탱이로 묶어서 사용하고 싶은 곳에 코드를 다운로드만 하게 함으로써 코드를 치지 않게 하면 어떨까?

그래서 그렇게 사용하게 되었다!

그 뭉탱이를 "라이브러리"라고 부른다.

우리는 라이브러리를 다운로드하고 사용한다.

대표적으로 "JAVA의 String"도 JAVA의 라이브러리인 java.lang.String에 들어있는 것이다.

ㅇㅋ 귀차니즘 해결

Framework

또 다른 문제가 생겼다.

각종 코드를 다운로드하여 편하게 사용하는 것은 완료하였다.

하지만 코드의 양이 방대해지면서, 개발자마다 코드의 구조가 너무나 다른 것이다.. 협업하기 너무 힘든 것이다..

그래서 효율적인 코드 구조를 인도하는 Frame을 만들어 제공을 했다!

그래서 하나의 Frame안에서 work를 한다 해서 Framework라 일컫는다.

Spring

스프링은 JAVA 진영의 대표적인 Framework이다.

위키백과에서는 다음과 같이 말한다.

"스프링 프레임워크(영어: Spring Framework)는 자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크로서 간단히 스프링(Spring)이라고도 한다. 동적인 웹 사이트를 개발하기 위한 여러 가지 서비스를 제공하고 있다."

웹 앱을 개발하면서 필요한 요소와 서비스를 제공해주는 것이다!

Spring Boot

Spring과 Spring Boot에 대한 정확한 차이를 모르는 사람도 많을 것이다!

Spring을 사용하면서 사람들이 또 귀차니즘을 느낀다.

Spring에 apache 서버를 장착, bean 등록 등과 같이 불편한 점을 느끼기 시작했다.

그래서 이러한 불편한 일을 자동적으로 지원해주는 Spring Boot가 생겨난 것이다!

추가 내용

Spring에서 제공하는 서비스를 보자.

엄청나게 많아서 하나하나 볼 수 없지만 대표적인 몇 가지를 보자!

Spring Container
Dependency Injection(DI)
ORM (Object Relational Mapping) 지원
AOP (Aspect Oriented Programming) 지원

등등 수십 가지가 더 있다!

추후에 해당 기술들에 대한 공부를 하며 글을 올려보자!

Oauth에 대해서 알아보자!

관심쟁이 영호 — Mon, 6 Sep 2021 18:47:09 +0900

Git과 gitHub에 대해서 알아보자!

관심쟁이 영호 — Mon, 6 Sep 2021 18:45:54 +0900

Socket에 대해서 알아보자! with Spring

관심쟁이 영호 — Mon, 6 Sep 2021 18:44:47 +0900

Mail Protocol과 Mail 동작 구성 보기! with Spring

관심쟁이 영호 — Mon, 6 Sep 2021 18:43:41 +0900

[ADYB] 게시판 댓글기능 구현

관심쟁이 영호 — Thu, 5 Aug 2021 19:50:10 +0900

오늘은 게시판에 댓글기능을 구현할 예정이다.

목차는 다음과 같다.

도메인

도메인 내용은 다음과 같다.

속성	기타	설명
Long sequenceId	시퀀스 전략, Primary Key	-
User user	ManyToOne 관계(user가 1)	댓글 작성자
Board board	ManyToOne 관계(board가 1)	댓글이 포함되는 게시글
Timestamp createDate	Timestamp	작성일
String Content	-	댓글 내용

@Data
@Entity(name = "reply")
public class Reply {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int replyId;

    @NotNull
    @NotBlank
    @Size(min = 1, max = 255)
    @Column(nullable = false, length = 120)
    String content;

    @ManyToOne
    @JoinColumn(name="boardId")
    private Board board;

    @ManyToOne
    @JoinColumn(name="userId")
    private User user;

    @CreationTimestamp
    private Timestamp createDate;



};

Board

Board에 Reply 추가

@OneToMany(mappedBy = "board")
private List<Reply> reply;

User

User에 Reply 추가

@OneToMany(mappedBy = "user")
private List<Reply> replyList;

컨트롤러 구현

우선 전략은 다음과 같다.

board view에 댓글을 form으로 생성한다.
controller와 post매핑하여 조작되도록 한다.

코드로 살펴보자.

@Controller
@RequiredArgsConstructor
public class ReplyController {

    @Autowired
    private final ReplyService replyService;

    @PostMapping("/reply_write")
    public String replyWrite(@ModelAttribute Reply reply, Long boardId, @SessionAttribute(name = SessionConst.LOGIN_USER, required = false)
            User user){

        return replyService.replyWrite(reply, user, boardId);

    }

    @PostMapping("/reply_delete")
    public String replyDelete(@ModelAttribute Reply reply, @SessionAttribute(name = SessionConst.LOGIN_USER, required = false)
            User user){


        return replyService.replyDelete(reply);
    }

};

위 코드를 보면, 작성 및 삭제를 post로 나누어 놓았다.

이제 Repository를 만들고 컨트롤러에 적용해보자.

Repository 생성

Repository는 Spring JPA data를 이용한다.

ReplyRepository

public interface ReplyRepository extends JpaRepository<Reply, Long> {
};

Service 생성

ReplyService

@Service
@RequiredArgsConstructor
public class ReplyService {

    @Autowired
    private final ReplyRepository replyRepository;

    @Autowired
    private final BoardRepository boardRepository;

    @Autowired
    private final UserRepository userRepository;

    public String replyWrite(Reply reply, User user, Long boardId){

        User findUser = userRepository.findByUserId(user.getUserId());
        Optional<Board> findBoard = boardRepository.findById(boardId);

        reply.setBoard(findBoard.get());
        reply.setUser(findUser);
        replyRepository.save(reply);

        return "home";
    }

    public String replyDelete(Reply reply){

        replyRepository.delete(reply);

        return "home";
    }

};

Write 부분에서는 board, user을 설정해주고 저장했다.

Delete 부분에서는 해당 reply만 삭제해주었다.

(User, board는 어차피 mappedBy 처리라서 따로 처리해주지 않아도 된다.)

뷰 구현

기존에 있던 페이지에서 추가해보자!

기존페이지는 다음과 같다.

(Thymeleaf를 사용했다.)

<!DOCTYPE html>
<html th:replace="~{layouts/base :: layout(~{::title},~{::section})}"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>게시판 조회</title>
</head>
<body>
<section class="masthead text-center">

    <div class="jumbotron"  th:object="${board}">
        <h1 class="display-4" th:text="${board.title}">Hello, world!</h1>
        <br>
        <hr>
        <br>
        <div th:each="path : ${board.userFileList}">
            <br>
            <img th:src="${path.filePath}" class="card-img-top" alt="..." style="width: 200px; height 300px;">
            <br>
        </div>
        <br><hr><br>
        <p class="lead" th:text="${board.content}">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr><br>
        <p th:text="${board.user.userId}">It uses utility classes for typography and spacing to space content out within the larger container.</p>

        <br><hr><br>

        <!-- Reply Section -->

        <div class="input-group mb-3">

            <form id="reply" action="/reply_write" method="post">
                <input type="text" id="content" name="content" class="form-control" placeholder="댓글을 입력해주세요.." aria-label="댓글을 입력해주세요.." aria-describedby="basic-addon2">
                <input type="hidden" id="boardId" name="boardId" th:value="${board.boardId}">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="submit">등록</button>
                </div>
            </form>
        </div>



        <!-- Reply Section End -->
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="/board" role="button">목록으로</a>
        </p>
    </div>

</section>
</body>
</html>

Reply 기능은 form으로 이루어져 있다.

Reply 기능의 내용은 content이고, hidden으로 정의되어있는 것은 해당 board의 id를 넘기는 것이다. (매핑에 필요하기 때문에)

기타 입터셉터 처리까지 해주었다!

끝!

[Spring Boot] Model 과 ModelAndView 차이.

관심쟁이 영호 — Wed, 4 Aug 2021 20:31:59 +0900

인터셉터에서 세션 처리를 하는 도중에 문제가 생겼다.

지금까지 Controller에서 Model을 이용하여 view에 넣어주었는데,

HandlerInterceptor의 postHandle에는 ModelAndView를 이용하는 것이다..(확장하면 되지만 있는 그대로를 이용하자!!)

똑같겠지 생각하며 addAttribute를 찾아보았지만 없다....(세션에 있는 User 정보를 넣고 싶다고!!)

그럼 ModelAndView로 Model에 데이터를 넣는 방법을 찾아보면서 Model과 ModelAndView를 확실히 다루어 볼 예정이다!

가장 먼저 알아둬야 할 것이 있다.

Model, ModelAndView에서

Model이란 무엇인가?

다음 그림을 보자! (발로 그린 그림이다..)

그림을 보면

Controller에서의 데이터를 Model에 담는다.
View는 Model에 담겨있는 데이터만 쏙쏙 골라서 화면에 바인딩해준다!

왜 저렇게 나누어서 할까?

이유는 간단하다. 수많은 개발자들이 서로 일을 편하게 하기 위해서 저렇게 한다.

그 외 다루어야 할 점이 있지만, 여기까지만 알아두고

바로 차이점에 대해서 알아보자!

실제 Model 사용 예시

한 줄 요약 : ModelAndView는 Model에서 기능을 추가한 것이다.

Model (Controller -> Model)

아래 코드를 보자.

@GetMapping("/apple")
public String test(@ModelAttribute Member member,HttpServletRequest request, Model model){
        
    model.addAttribute("Member", member);
        
    return "home";
}

코드 설명:

@ModelAttribute를 통해서 사용자가 입력한 내용을 Member객체에 파싱 하여 member를 받는다.
"home"에서 "member"가 가지고 있는 요소를 이용하기 위해, member를 model에 담아준다.

※ 사실 @ModelAttribute를 이용하면 자동으로 해당 member를 model에 담아준다.. ㅋㅋ

그럼 View -> Model

<!DOCTYPE html>
<html th:replace="~{layouts/base :: layout(~{::title},~{::section})}"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>홈 입니다.</title>
</head>
<body>

<section th:object="${member}">

    <button type="button" onclick="location.href='/modify'" th:if="${member.memberId != null}">회원수정</button>

    </section>
</section>
</body>
</html>

Thymeleaf 템플릿 엔진을 통해서 member를 조회하는 모습이다.

여기서 ${member}가 가능한 이유는 해당 html을 호출한 Controller에서 model에 "member"를 담아주었기 때문이다.

Model vs ModelAndView

Model

Model 객체는 별로 기능이 없다.

Method	설명
addAttribute	Model에 속성추가
getAttribute	Model에 있는 속성을 조회
addAttributes	Model에 속성을 여러개 추가
getAttributes	Model에 속성을 여러개 조회
containsAttributes	Model에 특정한 속성이 있는지 확인
mergeAttributes	Model 두개를 합침

이 정도 기능이 끝..

ModelAndView

Model에 비해서 더욱 확장성 있는 것이다.

(내부적으로 확인해보니까 ModelMap이 들어있다. ModelMap은 Model보다 크고 ModelAndView보다 작다.)

setViewName	view 이름을 설정
getViewName	view 이름을 조회
setView	view 설정
getView	view 조회
hasView	설정되어있는 view가 있는지 확인
getModelMap	내부의 모델 Map 조회
getModel	내부 모델 조회
getStatus	상태 설정

이것 이외에도 더 많다!

Model은 속성을 추가 삭제만 할 수 있는 기능이지만,

ModelAndView는 view설정, model설정, 상태 설정, 기타 기능까지 많다!!

복잡할수록 ModelAndView를 사용하겠지!

[ADYB] 게시판 글쓰기 구현 ㅣ JPA + Spring Boot + Thymeleaf

관심쟁이 영호 — Tue, 3 Aug 2021 15:50:14 +0900

오늘은 게시판 글쓰기를 구현할 것이다.

Board 도메인 생성

@Data
@Entity(name = "board")
public class Board {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int boardId;

    @Column(nullable = false, length = 100)
    private String title;

    @Lob
    private String content;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name="userId")
    private User user;

    @OneToMany(mappedBy = "board")
    private List<Reply> reply;

    @ColumnDefault("0")
    private int count;

    @CreationTimestamp
    private Timestamp createDate;

};

코드 설명:

user는 다대일 매핑으로 한다.
LAZY로 지연 로딩을 실시한다.

뷰 구현하기

뷰는 다음과 같이 간단히 만들었다.

<!DOCTYPE html>
<html th:replace="~{layouts/base :: layout(~{::title},~{::section})}"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>게시판 쓰기</title>
</head>
<body>
<section class="masthead text-center">
<div>
게시판 쓰기 입니다.

</div>
    id="signUpForm" action="/signup" method="post" th:object="${user}"
    <form id="board" action="/board_write" method="post" th:object="${board}">

        제목 : <input name="title" id="title" type="text">
        내용 : <input name="content" id="content" type="text">


        <button type="submit">제출</button>
    </form>

</section>
</body>
</html>

Board Repository 생성

public interface BoardRepository extends JpaRepository<Board, String> {

};

간단히 CRUD만 구현!

@Controller
@RequiredArgsConstructor
@Slf4j
public class BoardWriterController {

    private final BoardWriteService boardWriteService;
    @GetMapping("/board_write")
    public String BoardWriter(
            @SessionAttribute(name = SessionConst.LOGIN_USER, required = false)
                    User user, Model model
    ){

        addUser(user, model);
        return "board_write";
    }

    @PostMapping("/board_write")
    public String BoardWriter(@ModelAttribute Board board, @SessionAttribute(name = SessionConst.LOGIN_USER, required = false)
            User user){

        boardWriteService.write(board, user);
        return "redirect:/";

    }


    public void addUser(User user, Model model){
        if(user == null) {
            model.addAttribute("user", new User());
            return;
        }
        model.addAttribute("user", user);
        return;
    }
};

코드 설명:

GET, POST 매핑 두 가지가 있다.
GET은 뷰를 리턴
POST는 게시글 쓰기 폼 데이터를 받는 매핑이다.

서비스 구현하기

@Service
@Slf4j
@RequiredArgsConstructor
public class BoardWriteService {
    private final BoardRepository boardRepository;
    private final UserRepository userRepository;
    public void write(Board board, User user){

        User findUser = userRepository.findByUserId(user.getUserId());
        board.setUser(findUser);
        boardRepository.save(board);

    }
};

코드 설명:

컨트롤러에서 넘겨준 user를 이용하여 userRepository에서 user 객체를 받아온다.
board에 user를 set 해준다.
boardRepository.save를 이용하여 board 객체를 저장한다.

※ 여기서 userRepository를 이용하여 user 객체를 받아오지 않고, 컨트롤러에서 "@ModelAttribute"를 통해서 받아온 user를 바로 board.setUser(user)를 해주면 에러가 뜬다.

이유는 : "@ModelAttribute"에서 받아온 user는 그냥 바인딩된 객체일 뿐, DB에 등록된 객체가 아니기 때문이다. FK를 이어주어야 하는데, JPA는 해당 user가 기존에 로그인한 user인지 모른다. 그래서 userRepository의 findByUserId를 통해서 user를 가지고 와서 save를 해주어야 한다.

다음은 게시판 조회를 구현할 예정이다.

[ADYB] Spring Boot ㅣ 로그아웃 구현하기 ㅣ 세션 만료시키기

관심쟁이 영호 — Tue, 3 Aug 2021 15:49:26 +0900

오늘은 로그아웃을 구현할 것이다.

내용이 작기때문에 목차따윈 없다!

세션 만료시키기

세션을 만료하는 방법은 많다. 나느 그 중에서 HttpSession 클래스에 구현되어있는 invalidate 메소드를 이용할 것이다.

상황 : "로그아웃" 버튼을 클릭할 시, 즉시 세션을 파괴하고 홈으로 리다이렉트한다!

컨트롤러부터 생성해보자.

LogOutController.java

@Controller
public class LogOutController {

    @GetMapping("/logout")
    public String logout(HttpServletRequest request){

        HttpSession session = request.getSession(false);
        if (session != null) {
            session.invalidate();
        }
        return "redirect:/";
    }
};

다음과 같이 구성하였다.

코드 설명:

사용자의 request로 부터 Session을 얻는다.
Session을 null check 해준다.
Session이 null이 아닐 경우 (세션이 있다.) 세션을 만료시킨다. null일 경우 아무 작업을 하지 않는다.
홈으로 리다이렉트 해준다.

정상적으로 세션이 없어진 것을 볼 수 있다.

[ADYB] Session이 없으면 특정페이지 접근못하게 하기

관심쟁이 영호 — Tue, 3 Aug 2021 15:48:49 +0900

오늘은 Session이 없으면 특정 페이지에 접근을 하지 못하게 하는 작업을 할 것이다.

전략

특정 페이지 URL 요청 시, Interceptor를 통해서 세션을 확인한다.
세션이 존재하지 않을 경우 "home"으로 redirect해준다.

세션 체크를 할 특정 페이지는 회원 수정, 게시판 글 작성이다.

인터셉터 생성

- 먼저 인터셉터를 생성하자.

SessionCheckInterceptor.java

@Slf4j
public class SessionCheckInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse
            response, Object handler) throws Exception {
		
        //Session Check - Session X
        if(request.getSession().getAttribute(SessionConst.LOGIN_USER) == null){
        	
            // 세션이 없을 시, login으로 Redirect
            response.sendRedirect("/login");
            return false;
        }
		
        // Session O
        return true;

    };
}

코드 설명:

request.getSession().getAttribute(SessionConst.LOGIN_USER) == null)

로그인 세션이 있는지 확인한다. 세션이 null일 경우(세션이 존재하지 않는 경우) if문에 진입한다.

response.sendRedirect("/login")

세션이 없는 경우에 "/login" 으로 보낸다.

WebConfig 등록

@Configuration
public class WebConfig implements WebMvcConfigurer {
        registry.addInterceptor(new SessionCheckInterceptor())
                .order(2)
                .addPathPatterns("/modify", "/board_write")
                .excludePathPatterns("/css/**", "/*.ico", "/error","/login");
    }
};

코드 설명:

"registry.addInterceptor(new SessionCheckInterceptor()) : 인터셉터를 등록한다.
".order(2)" : 2번째 인터셉터이다.
"addPathPatterns("/modify", "/board_write") : "/modify", "/board_write" 에만 인터셉터를 실행한다.
.excludePathPatterns : 지정한 것은 해당 인터셉터를 실행하지 않는다.

[#6] JPA를 이용한 로그인

관심쟁이 영호 — Tue, 3 Aug 2021 15:47:58 +0900

JPA를 이용한 로그인

이번 포스팅은 로그인 기능을 구현 내용과 구현 중 맞닿은 에러에 대해서 다룰 것이다!

이번 내용은 다음과 같다.

Login 프론트 구현
Login 컨트롤러 구현
UserRepository 기능 확장
Login 서비스 구현

Login 프론트 구현

먼저 코드를 살펴보자!

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">

    <title>로그인</title>
</head>
<body>
로그인입니다.

<form method="post" action="/login">
    ID :<input type="text" name="id"><br>
    PASSWORD :<input type="text" name="password"><br>
    <button type="submit">제출</button>
</form>
</body>
</html>

코드 설명

form 태그를 통해서 post 요청을 수행한다.
상대경로를 통해 "/login"으로 요청을 수행한다.
id와 password를 입력할 수 있다.

Login 컨트롤러 구현

코드로 바로 보자.

@Controller
@RequiredArgsConstructor
@Slf4j
public class LoginController {
    @Autowired
    private final UserRepository userRepository;
    @Autowired
    private final LoginService loginService;

    @GetMapping("/login")
    public String login() {
        return "login";
    }

    @PostMapping("/login")
    public String loginId(@ModelAttribute User user) {
    
        loginService.login(user);

        return "redirect:/";

    }
    
};

코드설명

GetMapping : "/login"으로 매핑된다. 뷰 리졸버를 통해서 "login.html"을 호출한다.
PostMapping: "/login"으로 매핑된다. LoginService의 login 메소드를 실행한다.
홈을 리다이렉트한다.

UserRepository 기능 확장

이 부분을 보면서 살짝 고생했다.. ㅋㅋ

먼저, 코드를 살펴보자.

public interface UserRepository extends JpaRepository<User, Long> {
    @Query("select m from user m where m.id = ?1")
    List<User> finduser(String id, String password);
};

UserRepository를 수정하였다. query문에 password도 찾아야하는데 일단은 조금만 뒤에 완성하자!

그냥 내생각 : JpaRepository를 이용하여 "findOne"이나 "findById"를 이용하려했는데, 설정된 파라미터 정보를 보니까 Option<>, Long Id인 것이다. 근데 회원은 String 타입의 id와 String 타입의 password를 입력하는데, Long으로 보낼 수도 없다. 그래서 GeneratedValue로 sequenceid를 넣어야하는가 싶은데 상식적으로 누가 sequenceid로 검색을 하나.. 그래서 새롭게 만들었다!

코드 설명

먼저, 생성할 쿼리를 지정해주어야한다. 방법은 "@Query" 어노테이션을 사용한다. 괄호안에 쿼리를 써주자.
두번째로, 리턴타입을 User라고 할 수 없다고 판단된다. 컨트롤러처럼 ModelAttribute가 적용이 안된다. 그래서 List로 받았다.
세번째로, 테이블에 이름을 지정해주어야한다. 쿼리문을 살펴보면 user 테이블을 조회하였다. 그래서 명시적으로 User클래스의 Entity 속성을 user로 지정해주어야 한다.

@Entity(name = "user")

※ 맞닿은 에러 : 먼저 List<User>대신 User로 리턴을 했다가 매핑 오류가 났다. @ModelAttribute와 같이 지정해주는 줄 착각했다. 다음에는 해당하는 기능이 있는지 찾아보자!

※ 두번째로 Entity속성을 지정해주지않아서 오류가 났다. 지정해라!!

※ 어느정도 구현이 완료되면 QueryDsl로 리팩토링해보자.

Login 서비스 구현

코드를 바로 보자!

@Service
@RequiredArgsConstructor
@Slf4j
public class LoginService {
    @Autowired
    private final UserRepository userRepository;

    public String login(User user){
    
        List<User> lis = userRepository.finduser(user.getId(), user.getPassword());
        
        return "redirect:/";
    }

};

코드 설명

컨트롤러에서 LoginService의 login 메소드를 호출한다.
호출된 login 메소드는 DB에 검색하여 해당하는 회원정보가 있는지 조회한다.
그리고 홈으로 리다이렉트한다.

※ 회원정보가 검색되었을 경우 or 검색되지 않았을 경우를 나누어 구현을 완성해야한다.

※ 로그인 validation 처리도 하여야 한다.

[Thymeleaf] BootStrap 템플릿 적용, 레이아웃 및 템플릿으로 나누기

관심쟁이 영호 — Tue, 3 Aug 2021 15:45:15 +0900

오늘은 Thymeleaf에서 템플릿 조각, 레이아웃 나누기 기능을 공부해볼 예정이다.

부트스트랩 템플릿 구하기

부트스트랩에서 템플릿을 구해서 가져올 것이다. 먼저 아래의 링크로 가서 템플릿을 가져오자.

https://startbootstrap.com/

Free Bootstrap Themes, Templates, Snippets, and Guides

Start Bootstrap develops free to download, open source Bootstrap 5 themes, templates, and snippets and creates guides and tutorials to help you learn more about designing and developing with Bootstrap.

startbootstrap.com

내가 사용할 코드는 다음 페이지에 나와있는 템플릿이다.

https://startbootstrap.com/theme/freelancer

Freelancer - One Page Theme

A free one page Bootstrap portfolio theme for freelancers. All Start Bootstrap templates are free to download and open source.

startbootstrap.com

템플릿 조각 나누기

내가 나눌 코드는 Navigation, Footer, Config 이다. 조각 나누는 순서는 다음과 같다.

fragment를 저장할 디렉터리를 생성
새로만든 디렉터리에 나눌 fragment 코드 분리

먼저 템플릿에 있는 navigation, footer, config 부분을 빼내어 새로 만들어보자!

(부분 생략하였다.)

navigation.html

<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<body>
<nav th:fragment="navigation" class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
    <!-- Navigation-->
</nav>
</body>
</html>

footer.html

<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<body>
	<footer th:fragment="footer" class="footer text-center">
		<!-- Footer-->
	</footer>
</body>
</html>

config.html

<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="config">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Freelancer - Start Bootstrap Theme</title>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="css/styles.css" rel="stylesheet" />
</head>

</html>

코드 설명:

fragment : 해당 부분을 fragment로 지정한다는 코드이다. 다른 코드에서 해당 fragment name을 통해 인식한다.

레이아웃 생성

먼저 레이아웃을 생성하자.

template/layouts/base.html

<!DOCTYPE html>
	<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
		<head>
    		<title th:replace="${title}">레이아웃 타이틀</title>
		</head>
		<body>

			<div th:replace="~{fragment/navigation :: navigation}"></div>

			<section th:replace="${content}" class="page-section" id="contact">
    			<p>레이아웃 컨텐츠</p>
			</section>


			<div th:replace="~{fragment/footer :: footer}"></div>
			<div th:replace="~{fragment/copyright :: copyright}"></div>
			<div th:replace="~{fragment/config :: config}"></div>

			</div>

		</body>
	</html>

앞에서 생성한 fragment를 차례대로 불렀다.

코드 설명:

<div th:replace="~{fragment/navigation :: navigation}"></div>

- 앞에서 생성한 navigation fragment를 replace한다.

<section th:replace="${content}" class="page-section" id="contact">
    <p>레이아웃 컨텐츠</p>
</section>

레이아웃을 사용했을 때, 해당 부분은 customize 하도록 한다.

템플릿 조각과 레이아웃이란?

다음의 그림을 보자.

페이지 3개를 만든다고 가정하자.

위의 그림을 보면 header, navbar, footer는 세 페이지에 공통으로 똑같이 적용된다는 것을 알 수 있다.

각 코드에 같은 코드가 들어간다면 유지보수 중에 너무나도 힘들 가능성이 있다.

(※ 예를 들어, navbar에 한 글자를 바꾼다고하면 페이지 갯수만큼 수정을 해야한다.)

그래서 다음과 같이 fragment를 생성하여 가져다 쓸 수 있게 하였다.

다음 그림을 보자.

board라는 페이지를 만든다고 가정하자.

따로 header, navbar, footer를 생성해놓고 가져다 쓰는 것을 볼 수 있다.

(※ 이 경우, 따로 생성해놓은 navbar만 고쳐주면 해당 navbar를 쓰는 모든 페이지가 수정될 것이다.)

개발자는 content 내용만 각각 페이지에 다르게 설정해주면 코드중복없이(템플릿을 가져다 쓰는 코드는 중복될 수 있다.) 페이지를 생성할 수 있다.

그럼 레이아웃은 무엇인가?

다음 그림을 보면서 이해하자

각 템플릿의 위치가 똑같고 페이지가 대부분 비슷할 경우, 모범 html(레이아웃)을 만들고 그것만 가져다 쓰면 된다.

(※ 레이아웃에서 각 페이지마다 customize할 부분을 정해두어야 한다.)

이해가 쉽쥬!?

[Thymeleaf] 입력 폼 처리

관심쟁이 영호 — Tue, 3 Aug 2021 15:44:22 +0900

오늘은 내가 개발 공부를 하면서 가장 많이 사용했던 입력 폼 처리에 대해서 공부를 할 것이다.

입력 폼 처리란
입력 폼 적용

입력 폼 처리란?

웹 개발공부를 하면서 Form 형태로 data를 주고받는 경우를 자주 볼 수 있다. Thymeleaf는 해당 폼 데이터를 주고받을 때, 많은 도움을 준다.

입력 폼 적용

다음의 코드를 보자.

<form action="item.html" th:action th:object="${item}" method="post">

 <div>
 <label for="itemName">상품명</label>
 <input type="text" id="itemName" th:field="*{itemName}" class="formcontrol" placeholder="이름을 입력하세요">
 </div>
 
 <div>
 <label for="price">가격</label>
 <input type="text" id="price" th:field="*{price}" class="form-control"
placeholder="가격을 입력하세요">
 </div>
 
 <div>
 <label for="quantity">수량</label>
 <input type="text" id="quantity" th:field="*{quantity}" class="formcontrol" placeholder="수량을 입력하세요">
 </div>
 
 </form>

위 코드를 보면 1개의 폼을 볼 수 있다.

태그를 1개씩 살펴보자.

th:object : 객체를 지정한다.
*{~} : th:object에서 지정한 객체에 접근한다. *{itemName}이라고 하면 item.itemName이다.
th:field : HTML 태그의 id, name, value 속성을 자동 처리해준다. <input type="text" th:field="*{itemName}" />는 다음과 같이 렌더링 된다. <input type="text" id="itemName" name="itemName" th:value="*{itemName} />

※ 위의 object에서 객체를 지정하기 위해서는 먼저 오브젝트에 대한 정보를 넘겨주어야 한다. 그래서 Controller에서 "model.addAttribute("item", new Item())"을 해주어 오브젝트를 model에 담아주어야 한다.

※ *{itemName} = ${item.itemName} -> th:object로 객체를 지정했기 때문에 사용 가능

[Thymeleaf]#1 타임리프 기본 기능 ㅣ text, SpringEL, 기본 객체

관심쟁이 영호 — Tue, 3 Aug 2021 15:43:06 +0900

백엔드 공부를 하면서, 많은 고충이 있었다. 그중 가장 많이 맞닿은 문제는 뷰에서의 문제였다.

내가 구현한 내용을 눈으로 확인하고 싶지만 프론트에 대한 지식이 부족하여 발목이 많이 잡혔다.

맷돌에 손잡이가 없어서 맷돌을 사용하면 안되니까!

이번 기회에 확실하게 공부를 하자.

<ul>Map

 <li>${userMap['userA'].username} = <span th:text="${userMap['userA'].username}"></span></li>
 
 <li>${userMap['userA']['username']} = <span th:text="${userMap['userA']['username']}"></span></li>
 
 <li>${userMap['userA'].getUsername()} = <span th:text="${userMap['userA'].getUsername()}"></span></li>
 
</ul>

코드 설명:

userMap['userA'].username : Map에서 userA를 찾고, 프로퍼티 접근을 한다.
나머지는 위의 Object와 같다.

URL 링크

Thymeleaf에서는 @{~} 으로 url을 표현한다.

아래의 코드를 보자.

<li><a th:href="@{/login}">basic url</a></li>

<li><a th:href="@{/login(param1=${param1}, param2=${param2})}">hello queryparam</a></li>

<li><a th:href="@{/login/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>

<li><a th:href="@{/login/{param1}(param2=${param2})}">path + query param</a></li>

코드 설명:

단순 URL : @{/login}으로 표현한다.
쿼리 파라미터 : @{/login(param1=${param1}, param2=${param2})}는 /hello?param1=data&param2=data2로 변환된다.
경로 변수: @{/login/{param1}/{param2}(param2}(param1=${param1}, param2=${param2})}는 /login/data1/data2로 변환된다.
경로 변수 + 쿼리 파라미터 : @{/login/{param1}(param2=${param2})}는 /login/data1?param2=data2로 변환된다.

속성 값 설정

타임리프에서는 속성 값을 변경할 수 있다. 다음 코드를 살펴보자!

<h1>속성 추가</h1>

- th:attrappend = <input type="text" class="text" th:attrappend="class='large'" /><br/>

- th:classappend = <input type="text" class="text" th:classappend="large" /><br/>

- checked o <input type="checkbox" name="active" th:checked="true" /><br/>

이렇게 하면 th로 설정한 내용대로 속성 값이 변경되거나 추가된다.

조건부 평가

if와 같다고 생각하자

크게 if와 unless로 두 가지가 있다. unless는 if의 반대 문법이다.

<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>

<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>

이렇게 하면

해당 조건이 false인 경우 렌더링 자체가 되지 않고 사라진다.

오늘은

여기까지만 알아보고

추후에 더 알아보자!

[Spring Boot] 파일 업로드

관심쟁이 영호 — Tue, 3 Aug 2021 15:41:47 +0900

오늘은 Spring Boot를 이용하여 파일 업로드에 대해서 공부할 예정이다.

※ 파일을 업로드를 하기위해서는 문자가 아닌 바이너리 데이터를 전송해야 한다. 문자로는 파일을 전송하기가 어렵다. 근데 폼을 이용하여 파일을 전송해야 할 경우에는 파일뿐만 아니라 문자도 포함되어 있는 폼일 확률이 높다.

위와 같은 이유때문에 단순히 구분자 "&"를 이용하는 application/x-www-form-urlencoded를 이용하기는 한계가 있다.

multipart/form-data

- 해당 방식은 문자와 바이너리 데이터를 같이 보낼 수 있도록 하는 방식이다. 이것을 이용하기 위해서는 form에 enctype="multipart/form-data"라는 속성을 추가해야 한다.

- 이 방식으로 생성한 HTTP 메시지는 각각 전송 항목이 구분되어있다. 위의 예에서는 A, B, File로 각각 분리되어서 전송된다. 문자는 문자 그대로 전송, 파일은 파일 이름과 Content-Type이 추가되고 바이너리 데이터가 전송된다.

더 정확한 이해를 위해 실제 코드를 살펴보자.

실제 코드

html form

<form id="board" action="/board_write" method="post" th:object="${board}" enctype="multipart/form-data">

        <div class="form-group">
            <label for="title" class="h4">제목</label>
            <input type="text" class="form-control" id="title" name="title" placeholder="제목을 작성해주세요.">
        </div>

        <hr width = "100%" color = "blue" size = "3"><br>

        <input type="file" id="imageFiles" name="imageFiles" multiple="multiple" accept="image/*">

        <hr width = "100%" color = "blue" size = "3">

        <div class="form-group">
            <label for="content" class="h4">내용</label><br>
            <textarea class="form-control" id="content" name="content" rows="10"></textarea>
        </div>

        <hr width = "100%" color = "blue" size = "3"> <br>

        <div class="text-center">

            <button type="submit" class="btn btn-success" style="color:white;">등록하기</button>

            <button type="button" class="btn btn-danger" style="color:white;" onclick="location.href='/board'">목록으로</button>
        </div>
    </form>

그리고 다음과 같이 내용을 작성했다.

그럼 HTTP 내용을 살펴보자!

※ HTTP 요청 내용을 보기 위해서 application yml에 다음과 같은 로깅 코드를 추가했다.

logging:
  level:
    org:
      apache:
        coyote:
          http11: debug

그럼 HTTP 내용을 보자!

------WebKitFormBoundaryMVA4MPoFDDjKPJl2
Content-Disposition: form-data; name="title"

this is title!
------WebKitFormBoundaryMVA4MPoFDDjKPJl2
Content-Disposition: form-data; name="image"; filename="ì¬ì§.jpg"
Content-Type: image/jpeg

... ÿØÿà·'j©?AGÙ'ì ÿÙ ...
------WebKitFormBoundaryMVA4MPoFDDjKPJl2
Content-Disposition: form-data; name="content"

this is content!
------WebKitFormBoundaryMVA4MPoFDDjKPJl2--

바이너리 코드가 너무 길어 생략했다.

살펴보면 다음과 같은 구조를 볼 수 있다.

"---xxx"로 영역 구분
"Content-Dispositon: form-data; ~~" : 영역의 시작(해당 영역에 대한 정보)
"---xxx--"로 끝 명시

File 도메인 생성

File 도메인을 새롭게 생성하는 이유는 다음과 같다.

User 정보에서 올린 파일들을 조회할 수 있기 위해
파일 또는 게시글 정보로만 양방향으로 접근할 수 있게 하기 위해
사용자가 정해진 여러 개의 파일을 올릴 수 있게 하기 위해

File이라는 객체를 따로 도메인으로 생성해놓으면, 여러 가지 방면에서 좋은 점이 있을 것이라고 판단이 된다.

Board 내에 리스트로 만들어놓는 것보다 유연하다고 판단된다. 그리고 User 정보만으로도 File로 접근할 수 있고(리스트로 하면 Board를 거쳐야 한다.) File만으로도 User 및 Board에 접근할 수 있다.

※ 따로 관리하는 만큼 조금 더 복잡하겠지..

다음은 도메인을 생성한 코드이다.

@Data
@NoArgsConstructor(access = AccessLevel.PUBLIC)
@Entity
@Table(name = "user_file")
public class UserFile {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "file_id")
    private Long id;

    @ManyToOne
    @JoinColumn(name = "boardId")
    private Board board;

    @Column(nullable = false)
    private String origFileName;  // 파일 원본명

    @Column(nullable = false)
    private String filePath;  // 파일 저장 경로

    @Column(nullable = false)
    private String savedName;

    private Long fileSize;

    @ManyToOne
    @JoinColumn(name = "userId")
    private User user;

    @CreationTimestamp
    private Timestamp createDate;

}

여러 가지의 내용이 있다.

처음에는 관련 자료들을 찾아보다가 이해가 안 되었다. 그래서 다음 그림을 보면서 이해해보자.

실제 서버는 각종 파일들을 어떻게 관리할까?

- 실제 서버가 가지고 있는 DB에는 파일이 저장되어있는 디렉터리 정보만 저장되어 있다.

- 이후에 해당 파일을 접근해야 될 일이 있으면 DB의 디렉터리를 이용하여 접근한다.

이러한 이유로 파일 도메인은

directory, original name 등등 여러 가지의 필드가 존재한다.

그 외 나머지는 @ManyToOne 관계의 객체, 저장 시간, 시퀀스 등등이다.

게시글 쓰기 Post Mapping 수정

이전에 사용한 post에서 파일을 받을 수 있게 수정해주어야 한다.

스프링에서는 파일을 주고받을 때, MultipartFile을 이용한다.

코드를 살펴보자.

 @PostMapping("/board_write")
    public String BoardWriter(@ModelAttribute Board board, @RequestParam(value="imageFiles", required=false) List<MultipartFile> files, @SessionAttribute(name = SessionConst.LOGIN_USER, required = false)
            User user) throws IOException {


        boardWriteService.write(board, user);
        boardUserFileService.userFilelRepository(fileHandler.UserFileUpload(files, user.getUserId()), board);
        return "redirect:/board";

    }

@RequestParam을 이용하여 파라미터를 받는 것을 볼 수 있다.

List인 이유는 사용자가 한 번의 요청으로 여러 개의 파일을 보낼 수가 있기 때문이다.

파일 올리기 서비스 작성

코드를 바로 살펴보자!

@Service
@RequiredArgsConstructor
public class BoardUserFileService {
    private final UserFileRepository userFileRepository;

    public void userFilelRepository(List<UserFile> userFileList, Board board){

        if(userFileList.isEmpty()){
            return;
        }
        for(UserFile userfile : userFileList){
            userfile.setBoard(board);
            userFileRepository.save(userfile);
        }
    }

};

유저가 파일을 안 올렸을 경우에는 바로 리턴,

파일을 올려주었을 경우에는 File과 해당 Board를 연결해주어야 한다. 그래서 File의 내용에 board객체를 set 해주는 것을 볼 수 있다.

그리고 jpa를 이용하여 저장했다.

FileHandler 작성

실제로 요청으로 오는 파일은 바이너리 값과 이름이다. 그래서 해당 바이너리를 디렉터리, 저장 이름 등을 설정해주어야 한다.

※ 여기서 디렉터리를 새롭게 생성해주거나 저장할 파일 이름(사용자가 입력한 거랑 다름!!) 그리고 MultipartFile -> File 객체로 변경해준다.

다음 코드를 보자

@Component
@RequiredArgsConstructor
@Slf4j
public class FileHandler {

    private final BoardUserFileService boardUserFileService;
    private final UserRepository userRepository;

    public List<UserFile> UserFileUpload(List<MultipartFile> files, String userId) throws IOException {

        // 반환할 파일 리스트
        List<UserFile> fileList = new ArrayList<>();
        User user = userRepository.findByUserId(userId);

        // 전달되어 온 파일이 존재할 경우
        if(!CollectionUtils.isEmpty(files)) {
            LocalDateTime now = LocalDateTime.now();
            DateTimeFormatter dateTimeFormatter =
                    DateTimeFormatter.ofPattern("yyyyMMdd");
            String current_date = now.format(dateTimeFormatter);

        for(MultipartFile multipartFile : files) {
            String path = "C:/test"+"/"+userId+"/";

            String extension;
            String contentType = multipartFile.getContentType();

            if(ObjectUtils.isEmpty(contentType)) {
                break;
            }

            extension = FilenameUtils.getExtension(multipartFile.getOriginalFilename());

            String new_file_name = current_date + "_"+System.nanoTime() + "." + extension;

            File file = new File(path + new_file_name); //파일 저장 경로 확인, 없으면 만든다.
            if (!file.exists()) {
                file.mkdirs();
            }
            UserFile userFile = new UserFile();


            userFile.setUser(user);
            userFile.setFilePath(path + new_file_name);
            userFile.setFileSize(multipartFile.getSize());
            userFile.setOrigFileName(multipartFile.getOriginalFilename());
            userFile.setSavedName(new_file_name);

            fileList.add(userFile);

            multipartFile.transferTo(file);

            file.setWritable(true);
            file.setReadable(true);
        }
            return fileList;
    }

        return null;

    }



};

유저 id로 디렉터리 생성하였다.
날짜 + 나노 초를 통해서 파일 이름의 중복 문제를 해결했다.
file을 저장해주고 File객체로 변경한 다음 List로 리턴해주었다.

List를 리턴해주면 Service에서 board와 연결할 것이다!

[Spring Boot] 인터셉터 ㅣ intercepter

관심쟁이 영호 — Tue, 3 Aug 2021 15:40:41 +0900

오늘은 스프링 부트에서 제공하는 필터와 인터셉터에 대해서 공부를 해볼 예정이다.

public interface HandlerInterceptor {

//preHandle
default boolean preHandle(HttpServletRequest request, HttpServletResponse response, 
Object handler) throws Exception {}

//postHandle
default void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, 
@Nullable ModelAndView modelAndView) throws Exception {}

//afterCompletion
default void afterCompletion(HttpServletRequest request, HttpServletResponse response,
 Object handler, @Nullable Exception ex) throws Exception {}
 
}

스프링 인터셉터 인터페이스에는 3가지의 메소드가 존재한다.

preHandle
postHandle
afterCompletion

각각 호출되는 시점이 다르다.

호출 시점

preHandle : 핸들러 어댑터가 호출되기 전
postHandle : 컨트롤러 호출 다음인 핸들러 어댑터 호출 후
afterCompletion : 뷰 렌더링 이후

예외

- 정상적으로 통과가 된다면 더할 나위없이 좋겠지만, 인터셉터에서 예외가 터져버린다면 (아까와 같이 로그인이 되어있지 않은 상태에서 요청 시) 다음과 같이 호출된다.

preHandle : 컨트롤러 호출 전에 호출
postHandle: 컨트롤러에서 예외 발생시 postHandle은 호출되지 않음
afterCompletion : 앞에서 예외가 발생해도 발생 -> 공통 처리

인터셉터 적용하기

Step 1. 뷰 생성하기

- 가장먼저 로그인 상태에서만 접근할 페이지를 생성하자.

modify.html

<!doctype html>
<html lang="ko">
<head>
    <title>회원 수정</title>
</head>
<body>
    <form action="/modify" method="post">
        과거 아이디 : <input type="text" name="beforeId" id="beforeId"/><br>
        과거 비밀번호 : <input type="text" name="beforePassword" id="beforePassword"/><br>
        아이디 : <input type="text" name="userId" id="userId"/><br>
        비밀번호: <input type="text" name="password"/><br>
        <input type="submit" value="제출" /> <br>
    </form>
</body>
</html>

회원 수정 페이지는 로그인이 되어있는 사람만 접근할 수 있도록 만들 것이다.

이제 인터셉터를 구현해보자. 인터셉터를 구현하기 위해선 몇가지의 절차가 있다.

HandlerInterceptor 구현
WebConfig에 구현한 인터셉터 등록

Step 1. HandlerInterceptor 구현

ModifyInterceptor

@Slf4j
public class ModifyInterceptor implements HandlerInterceptor {

    public static final String LOG_ID = "logId";
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse
            response, Object handler) throws Exception {
        String requestURI = request.getRequestURI();
        String uuid = UUID.randomUUID().toString();
        request.setAttribute(LOG_ID, uuid);
        
        if (handler instanceof HandlerMethod) {
            HandlerMethod hm = (HandlerMethod) handler; 
        }
        
        log.info("REQUEST [{}][{}][{}]", uuid, requestURI, handler);
        return true; 
    }
    
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse
            response, Object handler, ModelAndView modelAndView) throws Exception {
        log.info("postHandle [{}]", modelAndView);
    }
    
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse
            response, Object handler, Exception ex) throws Exception {
        String requestURI = request.getRequestURI();
        String logId = (String)request.getAttribute(LOG_ID);
        log.info("RESPONSE [{}][{}]", logId, requestURI);
        if (ex != null) {
            log.error("afterCompletion error!!", ex);
        }
    }
}

Step 2. WebConfig에 인터셉터 등록

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new ModifyInterceptor())
                .order(1)
                .addPathPatterns("/**")
                .excludePathPatterns("/css/**", "/*.ico", "/error","/login");
    }

};

코드 설명 :

ModifyInterceptor에서 각각 부분에 넘어오는 정보를 log로 찍어보았다 로그는 다음과 같다.

- preHandle

log.info("REQUEST [{}][{}]", requestURI, handler);

REQUEST [37a7ca18-d81c-4907-b1ca-115f4dce6a11][/signup][cyh.adyb.web.SignUpContoller#signup(Model)]

사용자의 Request에 대한 정보를 가지고 들어온다.

- postHandle

log.info("postHandle [{}]", modelAndView);

postHandle [ModelAndView [view="/signup"; model={user=User(sequenceId=null, userId=null, password=null), org.springframework.validation.BindingResult.user=org.springframework.validation.BeanPropertyBindingResult: 0 errors}]]

PostHandle에서는 request 정보와 ModelAndView 정보를 가지고 온다.

- afterCompletion

log.info("RESPONSE [{}][{}]", logId, requestURI);

RESPONSE [37a7ca18-d81c-4907-b1ca-115f4dce6a11][/signup]

afterCompletion에서는 response에 대한 정보, request 정보, 해당 Handler정보, Exception에 대한 정보를 알 수 있다.

WebConfig

WebConfig에 인터셉터를 등록할 때, 여러가지의 속성을 정의할 수 있다.

- addInterceptor(new ModifyInterceptor())

ModifyInterceptor를 인터셉터로 등록한다.

- .order(1)

순서는 1번째로 설정한다.

- .addPathPatterns("/**")

해당 URL에만 인터셉터를 적용한다.

- excludePathPatterns("/css/**", "/*.ico", "/error","/login");

해당 URL은 인터셉터 처리를 제외한다.

추가적인 속성 설정을 할 수 있는데, 해당 사항은 문서를 확인해보자!

[Spring Boot] 쿠키, 세션

관심쟁이 영호 — Tue, 3 Aug 2021 15:40:07 +0900

오늘은 로그인에서 쿠키 및 세션을 적용해볼 것이다!

쿠키란?
쿠키구현
쿠키의 한계
세션이란?
세션구현
스프링에서의 세션
세션의 한계

쿠키란?

쿠키는 서버측에서 사용자가 누구인지 알기위한 식별값이다.
TCP/IP 위의 HTTP 통신이 지속성이 없기 때문에(한번 요청 - 한번 응답 끝) 사용자가 요청했을 때, 서버측에서는 그 사용자가 누구인지 모른다.
서버는 사용자가 요청을하면 쿠키를 생성하여 응답에 포함하여 전달한다.

그림으로 살펴보자.

1) 최초의 Request - Response

사용자가 서버측에 Post요청을 한다.
서버는 회원 저장소에서 로그인 id에 맞는 정보가 있는지 확인한다.
없어서 쿠키를 설정하고(Set-Cookie: id=abc) 응답한다.
회원은 웹브라우저에 있는 쿠키 저장소에 쿠키를 저장한다.

2) 2번째 요청(쿠키가 유지되었을 때)

사용자는 쿠키저장소에 저장되어있는 쿠키를 포함한 요청을 한다.
서버는 해당 쿠키가 회원저장소에 있는지 살펴본다.
회원저장소에 해당 쿠키가 존재하여 해당 회원에 대한 응답을 해준다.

위의 내용을 보면 서로 지속성이 없는대도 요청자가 누구인지 알 수 있게 되었다!

그럼 Spring에서 해당 쿠키를 어떻게 구현하는지 살펴보자.

먼저 가장 쉬운방법은 컨트롤러에서 쿠키를 생성하여 Response에 담아서 응답해주면 될 것이다!

코드로 쿠키를 생성하여 응답하는 것을 살펴보자.

@PostMapping("/login")
    public String loginId(@ModelAttribute User user, HttpServletResponse response) {
        if(!loginService.login(user)){
            return "login";
        }
		
        //쿠키 생성
        Cookie idCookie = new Cookie("userId", String.valueOf(user.getUserId()));
        
        //응답에 쿠키 추가
        response.addCookie(idCookie);
        
        return "redirect:/";
    }

코드 설명:

Cookie idCookie = new Cookie("userId", String.valueOf(user.getUserId()));

- Cookie를 key: "userId" / value: "사용자가 입력한 id" 로 생성한다.

reponse.addCookie(idCookie);

- 응답에 쿠키를 추가한다.

이제 쿠키가 정상적으로 브라우저에 포함이 된지 확인해보자!

Response 내용

쿠키가 Response에 "userId"로 전달된 것이 보인다.

문자가 깨지는 것은 필자가 한글로 쿠키를 전달했기 때문이다!

웹브라우저 Cookie 저장소

Application -> Cookies에 들어가면

key: "userId" / value: "영호" / 그 외 기타 등등

이라는 내용의 쿠키가 저장된 것을 볼 수 있다!

쿠키의 한계

지금까지 알아온 쿠키는 엄청 큰 한계점이 있다!

"만약 사용자가 쿠키의 value값을 '영호' -> '철수' 로 교체하여 보낸다면?"

서버는 철수가 들어온지 알고, 철수에 대한 응답을 할 것이다.

맞다. 쿠키는 사용자의 로컬에 저장되기 때문에 얼마든지 조작 및 변경이 가능하다.

그래서 쿠키를 사용한다면 반드시 변경되어도 상관없는 정보만 포함하여야 한다!

세션이란?

세션은 쿠키의 한계점을 개선한 것이다.

쿠키가 사용자측에서 관리하는 요소라면, 세션은 서버에서 관리하는 요소라고 생각하면 된다!

어떻게 서버에서 관리할까?

- 쉽다. 서버에서 쿠키값을 보내지 않고, 랜덤토큰을 생성하여 사용자에게 보낸다. 서버는 랜덤토큰에 대응하는 실제 값을 관리하는 테이블을 가지고 있다.

- 이제 "abCCDCAD^^&#cd"라는 토큰값을 임의로 고쳐도 다른 사람의 토큰과 겹칠 가능성이 현저히 줄어든다!(거의 0퍼)

그림을 통해서 살펴보자.

살펴보자!

사용자가 id와 password로 로그인한다.
서버는 해당 id로 회원저장소를 조회한다.
조회 내용을 토대로 회원값을 임의의 랜덤값을 만든다!
랜덤값을 사용자에게 전달한다.

세션 구현

그럼 세션을 구현해보자!

이전의 쿠키와 달라진 점은 다음과 같다.

랜덤값 생성
랜덤값과 userId 매핑 테이블 생성
유저에게 랜덤값을 Response에 포함하여 전달

코드를 살펴보자!

세션 받기

/**
 * 세션 관리
 */
@Component
public class SessionManager {
    public static final String SESSION_COOKIE_NAME = "mySessionId";
    private Map<String, Object> sessionStore = new ConcurrentHashMap<>();
    /**
     * 세션 생성
     */
    public void createSession(Object value, HttpServletResponse response) {
        //세션 id를 생성하고, 값을 세션에 저장
        String sessionId = UUID.randomUUID().toString();
        sessionStore.put(sessionId, value);
        //쿠키 생성
        Cookie mySessionCookie = new Cookie(SESSION_COOKIE_NAME, sessionId);
        response.addCookie(mySessionCookie);
    }
    /**
     * 세션 조회
     */
    public Object getSession(HttpServletRequest request) {
        Cookie sessionCookie = findCookie(request, SESSION_COOKIE_NAME);
        if (sessionCookie == null) {
            return null;
        }
        return sessionStore.get(sessionCookie.getValue());
    }
    /**
     * 세션 만료
     */
    public void expire(HttpServletRequest request) {
        Cookie sessionCookie = findCookie(request, SESSION_COOKIE_NAME);
        if (sessionCookie != null) {
            sessionStore.remove(sessionCookie.getValue());
        }
    }
    private Cookie findCookie(HttpServletRequest request, String cookieName) {
        if (request.getCookies() == null) {
            return null;
        }
        return Arrays.stream(request.getCookies())
                .filter(cookie -> cookie.getName().equals(cookieName))
                .findAny()
                .orElse(null);
    }
}

코드 설명:

대충 3가지의 메소드가 있다.

세션 생성
세션 찾기
세션 제거

세션 생성

세션은 랜덤값을 생성해야 하기 때문에, uuid를 이용하여 생성했다.

생성된 uuid를 이용하여 "sessionStore"라는 매핑 테이블에 저장을 해주고, 사용자에게 쿠키로 넘긴다.

@PostMapping("/login")
    public String loginId(@ModelAttribute User user, HttpServletResponse response) {
        if(!loginService.login(user)){
            return "login";
        }
        sessionManager.createSession(user, response);
        
        return "redirect:/";
    }

이거 또한 복잡하다..

그래서 스프링에서 세션을 아주 편하게 사용할 수 있도록 기능을 제공한다!

스프링에서의 세션

@GetMapping("/")
public String homeLoginV3Spring(
 @SessionAttribute(name = SessionConst.LOGIN_MEMBER, required = false)
User loginUser,
 Model model) {
 //세션에 회원 데이터가 없으면 home
 if (loginUser == null) {
 return "home";
 }
 //세션이 유지되면 로그인으로 이동
 model.addAttribute("user", loginuser);
 return "loginhome";
}

@SessionAttribute를 이용하면 스프링에서 세션을 아주 편하게 사용할 수 있다.

참고로 해당 어노테이션은 세션을 생성하지 않는다.

@SessionAttribute를 이용하면 세션을 찾아주는 번거로운 과정을 알아서 해주는 것을 볼 수 있다.

그래서 세션생성을 HTTP 서블릿에 구현되어있는 기능을 사용하거나 직접구현한 내용을 사용하자!

HTTP 서블릿의 세션을 적용한 컨트롤러

@PostMapping("/login")
    public String loginId(@ModelAttribute User user, HttpServletRequest request) {
        if(!loginService.login(user)){
            return "login";
        }

        HttpSession session = request.getSession();
        session.setAttribute(SessionConst.LOGIN_USER, user);

        return "redirect:/";
    }

SeesionConst 내용

public class SessionConst {
    public static final String LOGIN_USER = "loginUser";
};

성공!

세션의 한계

세션또한 한계가 있다. 사용자들이 많아지면 서버는 세션 매핑테이블에 계속해서 저장을 해야하는데, 이 테이블 조차 엄청나게 무거워질 수 있다. 그래서 최근에는 JWT 토큰 정책을 사용한다.

이 내용은 다음에 살펴보자!

[Spring Boot + JPA] 로그인 구현하기.

관심쟁이 영호 — Tue, 3 Aug 2021 15:39:13 +0900

이번 기록은 Spring Boot와 JPA를 이용하여 로그인을 구현해볼 것이다.

로그인 프론트 생성
로그인 컨트롤러 매핑
로그인 Service 구현
기타

로그인 프론트 생성

가장 먼저 로그인을 받을 프론트를 생성하자!

프론트는 아주 간단하게 만들어 볼 것이다.

코드는 다음과 같다.

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">

    <title>로그인</title>
</head>
<body>
로그인입니다.

<form method="post" action="/login">
    ID :<input type="text" name="userId"><br>
    PASSWORD :<input type="text" name="password"><br>
    <button type="submit">제출</button>
</form>
</body>
</html>

화면은 다음과 같다.

코드 설명:

form 형태로 id와 password를 post 방식으로 요청한다.

로그인 컨트롤러 매핑

매핑은 Get, Post 이렇게 2가지 방식으로 진행할 것이다.

Get 매핑 : "login" 템플릿을 response 한다.
Post 매핑: 로그인 정보를 DB에서 조회하여 로직을 거친 다음, 성공 실패 여부를 정한다. 성공 시 HOME화면으로 이동하고 실패 시, login 템플릿을 다시 리턴한다.

로그인 컨트롤러를 살펴보자.

@Controller
@RequiredArgsConstructor
@Slf4j
public class LoginController {

    @Autowired
    private final LoginService loginService;

    @GetMapping("/login")
    public String login() {
        return "login";
    }

    @PostMapping("/login")
    public String loginId(@ModelAttribute User user) {
        if(loginService.login(user)){
            return "redirect:/";
        }
        return "login";
    }

};

코드 설명:

Post 요청에 id와 password가 넘어올 것이다.

그럼 loginService 클래스의 login 메소드를 실행한다. 인자는 폼에서 넘어온 User이다.

loginService에서 DB에 저장된 데이터와 비교를 한다.

비교에서 성공하면 Home으로 간다.

실패하면 다시 login 화면이 나온다.

로그인 Service 구현

코드를 먼저 보자!

@Service
@RequiredArgsConstructor
@Slf4j
public class LoginService {
    @Autowired
    private final UserRepository userRepository;

    public boolean login(User user) {

        User findUser = userRepository.findByUserId(user.getUserId());

        if(findUser == null){
            return false;

        }

        if(!findUser.getPassword().equals(user.getPassword())){
            return false;
        }
        return true;

    }

};

코드 설명:

1) Repository에서 해당 id로 DB에 저장된 데이터를 가지고 온다.

2) 해당 데이터가 없으면(NULL) "false"를 리턴한다.

3) 해당 데이터와 사용자가 입력한 password가 같지 않다면, "false"를 리턴한다.

4) null이 아니거나 비밀번호가 일치하면 "true"를 리턴한다.

기타

1) 추후에 Spring Security를 사용하여 비밀번호를 암호화할 것이다. 그럼 Service 코드에 암호화, 복호화 코드가 추가될 것이다!

생각해놓자!

2) 로그인이 실패한다면 사용자의 화면에 "id 또는 password가 잘못되었습니다" 표시를 해줄 것이다. 그러기 위해서는 thymeleaf 기능이 필요하다!

추후에 알아보자!

[Spring Boot] Form 객체를 분리하여 검증 로직 다르게 적용

관심쟁이 영호 — Tue, 3 Aug 2021 15:38:23 +0900

이번 기록은 Form 객체를 분리를 통해서 검증 로직을 서로 다르게 적용하는 것이다.

이 말이 무슨 뜻인가!?

다음과 같은 상황으로 이해해보자.

"회원 가입 시에는 id의 길이가 최대 10, 회원 정보 수정에는 id의 길이가 최대 15로 수정이 가능하게 해 주세요."

위와 같은 상황에 Form 객체를 분리하여 검증 로직을 다르게 적용한다는 말이다!

@Data
@Entity(name = "user")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    Long sequenceId;


    @NotNull
    @NotBlank
    @Column(length = 25, nullable = false)
    String userId;

    @NotNull
    @NotBlank
    @Column(nullable = false)
    String password;

};

SignupController.java

@PostMapping("/signup")
    public String signupForm(@Validated @ModelAttribute User user, BindingResult bindingResult, RedirectAttributes redirectAttributes){

        log.info("userid ={}", user.getUserId());
        if(bindingResult.hasErrors()){
            log.info("errors ={}", bindingResult);
            return "/signup";
        }

        signUpService.signup(user);

        return "redirect:/";
    }

이전에는 Post Mapping에서 user라는 객체를 사용한 것을 볼 수 있다.

이제는 user를 사용하지 않고 user를 가지고 있는

User sign Up Form, User Modify Form 객체로 나누어

따로따로 어노테이션을 설정할 것이다.

Form 객체 분리하기

두 가지의 객체를 생성해보자!

먼저 검증 로직은 처음에 있던

"회원 가입 시에는 id의 길이가 10, 회원 정보 수정에는 id의 길이 15로 수정이 가능하게 해 주세요."

을 적용해보자!

UserSignUpForm.java

@Data
public class UserModifyForm {

    String beforeId;
    String beforePassword;

    @NotNull
    @NotBlank
    @Size(max = 15)
    String userId;

    @NotNull
    @NotBlank
    String password;
};

UserModifyForm.java

@Data
public class UserSignUpForm {

    @NotNull
    @NotBlank
    @Size(max=10)
    String userId;

    @NotNull
    @NotBlank
    String password;
};

코드 설명 :

User객체를 UserModifyForm과 UserSignUpForm객체로 나눈 이유는, 각각 다른 검증을 해주기 위해서이다.

Group을 사용하여 묶을 수도 있지만 그거 또한 한계가 있어서 차라리 관리하기 쉽게 두 가지의 폼으로 나누어 관리하자!

먼저 JPA에 사용될 어노테이션은 모두 제거해주었다.

그리고 회원 가입과 회원 수정에 각각 맞는 검증 어노테이션을 추가했다. (max=10, max=15)

분리에 따른 후처리

분리가 되었으니 제각각 코드를 바꿔주어야 할 것이다!

먼저 어떤 코드를 바꿔야 할지 생각해보자.

Controller에 넘어오는 @ModelAttribute 부분의 객체를 바꿔주어야 한다.
Service 부분에서 Form객체로 되어있는 값을 User 객체로 변환해주어야 한다.

이렇게 두 가지의 작업이 추가되었을 것이다.

컨트롤러와 서비스를 보자!

SignUpController

@Controller
@Slf4j
@RequiredArgsConstructor
public class SignUpContoller {


    @Autowired
    private final SignUpService signUpService;

    @GetMapping("/signup")
    public String signup(Model model){

        model.addAttribute("user", new User());

        return "/signup";
    }

    @PostMapping("/signup")
    public String signupForm(@Validated @ModelAttribute UserSignUpForm user, BindingResult bindingResult, RedirectAttributes redirectAttributes){

        log.info("userid ={}", user.getUserId());
        if(bindingResult.hasErrors()){
            log.info("errors ={}", bindingResult);
            return "/signup";
        }

        User user2 = new User();
        user2.setUserId(user.getUserId());
        user2.setPassword(user.getPassword());
        signUpService.signup(user2);
        return "redirect:/";
    }

};

ModifyUserController

@Controller
@RequiredArgsConstructor
@Slf4j
public class ModifyUserController {

    private final ModifyUserService modifyUserService;

    @GetMapping("/modify")
    public String ModifyUser(){return "/modify";}

    @PostMapping("/modify")
    public String ModifyUser(@Validated @ModelAttribute UserModifyForm userModifyForm, BindingResult bindingResult){
        if(bindingResult.hasErrors()){
            return "/modify";
        }
        modifyUserService.modifyUser(userModifyForm);
        return "redirect:/";

    }

};

컨트롤러 코드 설명:

signup에서는 UserSignUpForm 객체가 넘어온다.
modify에서는 UserModifyForm 객체가 넘어온다.

다른 점이 두 가지가 있는데 signup은 controller에서 user로 변환하였고, modify는 서비스에서 user로 변환을 해주었다!

당연히 서비스에서 하는 것이 올바르겠지!?

그럼 각각의 서비스를 보자!

SignUpService

@Service
@RequiredArgsConstructor
public class SignUpService {

    @Autowired
    private final UserRepository userRepository;

    public void signup(User user){
        userRepository.save(user);
    }
};

ModifyUserService

@Service
@RequiredArgsConstructor
@Slf4j
public class ModifyUserService {

    private final UserRepository userRepository;

    public void modifyUser(UserModifyForm userModifyForm){

       User user = userRepository.finduser(userModifyForm.getBeforeId(), userModifyForm.getBeforePassword());

       user.setUserId(userModifyForm.getUserId());
       user.setPassword(userModifyForm.getPassword());

        userRepository.save(user);

    }
};

이제 완벽히 수행되는 것을 볼 수 있었다.

번외 - 겪은 문제

1. JPA와 연동하면서 JPA Repository에 구현되어 있는 내용을 보니까 Long id(PK)로 getOne, findById가 수행되는 것을 볼 수 있었다.

사용자들은 분명 자신의 id와 password를 입력할 건데, "JpaRepository"의 구현체에는 sequence로 등록된 id만 인자로 받는다.. 그럼 어떻게 조회를 해야 하나 ㅠ

일단은 아래와 같이 인터페이스를 확장했다.

public interface UserRepository extends JpaRepository<User, Long> {
    @Query("select m from user m where m.userId = ?1")
    User finduser(String id, String password);
};

해결 :

Spring Data JPA를 사용하면 정해진 규칙대로 인터페이스에 등록하면 간단한 쿼리문은 자동 구현된다!

해당 구현 메서드명 규칙은 아래 글을 참고하자!

https://minkwon4.tistory.com/130

[JPA] Spring Data JPA (2) - 메소드 네임 쿼리, @Query

메소드 네임 쿼리 JPA는 기본적으로 JpaRepository<엔티티 타입, 식별자(PK)타입>을 상속 받음으로써 기본적인 CRUD를 할 수 있는 쿼리를 제공한다. 또한 이것과 별게로 추가적으로 규칙에 의한 메소드

minkwon4.tistory.com

그래서 변경된 코드!

public interface UserRepository extends JpaRepository<User, Long> {

     //@Query("select m from user m where m.userId = ?1")
     //User finduser(String id, String password);


    User findByUserId(String id);
};

public void modifyUser(UserModifyForm userModifyForm){

       //User user = userRepository.finduser(userModifyForm.getBeforeId(), userModifyForm.getBeforePassword());
       User user = userRepository.findByUserId(userModifyForm.getBeforeId());
       user.setUserId(userModifyForm.getUserId());
       user.setPassword(userModifyForm.getPassword());

        userRepository.save(user);

    }

[Spring Boot] Bean Validation 적용하기

관심쟁이 영호 — Tue, 3 Aug 2021 15:36:31 +0900

오늘은 Bean Validation에 대해서 기록을 해보자!

@Data
@Entity(name = "user")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    Long sequenceId;


    @NotNull
    @NotBlank
    @Column(length = 25, nullable = false)
    String userId;

    @NotNull
    @NotBlank
    @Column(nullable = false)
    String password;

};

두가지의 변수에 각 2가지씩 (총 4가지)의 검증을 추가했다. 내용은 다음과 같다.

String userId의 "@NotBlank", "@NotNull"
String password의 "@NotBlank", "@NotNull"

말 그대로 공백과 Null을 받지 않는다는 이야기다!

Step. 3

이제 해당 검증을 거칠 부분을 정해야한다.

정하는 방법은 "@Validated" 어노테이션을 추가하는 방법이다.

다음 코드를 보자.

@PostMapping("/signup")
    public String signupForm(@Validated @ModelAttribute User user, BindingResult bindingResult, RedirectAttributes redirectAttributes){

        log.info("userid ={}", user.getUserId());
        if(bindingResult.hasErrors()){
            log.info("errors ={}", bindingResult);
            return "/signup";
        }

        signUpService.signup(user);

        return "redirect:/";
    }

Signup 에서 "@Validated"를 추가한 것을 볼 수 있다.

이렇게 하면 user을 바인딩하면서 생기는 에러를 bindingResult에 담는다!

Bean Validation 실행 내용 이해하기

Bean Validation이 어떻게 동작하는지 순서대로 살펴보자!

Bean Validation 라이브러리를 설치하면 스프링 부트는 그것을 감지하고 스프링에 통합한다.
해당하는 Validator를 글로벌 Validator로 등록을 한다.
@ModelAttribute가 타입 변환을 시도한다. 성공하면 Validator 수행, 실패하면 FieldError로 binding result에 추가! ※ 한마디로 타입 변환에 성공한 내용만 검증을 수행한다!
해당 Validator는 어노테이션을 살펴보고 검증을 수행한다.
검증 오류가 발생하면 "FieldError"와 "ObjectError"를 생성해서 BindingResult에 담아준다.

Bean Validation Object Error

지금까지 보았던 내용은 필드 자체에 오류이다.

그럼 다음과 같은 검증을 하고 싶을 때는 어떻게 해야 할까?

"id의 길이와 비밀번호의 길이의 합은 100을 넘어선 안된다."

두 가지의 필드가 합쳐서 검증이 수행되어야 한다는 것을 알 수 있다.

※ 해당 기능을 수행하기 위해서 "@ScriptAssert"라는 기능을 구현해놓긴 했는 데 사용하기에 한계가 있다!

관심 있으면 찾아보자!!

이 경우에는, 컨트롤러에 직접 코드를 추가하자!

그래야 제약도 없다.

더 좋은 방법이 있을 것만 같다.

이건 추후에 알게 된다면 포스팅을 하자!

[#5] JPA를 이용한 DB insert

관심쟁이 영호 — Tue, 3 Aug 2021 15:35:22 +0900

JPA를 이용한 DB insert

이번에는 JPA를 이용하여 DB에 회원가입 정보를 insert 해보자.

다루게될 목차는 다음과 같다.

Sign Up 프론트 구현
Sign Up 컨트롤러 구현
User Repository 구현
Sign Up 서비스 구현

Sign Up 프론트 구현

프론트 디자인은 신경쓰지 않고, 아주 간단하게 하였다.

먼저 구현된 화면은 다음과 같다.

signup.html

다음은 코드이다.

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">

    <title>회원가입</title>
</head>
<body>
회원가입입니다.

<form action="/signup" method="post">
   아이디 : <input type="text" name="id"/><br>
    비밀번호: <input type="text" name="password"/><br>
    <input type="submit" value="제출" /> <br>
    <input type="reset" value="clear" /> <br>

</form>
</body>
</html>

코드 설명

thymeleaf를 사용할 것이기 때문에, template 디렉토리에 "signup.html"을 생성해주었다.
PostMapping을 해주기 위해서, form태그를 사용했다.
id, password를 입력받는다.
버튼은 총 2가지로 submit, clear 버튼이 있다.
submit은 post로 http요청을 하는 것이다.
clear은 해당 form의 모든 영역에 입력된 값들을 지워주는 버튼이다.
submit을 하면, "/signup"으로 post 요청을 한다.

※ 개발을 진행하면서 필요한 내용을 추가할 예정이다.

Sign up 컨트롤러 구현

코드를 살펴보자!

@Controller
@Slf4j
@RequiredArgsConstructor
public class SignUpContoller {


    @Autowired
    private final SignUpService signUpService;
    @GetMapping("/signup")
    public String signup(){
        return "/signup";
    }

    @PostMapping("/signup")
    public String signupForm(@ModelAttribute User user){

        signUpService.signup(user);
        
        return "redirect:/";
    }
};

코드 설명

Get, Post 매핑 2가지가 있다.
Get은 기본 회원가입 영역을 return 해주기위한 메소드이다.
Post는 회원가입 시, Post 방식으로 오게 될 내용을 처리하는 메소드이다.
Post 요청 시, User로 받고 "signUpService"의 "signUp"메소드를 통해 비즈니스 로직을 실행한다.
비즈니스 로직 실행 후, 홈으로 리다이렉트한다.

User Repository 구현

User Repository는 실제로 DB에 엑세스하여 데이터를 다루는 중요한 부분이다.

코드를 보자!

public interface UserRepository extends JpaRepository<User, Long> {
	//내용없음
};

코드 설명

기본적인 CRUD를 구현해놓은 JpaRepository를 사용하자!
계속해서 기능을 확장할 예정이다.

※ 의문점 : 프로젝트가 엄청나게 커지면 User 기능을 확장하면서 코드량이 많아질텐데 그때는 User를 분해를 하는건가? 쓸때없는 걱정같기도 하다.. ㅋㅋ

Sign Up Service 구현

Service는 실제 비즈니스 로직들을 가지고 있는 부분이다.

Repository를 사용하며, DB-비즈니스 로직-컨트롤러 부분을 나누기 위함이다.

코드를 보자!

@Service
@RequiredArgsConstructor
public class SignUpService {

    @Autowired
    private final UserRepository userRepository;

    public void signup(User user){
        userRepository.save(user);
    }
};

코드 설명

UserRepository를 @Autowired를 통해서 DI 받는다.
signup 메소드를 통해서 insert를 수행한다.

완료되었다.

다음으로는 로그인을 해보자!!

[JAVA] 인터페이스 ㅣ Interface

관심쟁이 영호 — Sat, 22 May 2021 00:51:23 +0900

오늘은 인터페이스에 관해서 공부를 할 예정이다.

(출간된 "자바의 정석" 책을 참고했습니다.)

인터페이스란?

- 추상 메서드의 집합이다. (추상 메서드 : 구현을 하지않은 메서드)

- 모든 멤버가 public이다.

- 구현된 내용이 하나도 없다.

이렇게 볼 수 있다.

그럼 추상클래스와 무엇이 다른가?

추상클래스는 구현된 메서드도 포함할 수 있다.

(인터페이스도 JDK 1.8 version 부터는 구현된 상수, static 메서드와 같은 멤버변수를 가질 수 있다.)

인터페이스 선언방법

interface practice{
	public static final FIRST = 1;
	public abstract abc(int num);
}

위와 같이 인터페이스를 선언할 수 있다.

인터페이스의 구현

인터페이스를 구현한다는 것은 몸통부분을 완성해준다는 뜻이다.

아래의 코드와 같다.

interface Alive{
	public void breath();
    public void birth(int year);
}

class Human implements Alive{
	public void breath(){
    	System.out.println("숨을 쉰다!");
    }
    
    public void birth(int year){
    	System.out.println(year + "년에 태어났다!");  
    }
}

class Practice{

	public static void main(String[] args) {
    	Human human = new Human();
        
        human.breath();
        human.birth();
    }
    
}

위의 코드처럼 구현하면 된다!

인터페이스 특징

인터페이스의 조상은 인터페이스만 가능하다.
다중 상속이 가능하다.
인터페이스로 객체 생성이 불가능하다.
"implements" 라는 구현 키워드를 사용한다.

만약 다중 상속해서 메서드나 변수가 겹치게 된다면?

인터페이스는 결론적으로 구현이 되어 있지 않아서 충돌에 걱정이 없다.

왜 인터페이스를 사용할까?

두 대상(객체)를 연결하는 중간 역할을 한다!
선언과 구현을 분리시킬 수 있게 한다.

더 자세히 알려면 다음 게시글을 보자!

[#1 코드로 이해하는 객체지향 설계] 객체, 설계

대망의 첫 장이다. 아 시작하기 전에, 저자님이 핵심적으로 전해주는 말이 있다. 해당 책은 프로그래밍 패러다임의 "객체지향 패러다임"에 대해서 설명하는 책이다. 객체지향 패러다임은 계속해

bestkingit.tistory.com

이것은 변경에 유리한 코드가 될 수 있다. 아래의 코드로 살펴보자.

class A{
	public void methodA(B b){
    	b.methodB();
    }
}

class B{
	public void methodB(){
    	System.out.println("methodB()");
    }
}

class InterfaceTest{
	public static void main(String args[]){
    	A a = new A();
        a.methodA(new B());
    }
}

위 코드를 인터페이스를 활용해서 다시 하면,

class A{
	public void methodA(I i){
    	i.methodB();
    }
}

interface I {
	void methodB();
}

class B implements I{
	public void methodB(){
    	System.out.println("methodB()");
    }
}

class InterfaceTest{
	public static void main(String args[]){
    	A a = new A();
        a.methodA(new B());
    }
}

이렇게 나눌 수 있다.

- 이 경우는 인터페이스의 다형성 때문에 new B()로 넘기더라도 I i 에 속하기 때문에 넘어간다.

- 하지만 i에서 인터페이스에 정의된 메서드 이외에 B메서드를 사용할 수 없다.

그리고 나중에 새로운 B class대신 C class를 써야한다면?

class C implements I {
	public void methodB(){
    	System.out.println("methodB() is C");
    }
}

인터페이스를 활용하지 않을 경우에는,

class A{
	//public void methodA(B b){ 에서
    public void methodA(C c){
    	b.methodB();
    }
}

class B{
	public void methodB(){
    	System.out.println("methodB()");
    }
}

class InterfaceTest{
	public static void main(String args[]){
    	A a = new A();
        
       // a.methodA(new B()); 에서
       a.methodA(new C());
    }
}

- B b -> C c

- new B() -> new C()

이렇게 두개를 변경해주어야 한다.

인터페이스를 사용할 경우에는

new B() -> new C()만 바꾸어 주면 된다.

(인터페이스 형태로 받기 때문이다! -> 인터페이스 다형성)

지금은 별거아닌 일같아도 나중에 class가 엄청많아진다면 엄청나게 편리하다!

개발 시간을 단축할 수 있다!

인터페이스만 알면 되기때문에, A를 개발하는 팀은 B가 완성이 되지 않아도 코드를 작성할 수 있다.

변경에 유리한 유연한 설계가 가능하다.
표준화가 가능하다.

예를 들면, DB를 오라클을 사용한다고 하자.

이 때, 갑자기 오라클에서 MySql로 바꾼다면 코드를 엄청나게 고쳐야한다.

그래서 이것을 해결하기 위해 JDBC를 제공한다.

오라클이나 MySql 회사에는 JDBC 인터페이스에 맞춰서 구현하게 된다.

그래서 우리는 JDBC 표준 인터페이스를 이용하기 때문에 따로 코드를 바꿀 필요가 없다.

이해가 안되면, 볼트와 너트 크기를 맞추기위해서 표준을 정해두는 것을 생각하자!

서로 관계없는 클래스들을 묶을 수 있다.

[JAVA]추상클래스와 추상메서드에 대해서! ㅣ Abstract

관심쟁이 영호 — Fri, 21 May 2021 15:57:50 +0900

오늘은 추상클래스와 추상메서드에 대해서 공부를 해볼 계획이다.

추상클래스?

추상클래스는 완성하지않은 메서드를 가지고 있는 클래스를 말한다!

한마디로, 몸통부분인 "{}"가 없는 것을 말한다.

클래스에는 "abstract"라는 키워드가 필요하다.

추상메서드?

추상메서드 또한 같다. 몸통부분 "{}"이 없는 메서드를 말한다.

메서드에는 "abstract"라는 키워드가 필요하다.

아래 코드를 통해서 살펴보자.

abstract class MyClass{
	abstract void go(int num);
	abstract void stop(int result);
}

여기서 보았듯이, 몸통부분이 없는 것을 볼 수 있다.

왜 사용하는 걸까?

다른 클래스를 작성하는데 도움을 주기 위해서 사용한다!

- 다음 코드를 살펴보자.

abstract class MyClass{
	abstract void go(int num);
	abstract void stop(int result);
	
}

class Student extends MyClass{

	@Override
	void go(int num) {
		// 이 부분을 통해서 구현을 완성해야 한다.
	}

	@Override
	void stop(int result) {
		// 이 부분을 통해서 구현을 완성해야 한다.
	}
	
}

위의 코드를 보면 "MyClass"라는 추상클래스를 상속받아서 MyClass에 존재하는 추상메서드를 오버라이드하여 구현한 것을 볼 수 있다. 이런 식으로 추상클래스를 사전에 작성해놓으면 다른 클래스 작성을 하는데 도움을 줄 수 있다.

추상클래스의 필요성-1

그럼 추상클래스가 왜 필요한지 실제 코드로 살펴보자!

class Car{
	String engine;
	int x, y;
	int wiper; // 와이퍼
	void move(int x, int y) {
		// x, y로 이동하라!
	}
	void stop() {
		//현재 위치 정지
	}
}
class Motorcycle{
	String engine;
	int x, y;
	void move(int x, int y) {
		// x, y로 이동하라!
	}
	void stop() {
		//현재 위치 정지
	}
}
class cycle{
	int x, y;
	void move(int x, int y) {
		// x, y로 이동하라!
	}
	void stop() {
		//현재 위치 정지
	}
}

위의 코드를 살펴보면,

자동차, 오토바이, 자전거 클래스가 있다. 각 클래스에는 중복되는 코드가 있다.

추상클래스를 이용하면 해당 코드들의 중복을 없앨 수 있다!!

그럼 아래 코드를 통해서 코드의 중복을 없애보자!

abstract class Vehicle{
	String engine;
	int x, y;
	abstract void move(int x, int y);
	void stop() {
		//현재 위치 멈추기
	}
}
class Car extends Vehicle{
	String engine;
	int wiper; // 와이퍼
	@Override
	void move(int x, int y) {
	}
}
class Motorcycle extends Vehicle{
	String engine;
	@Override
	void move(int x, int y) {
	}
}
class cycle extends Vehicle{
	@Override
	void move(int x, int y) {	
	}
}

공통적으로 존재하는 부분은 추상클래스로 밀어넣고

전부 Vehicle을 상속받았다.

아주 편해졌다!

※ stop 메서드는 몸통부분이 구현되어 있어서, 그냥 호출하면 바로 불러질 것이다.

추상클래스의 필요성-2

여러가지의 객체 타입을 하나의 배열로 다루기 위해서이다.

아래 코드를 보자.

public class AbstractClass{
	public static void main(String[] args) {
		ArrayList<Vehicle> arr = new ArrayList<Vehicle>();
		
		arr.add(new cycle());
		arr.add(new Motorcycle());
		arr.add(new Car());
	}
}

위와 같이 코드를 짤 경우에! 각자 다른 객체를 다룰 수 있다.

※ 단점은 없을까..?

- 당연히 있다. 위 배열을 다룰 때에는 Vehicle에 존재하는 함수와 변수만 사용할 수 있을 것이다.

그래서 객체 형변환을 하고 사용해야 cycle, Motocycle, Car만의 고유 기능을 사용할 수 있다.

ex) arr.get(0).engine은 없을 것이다!!

		Car c = (Car)arr.get(2);
		System.out.println(c.engine);

이렇게 사용해야 한다!

단점인지는 모르겠다.

[React #4] JSX 문법 ㅣ UserState

관심쟁이 영호 — Sat, 8 May 2021 01:05:10 +0900

이번에는 UserState에 대해서 공부를 해보자!

먼저 아래의 코드를 보자.

 let number = 1;
const add = () =>{
  number++;
  console.log('add', number);
}
  
  return (
  <div>
    <div>
      <h1>숫자 : {number}</h1>
      <button onClick={add}>더하기</button>
    </div>
</div>
  );

local:3000 으로 접속해서

"더하기" 버튼을 클릭하면 console로 number 값을 확인할 수 있다.

하지만 숫자: {number}인데

number 값을 +1을 해주어도

"숫자 : 1" 에서 1이 바뀌지 않는다 왜그럴까?

상태 값이 변경되었다는 신호를 보내야 한다.

리액트는 아무 변수나 상태 값으로 생각하지않는다.

그래서 "이 변수를 상태 값으로 설정할게!" 라고 해주어야 한다.

그리고 값이 변하면 "상태 값이 변경되었어!" 라고 말해주어야 한다.

어떻게 하는 걸까?

아래의 코드를 통해서 수정된 모습을 보자.

//let number = 1;
  const [number, setNumber] = useState(1);

const add = () =>{
  setNumber(number + 1);
  console.log('add', number);
}
  
  return (
  <div>
    <div>
      <h1>숫자 : {number}</h1>
      <button onClick={add}>더하기</button>
    </div>
</div>
  );

이렇게 하면 성공적으로 UI 변경이 일어나는 모습을 볼 수 있다.

바뀐 것을 살펴보자.

let number = 1; --------> const [number, setNumber] = useState(1);

useState()를 통해서 해당하는 number를 상태 값으로 설정한다는 뜻이다.

setNumber 부분은 해당하는 number의 값이 변경되었다는 것을 알려주는 메소드의 이름을 설정하는 것이다.

setNumber(number + 1); 의 부분을 보면 알 수 있듯이,

상태값 number의 값이 바뀌었다는 것을 알 수 있다.

그래서 자동으로 변경 감지를 해서 UI가 변경되었다.

이것은 React안에 hooks 라이브러리 상태값이 되는 것이다.

응용해보자!

const[users, setUsers] = useState([]);

  const download = () =>{
    let sample = [
      {id:1, name:"유재석"},
      {id:2, name:"강호동"},
      {id:3, name:"이수근"},
      {id:4, name:"신동엽"},
    ]

    setUsers(sample);
  }

  
  return (
  <div>
    <button onClick={download}>다운로드</button>
    {users.map((u) => (
      <h1>
        {u.id}, {u.name}
      </h1>
    ))}
</div>
  );

위의 코드를 보면

users 배열은 처음에는 아무 값도 없다가

"다운로드" 버튼을 클릭하면 download 함수가 실행되고,

users에 object들이 들어가고 상태 값이 변경(정확히는 레퍼런스가 변경)되어 ui가 변경되는 것을 볼 수 있다.

그럼 아래와 같이 처음부터

똑같은 Object들이 들어있다면

다운로드를 클릭했을 때, 똑같이 렌더링이 된 것일까?

(다시 페이지를 불러온 것일까?)

그것을 확인하기 위해서 Console을 찍어보았다.

function App() {
  console.log("App 실행됨");
  const[users, setUsers] = useState([
    {id:1, name:"유재석"},
    {id:2, name:"강호동"},
    {id:3, name:"이수근"},
    {id:4, name:"신동엽"},
  ]);

  const download = () =>{
    let sample = [
      {id:1, name:"유재석"},
      {id:2, name:"강호동"},
      {id:3, name:"이수근"},
      {id:4, name:"신동엽"},
    ]

    setUsers([...sample]);
  }

  
  return (
  <div>
    <button onClick={download}>다운로드</button>
    {users.map((u) => (
      <h1>
        {u.id}, {u.name}
      </h1>
    ))}
</div>
  );

페이지를 처음 열면, users에 정보가 있기 때문에

Object들이 화면에 그려져 있다.

"다운로드" 버튼을 클릭해보자.

맨 처음에 그릴 때,

console인 "App 실행됨"이 실행된 것을 볼 수 있다.

근데 "다운로드"를 클릭했을 때,

새로 App 실행됨이 실행된 것을 볼 수 있다.

왜일까?

상태값은 똑같은 값인데, 왜 렌더링이 새롭게 되는것일까?

이유는 "sample"에 있다.

sample에서 새로운 레퍼런스를 받게 되고, 그것이 할당되기 때문에

상태 값이 변경된 것이다.

결과적으로, "다운로드"를 클릭할 때마다 상태 값은 변한게 없지만

ui를 새로 그린 것을 알 수 있다.

해결 : download에서 sample을 빼낸다. 그럼 download 함수가 실행될 때마다, 새롭게 sample을 할당하지 않을테니까.

이번에는 그럼 이 코드를 보자.

let sample = [
  {id:1, name:"유재석"},
  {id:2, name:"강호동"},
  {id:3, name:"이수근"},
  {id:4, name:"신동엽"},
]
function App() {
  console.log("App 실행됨");
  const[users, setUsers] = useState(sample);
  

  const download = () =>{
    
    sample.push({id: 5, name :'김흥국'});
    console.log(sample);
    setUsers(sample);
  }

  
  return (
  <div>
    <button onClick={download}>다운로드</button>
    {users.map((u) => (
      <h1>
        {u.id}, {u.name}
      </h1>
    ))}
</div>
  );

"다운로드" 버튼을 클릭할 때마다,

{id: 5, name: '김흥국'}이라는 Object를 push 했다.

그럼 다운로드를 누를 때 마다, Object가 추가되고

UI에 추가되어야 한다고 예상할 수도 있다.

하지만, 변경되지 않는다.

실제로 sample 배열에 Object는 추가된다.

하지만 UI는 변경이 없다.

이유는 레퍼런스의 변경이 없기 때문이다.

그럼 어떻게 해결해야할까?

concat을 사용하자!

const download = () =>{
    
    const b = sample.concat({id: 5, name :'김흥국'});
    
    setUsers(b);
  }

위 코드처럼 바꾸면 성공적으로 ui가 변경되는 것을 볼 수 있다.

[React #3] JSX 문법을 익혀보자! ㅣ concat, filter, map, spread, slice, forEach

관심쟁이 영호 — Fri, 7 May 2021 01:51:18 +0900

이번 포스팅에서는 concat, filter, map, slice, 스프레드(전개) 연산자에 대해서 살펴볼 것이다.

스프레드 연산자

스프레드 연산자는 깊은 복사를 실시하는 연산자이다.

아래 코드를 보자.

const a = [1,2,3]
const b = [...a];

b.push(4);

// a???

이렇게 했을 때, a의 값은 어떻게 될까?

정답은 [1,2,3] 그대로다.

이것이 깊은 복사이다.

a의 모든 값을 복사하여 새로운 메모리를 할당한 배열 b에 저장한다.

그래서 b에 새로운 값을 푸쉬해도 a에는 아무런 영향을 주지 않는다.

concat

concat 함수는 추가하는 함수라고 생각하면 된다.

아래 코드를 보자.

const a = [1,2,3];
const b = a.concat(4);

// b???

이 때의 b값은 1,2,3,4 이다.

filter

filter는 걸러내는 함수라고 생각하면 된다.

filter 속에는 함수를 넣어주어야 한다. 함수에서 true값 나오는 것들만 배열에 남게 된다.

아래 코드를 보자.

const a = [1,2,3]
const b = a.filter((n) => { return n != 1});

// b???

이 때의 b값은 2,3 이다.

a의 값을 n으로 순차적으로 받아오고 1만 false 나머지는 true여서 2, 3 만 남게되는 것이다.

slice

slice는 잘라내는 함수이다.

아래 코드를 보자.

const a = [1,2,3];
const b = a.slice(0, 2);

// b???

이 때의 b값은 1,2 이다.

forEach, map

forEach, map은 반복하는 것이라고 생각하면 된다.

차이점은 forEach는 return이 없다.

map은 return이 있다.

아래 코드를 보면서 살펴보자.

const a = [1,2,3]

a5.forEach((n) => { console.log}(n);}); // 리턴 x

const b = a5.map((n) => n); // 리턴 o

n은 n이다. 라고 했기 때문에

b는 [1, 2, 3]이다.

(const b = [...a])

forEach는 연산이나 콘솔을 찍을 때, 주로 사용된다.

[React #2] JSX 문법을 익혀보자!

관심쟁이 영호 — Wed, 5 May 2021 06:13:29 +0900

이번 시간은 JSX 문법을 익혀볼 것이다.

React의 기본만 다루는 것이 목표기 때문에, 자세히 들여다보진 말자.

JS문법에 HTML 문법을 넣을 수 있다.

return (
  <div>
    안녕
</div>
  );

일반적으로 JS문법에서는 "<div> 안녕 </div>" 이렇게 "" 사이에 html 구문을 입력한다.

JSX에서는 ""를 표시할 필요가 없다.

※ return이 무엇인지 모르는 사람이 있을 수 있다. 리액트는 설정에서 index.js를 실행하도록 설정이 되어있다.

index.js는 아래의 코드가 있다.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

<App /> 는 App.js의 function App()을 실행하라는 것이다.

document.getElementById('root')는 index.html에서 root라는 id값을 찾으라는 말이다.

실제로 index.html을 가보면 root라는 div 태그가 있다. 그리고 해당 태그에 return을 해서 적용이 된다.

하나의 태그만 return 한다.

아래와 같이 return을 하게 되면 오류가 난다.

<div>
	하이
</div> 
<h1>
	하이2
</h1>

그럼 어떻게 해야하나?

그냥 태그 하나 더 씌워주자!

<div> 
	<div> 
    	하이 
    </div> 
    <h1> 
    	하이2
    </h2> 
</div>

이렇게 하면 return은 1개의 태그이다.

{}로 변수 표시가 가능하다.
if는 사용 불가능하다. 대신 삼항 연산자를 사용한다.

let a = 20;
  return (
  <div>
  
    <div style = {mystyle}>
        안녕{a === 10 ? '10입니다' : '10아닙니다.'}
    </div>
    
  </div>
  );

조건 ? 값(true) : 값 (false)

css 디자인을 입힐 수 있다.

내부 디자인, 외부 디자인, 라이브러리

3가지의 방법이 있다.

내부 디자인은 사용하지 않기로 하자.

외부 디자인은 어떻게 하나?

App.css 파일에서 기존에 css를 입력한다.

그리고 똑같이 태그에 입력해준다.

[React #1] 리액트가 무엇인가?

관심쟁이 영호 — Tue, 4 May 2021 23:51:50 +0900

웹 개발에 관심이 있는 사람이라면,

"리액트"라는 단어를 한번쯤은 보았을 것이다.

이 단어가 왜 많은 사람들에게서 언급이 되는 것일까?

오늘의 포스팅에서는 리액트의 전반적인 개요를 둘러볼 예정이다.

리액트란?

내가 이해한 수준에서 명쾌하게 말을 하자면,

리액트는 싱글 페이지 어플리케이션을 개발하는데 도움을 주는 프레임워크라고 생각이 된다.

그렇다면 싱글 페이지 어플리케이션이란 무엇인가?

싱글 페이지 어플리케이션?

싱글 페이지 어플리케이션이란, html 파일은 1개 뿐이다. 필요한 부분의 View만 새롭게 그린다.

통째로 html을 받아올 필요가 없다.

개발되기 전에 웹 개발 상황을 살펴보자.

클라이언트가 서버에게 웹 페이지를 요청한다.
서버는 클라이언트에게 HTML 화면 통째로 보내준다.
클라이언트가 화면에 어느 부분을 클릭한다.
서버가 클라이언트에게 HTML 화면 통째로 다시 보내준다.

ajax를 이용해서 부분 화면을 그리는 방법도 있다.

하지만 페이스북과 같은 웹뷰는 매우매우 복잡해서 ajax로 그리기가 매우 복잡하다.

그래서 리액트가 등장했다.

리액트 특징

그럼 여기서 리액트가 무엇을 하는 것인가?

리액트는

ajax를 이용한 데이터 변경감지 ->UI가 자동 업데이트 되도록 프로그래밍이 가능

이 때, 변경을 감지하는 엔진은 Demon이라고 한다.

항상 변경을 감지해야하기 때문에, 계속해서 서버처럼 돌고있어야 한다.

그 서버는 nodejs로 이루어져있다.

다시 말해서, 리액트는 UI를 Demon엔진을 통해서 지켜보고 있다.

변경이 필요한 부분은 해당 부분만 UI를 새롭게 그려준다.

리액트를 이용하면 html 페이지는 1개이다.
수시로 태그부분이 바뀐다.
JSX 문법을 이용한다.

이정도만 이해하자!

리액트 공부해야하는 것!

엔진에게 어떠한 부분만 변경하도록 지칭하는 공부!
지칭을 넘어서서 효율적으로 UI를 재구성하는 공부!
JSX 문법 익히기

정도로만 공부하는 것을 목표로 하자!

[#19] Spring Boot ㅣ 완성 코드 분석 ㅣ 주문 취소 살펴보기

관심쟁이 영호 — Mon, 3 May 2021 01:52:46 +0900

이번에는 주문취소에 대해서 살펴볼 예정이다.

주문취소를 보는 이유는

DB에서 값을 가져와서 데이터를 변경해주는 작업이기 때문이다.

여기서 문제가 있다.

만약, 물품이 10개가 있다.

A라는 사람이 1개의 물품을 주문함과 동시에

B라는 사람이 10개의 물품을 주문할 수도 있다.

이렇게 된다면, DB에도 문제가 생기고

결제서비스와 같은 직접 돈과 연관되어 있는 문제면 엄청난 파장이 생길 것이다.

어쨌든 살펴보자.

홈화면에서 "주문 내역"을 눌러준다.

그러면 위와같은 페이지가 나온다.

페이지에 해당하는 매핑 컨트롤러로 가보자!

페이지는 "http://localhost:8080/orders" 이다.

// OrderController.class

@Controller
@RequiredArgsConstructor
public class OrderController {
    private final OrderService orderService;
    private final MemberService memberService;
    private final ItemService itemService;
    
    @GetMapping(value = "/orders")
    public String orderList(@ModelAttribute("orderSearch") OrderSearch
                                    orderSearch, Model model) {
        List<Order> orders = orderService.findOrders(orderSearch);
        model.addAttribute("orders", orders);
        return "order/orderList";
    }

   
}

@GetMapping으로 구성되었다.

먼저 DB에서 모든 order을 가지고 온다.

- 이전 블로그에 다루지 않았던, db를 들고오는 것을 한번 짚고가자.

OrderService에서 Repository의 메소드를 실행한다.

영속성 컨텍스트를 다루는 Repository를 접근하는 것은 당연할 것이다.

// OrderRepository.class

@Repository
@RequiredArgsConstructor
public class OrderRepository {

    private final EntityManager em;

    public Order findOne(Long id) {
        return em.find(Order.class, id);
    }

    // public List<Order> findAll(OrderSearch ordersearch){}
    public List<Order> findAllByCriteria(OrderSearch orderSearch) {
        CriteriaBuilder cb = em.getCriteriaBuilder();
        CriteriaQuery<Order> cq = cb.createQuery(Order.class);
        Root<Order> o = cq.from(Order.class);
        Join<Order, Member> m = o.join("member", JoinType.INNER); //회원과 조인
        List<Predicate> criteria = new ArrayList<>();
        //주문 상태 검색
        if (orderSearch.getOrderStatus() != null) {
            Predicate status = cb.equal(o.get("status"),
                    orderSearch.getOrderStatus());
            criteria.add(status);
        }
        //회원 이름 검색
        if (StringUtils.hasText(orderSearch.getMemberName())) {
            Predicate name =
                    cb.like(m.<String>get("name"), "%" +
                            orderSearch.getMemberName() + "%");
            criteria.add(name);
        }
        cq.where(cb.and(criteria.toArray(new Predicate[criteria.size()])));
        TypedQuery<Order> query = em.createQuery(cq).setMaxResults(1000); //최대1000건
        return query.getResultList();


    }
}

findOne, findAll 두개의 메소드가 있다.

1개를 찾아오는 것, 전부를 찾아오는 것이 있다.

우리는 List에 담을 모든 order을 불러와야 하기때문에, findall을 살펴볼 예정이다.

해당하는 부분에 Criteria 방식으로 db를 조회하는 것이다.

근데, Criteria라는 방식에 대해서 정확한 설명을 듣지못해서 확실하게 기록할 수가 없다.

이유는, 실무에서는 다른방식을 사용하신다고 하셔서 제대로 안들었다..ㅋㅋㅋ

어쨋든 여기에서 검색 text가 입력되어있다면 해당하는 정보만 조회,

없다면 모든 정보를 조회할 수 있도록 만들어놓은 것이다.

cb에 em.getCritiriaBuilder를 넣어주고,

이것에다가 만드는 느낌이다.

다시 돌아가면,

이런식으로 join하고 조회를 해와서 해당값을 리턴해주고, 그것을 리스트에 담아준다.

취소는 어떻게 되는건가?

이건 먼저 html문서를 봐야한다.

이유는 버튼 클릭 액션이 일어나고, 거기서 해당하는 요청을 해야하기 때문이다.

html을 살펴보자.

<!-- OrderList.html -->

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"/>
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <div>
        <div>
            <form th:object="${orderSearch}" class="form-inline">
                <div class="form-group mb-2">
                    <input type="text" th:field="*{memberName}" class="formcontrol" placeholder="회원명"/>
                </div>
                <div class="form-group mx-sm-1 mb-2">
                    <select th:field="*{orderStatus}" class="form-control">
                        <option value="">주문상태</option>
                        <option th:each=
                                        "status : ${T(jpashop.jpashop.domain.OrderStatus).values()}"
                                th:value="${status}"
                                th:text="${status}">option
                        </option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary mb-2">검색</button>
            </form>
        </div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>#</th>
                <th>회원명</th>
                <th>대표상품 이름</th>
                <th>대표상품 주문가격</th>
                <th>대표상품 주문수량</th>
                <th>상태</th>
                <th>일시</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item : ${orders}">
                <td th:text="${item.id}"></td>
                <td th:text="${item.member.name}"></td>
                <td th:text="${item.orderItems[0].item.name}"></td>
                <td th:text="${item.orderItems[0].orderPrice}"></td>
                <td th:text="${item.orderItems[0].count}"></td>
                <td th:text="${item.status}"></td>
                <td th:text="${item.orderDate}"></td>
                <td>
                    <a th:if="${item.status.name() == 'ORDER'}" href="#"
                       th:href="'javascript:cancel('+${item.id}+')'"
                       class="btn btn-danger">CANCEL</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div th:replace="fragments/footer :: footer"/>
</div> <!-- /container -->
</body>
<script>
 function cancel(id) {
 var form = document.createElement("form");
 form.setAttribute("method", "post");
 form.setAttribute("action", "/orders/" + id + "/cancel");
 document.body.appendChild(form);
 form.submit();
 }
</script>
</html>

여기서 cancel하면 해당하는 주문이 사라져야해서, 자바스크립트가 실행된 것을 볼 수 있다.

자바스크립트 공부가 아니니, 다음에 짚어보자!

그럼 코드에서 해당하는 주문의 영속성 컨텍스트를 삭제해주어야 한다.

코드가 어떻게 움직일까?

여기도 form이 있고, action과 post방식으로 넘겨주고,

해당하는 url을 보내는 것을 볼 수 있다.

"/orders/" + id + "/cancel" <- 이렇게 표시되어 있는 곳과 매핑되어있는 곳을 보자.

// OrderController

 @PostMapping(value = "/orders/{orderId}/cancel")
    public String cancelOrder(@PathVariable("orderId") Long orderId) {
        orderService.cancelOrder(orderId);
        return "redirect:/orders";
    }

위와같다. {}중괄호는 자바스크립트 쪽인거 같으니까 다음에 짚어보고,

해당하는 값이 id와 같이 넘어온다.

그리고 Service.cancelOrder 메서드를 불러온다.

orderService 클래스를 보자.

// OrderService.class

//취소
    @Transactional
    public void cancelOrder(Long orderId){

        // 주문 엔티티 조회
        Order order = orderRepository.findOne(orderId);

        // 주문 취소
        order.cancel();


    }

해당하는 id를 DB와 직접연결된 Repository 클래스에 넘겨준다.

그리고 Repository에서 찾아온 값을 cancel 메서드를 호출하여 삭제해준다.

public void cancel(){
        if(delivery.getStatus() == DeliveryState.COMP){ //COMP 는 이미 배송이 완료된 상품이다.
            throw new IllegalStateException("이미 배송완료된 상품은 취소가 불가능합니다.");
        }

        this.setStatus(OrderStatus.CANCEL);

        for(OrderItem orderItem: orderItems){
            //주문에 담은 각 상품들에 cancel을 날려주어 상품도메인에 각 상품에 갯수를 + 해주어야 한다.
            orderItem.cancel();
        }
    }

cancel 메소드이다.

먼저 배송이 완료되었는지, 확인을 해준다.

배송이 완료되었으면 취소불가하다.

배송이 완료되지 않았으면 상품주문을 취소하고 해당상품의 재고를 1개 늘려주어야 한다.

그래서 orderItem.cancel을 불러준다.

그럼 orderitem.cancel을 살펴보자.

public void cancel() { //재고를 늘려주는게 목표이다,
        getItem().addStock(count);
    }

주문 취소를 했으니, 당연히 재고는 늘어날 것이다.

getItem은 해당 item 객체를 받아오는 것이고, 해당 객체의 addStock 메서드는 다음과 같다.

 public void addStock(int quantity){
        this.stockQuantity += quantity;
    }

수량이 늘어난 것을 볼 수 있다.

이렇게하면 영속성 컨텍스트에 포함되어 있는 객체의 값이 변경될 것이고,

JPA는 영속성 컨텍스트의 데이터 변경감지를 알아차리고

DB테이블과 매칭시켜 데이터를 바꾸어줄 것이다.

[#18] Spring Boot ㅣ 완성된 코드 분석 ㅣ 주문하기 살펴보기!

관심쟁이 영호 — Sun, 2 May 2021 01:08:04 +0900

이번에는 "주문하기"에 대한 코드를 살펴보자.

주문하기는 Member, item, order 등등 모든 테이블과 엔티티가 엮어있기 때문에 조금더 생각을 해야한다!

어쨋든, 홈화면에서 주문하기 버튼을 클릭해보자.

그렇게 되면,

localhost:8080/order로 넘어가게 된다.

화면은 아래와 같다.

여기서 Controller에 매핑이 되어있을 것이다.

해당 url이 매핑되어 있는곳으로 가보자!

※ 주문 회원, 상품명을 클릭하면 리스트가 콥보박스처럼 드롭다운된다.

@Controller
@RequiredArgsConstructor
public class OrderController {
    private final OrderService orderService;
    private final MemberService memberService;
    private final ItemService itemService;
    
    @GetMapping(value = "/order")
    public String createForm(Model model) {
        List<Member> members = memberService.findMembers();
        List<Item> items = itemService.findItems();
        model.addAttribute("members", members);
        model.addAttribute("items", items);
        return "order/orderForm";
    }
   
}

확실히 코드가 많다.

우리는 GetMapping을 했으니, @GetMapping부분을 살펴보자.

먼저 member와 item을 전부 찾아와서, List에 담아준다.

그리고 model에 담아준다음, orderForm.html을 불러준다.

이유는, 주문 페이지에서 등록된 상품들을 주문해야하니, item을 불러오고

member를 입력해주어야 하니 member를 다 불러오도록 만든 것이다.

그럼 여기서 model에 담아준 attribute들을 orderForm에서 어떻게 받는지 살펴보자.

orderForm.html을 보자.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <form role="form" action="/order" method="post">
        <div class="form-group">
            <label for="member">주문회원</label>
            <select name="memberId" id="member" class="form-control">
                <option value="">회원선택</option>
                <option th:each="member : ${members}"
                        th:value="${member.id}"
                        th:text="${member.name}" />
            </select>
        </div>
        <div class="form-group">
            <label for="item">상품명</label>
            <select name="itemId" id="item" class="form-control">
                <option value="">상품선택</option>
                <option th:each="item : ${items}"
                        th:value="${item.id}"
                        th:text="${item.name}" />
            </select>
        </div>
        <div class="form-group">
            <label for="count">주문수량</label>
            <input type="number" name="count" class="form-control" id="count"
                   placeholder="주문 수량을 입력하세요">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <br/>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

html을 상세히모르지만 model을 넘겨주어서 orderForm을 생성하는 거 같다.

똑같이 form에 action과 method로 설정되어 있다. submit을 클릭하게 되면, 폼에 저장한다음, "/order"로 post방식으로 정보를 넘겨주게 될 것이다.

그럼 그것을 받은 매핑으로 가보자.

 // OrderController.class
 
 @PostMapping(value = "/order")
    public String order(@RequestParam("memberId") Long memberId,
                        @RequestParam("itemId") Long itemId, @RequestParam("count") int count) {
        orderService.order(memberId, itemId, count);
        return "redirect:/orders";
    }

OrderController에 다음과 같이 매핑되어있다.

근데 여기서는 Form 객체로 받지않고, 각각에 key - value로 받고있다.

이것은 html문법인지 jpa 제공기능인지 정확하게는 모르겠다.

html 공부를 할 때, 찾아보자.

어쨋든 해당하는 데이터를 이용해서

orderService의 order 메서드를 실행해준다.

아래는 orderService이다.

@Service
@Transactional(readOnly = true)
@RequiredArgsConstructor
public class OrderService {

    private final OrderRepository orderRepository;
    private final MemberRepository memberRepository;
    private final ItemRepository itemRepository;
    //주문
    @Transactional
    public Long order(Long memberId, Long itemId, int count){

        //엔티티 조회
        Member member = memberRepository.findOne(memberId);
        Item item = itemRepository.findOne(itemId);

        //배송정보 생성
        Delivery delivery = new Delivery();
        delivery.setAddress(member.getAddress());

        //주문 상품 생성
        OrderItem orderItem = OrderItem.createOrderItem(item, item.getPrice(), count);

        //주문 생성
        Order order = Order.createOrder(member, delivery, orderItem);

        //주문 저장
        orderRepository.save(order);

        return order.getId();

    }
    
    }

OrderService에서 해당하는 엔티티를 찾아주고

금액 계산, 주문목록 생성 등등 로직을 거친 다음,

최종적으로 영속성 컨텍스트 저장을 위해서 넘겨준다.

이렇게 되면 orderRepository에서 save 메서드를 거치고 저장이 된다.

이 다음에는 주문 취소에 대해서 공부를 해보자!

[#17] Spring Boot ㅣ JPA로 테이블에 insert하기 ㅣ 완성 코드 분석하기

관심쟁이 영호 — Sat, 1 May 2021 01:30:59 +0900

이전 시간에는 데이터베이스에 테이블을 어떻게 생성하는지 살펴보았다.

이번 시간에는 웹에서 데이터를 생성할 때를 살펴보자.

회원가입을 해보자.

위 그림과 같이 생성했다.

"Submit" 버튼을 눌렀을 때, 어떤일이 일어날까!?

- 먼저 해당화면을 구성하는 html을 살펴보자.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<style>
 .fieldError {
 border-color: #bd2130;
 }
</style>
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <form role="form" action="/members/new" th:object="${memberForm}"
          method="post">
        <div class="form-group">
            <label th:for="name">이름</label>
            <input type="text" th:field="*{name}" class="form-control"
                   placeholder="이름을 입력하세요"
                   th:class="${#fields.hasErrors('name')}? 'form-control
fieldError' : 'form-control'">
            <p th:if="${#fields.hasErrors('name')}"
               th:errors="*{name}">Incorrect date</p>
        </div>
        <div class="form-group">
            <label th:for="city">도시</label>
            <input type="text" th:field="*{city}" class="form-control"
                   placeholder="도시를 입력하세요">
        </div>
        <div class="form-group">
            <label th:for="street">거리</label>
            <input type="text" th:field="*{street}" class="form-control"
                   placeholder="거리를 입력하세요">
        </div>
        <div class="form-group">
            <label th:for="zipcode">우편번호</label>
            <input type="text" th:field="*{zipcode}" class="form-control"
                   placeholder="우편번호를 입력하세요">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <br/>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

위와 같이 구성되었다.

여기서 <form>태그에 주목을 하면,

"<form role="form" action="/members/new" th:object="${memberForm}" method="post">"

이렇게 코드가 짜여져 있다.

자세한 이해를 하고 싶다면, html의 form태그의 기능을 살펴보자!

action 으로 "/members/new"라고 적혀있다. "/members/new"라고 매핑이 되어있는 곳으로 해당 폼정보를 던진다는 뜻이다.

method는 폼정보를 post형태로 던진다는 뜻이다.

이렇게 던지면, MemberController에서 해당하는 요청 매핑이 된다.

아래의 매핑코드를 보자.

@PostMapping(value = "/members/new")
    public String create(@Valid MemberForm form, BindingResult result) {
        if (result.hasErrors()) {
            return "members/createMemberForm"; //에러가 있으면 BindingResult에서 스프링이 해당 값을 사용할 수 있도록 해준다.
        }
        Address address = new Address(form.getCity(), form.getStreet(),
                form.getZipcode());
        Member member = new Member();
        member.setName(form.getName());
        member.setAddress(address);
        memberService.join(member);
        return "redirect:/";
    }

해당 값으로 넘어온다.

파라미터로 "MemberForm form"이 넘어온다.

html에서 던져준 폼을 받은 것이다.

컨트롤러에서는 폼에서의 정보를 전부 member객체에 set해준다.

그리고 memberService의 join 메소드를 호출하여 set해준 member를 던져준다.

아래는 memberService 코드이다.

@Service
@Transactional(readOnly = true) //데이터 변경은 기본적으로 트랜잭션안에 있어야 한다.
@RequiredArgsConstructor // 자동 주입
public class MemberService {


    //@Autowird를 추가한다면,
    //EntityManager의 @PersistenceContext와 똑같이 자동 주입을 위함이겠지?
    // 스프링 Bean에 등록되어있는 MemberRepository를 주입해줄 것이다!!

    private final MemberRepository memberRepository;



    @Transactional
    //회원가입
    public Long join(Member member){

        validateDuplicateMember(member); //중복 회원 검증
        memberRepository.save(member);

        return member.getId();
    }
    
}

join을 받아서 중복회원을 검증하고, 영속성 컨텍스트를 관리하고있는 memberRepository에 던져준다.

※ validateDuplicateMember 안에 예외처리를 해두어서, 예외가 발생할 경우 save까지 넘어오지 않는다.

아래는 memberRepository이다.

@Repository
@RequiredArgsConstructor
public class MemberRepository {

     // @PersistenceContext // 1. JPA 사용 표준 어노테이션
    private final EntityManager em; // 2. 이렇게 해주면 스프링이 자동으로 엔티티 매니저를 만들어서 em에 주입시켜준다.

    public void save(Member member){ //저장
        em.persist(member);
    }
}

여기서 EntityManager 타입의 em이 있다.

이것을 통해서 우리는 영속성 컨텍스트를 다룰 수 있다.

여기까지 넘어온 member 객체는 모든 과정을 통과한 정보라서 DB에 저장해주어도 된다.

em.persist를 통해서 영속성 컨텍스트에 추가해준다.

이렇게하면 JPA가 알아서 해당 객체를 테이블에 매칭하여 추가해준다.

이것뿐만 아니라, 다른 "item" 항목에도 해당하는 로직과 똑같다.

그럼 이 다음에는 주문에 해당하는 로직을 살펴보자.

[#17] Spring Bootㅣ 코드 분해하기 ㅣ Entity클래스? JPA?

관심쟁이 영호 — Fri, 30 Apr 2021 01:22:42 +0900

이전 시간에는 웹사이트에서 요청했을때, 어떤방식으로 인식하고 넘어가는지 살펴보았다.

그럼 이번시간에는 회원가입을 했을때, 데이터가 어떻게 넘어가고 어떻게 내부에서 움직이는지 살펴보자.

Spring이 시작이 되면, 테이블을 생성한다.

어디에서 테이블을 생성하라는 코드가 있을까?

이것을 알기 위해서는 먼저 JPA에 대한 지식이 있어야 한다.

JPA에 대한 지식은 다른 글에 있다.

https://bestkingit.tistory.com/106

Spring Boot ㅣ JPA, ORM에 관해서

ORM? ORM은 Object Relational Mapping이다. 데이터베이스에 저장된 테이블 형식의 데이터를 모델링하여 자바에서 사용할 수 있도록 클래스로 바꿔주는 것이다!! 거꾸로도 가능하다! ]ORM를 알아보기 전에,

bestkingit.tistory.com

프로젝트를 시작할 때, 우리는 spring web, hibernate 등등의 라이브러리를 다운로드 받아주었다.

이렇게 하면, 자동으로 의존성이 추가된 상태로 프로젝트가 만들어지고

필요한 라이브러리가 다운로드 된다.

이 때, 설치된 것 중 하나가 Spring JPA Pakage가 있다. 그리고 이것을 사용하기 위해서는 구현체가 필요하다.

그것이 바로 hibernate이다.

그럼 어디서 그러한 설정이 되어있는지 살펴보자.

- gradle로 가보자.

implementation 'org.springframework.boot:spring-boot-starter-data-jpa'

여기서 jpa를 설치한 것이 보인다.

- hibernate는 어디에?

외부 라이브러리에 설치되어 있는 것을 볼 수 있다.

JPA는 어떻게 테이블을 생성할까?

프로젝트를 Run하게 되면, JPA는 @Entity들을 스캔해서 영속성 컨텍스트에 담게 된다.

영속성 컨텍스트에 대해서는 다른 포스팅에 있다!

여기서의 Entity는 자바에서 1개의 클래스이다.

그리고 해당하는 클래스는 데이터베이스에 테이블에 매칭된다.

아래의 그림을 보자

이렇게하면 테이블은 아래와 같이 만들어진다.

(현실성 있게 하다가, 나의 개인정보가 있어서.. 지웠다.)

※ 각각 테이블의 필드가 되었다. 그래고 어노테이션을 지정해준 것에 따라서 Primary Key가 되고, Foriegn Key가 되었다.

다음 시간에는, 웹에서 회원가입을 했을 때, 데이터들이 어떻게 움직이는 지, 살펴보자.

[#16] Spring Boot ㅣ 완성한 프로젝트 기초부터 전부 뜯어보기

관심쟁이 영호 — Thu, 29 Apr 2021 01:25:46 +0900

이제부터는 모든 코드를 하나하나 뜯어보고, 어떤일이 일어나있는 지, 왜 그렇게 되는지 완벽하게 분해분석을 할 예정이다.

1. H2 서버를 시작해주고, 프로젝트를 실행해준다.

- 해당 내용에 대한 설정은, application.yml에 표시되어 있다.

spring:
  datasource:
    url: jdbc:h2:tcp://localhost/~/jpashop
    username: sa
    password:
    driver-class-name: org.h2.Driver

- 여기서 url로 설정되어 있다.

2. url : localhost:8080으로 접속해준다. 그럼 홈화면이 뜬다.

- 왜 localhost:8080인가?

이 이유는 yml에 설정이 되어 있기 때문이다. yml에 server.port에 대한 설정이 없으면 기본 루트 값인, 8080포트로 향하도록 설정이 된다. 설정을 바꾸려면 아래와 같이 yml에 표시해준다.

server:
  port: 8081
  context-path: /book

이렇게 설정하면 우리는 localhost:8080이 아닌

localhost:8081/book

이렇게 해야 홈화면을 접속할 수 있을 것이다.

- 접속했을 때, 왜 홈화면이 나오는가?

이 이유는 localhost:8080에 해당하는 url에 RequestMapping을 해놓았기 때문이다. 아래의 코드를 보면 알 수 있다.

@Controller
@Slf4j
public class HomeController {

    @RequestMapping("/")
    public String home(){
        log.info("home controller");
        return "home";
    }
}

여기서 RequestMapping("/")이 무슨 말이냐면,

서버에게 요청이 "localhost:8080/"으로 올 경우

resource폴더에 있는 home.html을 리턴해주라는 뜻이다.

Spring은 해당 폴더를 접근하도록 기본 설정이 되어있다.

templates의 home.html을 찾아서 리턴해주게 된다.

(static을 찾아가도록 설정되어있다고 들었는데, 음.. 여기는 공부를 해야겠다.)

3. 각 버튼을 누르면 이동된다.

- 그럼 어디에 이동하도록 설정되어 있나?

먼저 이것은 home.html을 살펴보아야 한다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader" />
    <div class="jumbotron">
        <h1>HELLO SHOP</h1>
        <p class="lead">회원 기능</p>
        <p>
            <a class="btn btn-lg btn-secondary" href="/members/new">회원 가입</a>
            <a class="btn btn-lg btn-secondary" href="/members">회원 목록</a>
        </p>
        <p class="lead">상품 기능</p>
        <p>
            <a class="btn btn-lg btn-dark" href="/items/new">상품 등록</a>
            <a class="btn btn-lg btn-dark" href="/items">상품 목록</a>
        </p>
        <p class="lead">주문 기능</p>
        <p>
            <a class="btn btn-lg btn-info" href="/order">상품 주문</a>
            <a class="btn btn-lg btn-info" href="/orders">주문 내역</a>
        </p>
    </div>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

여기서 모든 버튼들이 선언되어 있다.

대표적으로 회원가입 버튼을 보자.

회원가입 버튼은 href="/members/new" 라고 설정되어 있다.

해당 버튼을 누르면 서버에 기본설정값 + "/members/new"라고 요청이 된다.

http://localhost:8080/members/new <- 이렇게 요청이 된다.

- 요청은 어디에 매핑이 되어있나?

이 요청은 회원가입에 해당하는 Controller에 매핑이 되어 있을 것이다. 코드를 보자.

private final MemberService memberService;

    @GetMapping(value = "/members/new")
    public String createForm(Model model) {
        model.addAttribute("memberForm", new MemberForm());
        return "members/createMemberForm";
    }

    @PostMapping(value = "/members/new")
    public String create(@Valid MemberForm form, BindingResult result) {
        if (result.hasErrors()) {
            return "members/createMemberForm"; //에러가 있으면 BindingResult에서 스프링이 해당 값을 사용할 수 있도록 해준다.
        }
        Address address = new Address(form.getCity(), form.getStreet(),
                form.getZipcode());
        Member member = new Member();
        member.setName(form.getName());
        member.setAddress(address);
        memberService.join(member);
        return "redirect:/";
    }

여기서 확인할 수 있다.

해당 코드를 보면 GetMapping과 PostMapping 2개가 있다.

각각 다른 것이다.

회원가입이니까 1개는 회원가입 페이지를 표시, 다른 1개는 회원가입 정보를 입력하고 확인버튼 눌렀을 때의 정보를 넘겨줄 Post매핑일 것이다.

앞에 코드에서 RequestMapping을 사용한 것을 살펴볼 수 있다. 근데 @GetMapping과 @PostMapping이 보인다.

그럼 여기서 RequestMapping, GetMapping, PostMapping이 무엇일까?

- RequestMapping, GetMapping, PostMapping 차이

@RequestMapping은 @GetMapping, @PostMapping이 나오기 전에 먼저 있던 것이다.

아래의 코드를 줄일 수 있는 역할이다.

@RequestMapping(value="/", method = { RequestMethod.GET}) -> @GetMapping("/")
@RequestMapping(value="/", method = {RequestMethod.POST}) -> @PostMapping("/")

이렇게 줄일 수 있게 되었다.

둘 중 아무거나 사용해도 상관없는데, 뒤에 최신버전으로 나온 것이 더욱 최적화가 잘되어있을 것이다!

그리고 개발자입장에서도 구분하기 편하다.

그럼 다음 시간에는 데이터베이스에 테이블들이 어떻게 생성되는지 살펴보자.

[HTML #4] HTML 옵션값 ui, li, ol, br,

관심쟁이 영호 — Wed, 28 Apr 2021 01:35:54 +0900

ui와 ol은 리스트 형태로 보여주는 것이다.

li는 해당 리스트에 값을 넣어주는 것이다.

화면으로 살펴보자.

코드는

<ul>
	<li>쇼핑</li>
    	<li>고기</li>
    	<li>화장품</li>
	<li>장난감</li>
   	<li>전자기기</li>
   	<li>신발</li>
</ul>

<ol>
	<li>일번</li>
	<li>이번</li>
	<li>삼번</li>
	<li>사번</li>
	<li>오번</li>
</ol>

화면은

이렇다.

이미지파일, 버튼 그냥 싹다 넣을 수 있다!

이 것은 줄을 한번 개행 시켜주는 것이다.

그 외에는 많은 태그가 있다.

하나하나 짚고 넘어가기가 힘들다.

이 다음에 html을 사용할 때, 필요하면 w3school.com에 가서 찾아보도록 하자!