[Web] 기술 면접 질문 대비

1. Http 통신 방식
2. Cookie와 Session의 차이
3. 디자인 패턴의 종류(MVC, MVVM)
4. Model, View, Controller의 차이
5. Forward와 Redirect의 차이
6. Vue.js 라이프사이클 함수
7. 동기와 비동기의 차이
8. Rest란? Restful이란?

 

 

 

 

1. HTTP 통신 방식

1-1. HTTP

- Hyper Text Transfer Protocol

- www 상에서 서버와 클라이언트가 정보(데이터)를 주고 받을 수 있는 프로토콜로, HTML문서를 주고 받는데 사용된다.

 

- TCP 방식 : client - server 중 한 곳이 연결을 끊을 때까지 연결을 유지함

- HTTP 방식 : client가 server에서 html을 다운받고 나면 연결을 끊어버림 (HTTP 통신의 특징 - 비연결(stateless))

 

특징

1) stateless

 클라이언트와 서버가 연결을 성공한 후, 클라이언트의 요청에 대해 서버가 응답을 하고 나면 연결을 끊어버리는 것을 말한다.

 

 장점 - 통신 간의 연결 상태 처리나 정보의 저장을 관리할 필요가 없어서 서버 디자인이 간단해진다.

 단점 - 연결을 끊어버리기 때문에 서버에서 클라이언트의 현재 상태를 알 수 없음. 로그인을 이미 했는데 연결을 끊었기 때문에 이후 작업에서 Client가 로그인을 했었는지 안했었는지 알 수 없음.

 => 이 문제를 위해 Cookie와 Session으로 클라이언트의 상태를 저장해서 연결은 끊어졌지만 사용자에게 마치 연결이 되어 있는 것처럼 서비스를 제공한다.

 

 

 2) Request, Response

 - Request(요청)

  웹 브라우저(Client)에서 웹 서버로 보내는 요청. 서버에게 데이터를 전송할 때 Request 객체에 담아 전달하게 된다.

 - Response(수신)

  웹 서버에서 웹 브라우저(Client)로의 응답. 클라이언트로부터 서버에게 요청이 일어나고 나면 서버는 브라우저에 전달할 데이터를 Response 객체를 통해 전달한다.

 

 

 

2. Cookie와 Session의 차이

 1번에서 언급한 HTTP 통신의 특징인 Stateless때문에 서버는 클라이언트의 상태를 알지 못한다. 따라서 서버는 클라이언트의 정보를 계속해서 확인해야 한다. 따라서 클라이언트의 정보를 유지하기 위해 매번 연결을 해야 하는 번거로움이 있다. 이를 해결하기 위해 Cookie와 Session으로 클라이언트의 정보를 저장한다.

 

 차이점

- 쿠키와 세션의 역할은 비슷하다. 가장 큰 차이점은 사용자의 정보가 저장되는 위치이다.

- 보안 면에서는 세션이 더 우수하고, 세션의 경우 서버의 처리가 필요하기 때문에 요청 속도는 쿠키가 더 빠르다.

 

 2-1. Cookie

 - 사용자의 디스크나 웹 브라우저 메모리에 저장된다.

 - 클라이언트 측에 "key와 value"형태의 text 타입으로 데이터가 저장된다. 데이터의 크기에 제한이 있다.

 

 - 프로세스

1. 브라우저에서 웹 페이지 접속
2. 웹 서버에서 쿠키를 생성
3. 생성한 쿠키에 데이터를 담아 요청에 응답할 때 클라이언트에게 함께 전송
4. 클라이언트가 보관하다가 서버에 재요청할 때 쿠키를 함께 전송
5. 클라이언트와 서버가 로그인 정보가 유지되어있는 것처럼 사용

- 저장 기간

 쿠키 유효기간 설정

setMaxAge(int sec); //쿠키의 유효기간을 설정한다.

//sec의 값에 따라 쿠키의 유효기간이 정해진다.
음수(-1)	: 메모리에만 저장. 브라우저가 종료되면 사라진다.(일시적인 변수로 저장)
0		: 기존에 발행한 쿠키를 삭제한다.
양수		: 지정한 초만큼 쿠키를 유지한다.
    	   단, 지정한 시간 전에 브라우저 종료 시 파일 형태로 저장됨.

 

- 쿠키 사용법(Java)

//쿠키 생성
Cookie cookie = new Cookie(name, value); //String, String
cookie.setMaxAge(1000000);

//쿠키 발행
response.addCookie(cookie);

 

 

2-2. Session

- 웹 서비스를 위한 사용자의 정보를 서버측에 저장한다.

- 서버 측에 객체 타입으로 저장된다. 서버가 수용 가능한 만큼 저장할 수 있다.

 

- 프로세스

1. 클라이언트가 서버에 접속 시 세션 ID를 발급
2. 클라이언트는 쿠키(쿠키이름 : JSESSIONID)를 이용해 세션 ID를 저장해서 가지고 있음
3. 클라이언트가 서버에 재 요청 시 쿠키(JSESSIONID)를 이용하여 세션ID 값을 서버에 전달

- 저장 기간

 session.invalidate() 혹은 웹 브라우저가 종료될 때까지 데이터가 유지된다.

 

- 세션 사용법(Java)

//세션 생성
HttpSession session = request.getSession();

//세션에 데이터 저장
session.setAttribute("name", value);

 

 

 

3. 디자인 패턴의 종류(MVC / MVVM)

디자인 패턴이란?

어떤 것을 개발할 때 발생했던 문제점들을 정리해서 좀 더 쉽고 편리하게 개발할 수 있도록 만든 특정한 방법들을 의미한다. 디자인 패턴을 사용하면 유지보수가 편하다.

 

3-1. MVC Pattern

• Model-View-Controller
• 대표적인 디자인 패턴으로 개발할 때 구성요소를 Model, View, Controller로 역할을 나누어 개발을 하는 것을 의미한다.
• 사용자가 Controller를 조작하면 Controller는 Model을 통해 데이터를 가져오고 해당 데이터를 View에게 뿌려준다.

 동작 순서

1. 사용자가 웹사이트에 접속한다. (URL을 통한 웹서버 요청을 보냄)
2. 웹 서버의 요청을 받은 컨테이너가 URL과 매핑된 Controller를 찾는다.
3. Controller는 사용자가 요청한 웹 페이지를 서비스 하기 위해서 Model을 호출한다.
4. Model은 DB나 파일 등에 접근하거나 필요한 작업을 수행 후 결과를 리턴한다.
5. Controller는 Model이 리턴한 결과를 View에 반영한다.
6. 컨테이너와 웹서버를 거쳐 데이터가 반영된 View가 사용자에게 보여진다.

 MVC 패턴을 사용하는 프레임워크/라이브러리

• Angular JS
• DJango
• React 등...

 

 

3-2. MVVM Pattern

• Model - View - View Model
• Model : 어플리케이션에 사용되는 데이터와 데이터를 처리
• View : 사용자에게 보여지는 UI
• View Model : View를 표현하기 위해 만든 View를 위한 Model. View를 나타내기 위한 데이터를 처리

 동작 순서

1. 사용자의 Action이 VIew를 통해 들어온다.
2. Command 패턴을 이용하여 View Model에 Action을 전달한다.
3. View Model이 Model에서 데이터를 요청하고 Model은 View Model에서 요청받은 데이터를 전달한다.
4. View Model은 응답받은 데이터를 가공하고 저장한다.
5. View는 VIew Model과의 Data Binding을 이용해 화면을 갱신한다.

장점

• View와 Model 사이의 의존성이 없다.
• View와 View Model 사이의 의존성이 없다.
• 각 부분들이 독립적이므로 개별적 개발이 가능하다.

단점

• 어렵다.

 

 

 

 

 

4. Model, View, Controller의 차이

4-1. Model

 비즈니스 영역의 로직을 처리한다.

 

규칙

1. 사용자가 원하는 모든 데이터를 가지고 있는다
2. 사용자가 원하는 모든 데이터를 가지고 있는다

 

4-2. View

 데이터를 화면에 보여주는 부분. 사용자가 보게 될 결과화면

 

규칙

1. Model이 가지고 있는 정보를 따로 저장해서는 안된다
2. Model이나 Controller와 같은 다른 구성요소들을 알아서는 안된다

 

4-3. Controller

View와 Controller를 조작. 사용자의 입력 처리와 흐름 제어를 담당한다.

 

규칙

1. Model과 View에 대해서 알고 있어야 한다
2. Model이나 View의 변경을 모니터링 해야 한다

 

 

 

 

5. Forward와 Redirect의 차이

JSP 환경에서 현재 작업중인 페이지에서 다른 페이지로 이동하는 두 가지 방식의 페이지 전환 기능이다.

내부적으로 가장 큰 특징은 객체의 재사용 여부로, Forward 방식은 요청객체를 재사용하고, Redirect는 재사용하지 않는다.

 

5-1. Forward

• 말 그대로 forward(건네주기)를 한다. 다음 이동할 URL로 요청정보를 그대로 전달한다.
• URL이 변하지 않는다.
• 현재 실행중인 페이지와 forward에 의해 호출된 페이지는 request와 response 객체를 공유한다.

RequestDispatcher requestDispatcher = request.getRequestDispatcher("/newPage");
requestDispatcher.forward(request, response); //객체를 그대로 전달

 

 

5-2. Redirect

• URL이 새로운 URL로 변한다.
• redirect를 통해 호출된 새로운 페이지에서는 request와 response 객체가 새롭게 생성된다.ㅗ
• 서블릿이나 JSP는 redirect를 하기 위해 HttpServletResponse 클래스의 sendRedirect() 메서드를 사용한다.

response.sendRedirect("newPage.jsp");

 

 

 

 

6. Vue.js 라이프사이클 함수

Vue.js의 라이프사이클은 크게 4가지로 구분된다. 

1. Creation
2. Mounting
3. Updating
4. Destruction

 

 라이프사이클이란 Vue의 인스턴스가 생성되어 소멸되기까지의 거치는 과정을 의미한다. 그리고 그 주기들마다 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(Life Cycle Hook)이라고 한다. 라이프 사이클 훅을 이용하면 인스턴스의 특정 시점에 원하는 로직을 구현할 수 있다.

 많이 사용하는 것은 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 총 8개이다.

 

 

 

 

7. 동기와 비동기의 차이

7-1. 동기

ex - 카페에서 주문을 받을 때 하나하나 차근차근 주문을 받음. 한 사람 주문-제작이 모두 이루어지고 나서 다음 사람의 주문을 받음.

 

 

7-2. 비동기

ex - 카페에서 주문을 받을 때 주문과 제작을 동시에 함.

- 브라우저에서 서버에 요청을 보냈는데 보내고 받는 동안 시간이 걸린다. 이 때 동기적으로 보낸다면 요청을 받기전까지 서버가 멈춰있게 되고 이러한 불편함을 해소하기 위해서 javascript에서는 비동기방식을 지원한다.

 

 

문제점

 데이터를 얻어오는 함수에서 Ajax로 서버에 요청하고 응답을 받는 경우 => undefined가 뜬다.

 Ajax 요청을 보내고 데이터를 받기 전에 다른 작업을 실행해버리기 때문에 데이터가 아직 안 온 상태로 진행되므로 undefined가 뜨게 되는 것이다.

 

해결법

1. 콜백함수를 사용(But, 콜백지옥이라는 상황이 발생할 수 있음.)

function1(() => {
     function2(() => {
     	function3(() => {
     		function4(() => {
     			//...
     		})
     	})
     })
})

 

2. 프로미스 객체

• 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자.
• 비동기 연산이 종료된 이후의 결과값이나 실패이유를 처리하기 위한 처리기를 연결할 수 있도록 한다.
• 대기 - 이행하거나 거부되지 않은 초기 상태
• 이행 - 연산 성공적 완료
• 거부 - 연산 실패

const axiosObject = axios.get('주소')
axosObject // Promise {[[PromiseStatus]]: "pending", ...} -- Promise를 반납함.

 

3. async/await

 가장 최신의 javascript 비동기 처리 패턴

async function 함수명() {
     await axios.get(" ~~~ "); //비동기처리의 응답을 기다려준다.
}

 하지만 이 방법도 완벽한 해결책은 아니기 때문에 개발자의 스타일에 따라서 익숙한 것을 골라서 사용한다. try-catch를 이용하더라도 await를 여러군데서 사용하면 어디서 오류가 났는지 찼기 힘들기 때문에 결국 try-catch를 여러 번 반복하다보면 위와 같은 현상이 발생할 수 있기 때문이다.

 

 

 

 

 

8. Rest란? Restful이란?