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