Socrative 풀이 - Web Architecture

Verba volant, scripta manent·2021년 2월 6일
0

1 . 웹 아키텍쳐 전반을 간단히 설명하고자 합니다. 다음 문장에서 빈 칸에 들어갈 키워드를 알맞게
나열하면?
정답을 쉼표(,)로 구분하여 적어주세요! (정답1,정답2,정답3)

- 클라이언트는 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어를
뜻한다. 대표적인 예로 A 가 있는데, A 는 HTML, CSS, JavaSc ipt 등으로 작성된 코드를 내
부 엔진으로 해독하여 사용자가 쉽게 이해할 수 있는 형태의 컨텐츠로 보여주는 역할을 한다.
- 서버는 클라이언트가 어떤 자원을 요청하면 해당 요청을 적절하게 처리하는 역할을 한다. 클
라이언트는 서버의 자원을 어떻게 사용할 수 있는지 명시해 둔 인터페이스 B 에 따라 요청을
전송한다.
- 이렇게 클라이언트와 서버가 서로 요청과 응답을 주고받을 수 있는 것은 C 라는 통신 규약 덕
분이다.

풀이)

따라서 답은 브라우저,API,HTTP 이다.

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

A. 서버: 웹 브라우저를 통해 원하는 정보를 요청한다.
B. 클라이언트: 유저와의 전반적인 상호작용을 담당한다.
C. 서버: 클라이언트의 요청에 따라 적절한 응답을 되돌려 준다.
D. 클라이언트: 서버로부터 받은 응답에 따라 다른 화면을 표시한다.

풀이)
A. 서버: 웹 브라우저를 통해 원하는 정보를 요청한다.
-> X, 클라이언트에 대한 설명이다.
B. 클라이언트: 유저와의 전반적인 상호작용을 담당한다.
-> O
C. 서버: 클라이언트의 요청에 따라 적절한 응답을 되돌려 준다.
-> O
D. 클라이언트: 서버로부터 받은 응답에 따라 다른 화면을 표시한다.
-> O

따라서 답은 A이다.

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

A. AJAX 도입 전에는 XMLHttpRequest를 이용하여 정적으로 페이지 랜더링을 했다.
B. AJAX를 통해 클라이언트는 필요한 데이터만 서버를 통해 비동기적으로 받고, 페이지의 일부만 동적으로 업데이트 할 수 있다.
C. 비동기적인 웹앱 제작을 위한 웹 개발 기법이다.
D. Fetch API를 통해 AJAX 요청을 보낼 수 있다.

풀이)
A. AJAX 도입 전에는 XMLHttpRequest를 이용하여 정적으로 페이지 랜더링을 했다.
-> X, 동적으로 페이지 랜더링을 했다.
B. AJAX를 통해 클라이언트는 필요한 데이터만 서버를 통해 비동기적으로 받고, 페이지의 일부만 동적으로 업데이트 할 수 있다.
-> O, AJAX에 대한 설명은 아래에서 한꺼번에 하겠다.
C. 비동기적인 웹앱 제작을 위한 웹 개발 기법이다.
-> O
D. Fetch API를 통해 AJAX 요청을 보낼 수 있다.
-> O

AJAX란?
AJAX는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법이다.
비동기적인 웹 애플리케이션을 만들기 위해 html, css, js, dom, fetch(혹은 XMLHttpRequest)등을 함께 사용하는 새로운 개발 기법이라고도 할 수 있다.
AJAX를 이용하면 웹 페이지 전체를 로딩하지 않고도, 백그라운드 영역에서 서버와 통신함으로써, 필요한 부분만을 갱신할 수 있다.

따라서 답은 A이다.

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

A. 클라이언트 측에서, 서버에 자원을 요청하고 받아 오기 위해 사용하는 API다.
B. 메소드 체이닝 방식을 통해 사용할 수 있어 가독성이 좋다.
C. 웹 API로서 별도의 라이브러리 설치 없이 사용 가능하다.

풀이)
A. 클라이언트 측에서, 서버에 자원을 요청하고 받아 오기 위해 사용하는 API다.
-> O, 모두 서버에 요청, 응답을 받아오기 위해 사용된다는 공통점이 있다.
B. 메소드 체이닝 방식을 통해 사용할 수 있어 가독성이 좋다.
-> X, fetch, jQuery ajax 에만 해당되는 사항이다.
C. 웹 API로서 별도의 라이브러리 설치 없이 사용 가능하다.
-> X, jQuery ajax 는 라이브러리를 설치해야 사용 가능하다.

fetch : 자바스크립트에서 서버로 네트워크 요청(request)을 보내고 응답(response)을 받을 수 있도록 해주는 메서드
XMLHttpRequest : 웹 브라우저와 웹 서버 간에 메소드가 데이터를 전송하는 객체 폼의 API이다.
jQuery ajax : jQuery(자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리)를 이용해 ajax를 손쉽게 이용하는 것.

따라서 답은 A이다.

  1. fetch API를 사용하여 http://codestates.com/ 에 get 요청을 보내고, 받은 response의 body를 json 형태로 바꾸어 콘솔에 출력하려 합니다. 빈 칸에 들어갈 내용을 순서대로 채워 주세요.
    정답을 쉼표(,)로 구분하여 적어주세요! (정답1,정답2,정답3)

풀이)
fetch 함수를 이용하여 http://codestates.com/ 를 받아온다.
응답을 JSON 형태로 변환시켜서 다음 Promise로 전달한다.(여기서는 매개변수가 res였으므로 res.json()이 된다.)
then을 사용하여 콘솔에 data를 출력한다.
에러가 났을 경우 콘솔에 에러 출력을 위해 catch를 쓴다.

따라서 답은 res.json(),then,catch 이다.

profile
말은 사라지지만 기록은 남는다

0개의 댓글