Keep Going

Web Server

클라이언트가 GET, POST 등의 메소드를 이용해 전송한 요청을 받아 HTML이나 오브젝트를 HTTP 프로토콜을 이용해 전송하는 프로그램이다. 웹 서버는 웹페이지, 이미지 등 정적인 컨텐츠만 제공할 수 있다. 

WAS(Web Application Server)

WAS란 Web Server와 Web Container의 결합으로 이루어진 소프트웨어이다. Web Server를 포함하고 있기 때문에 Web Server처럼 사용할 수 있다. Web Server와 달리 WAS는 동적인 페이지를 만들어 유연하게 응답할 수 있다는 점이다. 

Web Server는 정적인 컨텐츠만 제공하기 때문에 클라이언트의 요구에 유연하게 대처하기 어렵다. DB와 연결해 데이터를 주고받거나 데이터 조작을 하여 동적인 페이지를 생성해 응답하기 위해서는 WAS를 사용하고 있다. 

Tomcat

아파치 재단에서 만든 오픈소스 WAS(Web Application Server)이다. Tomcat은 Java Servlet과 JSP가 실행할 수 있는 환경을 제공하여 동적인 페이지를 생성한다. DB연결 및 데이터 조작, 응용프로그램과 상호작용이 가능하다.

Tomcat에는 서버가 start 되는 시점에 읽어 들여서 동작을 준비하는 xml 문서가 있다.

Tomcat/ 하위에 있는 폴더의 .xml 파일에 환경 설정을 하면 Tomcat 서버를 이용하는 모든 웹 어플리케이션에 동일한 환경설정이 적용된다.

- context.xml

- server.xml

- tomcat-users.xml

- web.xml

서버실행시 읽는 순서

request -> catalina -> context -> servlet -> response

WEB-INF

src/main/webapp/WEB-INF

Web Information의 약자이고, WEB-INF폴더에는 브라우저에 직접 접근할 수 있고, 오직 서버내에서만 접근이 가능하다. 

META-INF

src/main/webapp/META-INF

- java에서 설정 관련 파일을 저장하는 폴더

- java 패키징 기술인 jar의 일부

자바파일에서 javax.servlet.Servlet 인터페이스를 구현해서 작성

spring이 servlet stack기반 기술이다. 그래서 잘 알아놓아야한다.

servlet 스펙을 구현한 Tomcat 웹 서버를 설치하여 활용 가능

Servlet이란

클라이언트가 어떤 요청을 하면 그 결과를 다시 전송해주는 역할을 한다.

웹 어플리케이션 서버에서 동작하는 프로그램 구현시 사용한다.

서블릿은 클라이언트의 요청에 따라 서버가 실행할 수 있는 유일한 자바 파일이다. 

서블릿을 동작시키기 위한 조건은 서블릿 API를 통해 제공받을 수 있으며, 

서블릿을 구현할 때 해당 API인  javax.servlet.http.HttpServlet 만 상속(extends) 받으면 됨

모든 자바 파일에 extends HttpServlet을 작성하여 해당 java 파일을 서블릿으로 동작하도록 구현

HttpServlet

HttpServlet을 상속받은 클래스를 Servlet 이라고 함

HTTP 요청 메서드에 따라 doGet(), doPost(), doPut() 등 요청 메서드에 맞는 메서드를 재정의(Overriding)하여 사용해야함

doGet() : 해당 서블릿이 HTTP GET 요청을 받았을 때 동작하는 메서드

doPost() : 해당 서블릿이 HTTP POST 요청을 받았을 때 동작하는 메서드

그 외 수명주기와 관련된 init(), destory()

class HelloServlet extends HttpServlet { ... }

Servlet을 왜 쓰는지

사용자의 요청에 의해 생성된 서블릿 객체는 서블릿 컨테이너 내부에 보관한다. 이후 동일한 경로로 요청이 올 경우, 

보관하고 있던 서블릿을 재사용하여 요청 시마다 새롭게 서블릿 객체를 생성하지 않는다. 

서블릿 컨테이너가 서블릿 클래스들을 인스턴스화하고

서블릿 컨테이너 내부에 보관하고 있다가 요청에 따라 해당 서블릿 객체를 재실행 시켜주는 역할을 함

클라이언트로부터의 요청이 최초 요청인지 아닌지에 따라 해당 요청에 맞는 서블릿 객체의 생성 여부가 결정됨

이 서블릿 컨테이너 중 대표적으로 Apache Tomcat이 있다.

@WebServlet(urlPatterns="/first-request-servlet")
public class FirstHttpRequestServlet extends HttpServlet {
	
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		System.out.println("request" + req);
		System.out.println("response" + resp);
	}
}

pom.xml

Maven의 빌드 정보를 담고 있는 파일. POM(Project Object Model)을 설정하는 부분으로, 프로젝트 내 빌드 옵션을 설정하는 부분이다. 다른 프로젝트에서도 복붙이 가능하여, 협업할 때 버전 통일할 때 편하게 할 수 있다.

데이터베이스와 연결을 해야할 때 dependency로 추가하는 부분이 있었다.

<dependency>
	<groupId>mysql</groupId>
    	<artifactId>mysql-connector-java</artifactId>
    	<version>8.0.13</version>
</dependency>

web.xml

웹 애플리케이션의 서비스 처리에 관한 내용이 정의된 환경 설정 파일.

웹 서버는 web.xml에 정의된 내용대로 웹 애플리케이션을 실행하기 위한 설정을 수행함

서버가 기동될 때 이 파일을 읽는다. node.js 환경에서 package.json과 같은 역할을 한다.

모든 Web Application은 반드시 하나의 web.xml 파일을 가져야하고, 위치는 WEB-INF폴더 하위에 있다.

web.xml파일의 설정들은 Web Application 시작 시 메모리에 로딩된다.

Application에 대한 요청이 수신되면 web.xml을 사용하여 요청의 url을 해당 요청을 처리해야하는 코드에 매핑한다.

<web-app>
	<!-- alias -->
    <servlet>
    	<servlet-name>title</servlet-name>
    	<servlet-class>servlets.Servlet</servlet-class>
    </servlet>
    
    <!-- mapping -->
    <servlet-mapping>
    	<servlet-name>title</servlet-name>
    	<url-pattern>title</url-pattern>
    </servlet-mapping>
</web-app>

WebServlet

@WebServlet(urlPatterns="/first-request-servlet")
public class FirstHttpRequestServlet extends HttpServlet {
	
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		System.out.println("request" + request);
		System.out.println("response" + response);
		
		// 요청메세지 안에 뭐가 담겼는지 확인하기 위한 메서드가 있음
		request.getContextPath();
		request.getRequestURI();
		
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		
		// Header 메시지 담긴 정보 추출
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<body>");
		out.println("<head>");
		out.println("<title>Request Information Example</title>");
		out.println("</head>");
		
		out.println("<body>");
		
		out.println("<h3>요청 메시지에 담긴 정보 확인</h3>");
		
		// Header 메시지에 담긴 정보 추출
		out.println("Context Path : " + request.getContextPath() + "<br/>");
		out.println("Request URL : " + request.getRequestURL() + "<br/>");
		out.println("Request URI : " + request.getRequestURI() + "<br/>");
		out.println("Server Port : " + request.getServerPort() + "<br/>");
		out.println("Request Protocol : " + request.getProtocol() + "<br/>");
		out.println("Request METHOD: " + request.getMethod() + "<br/>");
		out.println("Query String : " + request.getQueryString() + "<br/>");// http://localhost:8080/step02servletsyntax/first-request-servlet?name=jerry&age=15
		out.println("Parameter(name) : " + request.getParameter("name") + "<br/>");
		out.println("Parameter(age) : " + request.getParameter("age") + "<br/>");
		
		out.println("</body>");
        out.println("</html>");
        
		out.close();
	}
}

요청에 담긴 정보들을 서버가 알 수 있게 꺼내야함

HttpServlet 객체가 이 정보들을 가지고 있고, request와 response 정보를 받을 수 있다.

/*
 * 2. Annotation 기반 맵핑
 * 
 * XML을 통한 관련 방식의 번거로움
 * 추상화되고 직관적인 Annotation 표기법으로 맵핑 처리를 간소화
 * 
 *  * @WebServlet
 * https://github.com/javaee/servlet-spec/blob/master/src/main/java/javax/servlet/annotation/WebServlet.java
 */
@WebServlet(name = "MySecondServlet", urlPatterns = "/servlets/secondservlet")
/*
 * web.xml의 아래 설정과 동일함
 * <servlet-name>SecondServlet </servlet-name>
 * <url-pattern>/servlets/secondservlet</url-pattern>
 */
public class SecondeServlet extends HttpServlet {
	// get요청을 통해 hello second world가 출력되도록 테스트
	// 서버 응답시 HTTP Header에 인코딩은 UTF-8로 처리될 수 있도록 헤더 코드도 추가
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html");
		resp.setCharacterEncoding("UTF-8");
		
		PrintWriter out = resp.getWriter();
		out.println("<html>");
        out.println("<head>");
        out.println("<title>Hello Second World!</title>");
        out.println("</head>");
        out.println("<body>");
        out.println("<h1>Hello Second World!</h1>");
        out.println("</body>");
        out.println("</html>");
	}
}

Url-patterns

Maven Repository에서 필요한 모듈을 가져와서 써야하는 경우가 생겼다.

자바에서는 프로젝트에 어떻게 넣어줘야할까

Build Path

자바 프로젝트를 빌드하는데 필요한 모든 리소스 파일들이 모여있는 경로이다.

이클립스에서는 다음과 같은 경로에서 찾을 수 있다.

대부분의 편집기에서는 자바 프로젝트를 빌드하고 컴파일하기 위해 build path를 사용한다고 한다.

소스코드는 .java

실행파일은 .class

Build Path는 의존성을 찾는 빌드과정에서 사용된다.

Class Path

클래스 패스는 JVM이 사용하는 환경 변수로, JVM이 프로그램 실행시 클래스를 찾고 로딩하는데 사용된다. JVM이 클래스 파일을 찾고 로드해야하는 디렉토리, jar 파일 및 zip 파일 목록을 지정해야한다.

Class Path는 소스 코드가 실행되는 런타임에 사용된다. (빌드시에도 사용된다)

 Add External JARs 를 통해서 .jar 파일을 주입해주었다. 
 

Logging

로깅이란 프로그램 실행 중에 발생하는 오류에 대해 디버깅하거나 운영 중인 프로그램을 모니터링 하기 위해 로그를 기록하는 것. 콘솔에 출력하거나 파일 등에 전달하여 저장하는 행위

SLF4J

풀 네임은 Simple Logging Facade for Java (SLF4J) 라는 이름에서 알 수 있듯이 로깅에 대한 추상화(인터페이스) 역할을 하는 라이브러리이다. 이름에서부터 Facade가 들어가있다. 즉, Facade를 통해서 클라이언트 코드에서는 실제 구현을 모르고 로깅 프레임워크를 사용할 수 있다. 

Facade Pattern

Facade는 건축에서 건물 외관이라는 뜻으로 사용되는 용어이다. 이와같이 내부적으로 복잡한 코드를 가져주는 상위 수준의 인터페이스 역할을 하는 객체가 있는 패턴이다. 

이와 같이 코드 상에서도 복잡한 서브시스템을 외부에서 감싸고 있는 느낌이다. 계좌를 분석해주는 기능을 구현할 때, 바로 기능을 구현하지 않고, anylze()라는 메소드를 통해서 실행을 시켰었다. 이때 analyze가 전면에서 인터페이스 역할을 해주었다. 실제 analyze() 내부 로직에서 파서가 실행되고 유효성 검사 등을 하는 로직이 돌아가게 되었다. 

이 패턴을 통해 복잡성을 줄이고 의존성을 낮출 수 있다. 

SLF4J에서 사용되는 Facade Pattern

SLF4J에서 facade역할을 하는 인터페이스는 무엇일까? 바로 logger 객체이다. 그래서 구현부에 상관없이 logging 처리를 할 수 있다. 실제로 SLF4J는 logback 등 패키지 안에 다른 모듈을 포함하고 있다.

Client 클래스는 Subsystem인 하위 객체에 직접 접근하지 않고 Facade 객체에만 접근한다. Client는 Facade 인터페이스에만 의존하고 복잡한 하위 시스템과는 독립적이다.

위 시퀀스 다이어그램을 통해서 런타임시 Client 와 Facade의 상호작용을 볼 수 있다.

SLF4J 동작과정

- SLF4J API를 사용하여 로깅 코드를 작성한다

- 배포할 때, 바인딩 된 로깅 프레임워크가 실제 로깅 코드를 수행한다.

참고자료

하나의 파일은 하나의 모듈임

이 모듈을 export해서 써야하므로 export를 해주는데

export만 하면 해당 모듈안에 복수의 개체가 있을 때

여러개를 export 할 수 있는 경우에만 export 사용

해당 모듈의 전체를 export 할때

export default를 사용한다.

if-else 문제점

- 변경, 확장이 될 수록 코드가 복잡해진다.

- 코드를 수정하거나 수정할 위치를 찾는데 점점 오래걸린다.

- 실수로 추가하지않고 누락하는 부분이 생길 가능성이 있다.

즉, 유지보수가 점점 어려워진다.

OCP 개방 폐쇄 원칙

소프트웨어의 구성 요소(컴포넌트, 클래스, 모듈, 함수)는

확장에 대해서는 개방되어야하지만, 변경에 대해서는 폐쇄되어야 한다.

기존의 코드를 변경하지 않으면서 기능을 추가할 수 있도록 설계가 되어야한다

점점 기능을 확장해 나갈 때, 기존의 코드를 계속 변경해야한다면 기능의 추가가 점점 힘들어지기 때문이다.  

기능이 추가, 변경되어도 기존 코드는 변경되지 않는다. (확장이 쉽다)

OCP 적용 방법

1. 상속을 이용한 방법 - 템플릿 메소드 패턴

깨지기 쉬운 상위 클래스 문제

2. 컴포지션을 이용한 방법 - 전략 패턴

상속보다는 컴포지션을 추천

1) 변경(확장)될 것과 변하지 않을 것을 구분 

변경되는 부분을 인터페이스로 추출

2) 이 두 모듈이 만나는 지점에 인터페이스 정의

인터페이스에 의존하도록 작성(기능 변경을 위해 코드를 수정해야하기 때문에)

3) 구현에 의존하기보다 정의한 인터페이스에 의존하도록 코드를 작성

자기가 직접 new 생성자로 인스턴스를 생성하지 않고, 외부에서 인스턴스를 받는 것을 의존성 주입(Dependency Injection, DI)이라고 한다.

Dependency Injection 의존성 주입
소프트웨어 개발에서 의존성 주입은 객체가 의존하는 다른 객체를 받는 것이다. 
의존성 주입의 의도는 객체의 생성과 사용의 관심을 분리하는 것이다. → 가독성과 코드 재사용을 높여준다.

소프트웨어 개발에서 의존성 주입은 객체가 의존하는 다른 객체를 받는 것이다. 
의존성 주입의 의도는 객체의 생성과 사용의 관심을 분리하는 것이다. → 가독성과 코드 재사용을 높여준다.

의존성 주입의 적용 유형
- 생성자 주입 : 필요한 의존성을 모두 포함하는 클래스의 생성자를 만들고, 그 생성자를 통해 의존성 주입
- setter를 통한 주입 : 의존성을 입력받는 setter 메소드를 만들고 이를 통해 의존성 주입
- 인터페이스를 통한 주입 : 의존성을 주입하는 함수를 포함한 인터페이스를 작성하고 이 인터페이스를 구현하도록 함으로써 실행 시에 의존성 주입

위키백과 의존성 주입

OCP를 준수하기 위한 디자인 패턴

전략패턴

전략패턴이란 기존의 코드 변경없이 행위를 자유롭게 바꿀 수 있게 해주는 OCP를 준수한 디자인 패턴 

디자인 패턴의 꽃

전략을 쉽게 바꿀 수 있도록 해주는 디자인 패턴

행위를 클래스로 캡슐화해 동적으로 행위를 자유롭게 바꿀 수 있게 해주는 패턴

새로운 기능의 추가가 기존의 코드에 영향을 미치지 못하게 하므로 OCP를 만족

참고자료

Selector 

atom의 output을 변형시키는 함수로, atom에 의존하는 동적인 데이터를 만들 수 있게 해준다.

selecter는 get 함수와 set 함수를 사용할 수 있다. selector를 이용해 state를 가져와서 output을 수정할 수 있다. 

get

get: ({ get }) => {
	// 가져올 내용
	// get(가져올 값)
}

중괄호를 열고 쓰면 get이라는 함수를 다시 불러서 state를 가져올 수 있다. 그러면 어떤 값을 return 하던지 간에 그 값은 selector의 값이 된다. (atom을 가져와서 selector로 변경할 수 있다는 뜻)

get을 사용해 atom과 다른 selector에 접근 가능하다. 종속 관계가 생기므로 참조한 값이 업데이트 되면 해당 함수도 다시 실행된다.

set

set: ({ set }, newValue) => {
	// 변경내용
	// set(가져온 값, 변경(return)시킬 값)
}

set 함수는 변경될 새로운 값을 두 번째 인자로  받을 수 있다. 

예제

atom으로 minute를 생성하고, selector로 atom의 값을 가져와서 변경시키는 예제이다. '분'을 입력하면 '시간'으로 바꿔주고, '시간'을 입력하면 '분'으로 바꿔준다.

// atom.tsx

import { atom, selector } from 'recoil';

export const minuteState = atom({
  key: 'minute',
  default: 0,
});

export const hourSelector = selector<number>({
  key: 'hours',
  get: ({ get }) => {
    const minutes = get(minuteState);
    return minutes / 60;
  },
  set: ({ set }, newValue) => {
    const minute = Number(newValue) * 60;
    set(minuteState, minute);
  },
});

// App.tsx

import React from 'react';
import { useRecoilState, useRecoilValue, useRecoilValueLoadable } from 'recoil';
import { hourSelector, minuteState } from './atom';

function App() {
  const [minutes, setMinutes] = useRecoilState(minuteState);
  const [hours, setHours] = useRecoilState(hourSelector);
  const onMinutesChange = (event: React.FormEvent<HTMLInputElement>) => {
    setMinutes(+event.currentTarget.value);
  };
  const onHoursChange = (event: React.FormEvent<HTMLInputElement>) => {
    setHours(+event.currentTarget.value);
  };

  return (
    <div>
      <input
        value={minutes}
        onChange={onMinutesChange}
        type="number"
        placeholder="Minutes"
      />
      <input
        value={hours}
        onChange={onHoursChange}
        type="number"
        placeholder="Hours"
      />
    </div>
  );
}

export default App;

추가로 알게된 부분

string에 연산자 +를 붙이면 number로 형 변환이 가능하다.