Web Architecture

1. 웹 아키텍처 전반을 간단히 설명하고자 합니다. 다음 문장에서 빈칸에 들어갈 키워드를 알맞게 나열하면?

 

- 클라이언트는 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어를 뜻한다. 대표적인 예로 [A]가 있는데, [A]는 HTML, CSS, JavaScript 등으로 작성된 코드를 내부 엔진으로 해독하여 사용자가 쉽게 이해할 수 있는 형태의 컨텐츠로 보여주는 역할을 한다.

 

- 서버는 클라이언트가 어떤 자원을 요청하면 해당 요청을 적절하게 처리하는 역할을 한다. 클라이언트는 서버의 자원은 어떻게 사용할 수 있는지 명시해 둔 인터페이스 [B]에 따라 요청을 전송한다.

 

- 이렇게 클라이언트와 서버가 서로 요청과 응답을 주고 받을 수

있는 것은 [C]라는 통신 규약 덕분이다.

Browser, API, HTTP

 

2. 클라이언트-서버 모델에서, 클라이언트와 서버의 역할에 대한 다음의 설명 중 틀린 것은?

① 서버: 웹 브라우저를 통해 원하는 정보를 요청한다.

② 클라이언트: 유저와의 전반적인 상호작용을 담당한다.

③ 서버: 클라이언트의 요청에 따라 적절한 응답을 되돌려 준다.

④ 클라이언트: 서버로부터 받은 응답에 따라 다른 화면을 표시한다.

① 서버: 웹 브라우저를 통해 원하는 정보를 요청한다.

 

3. AJAX에 대한 설명 중 옳지 않은 것은?

① AJAX 도입 전에는 XMLHttpRequest를 이용하여 정적으로 페이지 렌더링을 했다.

② AJAX를 통해 클라이언트는 필요한 데이터만 서버를 통해 비동기적으로 받고, 페이지의 일부만 동적으로 업데이트 할 수 있다.

③ 비동기적인 웹앱 제작을 위한 웹 제작 기법이다.

④ Fetch API를 통해 AJAX 요청을 보낼 수 있다.

① AJAX 도입 전에는 XMLHttpRequest를 이용하여 정적으로 페이지 렌더링을 했다.

 

4. 다음 중 fetch, XMLHttpRequest, jQuery, ajax 메소드의 공통점은 무엇일까요?

① 클라이언트 측에서, 서버에 자원을 요청하고 받아 오기 위해 사용하는 API다.

② 메소드 체이닝 방식을 통해 사용할 수 있어 가독성이 좋다.

③ 웹 API로서 별도의 라이브러리 설치 없이 사용 가능하다.

① 클라이언트 측에서, 서버에 자원을 요청하고 받아 오기 위해 사용하는 API다.

 

5. fetch API를 사용하여 http://hello.....com/world 에 get 요청을 보내고, 받은 response의 body를 json 형태로 바꾸어 콘솔에 출력하려 합니다. 빈 칸에 들어갈 내용을 순서대로 채워 주세요.

fetch('http://hello.....com/world')
.then(res => _____)
.____(data => {
  console.log(data)
 })
 .____(err => {
  console.err(err)
 })

res.json(), then, catch