작성자는 부스트코스의 웹 프로그래밍(풀스택)강의를 들으며 기억해야할 것 또는 잘 이해되지 않는 부분을 정리하였습니다.

1. Web개발의 이해 - FE/BE

(7) WAS

DBMS (DataBase Management System)

다수의 사용자가 데이터베이스 내의 데이터에 접근할 수 있도록 해주는 소프트웨어입니다.
DBMS에 대한 최초의 개념은 IBM에서 논문으로 나오게 됐었고,
최초의 구현은 Oracle에서 했습니다.
DBMS의 예로는 MySQL, MariaDB, Oracle, PostgreSQL 등이 있습니다.
DBMS의 등장으로 개발자들은 상대적으로 굉장히 쉽게 데이터를 관리할 수 있게 되었습니다.

WAS (Web Application Server)

WAS는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 웹 애플리케이션이 동작하도록 지원하는 목적을 가집니다.
WAS의 중요한 기본 기능은 첫 번째, 프로그램 실행 환경과 데이터베이스 접속 기능 제공, 두 번째, 여러 개의 트랜잭션 관리, 마지막으로 업무를 처리하는 비즈니스 로직 수행이 있습니다.
WAS는 또한 웹 서버의 기능도 기본적으로 제공합니다.
톰캣이라는 WAS만 하나 설치하고 이용가능한 이유는 톰캣이 가지고 있는 웹 서버가 충분한 기능을 하고 있기 때문입니다.

3. CSS - FE

(5) Element가 배치되는 방법(CSS layout)-1

엘리먼트가 배치되는 방식(position:static, relative, absolute)

엘리먼트 배치가 순서대로만 위아래 또는 좌우로 흐르면서 쌓이기만 하면, 다양한 배치를 하기 어렵습니다.
position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월해집니다.

1. position 속성으로 특별한 배치를 할 수 있습니다.
   position 속성은 기본적으로 static 속성입니다.
   static 속성은 그냥 순서대로 배치되는 것입니다.
   

2. absolute는 기준점에 따라서 특별한 위치에 위치합니다.
   top/left/right/bottom 으로 설정합니다.
   따라서 기준점이 있어야 하며,
   기준점을 상위 엘리먼트로 단계적으로 찾아가는데 static이 아닌 position이 기준점입니다.
   만약 상위 엘리먼트의 position이 static이라면 기준점으로 삼지 않습니다.
   position의 속성이 static이 아닐 때까지 위로 올라가서 기준점으로 삼는 것입니다.

3. relative는 원래 자신이 위치해야 할 곳을 기준으로 이동합니다.
   top/left/right/bottom으로 설정합니다.

4. fixed는 viewpoint(전체화면) 즉, Body태그를 기준하여 좌측, 맨 위를 기준으로 동작합니다.
   fixed는 광고처럼 마우스를 스크롤하여 화면을 움직여도 그 위치 그대로 같은 자리에 위치하는 속성입니다.

다음 그림은 수업에서 나온 위 설명의 예시입니다.

위 그림의 relative 클래스는 원래 자신이 위치해야할 static박스 왼쪽 아래 지점을 기준으로 10px만큼 떨어진 지점에 위치한 것이고,
absolute 클래스는 static속성이 아닌 상위 엘리먼트인 wrap 클래스를 기준(static(default)박스의 왼쪽 위 지점)으로부터 왼쪽으로 130px(left:130px), 위로 10px(top:10px)만큼 떨어져 있는 것입니다.
fixed 클래스는 전체화면 왼쪽, 위, 즉 static(default) 박스의 왼쪽 위를 기준으로 위로 250px(top:250px)만큼 떨어져 위치합니다.

엘리먼트가 배치되는 방식 (margin:10px)

margin으로 배치가 달라질 수 있습니다.
margin은 top/bottom/left/right 엘리먼트와 본인 간의 간격입니다.
즉, 기준이 본인이라는 뜻입니다.
따라서 그 간격만큼 내 위치가 달라집니다.

엘리먼트가 배치되는 방식 (float:left)

float 속성으로 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수 있습니다.
일반적인 배치에 따라서 배치된 상태에서 float는 벗어난 형태로 특별히 배치됩니다.
따라서 뒤에 block엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩되어 배치됩니다.
float의 속성은 이런 특이성 때문에 웹사이트의 전체 레이아웃 배치에서 유용하게 활용됩니다.

엘리먼트가 배치되는 방식 (box-model)

블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정합니다.
margin, padding, border, outline으로 생성되는 것입니다.
box-shadow 속성도 box-model에 포함지어 설명할 수 있습니다.
box-shadow는 border 밖에 테두리를 그릴 수 있는 속성입니다.

엘리먼트의 크기

block엘리먼트의 크기는 기본적으로는 부모의 크기만큼을 가집니다.
예를 들어, width:100%는 부모의 크기만큼을 다 갖는 것과 같습니다.

layout 구현방법은?

전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현합니다.
최근에는 css-grid나 flex 속성 등 layout을 위한 속성을 사용하기 시작했으며 브라우저 지원범위를 확인해서 사용하도록 합니다.
특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정합니다.
네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 합니다.
엘리먼트안의 텍스트의 간격과 다른 엘리먼트간의 간격은 padding과 margin 속성을 잘 활용해서 위치시킵니다.

5. Servlet - BE

(1) Servlet 이란?

쉽게말하자면 URL 요청을 처리하는 프로그램이라고 할 수 있습니다.
자바 웹 어플리케이션(WAS에 설치되어 동작하는 어플리케이션__HTML, CSS, 이미지, 자바로 작성된 클래스, 각종 설정 파일 등)의 구성요소 중 동적인 처리를 하는 프로그램의 역할입니다.
서블릿을 정의해보면 서블릿(servlet)은 WAS에 동작하는 JAVA 클래스입니다.
서블릿은 HttpServlet 클래스를 상속받아야 합니다.
서블릿과 JSP로부터 최상의 결과를 얻으려면, 웹 페이지를 개발할 때 이 두 가지(JSP, 서블릿)를 조화롭게 사용해야 합니다.
예를 들어, 웹 페이지를 구성하는 화면(HTML)은 JSP로 표현하고, 복잡한 프로그래밍은 서블릿으로 구현합니다.

이클립스는 runtime으로 설정된 WAS에 다음과 같은 규칙의 URL로 Servlet을 실행하도록 설정합니다.

http://localhost:8080/{프로젝트이름}/{URL Mapping값}

이렇게 설정하면 우리가 원하는 부분이 실행될 수 있습니다.

(2) Servlet 작성 방법-2

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExeption, IOException {
}

위 코드에서 (HttpServletRequest request, HttpServletResponse response)에 관하여 설명합니다.
클라이언트가 요청할 때 서버는 요청을 받아내는 객체와 응답을 하기 위한 객체 두 개를 자동으로 만들어 냅니다.
요청에 대한 정보들은 모두 HttpServletRequest 객체 안에 추상화시켜 가지고 있을 것이고,
응답에 대한 부분들은 모두 HttpServletResponse 객체 안에 가지고 있는 것입니다.
예를 들면 응답으로 뭔가 돌려줘야겠다 했을 때는 HttpServletResponse 객체에다가 내용들을 넣어주어야 하는 것입니다.

우리가 응답으로 1부터 10까지 출력해보고 싶다고 가정하면, 일단은 response라는 객체에다가 응답을 할 것이라고 알려줘야 합니다.
그런데 클라이언트(브라우저)가 응답을 받았을 때 누군지(이미지인지, 동영상인지 등) 알아야하기 때문에 setContentType()으로 알려주는 것입니다.
그렇게 해야 브라우저가 응답을 받았을 때 어떤 미디어인지 알아내고 그것에 맞게 해석하여 알맞게 보여줄 수 있는 것입니다.
응답 결과(괄호 안)에 타입을 넣어주는데, 이 타입은 text로 보낼 것이고, 이 text는 html입니다라는 부분을 작성해 줍니다.
이때 charset을 추가해주면 좋습니다.(charset=utf-8)

그 다음은 진짜 보낼 내용을 넣어주어야 합니다.
아무데나 넣는 것이 아니고 넣어줄 통로를 하나 얻어내야 하는데, 그것이 바로 response라는 객체에 있는 메소드인 getWriter()이라고 하는 메소드입니다.
getWriter()라고 하는 메소드를 수행하면 PrintWriter라는 객체를 return받을 수 있는 것입니다.
getWriter()를 수행해서 PrintWriter 객체를 하나 얻어오는 것입니다.
이때 변수명은 아무거나 지정하셔도 됩니다.

출력하는 메소드는 print()를 쓰시면 됩니다.
이때 println()을 쓸 지 또는 print()를 쓸 지 고민할 필요가 없습니다.
왜냐하면 html에서도 엔터를 아무리 쳐도 줄바꿈이 되지 않는 것을 볼 수 있습니다.
br 태그를 써야하기 때문인데요.
이것처럼 엔터를 쓰든 안쓰든 똑같은 것이기 때문에 아무거나 쓰셔도 상관이 없습니다.

제목을 써주고, 이제 1부터 10까지 출력하는 코드를 작성할 차례입니다.
Servlet은 자바랑 똑같습니다.
줄바꿈을 출력하고 싶다면 out.print()안에 br태그를 넣어줍니다.
코드의 마지막에는 out.close()를 써줍니다.

다음은 위 예제의 코드입니다.

run on server를 하면 다음과 같은 결과를 볼 수 있습니다.

위 그림의 ("/Ten") 은 URL Mapping값을 말합니다.

※ Tomcat 서버의 3.0이상 버전에서는 어노테이션이 실제로 실행시킬 Servlet이 누군지 찾아냅니다. 그러나 그 이전 버전에서는 반드시 Servlet이 하나 만들어지면 web.xml에 해당 서블릿을 반드시 등록해야 찾아서 실행시킬 수 있습니다.

(3) Servlet 생명주기

위 그림을 보며 정리하자면 WAS는 서블릿의 요청을 받으면 일단 서블릿이 메모리에 있는지 없는지를 확인하게 되고, 만약 메모리에 없다면 해달 서블릿 클래스를 메모리에 올리는 작업을 하게 됩니다.
이 메모리에 올리는 작업은 객체가 생성되는 작업이겠죠?
그랬기 때문에 처음 요청을 했을때 생성자의 메시지 부분이 출력됩니다.

그 다음 init()이라는 메소드가 호출됩니다.
그리고 service()라는 메소드가 또 호출이 되어서 실행이 됩니다.
두 번째 요청이 들어왔을때는 이 생성자라든가 init()이라는 메소드는 호출이 되지 않고 service()라는 메소드만 계속 실행이 됩니다.

여기서 기억해야 할 것은 요청이 들어왔을 때 응답해야 하는 모든 내용은 service()라는 메소드에 구현해야 한다는 것입니다.

또, WAS가 종료되거나 웹 어플리케이션이 새롭게 갱신될 경우에만 destroy()라는 메소드가 실행됩니다.

그런데 (2) Servlet 작성 방법-2에서 보면, service()라는 메소드는 사용되지 않고 doGet()이라는 메소드만 사용되었습니다.
doGet()이라는 메소드는 어떻게 실행됐을까요?

service()라는 메소드는 약간 특이하게 동작되는데, service()라는 메소드는 실제 HttpServlet의 service()라는 메소드가 이미 구현되어있는 상태입니다.
내가 만든 클래스가 service()라는 메소드를 갖고있지 않다면, 나의 부모 클래스의 service()가 실행됩니다.

우리가 위에서 코드를 만들때는 doGet()이라는 메소드만 오버라이드 했고, 이 service()라는 메소드는 오버라이드 하지 않았기 때문에 (WAS는 service()만 호출합니다) 나의 부모, 서블릿의 부모인 HttpServlet의 service()메소드가 실행되는 것입니다.

HttpServlet의 service()메소드는 템플릿 메소드 패턴으로 구현되어 있습니다.
클라이언트의 요청이 GET일 경우에는 자신이 가지고 있는 doGet(request, response)메소드를 호출, 클라이언트의 요청이 Post일 경우에는 자신이 가지고 있는 doPost(request, response)를 호출합니다.

위 이유 때문에 doGet()메소드만 오버라이드 했지만 알아서 doGet()이라는 메소드가 호출되면서 그 안에 구현해두었던 것을 응답 결과로 보내주는 것을 확인할 수 있습니다.