Folders and files Name Name Last commit message
Last commit date
parent directory
View all files
이번 퀘스트에서는 서버와 클라이언트의 연동, 그리고 웹 API의 설계 방법론 중 하나인 REST에 대해 알아보겠습니다.
expressJS, fastify
AJAX, XMLHttpRequest, fetch()
REST, CRUD
CORS
비동기 프로그래밍이란 무엇인가요?
콜백을 통해 비동기적 작업을 할 때의 불편한 점은 무엇인가요? 콜백지옥이란 무엇인가요?
자바스크립트의 Promise는 어떤 객체이고 어떤 일을 하나요?
자바스크립트의 async와 await 키워드는 어떤 역할을 하며 그 정체는 무엇일까요?
브라우저 내 스크립트에서 외부 리소스를 가져오려면 어떻게 해야 할까요?
브라우저의 XMLHttpRequest 객체는 무엇이고 어떻게 동작하나요?
fetch API는 무엇이고 어떻게 동작하나요?
REST는 무엇인가요?
REST API는 어떤 목적을 달성하기 위해 나왔고 어떤 장점을 가지고 있나요?
RESTful한 API 설계의 단점은 무엇인가요?
CORS란 무엇인가요? 이러한 기능이 왜 필요할까요? CORS는 어떻게 구현될까요?
이번 퀘스트는 Midterm에 해당하는 과제입니다. 분량이 제법 많으니 한 번 기능별로 세부 일정을 정해 보고, 과제 완수 후에 그 일정이 얼마나 지켜졌는지 스스로 한 번 돌아보세요.
이번 퀘스트부터는 skeleton을 제공하지 않습니다!
Quest 05에서 만든 메모장 시스템을 서버와 연동하는 어플리케이션으로 만들어 보겠습니다.
클라이언트는 fetch API를 통해 서버와 통신합니다.
서버는 8000번 포트에 REST API를 엔드포인트로 제공하여, 클라이언트의 요청에 응답합니다.
클라이언트로부터 온 새 파일 저장, 삭제, 다른 이름으로 저장 등의 요청을 받아 서버의 로컬 파일시스템을 통해 저장되어야 합니다.
API 서버 외에, 클라이언트를 띄우기 위한 서버가 3000번 포트로 따로 떠서 API 서버와 서로 통신할 수 있어야 합니다.
Express나 Fastify 등의 프레임워크를 사용해도 무방합니다.
클라이언트 프로젝트와 서버 프로젝트 모두 npm i만으로 디펜던시를 설치하고 바로 실행될 수 있게 제출되어야 합니다.
이번 퀘스트부터는 앞의 퀘스트의 결과물에 의존적인 경우가 많습니다. 제출 폴더를 직접 만들어 제출해 보세요!
fetch API는 구현할 수 없지만 XMLHttpRequest로는 구현할 수 있는 기능이 있을까요?REST 이전에는 HTTP API에 어떤 패러다임들이 있었을까요? REST의 대안으로는 어떤 것들이 제시되고 있을까요?
You can’t perform that action at this time.