From 0dcc19b382a0b0518845a2ff68604dc86e9d1198 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Wed, 28 Apr 2021 02:13:59 +0900 Subject: [PATCH 01/25] Quest 07 --- Quest03/README.md | 1 + Quest04/skeleton/desktop.css | 1 + Quest04/skeleton/desktop.html | 18 ++++++++++++ Quest04/skeleton/desktop.js | 15 ++++++++++ Quest05/skeleton/index.html | 14 +++++++++ Quest05/skeleton/notepad.js | 3 ++ Quest05/skeleton/style.css | 3 ++ Quest07/README.md | 31 ++++++++++++++++++++ Quest07/skeleton/cjs-my-project/index.js | 1 + Quest07/skeleton/cjs-my-project/package.json | 3 ++ Quest07/skeleton/cjs-package/index.js | 15 ++++++++++ Quest07/skeleton/cjs-package/package.json | 3 ++ Quest07/skeleton/esm-my-project/index.mjs | 1 + Quest07/skeleton/esm-my-project/package.json | 3 ++ Quest07/skeleton/esm-package/index.mjs | 15 ++++++++++ Quest07/skeleton/esm-package/package.json | 3 ++ 16 files changed, 130 insertions(+) create mode 100644 Quest04/skeleton/desktop.css create mode 100644 Quest04/skeleton/desktop.html create mode 100644 Quest04/skeleton/desktop.js create mode 100644 Quest05/skeleton/index.html create mode 100644 Quest05/skeleton/notepad.js create mode 100644 Quest05/skeleton/style.css create mode 100644 Quest07/skeleton/cjs-my-project/index.js create mode 100644 Quest07/skeleton/cjs-my-project/package.json create mode 100644 Quest07/skeleton/cjs-package/index.js create mode 100644 Quest07/skeleton/cjs-package/package.json create mode 100644 Quest07/skeleton/esm-my-project/index.mjs create mode 100644 Quest07/skeleton/esm-my-project/package.json create mode 100644 Quest07/skeleton/esm-package/index.mjs create mode 100644 Quest07/skeleton/esm-package/package.json diff --git a/Quest03/README.md b/Quest03/README.md index d9fc7b8da..c0b5cbb9d 100644 --- a/Quest03/README.md +++ b/Quest03/README.md @@ -16,6 +16,7 @@ ## Resources * [자바스크립트 첫걸음](https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps) * [자바스크립트 구성요소](https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks) +* [Just JavaScript](https://justjavascript.com/) ## Checklist * 자바스크립트는 버전별로 어떻게 변화하고 발전해 왔을까요? diff --git a/Quest04/skeleton/desktop.css b/Quest04/skeleton/desktop.css new file mode 100644 index 000000000..9ff365d6d --- /dev/null +++ b/Quest04/skeleton/desktop.css @@ -0,0 +1 @@ +/* TODO: 자유롭게 바탕화면 시스템의 CSS를 만들어 보세요! */ diff --git a/Quest04/skeleton/desktop.html b/Quest04/skeleton/desktop.html new file mode 100644 index 000000000..e2fb160bb --- /dev/null +++ b/Quest04/skeleton/desktop.html @@ -0,0 +1,18 @@ + + + + + + + + +
+
+ + + + diff --git a/Quest04/skeleton/desktop.js b/Quest04/skeleton/desktop.js new file mode 100644 index 000000000..210268fb0 --- /dev/null +++ b/Quest04/skeleton/desktop.js @@ -0,0 +1,15 @@ +class Desktop { + /* TODO: Desktop 클래스는 어떤 멤버함수와 멤버변수를 가져야 할까요? */ +}; + +class Icon { + /* TODO: Icon 클래스는 어떤 멤버함수와 멤버변수를 가져야 할까요? */ +}; + +class Folder { + /* TODO: Folder 클래스는 어떤 멤버함수와 멤버변수를 가져야 할까요? */ +}; + +class Window { + /* TODO: Window 클래스는 어떤 멤버함수와 멤버변수를 가져야 할까요? */ +}; diff --git a/Quest05/skeleton/index.html b/Quest05/skeleton/index.html new file mode 100644 index 000000000..875a82d18 --- /dev/null +++ b/Quest05/skeleton/index.html @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/Quest05/skeleton/notepad.js b/Quest05/skeleton/notepad.js new file mode 100644 index 000000000..6db129a8a --- /dev/null +++ b/Quest05/skeleton/notepad.js @@ -0,0 +1,3 @@ +class Notepad { + /* TODO: 그 외에 또 어떤 클래스와 메소드가 정의되어야 할까요? */ +}; diff --git a/Quest05/skeleton/style.css b/Quest05/skeleton/style.css new file mode 100644 index 000000000..d7459b9eb --- /dev/null +++ b/Quest05/skeleton/style.css @@ -0,0 +1,3 @@ +* { + /* TODO: 필요한 CSS를 채워넣어 보세요! */ +} diff --git a/Quest07/README.md b/Quest07/README.md index 8ea8f1a98..8a77c24ec 100644 --- a/Quest07/README.md +++ b/Quest07/README.md @@ -1,8 +1,39 @@ # Quest 07. node.js의 기초 ## Introduction +* 이번 퀘스트에서는 node.js의 기본적인 구조와 개념에 대해 알아 보겠습니다. + ## Topics +* node.js +* npm +* CommonJS와 ES Modules + ## Resources +* [About node.js](https://nodejs.org/ko/about/) +* [Node.js의 아키텍쳐](https://edu.goorm.io/learn/lecture/557/%ED%95%9C-%EB%88%88%EC%97%90-%EB%81%9D%EB%82%B4%EB%8A%94-node-js/lesson/174356/node-js%EC%9D%98-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90) +* [npm](https://docs.npmjs.com/about-npm) +* [npm CLI commands](https://docs.npmjs.com/cli/v7/commands) +* [npm - package.json](https://docs.npmjs.com/cli/v7/configuring-npm/package-json) +* [How NodeJS Require works!](https://www.thirdrocktechkno.com/blog/how-nodejs-require-works) +* [MDN - JavaScript Modules](https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules) +* [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/) +* [require vs import](https://www.geeksforgeeks.org/difference-between-node-js-require-and-es6-import-and-export/) + ## Checklist +* node.js는 무엇인가요? node.js의 내부는 어떻게 구성되어 있을까요? +* npm이 무엇인가요? `package.json` 파일은 어떤 필드들로 구성되어 있나요? +* npx는 어떤 명령인가요? npm 패키지를 `-g` 옵션을 통해 글로벌로 저장하는 것과 그렇지 않은 것은 어떻게 다른가요? +* 자바스크립트 코드에서 다른 파일의 코드를 부르는 시도들은 지금까지 어떤 것이 있었을까요? CommonJS 대신 ES Modules가 등장한 이유는 무엇일까요? +* ES Modules는 기존의 `require()`와 동작상에 어떤 차이가 있을까요? CommonJS는 할 수 있으나 ES Modules가 할 수 없는 일에는 어떤 것이 있을까요? +* node.js에서 ES Modules를 사용하려면 어떻게 해야 할까요? ES Modules 기반의 코드에서 CommonJS 기반의 패키지를 불러오려면 어떻게 해야 할까요? 그 반대는 어떻게 될까요? + ## Quest +* 스켈레톤 코드에는 다음과 같은 네 개의 패키지가 있으며, 용도는 다음과 같습니다: + * `cjs-package`: CommonJS 기반의 패키지입니다. 다른 코드가 이 패키지의 함수와 내용을 참조하게 됩니다. + * `esm-package`: ES Modules 기반의 패키지입니다. 다른 코드가 이 패키지의 함수와 내용을 참조하게 됩니다. + * `cjs-my-project`: `cjs-package`와 `esm-package`에 모두 의존하는, CommonJS 기반의 프로젝트입니다. + * `esm-my-project`: `cjs-package`와 `esm-package`에 모두 의존하는, ES Modules 기반의 프로젝트입니다. +* 각각의 패키지의 `package.json`과 `index.js` 또는 `index.mjs` 파일을 수정하여, 각각의 `*-my-project`들이 `*-package`에 노출된 함수와 클래스를 활용할 수 있도록 만들어 보세요. + ## Advanced +* node.js 외의 자바스크립트 런타임에는 어떤 것이 있을까요? diff --git a/Quest07/skeleton/cjs-my-project/index.js b/Quest07/skeleton/cjs-my-project/index.js new file mode 100644 index 000000000..54f351756 --- /dev/null +++ b/Quest07/skeleton/cjs-my-project/index.js @@ -0,0 +1 @@ +// TODO: cjs-package와 esm-package의 함수와 클래스들을 가져다 쓰고 활용하려면 어떻게 해야 할까요? diff --git a/Quest07/skeleton/cjs-my-project/package.json b/Quest07/skeleton/cjs-my-project/package.json new file mode 100644 index 000000000..d89fa3203 --- /dev/null +++ b/Quest07/skeleton/cjs-my-project/package.json @@ -0,0 +1,3 @@ +{ + "name": "cjs-my-project" +} diff --git a/Quest07/skeleton/cjs-package/index.js b/Quest07/skeleton/cjs-package/index.js new file mode 100644 index 000000000..1b16029ed --- /dev/null +++ b/Quest07/skeleton/cjs-package/index.js @@ -0,0 +1,15 @@ +class CjsUtilClass { + constructor(foo) { + this.foo = foo; + } + + double() { + return foo * 2; + } +} + +const cjsUtilFunction = str => { + return str.toUpperCase(); +}; + +// TODO: 다른 패키지가 CjsUtilClass와 cjsUtilFunction를 가져다 쓰려면 어떻게 해야 할까요? diff --git a/Quest07/skeleton/cjs-package/package.json b/Quest07/skeleton/cjs-package/package.json new file mode 100644 index 000000000..95a78fd3e --- /dev/null +++ b/Quest07/skeleton/cjs-package/package.json @@ -0,0 +1,3 @@ +{ + "name": "cjs-package" +} diff --git a/Quest07/skeleton/esm-my-project/index.mjs b/Quest07/skeleton/esm-my-project/index.mjs new file mode 100644 index 000000000..54f351756 --- /dev/null +++ b/Quest07/skeleton/esm-my-project/index.mjs @@ -0,0 +1 @@ +// TODO: cjs-package와 esm-package의 함수와 클래스들을 가져다 쓰고 활용하려면 어떻게 해야 할까요? diff --git a/Quest07/skeleton/esm-my-project/package.json b/Quest07/skeleton/esm-my-project/package.json new file mode 100644 index 000000000..e39f3253e --- /dev/null +++ b/Quest07/skeleton/esm-my-project/package.json @@ -0,0 +1,3 @@ +{ + "name": "esm-my-project" +} diff --git a/Quest07/skeleton/esm-package/index.mjs b/Quest07/skeleton/esm-package/index.mjs new file mode 100644 index 000000000..d98149a8c --- /dev/null +++ b/Quest07/skeleton/esm-package/index.mjs @@ -0,0 +1,15 @@ +class EsmUtilClass { + constructor(foo) { + this.foo = foo; + } + + double() { + return foo * 2; + } +} + +const esmUtilFunction = str => { + return str.toUpperCase(); +}; + +// TODO: 다른 패키지가 EsmUtilClass와 esmUtilFunction를 가져다 쓰려면 어떻게 해야 할까요? diff --git a/Quest07/skeleton/esm-package/package.json b/Quest07/skeleton/esm-package/package.json new file mode 100644 index 000000000..53296b46e --- /dev/null +++ b/Quest07/skeleton/esm-package/package.json @@ -0,0 +1,3 @@ +{ + "name": "esm-package" +} From 027cad44dff2fde7b6a729093cd200637de0f339 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Fri, 30 Apr 2021 00:55:26 +0900 Subject: [PATCH 02/25] Quest 08 --- Quest08/README.md | 36 ++++++++++++++++++++++++++++++++++- Quest08/skeleton/package.json | 3 +++ Quest08/skeleton/server.mjs | 8 ++++++++ 3 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 Quest08/skeleton/package.json create mode 100644 Quest08/skeleton/server.mjs diff --git a/Quest08/README.md b/Quest08/README.md index 313044cab..b19acb48b 100644 --- a/Quest08/README.md +++ b/Quest08/README.md @@ -1,8 +1,42 @@ -# Quest 08. 웹 API의 기초: REST와 CRUD +# Quest 08. 웹 API의 기초 ## Introduction +* 이번 퀘스트에서는 웹 API 서버의 기초를 알아보겠습니다. + ## Topics +* HTTP Method +* node.js `http` module + * `req`와 `res` 객체 + ## Resources +* [MDN - Content-Type Header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) +* [MDN - HTTP Methods](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) +* [MDN - MIME Type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type) +* [Postman](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop) +* [HTTP Node.js Manual & Documentation](https://nodejs.org/api/http.html) + ## Checklist +* HTTP의 GET과 POST 메소드는 어떻게 다른가요? + * 다른 HTTP 메소드에는 무엇이 있나요? +* HTTP 서버에 GET과 POST를 통해 데이터를 보내려면 어떻게 해야 하나요? + * HTTP 요청의 `Content-Type` 헤더는 무엇인가요? + * Postman에서 POST 요청을 보내는 여러 가지 방법(`form-data`, `x-www-form-urlencoded`, `raw`, `binary`) 각각은 어떤 용도를 가지고 있나요? +* node.js의 `http` 모듈을 통해 HTTP 요청을 처리할 때, + * `req`와 `res` 객체에는 어떤 정보가 담겨있을까요? + * GET과 POST에 대한 처리 형태가 달라지는 이유는 무엇인가요? +* 만약 API 엔드포인트(URL)가 아주 많다고 한다면, HTTP POST 요청의 `Content-Type` 헤더에 따라 다른 방식으로 동작하는 서버를 어떻게 정리하면 좋을까요? + * 그 밖에 서버가 요청들에 따라 공통적으로 처리하는 일에는 무엇이 있을까요? 이를 어떻게 정리하면 좋을까요? + ## Quest +* 다음의 동작을 하는 서버를 만들어 보세요. + * 브라우저의 주소창에 `http://localhost:8080`을 치면 `Hello World!`를 응답하여 브라우저에 출력합니다. + * 서버의 `/foo` URL에 `bar` 변수로 임의의 문자열을 GET 메소드로 보내면, `Hello, [문자열]`을 출력합니다. + * 서버의 `/foo` URL에 `bar` 키에 임의의 문자열 값을 갖는 JSON 객체를 POST 메소드로 보내면, `Hello, [문자열]`을 출력합니다. + * 서버의 `/pic/upload` URL에 그림 파일을 POST 하면 서버에 보안상 적절한 방법으로 파일이 업로드 됩니다. + * 서버의 `/pic/show` URL을 GET 하면 브라우저에 위에 업로드한 그림이 뜹니다. + * 서버의 `/pic/download` URL을 GET 하면 브라우저에 위에 업로드한 그림이 `pic.jpg`라는 이름으로 다운로드 됩니다. +* expressJS와 같은 외부 프레임워크를 사용하지 않고, node.js의 기본 모듈만을 사용해서 만들어 보세요. +* 처리하는 요청의 종류에 따라 공통적으로 나타나는 코드를 정리해 보세요. + ## Advanced +* 서버가 파일 업로드를 지원할 때 보안상 주의할 점에는 무엇이 있을까요? diff --git a/Quest08/skeleton/package.json b/Quest08/skeleton/package.json new file mode 100644 index 000000000..b3d9d662d --- /dev/null +++ b/Quest08/skeleton/package.json @@ -0,0 +1,3 @@ +{ + "name": "quest08" +} diff --git a/Quest08/skeleton/server.mjs b/Quest08/skeleton/server.mjs new file mode 100644 index 000000000..899ba27d9 --- /dev/null +++ b/Quest08/skeleton/server.mjs @@ -0,0 +1,8 @@ +import http from 'http'; + +const server = http.createServer((req, res) => { + /* TODO: 각각의 URL들을 어떻게 처리하면 좋을까요? */ + res.end(); +}); + +server.listen(8000); From 4c0cecca4e429f4dc4cda1837fee5fde90c93e2f Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Fri, 30 Apr 2021 01:49:18 +0900 Subject: [PATCH 03/25] Quest 09 --- Quest09/README.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/Quest09/README.md b/Quest09/README.md index 67a7e0393..49a2928ed 100644 --- a/Quest09/README.md +++ b/Quest09/README.md @@ -1,8 +1,46 @@ # Quest 09. 서버와 클라이언트의 대화 ## Introduction +* 이번 퀘스트에서는 서버와 클라이언트의 연동, 그리고 웹 API의 설계 방법론 중 하나인 REST에 대해 알아보겠습니다. + ## Topics +* expressJS +* AJAX, `XMLHttpRequest`, `fetch()` +* REST, CRUD +* CORS + ## Resources +* [Express Framework](http://expressjs.com/) +* [MDN - Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) +* [MDN - XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) +* [REST API Tutorial](https://restfulapi.net/) +* [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) +* [MDN - CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) + ## Checklist +* 비동기 프로그래밍이란 무엇인가요? + * 콜백을 통해 비동기적 작업을 할 때의 불편한 점은 무엇인가요? 콜백지옥이란 무엇인가요? + * 자바스크립트의 Promise는 어떤 객체이고 어떤 일을 하나요? + * 자바스크립트의 `async`와 `await` 키워드는 어떤 역할을 하며 그 정체는 무엇일까요? +* 브라우저 내 스크립트에서 외부 리소스를 가져오려면 어떻게 해야 할까요? + * 브라우저의 `XMLHttpRequest` 객체는 무엇이고 어떻게 동작하나요? + * `fetch` API는 무엇이고 어떻게 동작하나요? +* REST는 무엇인가요? + * REST API는 어떤 목적을 달성하기 위해 나왔고 어떤 장점을 가지고 있나요? + * RESTful한 API 설계의 단점은 무엇인가요? +* CORS란 무엇인가요? 이러한 기능이 왜 필요할까요? CORS는 어떻게 구현될까요? + ## Quest +* 이번 퀘스트는 Midterm에 해당하는 과제입니다. 분량이 제법 많으니 한 번 기능별로 세부 일정을 정해 보고, 과제 완수 후에 그 일정이 얼마나 지켜졌는지 스스로 한 번 돌아보세요. +* Quest 05에서 만든 메모장 시스템을 서버와 연동하는 어플리케이션으로 만들어 보겠습니다. + * 클라이언트는 `fetch` API를 통해 서버와 통신합니다. + * 서버는 8000번 포트에 REST API를 엔드포인트로 제공하여, 클라이언트의 요청에 응답합니다. + * 클라이언트로부터 온 새 파일 저장, 삭제, 다른 이름으로 저장 등의 요청을 받아 서버의 로컬 파일시스템을 통해 저장되어야 합니다. + * 서버에 어떤 식으로 저장하는 것이 좋을까요? + * API 서버 외에, 클라이언트를 띄우기 위한 서버가 3000번 포트로 따로 떠서 API 서버와 서로 통신할 수 있어야 합니다. +* 클라이언트 프로젝트와 서버 프로젝트 모두 `npm i`만으로 디펜던시를 설치하고 바로 실행될 수 있게 제출되어야 합니다. +* 이번 퀘스트부터는 앞의 퀘스트의 결과물에 의존적인 경우가 많습니다. 제출 폴더를 직접 만들어 제출해 보세요! + ## Advanced +* `fetch` API는 구현할 수 없지만 `XMLHttpRequest`로는 구현할 수 있는 기능이 있을까요? +* REST 이전에는 HTTP API에 어떤 패러다임들이 있었을까요? REST의 대안으로는 어떤 것들이 제시되고 있을까요? From 1bac1d0834df38219effefede8aab2827bc944fa Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Thu, 6 May 2021 00:40:02 +0900 Subject: [PATCH 04/25] Quest 10~11 --- Quest09/README.md | 5 ++++- Quest10/README.md | 26 ++++++++++++++++++++++++++ Quest11/README.md | 31 +++++++++++++++++++++++++++++++ 3 files changed, 61 insertions(+), 1 deletion(-) diff --git a/Quest09/README.md b/Quest09/README.md index 49a2928ed..7e2950c0c 100644 --- a/Quest09/README.md +++ b/Quest09/README.md @@ -4,13 +4,14 @@ * 이번 퀘스트에서는 서버와 클라이언트의 연동, 그리고 웹 API의 설계 방법론 중 하나인 REST에 대해 알아보겠습니다. ## Topics -* expressJS +* expressJS, fastify * AJAX, `XMLHttpRequest`, `fetch()` * REST, CRUD * CORS ## Resources * [Express Framework](http://expressjs.com/) +* [Fastify Framework](https://www.fastify.io/) * [MDN - Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [MDN - XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) * [REST API Tutorial](https://restfulapi.net/) @@ -32,12 +33,14 @@ ## Quest * 이번 퀘스트는 Midterm에 해당하는 과제입니다. 분량이 제법 많으니 한 번 기능별로 세부 일정을 정해 보고, 과제 완수 후에 그 일정이 얼마나 지켜졌는지 스스로 한 번 돌아보세요. + * 이번 퀘스트부터는 skeleton을 제공하지 않습니다! * Quest 05에서 만든 메모장 시스템을 서버와 연동하는 어플리케이션으로 만들어 보겠습니다. * 클라이언트는 `fetch` API를 통해 서버와 통신합니다. * 서버는 8000번 포트에 REST API를 엔드포인트로 제공하여, 클라이언트의 요청에 응답합니다. * 클라이언트로부터 온 새 파일 저장, 삭제, 다른 이름으로 저장 등의 요청을 받아 서버의 로컬 파일시스템을 통해 저장되어야 합니다. * 서버에 어떤 식으로 저장하는 것이 좋을까요? * API 서버 외에, 클라이언트를 띄우기 위한 서버가 3000번 포트로 따로 떠서 API 서버와 서로 통신할 수 있어야 합니다. + * Express나 Fastify 등의 프레임워크를 사용해도 무방합니다. * 클라이언트 프로젝트와 서버 프로젝트 모두 `npm i`만으로 디펜던시를 설치하고 바로 실행될 수 있게 제출되어야 합니다. * 이번 퀘스트부터는 앞의 퀘스트의 결과물에 의존적인 경우가 많습니다. 제출 폴더를 직접 만들어 제출해 보세요! diff --git a/Quest10/README.md b/Quest10/README.md index 9bb32454f..613fbd17c 100644 --- a/Quest10/README.md +++ b/Quest10/README.md @@ -1,8 +1,34 @@ # Quest 10. 인증의 이해 ## Introduction +* 이번 퀘스트에서는 웹에서의 인증에 관해 알아보겠습니다. + ## Topics +* Cookie +* Session +* JWT + ## Resources +* [MDN - HTTP 쿠키](https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies) +* [Cookies and Sessions](https://web.stanford.edu/~ouster/cgi-bin/cs142-fall10/lecture.php?topic=cookie) +* [JWT](https://jwt.io/) + ## Checklist +* 쿠키란 무엇일까요? + * 쿠키는 어떤 식으로 동작하나요? + * 쿠키는 어떤 식으로 서버와 클라이언트 사이에 정보를 주고받나요? +* 웹 어플리케이션의 세션이란 무엇일까요? + * 세션의 ID와 내용은 각각 어디에 저장되고 어떻게 서버와 교환되나요? +* JWT란 무엇인가요? + * JWT 토큰은 어디에 저장되고 어떻게 서버와 교환되나요? +* 세션에 비해 JWT가 가지는 장점은 무엇인가요? 또 JWT에 비해 세션이 가지는 장점은 무엇인가요? + ## Quest +* 이번에는 메모장 시스템에 로그인 기능을 넣고자 합니다. + * 사용자는 딱 세 명만 존재한다고 가정하고, 아이디와 비밀번호, 사용자의 닉네임은 하드코딩해도 무방합니다. + * 로그인했을 때 해당 사용자가 이전에 작업했던 탭들과 마지막으로 활성화된 탭 등의 상태가 로딩 되어야 합니다. + * 세션을 이용한 버전과, JWT를 이용한 버전 두 가지를 만들어 보세요! + * 세션을 이용할 경우 세션은 서버의 메모리나 파일에 저장하면 됩니다. + ## Advanced +* Web Authentication API(WebAuthn)은 무엇인가요? diff --git a/Quest11/README.md b/Quest11/README.md index 416400504..b9ac1bd54 100644 --- a/Quest11/README.md +++ b/Quest11/README.md @@ -1,8 +1,39 @@ # Quest 11. RDB의 기초와 ORM ## Introduction +* 이번 퀘스트에서는 데이터베이스를 다루는 방법에 대해 알아보겠습니다. + ## Topics +* RDBMS +* MySQL +* ORM +* Hash + * scrypt + ## Resources +* [MySQL 101 – The basics](https://www.globo.tech/learning-center/mysql-101-basics/) +* [Sequelize](https://sequelize.org/) +* [안전한 패스워드 저장](https://d2.naver.com/helloworld/318732) + ## Checklist +* RDBMS 테이블의 정규화는 무엇인가요? +* MySQL 외의 RDB에는 어떤 것들이 있나요? + * Relational Database 외에 다른 DB에는 어떤 것들이 있을까요? +* RDBMS에서 테이블의 인덱싱은 무엇인가요? 인덱싱을 하면 어떤 점이 다르며, 어떤 식으로 동작하나요? +* ORM을 사용하는 것은 사용하지 않는 것에 비해 어떤 장단점을 가지고 있나요? + * 자바스크립트 생태계의 ORM에는 어떤 것들이 있나요? +* 모델간의 1:1, 1:N, N:M 관계는 각각 무엇이고 어떨 때 사용하나요? +* DB에 사용자의 암호를 평문으로 저장하지 않고도 사용자의 암호를 인증하는 것이 가능한 이유는 무엇일까요? + * 해시 함수에는 어떤 것이 있나요? + * 사용자의 암호를 해싱하여 저장할 때 어떤 식으로 저장하는 것이 보안에 좋을까요? + ## Quest +* 이번에는 메모장을 파일이 아닌 DB기반으로 만들어 보고자 합니다. + * 적절한 테이블을 설계해 보세요. + * Sequelize를 이용하여 데이터의 모델을 만들고 어플리케이션에 적용해 보세요. + * 사용자의 비밀번호는 해싱을 통해 저장되어야 합니다. + ## Advanced +* Object–relational impedance mismatch란 어떤 개념인가요? +* Foreign Key란 무엇인가요? 이것을 사용할 때의 장점과 단점은 무엇일까요? +* 이전에 쓰이던 해시함수들에는 어떤 것이 있을까요? 패스워드 해싱의 추세의 역사는 어떻게 이어져왔나요? From 0ae9de65e8161c16ec045f8325bc09fa2a002fb9 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Thu, 13 May 2021 23:16:35 +0900 Subject: [PATCH 05/25] Quest 12: Start --- Quest12/README.md | 6 ++++++ README.md | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/Quest12/README.md b/Quest12/README.md index 749182021..7def4f5e9 100644 --- a/Quest12/README.md +++ b/Quest12/README.md @@ -1,8 +1,14 @@ # Quest 12. 보안의 기초 ## Introduction +* 이번 퀘스트에서는 가장 기초적인 웹 서비스 보안에 대해 알아보겠습니다. + ## Topics ## Resources +https://martinfowler.com/articles/web-security-basics.html +https://spyrestudios.com/web-security-101/ +https://www.shopify.com.ng/partners/blog/web-security-2018 + ## Checklist ## Quest ## Advanced diff --git a/README.md b/README.md index aeb4e6d8f..665f6a095 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ * [Quest 06. 인터넷의 이해](./Quest06) * [Quest 07. node.js의 기초](./Quest07) * [Quest 08. 웹 API의 기초: REST와 CRUD](./Quest08) - * [Quest 09. 서버와 클라이언트의 대화](./Quest09) (AJAX/fetch()/async-await) + * [Quest 09. 서버와 클라이언트의 대화](./Quest09) * [Quest 10. 인증의 이해](./Quest10) (쿠키, 세션, 토큰) * [Quest 11. RDB의 기초와 ORM](./Quest11) * [Quest 12. 보안의 기초](./Quest12) From 99d28500bf779ba9f16cd029446f0f8b86276167 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Fri, 14 May 2021 22:12:43 +0900 Subject: [PATCH 06/25] Quest 12 --- Quest12/README.md | 24 +++++++++++++++++++++--- README.md | 2 +- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/Quest12/README.md b/Quest12/README.md index 7def4f5e9..790143a43 100644 --- a/Quest12/README.md +++ b/Quest12/README.md @@ -4,11 +4,29 @@ * 이번 퀘스트에서는 가장 기초적인 웹 서비스 보안에 대해 알아보겠습니다. ## Topics +* XSS, CSRF, SQL Injection +* HTTPS, TLS + ## Resources -https://martinfowler.com/articles/web-security-basics.html -https://spyrestudios.com/web-security-101/ -https://www.shopify.com.ng/partners/blog/web-security-2018 +* [The Basics of Web Application Security](https://martinfowler.com/articles/web-security-basics.html) +* [Website Security 101](https://spyrestudios.com/web-security-101/) +* [Web Security Fundamentals](https://www.shopify.com.ng/partners/blog/web-security-2018) +* [OWASP Cheat Sheet Series](https://cheatsheetseries.owasp.org/) +* [Wikipedia - TLS](https://en.wikipedia.org/wiki/Transport_Layer_Security) ## Checklist +* 입력 데이터의 Validation을 웹 프론트엔드에서 했더라도 서버에서 또 해야 할까요? 그 이유는 무엇일까요? + * 서버로부터 받은 HTML 내용을 그대로 검증 없이 프론트엔드에 innerHTML 등을 통해 적용하면 어떤 문제점이 있을까요? + * XSS(Cross-site scripting)이란 어떤 공격기법일까요? + * CSRF(Cross-site request forgery)이란 어떤 공격기법일까요? + * SQL Injection이란 어떤 공격기법일까요? +* 대부분의 최신 브라우저에서는 HTTP 대신 HTTPS가 권장됩니다. 이유가 무엇일까요? + * HTTPS와 TLS는 어떤 식으로 동작하나요? HTTPS는 어떤 역사를 가지고 있나요? + * HTTPS의 서비스 과정에서 인증서는 어떤 역할을 할까요? 인증서는 어떤 체계로 되어 있을까요? + ## Quest +* 메모장의 서버와 클라이언트에 대해, 로컬에서 발행한 인증서를 통해 HTTPS 서비스를 해 보세요. + ## Advanced +* TLS의 인증서에 쓰이는 암호화 알고리즘은 어떤 종류가 있을까요? +* HTTP/3은 기존 버전과 어떻게 다를까요? HTTP의 버전 3이 나오게 된 이유는 무엇일까요? diff --git a/README.md b/README.md index 665f6a095..6b6ec766c 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ * [Quest 07. node.js의 기초](./Quest07) * [Quest 08. 웹 API의 기초: REST와 CRUD](./Quest08) * [Quest 09. 서버와 클라이언트의 대화](./Quest09) - * [Quest 10. 인증의 이해](./Quest10) (쿠키, 세션, 토큰) + * [Quest 10. 인증의 이해](./Quest10) * [Quest 11. RDB의 기초와 ORM](./Quest11) * [Quest 12. 보안의 기초](./Quest12) * [Quest 13. 웹 API의 응용과 GraphQL](./Quest13) From 3043206ce9b7d96bf6dfac36e5138d11f42d5c58 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Sat, 15 May 2021 22:35:22 +0900 Subject: [PATCH 07/25] Quest 13-14 --- Quest13/README.md | 26 ++++++++++++++++++++++++++ Quest14/README.md | 22 ++++++++++++++++++++++ 2 files changed, 48 insertions(+) diff --git a/Quest13/README.md b/Quest13/README.md index 429c0cb79..4f6fe2447 100644 --- a/Quest13/README.md +++ b/Quest13/README.md @@ -1,8 +1,34 @@ # Quest 13. 웹 API의 응용과 GraphQL ## Introduction +* 이번 퀘스트에서는 차세대 웹 API의 대세로 각광받고 있는 GraphQL에 대해 알아보겠습니다. + ## Topics +* GraphQL + * Schema + * Resolver + * DataLoader +* Apollo + ## Resources +* [GraphQL](https://graphql.org/) +* [GraphQL.js](http://graphql.org/graphql-js/) +* [DataLoader](https://github.com/facebook/dataloader) +* [Apollo](https://www.apollographql.com/) + ## Checklist +* GraphQL API는 무엇인가요? REST의 어떤 단점을 보완해 주나요? +* GraphQL 스키마는 어떤 역할을 하며 어떤 식으로 정의되나요? +* GraphQL 리졸버는 어떤 역할을 하며 어떤 식으로 정의되나요? + * GraphQL 리졸버의 성능 향상을 위한 DataLoader는 무엇이고 어떻게 쓰나요? +* 클라이언트 상에서 GraphQL 요청을 보내려면 어떻게 해야 할까요? + * Apollo 프레임워크(서버/클라이언트)의 장점은 무엇일까요? + * Apollo Client를 쓰지 않고 Vanilla JavaScript로 GraphQL 요청을 보내려면 어떻게 해야 할까요? +* GraphQL 기반의 API를 만들 때 에러처리와 HTTP 상태코드 등은 어떻게 하는게 좋을까요? + ## Quest +* 메모장의 서버와 클라이언트 부분을 GraphQL API로 수정해 보세요. + ## Advanced +* GraphQL이 아직 제대로 수행하지 못하거나 불가능한 요구사항에는 어떤 것이 있을까요? +* GraphQL의 경쟁자에는 어떤 것이 있을까요? diff --git a/Quest14/README.md b/Quest14/README.md index ab787713f..18a2c041c 100644 --- a/Quest14/README.md +++ b/Quest14/README.md @@ -1,8 +1,30 @@ # Quest 14. 정적 분석: 타입스크립트와 린트 시스템 ## Introduction +* 이번 퀘스트에서는 타입스크립트와 린트 시스템을 통해 코드에 대한 정적분석의 장점에 대해 알아보겠습니다. + ## Topics +* Lint + * ESLint +* TypeScript + ## Resources +* [ESLint](https://eslint.org/) +* [TypeScript](https://www.typescriptlang.org/) + ## Checklist +* 코드를 린팅하는 것의 장점은 무엇일까요? + * 린트 규칙은 어떻게 설정하는 것이 좋을까요? 너무 빡빡한 규칙과 너무 헐거운 규칙 사이에서 어떻게 밸런스를 잡아야 할까요? +* 타입스크립트는 어떤 언어인가요? + * 타입스크립트를 사용했을 때 얻을 수 있는 장점은 무엇인가요? + * 타입스크립트를 사용하면서 타입이 없는 라이브러리나 프레임워크를 사용해야 할 경우에는 어떻게 해야 할까요? + * any 타입을 남용하는 것은 왜 좋지 않을까요? +* 린트와 빌드 등의 과정을 개발 싸이클에서 편하게 수행하려면 어떻게 하는 것이 좋을까요? + ## Quest +* 메모장 시스템에 린트 시스템을 적용해 보세요. +* 메모장 시스템을 타입스크립트 기반으로 수정해 보세요. + ## Advanced +* 자바스크립트 코드에 대한 정적분석은 어떤 과정을 통해 이루어질까요? + * 이러한 정적분석을 수행해 주는 핵심 역할을 하는 npm 패키지는 어떤 것이 있을까요? From 09c66f2768669070e9236b52f03212a5ae621a46 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Sat, 15 May 2021 22:57:45 +0900 Subject: [PATCH 08/25] Quest 15 --- Quest14/README.md | 1 + Quest15/README.md | 29 +++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/Quest14/README.md b/Quest14/README.md index 18a2c041c..835469b61 100644 --- a/Quest14/README.md +++ b/Quest14/README.md @@ -24,6 +24,7 @@ ## Quest * 메모장 시스템에 린트 시스템을 적용해 보세요. * 메모장 시스템을 타입스크립트 기반으로 수정해 보세요. +* `package.json` 파일의 `scripts` 항목을 이용하여 린트와 빌드 등의 작업을 스크립트화 해 보세요. ## Advanced * 자바스크립트 코드에 대한 정적분석은 어떤 과정을 통해 이루어질까요? diff --git a/Quest15/README.md b/Quest15/README.md index 2ce4d4fec..4ab6da6c8 100644 --- a/Quest15/README.md +++ b/Quest15/README.md @@ -1,8 +1,37 @@ # Quest 15. 자동화된 테스트 ## Introduction +* 이번 퀘스트에서는 자동화된 테스트에 어떤 장점이 있는지, 어떤 식으로 구축할 수 있는지에 대해 알아보겠습니다. + ## Topics +* Automated Test + * TDD + * Unit Test + * Integration Test + * E2E Test + * Stub & Mock +* Jest +* Puppeteer + ## Resources +* [Unit Test (단위 테스트) 도입하기](https://www.popit.kr/unit-test-%EB%8B%A8%EC%9C%84-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EB%8F%84%EC%9E%85%ED%95%98%EA%B8%B0-1%ED%8E%B8/) +* [소프트웨어 테스트 안티 패턴](https://velog.io/@leejh3224/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%95%88%ED%8B%B0-%ED%8C%A8%ED%84%B4) +* [End-to-End testing with Puppeteer and Jest](https://medium.com/touch4it/end-to-end-testing-with-puppeteer-and-jest-ec8198145321) +* [Mock & Stub](https://stackoverflow.com/questions/3459287/whats-the-difference-between-a-mock-stub) + ## Checklist +* 자동화된 테스트를 만드는 것에는 어떤 장점과 단점이 있을까요? + * TDD(Test-Driven Development)란 무엇인가요? TDD의 장점과 단점은 무엇일까요? +* 테스트들 간의 계층에 따라 어떤 단계들이 있을까요? + * 유닛 테스트, 통합 테스트, E2E 테스트는 각각 어떤 것을 뜻하나요? + * 테스트에 있어서 Stub과 Mock은 어떤 개념을 가리키는 것일까요? +* Jest는 어떤 일을 하며 어떻게 사용하는 테스트 프레임워크일까요? + * Jest 이외의 테스트 프레임워크는 어떤 것이 있고 어떤 장단점이 있을까요? +* Puppeteer는 어떤 일을 하며 어떻게 사용하는 테스트 프레임워크일까요? + ## Quest +* 직전 퀘스트의 메모장의 서버와 클라이언트 각 부분에 유닛 테스트, 통합 테스트, E2E 테스트 등을 추가해 보세요. + * `npm test` 명령을 통해 모든 테스트가 돌고 그 결과를 출력할 수 있어야 합니다. + ## Advanced +* 테스트의 커버리지는 어떤 개념일까요? 프로젝트에서 테스트의 커버리지는 어떻게 접근하는 것이 좋을까요? From 858b9f5297022550991890e7fdf0e942c4547e42 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Fri, 18 Jun 2021 00:28:06 +0900 Subject: [PATCH 09/25] Quest 16F --- Quest16-F/README.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/Quest16-F/README.md b/Quest16-F/README.md index da5525a74..83293e545 100644 --- a/Quest16-F/README.md +++ b/Quest16-F/README.md @@ -1,8 +1,34 @@ # Quest 16-F. 컴포넌트 기반 개발 ## Introduction +* 이번 퀘스트에서는 Vue.js 프레임워크를 통해 컴포넌트 기반의 웹 클라이언트 개발 방법론을 더 자세히 알아보겠습니다. + ## Topics +* Vue.js framework +* Virtual DOM + ## Resources +* [Vue.js](https://vuejs.org) + * [Lifecycle Hooks](https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html) + * [State Management](https://v3.vuejs.org/guide/state-management.html) + * [Virtual DOM](https://v3.vuejs.org/guide/optimizations.html#virtual-dom) + ## Checklist +* Vue.js는 어떤 특징을 가지고 있는 웹 프레임워크인가요? + * Vue.js는 내부적으로 어떤 식으로 동작하나요? +* Vue.js에서의 컴포넌트란 무엇인가요? + * Vue 컴포넌트의 라이프사이클은 어떤 식으로 호출되나요? +* 컴포넌트 간에 데이터를 주고받을 때 단방향 바인딩과 양방향 바인딩 방식이 어떻게 다르고, 어떤 장단점을 가지고 있나요? +* Vue.js 기반의 웹 어플리케이션을 위한 상태관리 라이브러리에는 어떤 것이 있을까요? 이러한 상태관리 툴을 사용하는 것에는 어떤 장단점이 있을까요? + ## Quest +* Vue.js를 통해 메모장 시스템을 다시 한 번 만들어 보세요. + * 어떤 컴포넌트가 필요한지 생각해 보세요. + * 각 컴포넌트별로 해당하는 CSS와 자바스크립트를 어떤 식으로 붙여야 할까요? + * 컴포넌트간에 데이터를 주고받으려면 어떤 식으로 하는 것이 좋을까요? + * `vue-cli`와 같은 Vue의 Boilterplating 기능을 이용하셔서 세팅하시면 됩니다. + ## Advanced +* React와 Angular는 어떤 프레임워크이고 어떤 특징을 가지고 있을까요? Vue와는 어떤 점이 다를까요? +* Web Component는 어떤 개념인가요? 이 개념이 Vue나 React를 대체하게 될까요? +* Reactive Programming이란 무엇일까요? From cbea7a6e795f490741ccf20d1497db320ead9345 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Fri, 18 Jun 2021 00:37:10 +0900 Subject: [PATCH 10/25] Quest 17F --- Quest16-F/README.md | 2 ++ Quest17-F/README.md | 23 +++++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/Quest16-F/README.md b/Quest16-F/README.md index 83293e545..2713f7458 100644 --- a/Quest16-F/README.md +++ b/Quest16-F/README.md @@ -5,6 +5,7 @@ ## Topics * Vue.js framework +* vuex * Virtual DOM ## Resources @@ -25,6 +26,7 @@ * Vue.js를 통해 메모장 시스템을 다시 한 번 만들어 보세요. * 어떤 컴포넌트가 필요한지 생각해 보세요. * 각 컴포넌트별로 해당하는 CSS와 자바스크립트를 어떤 식으로 붙여야 할까요? + * Vue.js 시스템에 타입스크립트는 어떤 식으로 적용할 수 있을까요? * 컴포넌트간에 데이터를 주고받으려면 어떤 식으로 하는 것이 좋을까요? * `vue-cli`와 같은 Vue의 Boilterplating 기능을 이용하셔서 세팅하시면 됩니다. diff --git a/Quest17-F/README.md b/Quest17-F/README.md index 28122ccf8..7c3fcbac7 100644 --- a/Quest17-F/README.md +++ b/Quest17-F/README.md @@ -1,8 +1,31 @@ # Quest 17-F. 번들링과 빌드 시스템 ## Introduction +* 이번 퀘스트에서는 현대적 웹 클라이언트 개발에 핵심적인 번들러와 빌드 시스템의 구조와 사용 방법에 대해 알아보겠습니다. + ## Topics +* Webpack +* Bundling + * Data URL +* Transpiling + * Source Map +* Hot Module Replacement + ## Resources +* [Webpack](https://webpack.js.org/) +* [Webpack 101: An introduction to Webpack](https://medium.com/hootsuite-engineering/webpack-101-an-introduction-to-webpack-3f59d21edeba) + ## Checklist +* 여러 개로 나뉘어진 자바스크립트나 이미지, 컴포넌트 파일 등을 하나로 합치는 작업을 하는 것은 성능상에서 어떤 이점이 있을까요? + * 이미지를 Data URL로 바꾸어 번들링하는 것은 어떤 장점과 단점이 있을까요? +* Source Map이란 무엇인가요? Source Map을 생성하는 것은 어떤 장점이 있을까요? +* Webpack의 필수적인 설정은 어떤 식으로 이루어져 있을까요? + * Webpack의 플러그인과 모듈은 어떤 역할들을 하나요? + * Webpack을 이용하여 HMR(Hot Module Replacement) 기능을 설정하려면 어떻게 해야 하나요? + ## Quest +* 직전 퀘스트의 소스만 남기고, Vue의 Boilerplating 기능을 쓰지 않고 Webpack 관련한 설정을 원점에서 다시 시작해 보세요. + * 필요한 번들링과 Source Map, HMR 등의 기능이 모두 잘 작동해야 합니다. + ## Advanced +* Webpack 이전과 이후에는 어떤 번들러가 있었을까요? 각각의 장단점은 무엇일까요? From 71305ece923a36a222e9b241861f9a24fe2d39ce Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Sun, 4 Jul 2021 23:11:36 +0900 Subject: [PATCH 11/25] Quest 18F --- Quest18-F/README.md | 27 ++++++++++++++++++++++++++- README.md | 4 ++-- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/Quest18-F/README.md b/Quest18-F/README.md index 5bf2d82d6..10d5a0790 100644 --- a/Quest18-F/README.md +++ b/Quest18-F/README.md @@ -1,8 +1,33 @@ -# Quest 18-F. 웹 프론트엔드 2021 +# Quest 18-F. 프로그레시브 웹앱 ## Introduction +* 이번 퀘스트에서는 2021년 현재 웹 프론트엔드의 많은 최신 기술 중 프로그레시브 웹앱에 관해 알아보겠습니다. + ## Topics +* Progressive Web App(PWA) +* Service Worker +* Cache & CacheStorage API +* Web Manifest + ## Resources +* [MDN - Progressive web apps (PWAs)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) +* [MDN - Progressive web app Introduction](https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Introduction) +* [MDN - Service Worker API](https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API) +* [web.dev - Progressive Web Apps](https://web.dev/progressive-web-apps/) + ## Checklist +* 웹 어플리케이션을 프로그레시브 웹앱 형태로 만들면 어떤 이점을 가질까요? +* 서비스 워커란 무엇인가요? 웹 워커와의 차이는 무엇인가요? +* PWA의 성능을 높이기 위한 방법론에는 어떤 것들이 있고, 어떤 식으로 적용할 수 있을까요? + ## Quest +* 메모장 프로그램을 PWA 형태로 만들어 보세요. + * 필요한 에셋을 적절히 캐싱하되, 버전업이 되었을 때 캐싱을 해제할 수 있는 형태가 되어야 합니다. + * 해당 PWA를 데스크탑에 인스톨 가능하도록 만들어 보세요. + * 오프라인인 경우에는 임시저장 기능을 만들어, 온라인인 경우를 감지하여 자동으로 서버에 반영되도록 만들어 보세요. + ## Advanced +* 본 퀘스트의 주제로 고려되었으나 분량상 선정되지 않은 주제들은 다음과 같습니다. 시간날 때 한 번 찾아 보세요! + * Search Engine Optimization(SEO) + * CSS-in-JS와 Styled Component + * Server-Side Rendering(SSR) diff --git a/README.md b/README.md index 6b6ec766c..8f155b411 100644 --- a/README.md +++ b/README.md @@ -27,9 +27,9 @@ * [Quest 14. 정적 분석: 타입스크립트와 린트 시스템](./Quest14) * [Quest 15. 자동화된 테스트](./Quest15) * 프론트엔드 루트 - * [Quest 16-F. 컴포넌트 기반 개발](./Quest16-F) (Vue와 vuex) + * [Quest 16-F. 컴포넌트 기반 개발](./Quest16-F) * [Quest 17-F. 번들링과 빌드 시스템](./Quest17-F) - * [Quest 18-F. 웹 프론트엔드 2021](./Quest18-F) (Modern CSS? PWA? SSR? SEO?) + * [Quest 18-F. 프로그레시브 웹앱](./Quest18-F) * [Quest 19-F. 웹 어셈블리의 기초](./Quest19-F) * 백엔드 루트 * [Quest 16-B. 도커와 컨테이너](./Quest16-B) From 58f8bd80774b62a440bdcf6436974320eb2a08af Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Mon, 5 Jul 2021 00:44:25 +0900 Subject: [PATCH 12/25] Quest 19F --- Quest18-F/README.md | 2 +- Quest19-F/README.md | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/Quest18-F/README.md b/Quest18-F/README.md index 10d5a0790..13d4180a0 100644 --- a/Quest18-F/README.md +++ b/Quest18-F/README.md @@ -21,7 +21,7 @@ * PWA의 성능을 높이기 위한 방법론에는 어떤 것들이 있고, 어떤 식으로 적용할 수 있을까요? ## Quest -* 메모장 프로그램을 PWA 형태로 만들어 보세요. +* 텍스트 에디터 프로그램을 PWA 형태로 만들어 보세요. * 필요한 에셋을 적절히 캐싱하되, 버전업이 되었을 때 캐싱을 해제할 수 있는 형태가 되어야 합니다. * 해당 PWA를 데스크탑에 인스톨 가능하도록 만들어 보세요. * 오프라인인 경우에는 임시저장 기능을 만들어, 온라인인 경우를 감지하여 자동으로 서버에 반영되도록 만들어 보세요. diff --git a/Quest19-F/README.md b/Quest19-F/README.md index 226d5387f..c98a068f0 100644 --- a/Quest19-F/README.md +++ b/Quest19-F/README.md @@ -1,8 +1,29 @@ # Quest 19-F. 웹 어셈블리의 기초 ## Introduction +* 이번 퀘스트에서는 2021년 현재 웹 프론트엔드의 많은 최신 기술 중 웹 어셈블리에 관해 알아보겠습니다. + ## Topics +* Web Assembly +* Rust + ## Resources +* [MDN - 웹어셈블리의 컨셉](https://developer.mozilla.org/ko/docs/WebAssembly/Concepts) +* [MDN - Rust to wasm](https://developer.mozilla.org/ko/docs/WebAssembly/Rust_to_wasm) +* [Learn Rust](https://www.rust-lang.org/learn) +* [Rust - crypto::sha2](https://docs.rs/rust-crypto/0.2.36/crypto/sha2/index.html) + ## Checklist +* 웹 어셈블리란 어떤 기술인가요? +* 웹 어셈블리 모듈을 웹 프론트엔드 상에서 실행시키려면 어떻게 해야 할까요? +* Rust란 어떤 특징을 가진 프로그래밍 언어인가요? +* 웹 어셈블리 모듈을 만드는 방법에는 어떤 것들이 있나요? +* 웹 어셈블리가 할 수 없는 작업에는 무엇이 있을까요? 웹 어셈블리는 어떤 목적에 주로 쓰이게 될까요? + ## Quest +* 텍스트 에디터 프로그램에서 각 탭의 내용의 SHA-256 해시를 실시간으로 계산하여 화면 아래에 표시해 보세요. + * 해당 해시는 Rust로 작성된 웹 어셈블리 함수를 통해 계산되어야 합니다. + * 순수 자바스크립트로 계산할 때와의 퍼포먼스 차이를 체크해 보세요. + ## Advanced +* 웹 어셈블리 바이너리는 어떻게 구성되어 있을까요? From 72775333bba7508a97dee662c04161699c74cc04 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Mon, 5 Jul 2021 00:46:17 +0900 Subject: [PATCH 13/25] Quest 20 --- Quest20/README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/Quest20/README.md b/Quest20/README.md index e3ed15f34..62506ad53 100644 --- a/Quest20/README.md +++ b/Quest20/README.md @@ -1,8 +1,13 @@ # Quest 20. 세상 밖으로 ## Introduction -## Topics -## Resources +* 이제는 세상 밖으로 나갈 때입니다! 그 동안 퀘스트 수행하시느라 고생 많으셨습니다. + ## Checklist +* 그 동안 웹 데브 커리큘럼을 진행하면서 어떤 것을 느끼고 배웠나요? +* 웹 데브 커리큘럼을 진행하면서 더 개선되거나 추가되었으면 하는 점에는 어떤 것이 있었나요? + ## Quest -## Advanced +* 권한을 부여받아 우리 회사의 모노리포를 로컬에 클론하고, 개발환경을 세팅해 보세요. +* 백엔드 트랙의 경우, 그 동안 퀘스트를 진행하면서 AWS에 생성했던 리소스가 있다면 모두 삭제해 보세요. +* 이제 동료들과 함께 일할 시간입니다! From 749da4ae4e0439905057bf51af2012b25a51163e Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Thu, 15 Jul 2021 20:47:41 +0900 Subject: [PATCH 14/25] Quest 16-B --- Quest16-B/README.md | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/Quest16-B/README.md b/Quest16-B/README.md index 83fd3b891..8e112e70a 100644 --- a/Quest16-B/README.md +++ b/Quest16-B/README.md @@ -1,8 +1,31 @@ -# Quest 16-B. 도커와 컨테이너 +# Quest 16-B. 컨테이너 ## Introduction +* 이번 퀘스트에서는 컨테이너 기술과 그 활용에 대해 알아보겠습니다. + ## Topics +* 컨테이너 기술 +* Docker +* docker-compose + ## Resources +* [#LearnDocker](https://www.docker.com/101-tutorial) +* [Docker Tutorial for Beginners](https://docker-curriculum.com/) +* [docker-compose](https://docs.docker.com/compose/) + ## Checklist +* 컨테이너는 어떻게 동작하나요? 다른 배포판을 사용할 수 있게 하는 원리가 무엇일까요? +* 도커 컨테이너에 호스트의 파일시스템이나 네트워크 포트를 연결하려면 어떻게 해야 할까요? +* 도커 컨테이너에서 런타임에 환경변수를 주입하려면 어떻게 해야 할까요? +* 도커 컨테이너의 stdout 로그를 보려면 어떻게 해야 할까요? +* 실행중인 도커 컨테이너에 들어가 bash 등의 쉘을 실행하고 로그 등을 보려면 어떻게 해야 할까요? + ## Quest +* 도커를 설치하고 그 사용법을 익혀 보세요. +* 메모장 시스템 서버를 컨테이너 기반으로 띄울 수 있게 수정해 보세요. (docker-compose는 사용하지 않습니다) +* 컨테이너를 Docker Hub에 올리고, 발급받은 학습용 AWS 계정에 EC2 인스턴스를 생성한 뒤, 해당 컨테이너를 띄워서 서비스 해 보세요. +* docker-compose를 사용하여, 이미지 빌드와 서버 업/다운을 쉽게 할 수 있도록 고쳐 보세요. + ## Advanced +* 도커 외의 컨테이너 기술의 대안은 어떤 것이 있을까요? +* 맥이나 윈도우에서도 컨테이너 기술을 사용할 수 있는 원리는 무엇일까요? From 77636534a27f72c81f1e09b60040e8cda1fb2f9c Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Thu, 15 Jul 2021 20:50:02 +0900 Subject: [PATCH 15/25] Quest 17-B --- Quest17-B/README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/Quest17-B/README.md b/Quest17-B/README.md index 471cf547a..72f4a4e21 100644 --- a/Quest17-B/README.md +++ b/Quest17-B/README.md @@ -1,8 +1,24 @@ # Quest 17-B. 배포 파이프라인 ## Introduction +* 이번 퀘스트에서는 CI/CD 파이프라인이 왜 필요한지, 어떻게 구축할 수 있는지 등에 대해 다룹니다. + ## Topics +* Continuous Integration +* Continuous Delivery +* AWS Codebuild + ## Resources +* [AWS: Continuous Integration](https://aws.amazon.com/ko/devops/continuous-integration/) +* [AWS: Continuous Delivery](https://aws.amazon.com/ko/devops/continuous-delivery/) +* [AWS Codebuild](https://aws.amazon.com/ko/codebuild/getting-started/) + ## Checklist +* CI/CD는 무엇일까요? CI/CD 시스템을 구축하면 어떤 장점이 있을까요? +* CI 시스템인 Travis CI, Jenkins, Circle CI, Github Actions, AWS Codebuild 의 차이점과 장단점은 무엇일까요? + ## Quest +* AWS Codebuild를 이용하여, 특정 브랜치에 푸시를 하면 린트와 테스트를 거쳐 서버 이미지를 빌드한 뒤, 직전 퀘스트의 EC2 인스턴스에 배포되는 시스템을 만들어 보세요. + ## Advanced +* From 11517cd4c303df0ba415a50905aedd5fec0edcfd Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Thu, 22 Jul 2021 14:22:09 +0900 Subject: [PATCH 16/25] Quest19F : Small fix --- Quest19-F/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Quest19-F/README.md b/Quest19-F/README.md index c98a068f0..a8a5a0fe8 100644 --- a/Quest19-F/README.md +++ b/Quest19-F/README.md @@ -11,7 +11,7 @@ * [MDN - 웹어셈블리의 컨셉](https://developer.mozilla.org/ko/docs/WebAssembly/Concepts) * [MDN - Rust to wasm](https://developer.mozilla.org/ko/docs/WebAssembly/Rust_to_wasm) * [Learn Rust](https://www.rust-lang.org/learn) -* [Rust - crypto::sha2](https://docs.rs/rust-crypto/0.2.36/crypto/sha2/index.html) +* [Rust - sha2](https://docs.rs/sha2/0.9.5/sha2/) ## Checklist * 웹 어셈블리란 어떤 기술인가요? @@ -23,7 +23,7 @@ ## Quest * 텍스트 에디터 프로그램에서 각 탭의 내용의 SHA-256 해시를 실시간으로 계산하여 화면 아래에 표시해 보세요. * 해당 해시는 Rust로 작성된 웹 어셈블리 함수를 통해 계산되어야 합니다. - * 순수 자바스크립트로 계산할 때와의 퍼포먼스 차이를 체크해 보세요. + * 순수 자바스크립트로 계산할 때와의 퍼포먼스 차이를 체크해 보세요. (퍼포먼스 차이를 알아보는 데에 어떤 전략들이 있을까요?) ## Advanced * 웹 어셈블리 바이너리는 어떻게 구성되어 있을까요? From 01a6919d774c290b2ad27021adf0c8c283249470 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Sat, 24 Jul 2021 23:01:23 +0900 Subject: [PATCH 17/25] Quest 18B --- Quest17-B/README.md | 2 +- Quest18-B/README.md | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/Quest17-B/README.md b/Quest17-B/README.md index 72f4a4e21..c04321dcf 100644 --- a/Quest17-B/README.md +++ b/Quest17-B/README.md @@ -21,4 +21,4 @@ * AWS Codebuild를 이용하여, 특정 브랜치에 푸시를 하면 린트와 테스트를 거쳐 서버 이미지를 빌드한 뒤, 직전 퀘스트의 EC2 인스턴스에 배포되는 시스템을 만들어 보세요. ## Advanced -* +* 빅테크 회사들이 코드를 빌드하고 배포하는 시스템은 어떻게 설계되고 운영되고 있을까요? diff --git a/Quest18-B/README.md b/Quest18-B/README.md index 4d64bfb46..dba920f19 100644 --- a/Quest18-B/README.md +++ b/Quest18-B/README.md @@ -1,8 +1,27 @@ # Quest 18-B. 서비스의 운영: 로깅과 모니터링 ## Introduction +* 이번 퀘스트에서는 서비스의 운영을 위해 로그를 스트리밍하는 법에 대해 다루겠습니다. + ## Topics +* ElasticSearch +* AWS ElasticSearch Service +* Grafana + ## Resources +* https://www.elastic.co/kr/what-is/elasticsearch +* https://www.elastic.co/kr/webinars/getting-started-elasticsearch +* https://grafana.com/docs/grafana/latest/panels/ + ## Checklist +* ElasticSearch는 어떤 DB인가요? 기존의 RDB와 어떻게 다르고 어떤 장단점을 가지고 있나요? +* AWS의 ElasticSearch Service는 어떤 서비스인가요? ElasticSearch를 직접 설치하거나 elastic.co에서 직접 제공하는 클라우드 서비스와 비교하여 어떤 장단점이 있을까요? +* Grafana의 Panel 형식에는 어떤 것이 있을까요? 로그를 보기에 적합한 판넬은 어떤 형태일까요? + ## Quest +* 우리의 웹 서버가 로그를 남기도록 해 보세요. +* ElasticSearch Service 클러스터를 작은 사양으로 하나 만들고, 이 로그가 ElasticSearch로 들어가도록 해 보세요. +* Grafana를 이용해 ElasticSearch의 로그를 실시간으로 볼 수 있는 페이지를 만들어 보세요. + ## Advanced +* ElasticSearch와 Grafana는 어떤 라이센스로 배포되고 있을까요? AWS와 같은 클라우드 제공자들이 이러한 오픈소스를 서비스화 하는 것을 둘러싼 논란은 어떤 논점일까요? From 5115cb117b089043003250e7cbee761c4378fced Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Mon, 26 Jul 2021 00:40:33 +0900 Subject: [PATCH 18/25] Quest 19B --- Quest19-B/README.md | 22 ++++++++++++++++++++++ README.md | 2 +- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/Quest19-B/README.md b/Quest19-B/README.md index 6d44e47b2..b235fdb50 100644 --- a/Quest19-B/README.md +++ b/Quest19-B/README.md @@ -1,8 +1,30 @@ # Quest 19-B. 서버 아키텍쳐 패턴 ## Introduction +* 이번 퀘스트에서는 현대적인 서버 아키텍쳐 패턴에 대해 익혀 보도록 하겠습니다. + ## Topics +* Microservice Architecture +* Serverless Architecture +* AWS Lambda +* Service Mesh + ## Resources +* [Jeff Bezos의 이메일](https://news.hada.io/topic?id=638) +* [마이크로서비스란?](https://www.redhat.com/ko/topics/microservices/what-are-microservices) +* [AWS Lambda](https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/welcome.html) +* [AWS API Gateway](https://docs.aws.amazon.com/ko_kr/apigateway/latest/developerguide/welcome.html) + ## Checklist +* 마이크로서비스 아키텍쳐란 무엇일까요? 어떤 식으로 서비스를 구성할 수 있을까요? 어떤 장점을 가지고 있을까요? +* 서버리스 아키텍쳐란 무엇일까요? 어떤 식으로 서비스를 구성할 수 있을까요? 어떤 장점을 가지고 있을까요? +* AWS Lambda는 어떤 서비스일까요? 이러한 서비스는 어떤 특징을 가지고, 어디에 쓰일 수 있을까요? +* API Gateway는 어떤 서비스인가요? 어떤 설정을 할 수 있을까요? +* 많은 마이크로서비스들을 복잡하게 연결할 경우 관리상에 어떤 난점이 생길 수 있을까요? 서비스 메쉬는 무엇이고 이러한 난점을 어떻게 해결하려는 시도일까요? + ## Quest +* 메모장 시스템을 JWT 발급을 위한 마이크로서비스와 실제 비즈니스 로직을 처리하는 마이크로서비스로 나누어 보세요. +* JWT 토큰 발급의 역할을 하는 마이크로서비스를 AWS Lambda와 API Gateway를 이용하여 구축해 보세요. + ## Advanced +* Istio는 어떤 툴일까요? 이 툴을 Kubernetes와 함께 사용하여 어떤 구조를 구현할 수 있을까요? diff --git a/README.md b/README.md index 8f155b411..308c9b596 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ * [Quest 16-B. 도커와 컨테이너](./Quest16-B) * [Quest 17-B. 배포 파이프라인](./Quest17-B) * [Quest 18-B. 서비스의 운영: 로깅과 모니터링](./Quest18-B) - * [Quest 19-B. 서버 아키텍쳐 패턴](./Quest19-B) (모노리틱, 마이크로서비스, 서버리스 등) + * [Quest 19-B. 서버 아키텍쳐 패턴](./Quest19-B) * [Quest 20. 세상 밖으로](./Quest20)

From 0a1316f15de6283007be657d7f3a3990e8438b40 Mon Sep 17 00:00:00 2001 From: SeungYun Kivol Cho Date: Sun, 5 Sep 2021 16:47:29 +0900 Subject: [PATCH 19/25] Quest 18B Resources --- Quest18-B/README.md | 6 +- .../Quest 00. Hello, git/README.md | 35 ----------- .../Quest 00. Hello, git/sandbox/DUMMY.txt | 2 - .../Quest 01. Hello, HTML/README.md | 43 ------------- .../Quest 01. Hello, HTML/github.png | Bin 122125 -> 0 bytes .../Quest 01. Hello, HTML/skeleton.html | 26 -------- .../Quest 02. Hello, CSS/README.md | 48 -------------- .../Quest 02. Hello, CSS/layout1.png | Bin 24250 -> 0 bytes .../Quest 02. Hello, CSS/layout2.png | Bin 28826 -> 0 bytes .../Quest 02. Hello, CSS/layout3.png | Bin 41020 -> 0 bytes .../skeletons/layout1.css | 19 ------ .../skeletons/layout1.html | 34 ---------- .../skeletons/layout2.css | 24 ------- .../skeletons/layout2.html | 47 -------------- .../skeletons/layout3.css | 38 ----------- .../skeletons/layout3.html | 59 ------------------ .../skeletons/layout4.css | 38 ----------- .../skeletons/layout4.html | 59 ------------------ .../skeletons/layout5.css | 38 ----------- .../skeletons/layout5.html | 59 ------------------ .../Quest 03. Publishing CSS/README.md | 27 -------- .../Quest 03. Publishing CSS/github.png | Bin 122125 -> 0 bytes .../skeleton/skeleton.css | 13 ---- .../skeleton/skeleton.html | 10 --- .../Quest 04. Hello, JavaScript/README.md | 36 ----------- .../Quest 04. Hello, JavaScript/jsStars.png | Bin 1327 -> 0 bytes .../Quest 05. Playing with DOM/README.md | 28 --------- .../skeleton/quest.html | 47 -------------- .../README.md | 39 ------------ .../skeleton/desktop.css | 1 - .../skeleton/desktop.html | 18 ------ .../skeleton/desktop.js | 15 ----- .../README.md | 27 -------- .../skeleton/desktop.css | 1 - .../skeleton/desktop.html | 18 ------ .../skeleton/desktop.js | 15 ----- .../Quest 08. Midterm project/README.md | 19 ------ .../Quest 09. What is server/README.md | 39 ------------ .../Quest 10. Hello, node.js/README.md | 32 ---------- .../Quest 10. Hello, node.js/skeleton/app.js | 3 - .../Quest 11. My little web server/README.md | 28 --------- .../skeleton/server.js | 5 -- _old/Part 3. node.js/Quest 12. AJAX/README.md | 32 ---------- .../Quest 12. AJAX/skeleton/client/index.html | 14 ----- .../Quest 12. AJAX/skeleton/client/notepad.js | 3 - .../Quest 12. AJAX/skeleton/client/style.css | 3 - .../Quest 12. AJAX/skeleton/package.json | 6 -- .../Quest 12. AJAX/skeleton/server.js | 15 ----- .../Quest 13. Session and Login/README.md | 28 --------- .../skeleton/client/index.html | 14 ----- .../skeleton/client/notepad.js | 3 - .../skeleton/client/style.css | 3 - .../skeleton/package.json | 6 -- .../skeleton/server.js | 15 ----- .../Quest 14. Hello, MySQL/README.md | 30 --------- _old/Part 4. Database/Quest 15. ORM/README.md | 27 -------- .../Quest 16. Vue.js/README.md | 28 --------- .../Quest 17. Webpack/README.md | 28 --------- .../Quest 18. GraphQL/README.md | 32 ---------- .../Quest 19. Jest & Puppeteer/README.md | 36 ----------- .../Quest 20. Final Project/README.md | 31 --------- 61 files changed, 3 insertions(+), 1347 deletions(-) delete mode 100644 _old/Part 0. git/Quest 00. Hello, git/README.md delete mode 100644 _old/Part 0. git/Quest 00. Hello, git/sandbox/DUMMY.txt delete mode 100644 _old/Part 1. HTML & CSS/Quest 01. Hello, HTML/README.md delete mode 100644 _old/Part 1. HTML & CSS/Quest 01. Hello, HTML/github.png delete mode 100644 _old/Part 1. HTML & CSS/Quest 01. Hello, HTML/skeleton.html delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/README.md delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/layout1.png delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/layout2.png delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/layout3.png delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/skeletons/layout1.css delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/skeletons/layout1.html delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/skeletons/layout2.css delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/skeletons/layout2.html delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/skeletons/layout3.css delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/skeletons/layout3.html delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/skeletons/layout4.css delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/skeletons/layout4.html delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/skeletons/layout5.css delete mode 100644 _old/Part 1. HTML & CSS/Quest 02. Hello, CSS/skeletons/layout5.html delete mode 100644 _old/Part 1. HTML & CSS/Quest 03. Publishing CSS/README.md delete mode 100644 _old/Part 1. HTML & CSS/Quest 03. Publishing CSS/github.png delete mode 100644 _old/Part 1. HTML & CSS/Quest 03. Publishing CSS/skeleton/skeleton.css delete mode 100644 _old/Part 1. HTML & CSS/Quest 03. Publishing CSS/skeleton/skeleton.html delete mode 100644 _old/Part 2. JavaScript/Quest 04. Hello, JavaScript/README.md delete mode 100644 _old/Part 2. JavaScript/Quest 04. Hello, JavaScript/jsStars.png delete mode 100644 _old/Part 2. JavaScript/Quest 05. Playing with DOM/README.md delete mode 100644 _old/Part 2. JavaScript/Quest 05. Playing with DOM/skeleton/quest.html delete mode 100644 _old/Part 2. JavaScript/Quest 06. JavaScript OOP - Design/README.md delete mode 100644 _old/Part 2. JavaScript/Quest 06. JavaScript OOP - Design/skeleton/desktop.css delete mode 100644 _old/Part 2. JavaScript/Quest 06. JavaScript OOP - Design/skeleton/desktop.html delete mode 100644 _old/Part 2. JavaScript/Quest 06. JavaScript OOP - Design/skeleton/desktop.js delete mode 100644 _old/Part 2. JavaScript/Quest 07. JavaScript OOP - Practice/README.md delete mode 100644 _old/Part 2. JavaScript/Quest 07. JavaScript OOP - Practice/skeleton/desktop.css delete mode 100644 _old/Part 2. JavaScript/Quest 07. JavaScript OOP - Practice/skeleton/desktop.html delete mode 100644 _old/Part 2. JavaScript/Quest 07. JavaScript OOP - Practice/skeleton/desktop.js delete mode 100644 _old/Part 2. JavaScript/Quest 08. Midterm project/README.md delete mode 100644 _old/Part 3. node.js/Quest 09. What is server/README.md delete mode 100644 _old/Part 3. node.js/Quest 10. Hello, node.js/README.md delete mode 100644 _old/Part 3. node.js/Quest 10. Hello, node.js/skeleton/app.js delete mode 100644 _old/Part 3. node.js/Quest 11. My little web server/README.md delete mode 100644 _old/Part 3. node.js/Quest 11. My little web server/skeleton/server.js delete mode 100644 _old/Part 3. node.js/Quest 12. AJAX/README.md delete mode 100644 _old/Part 3. node.js/Quest 12. AJAX/skeleton/client/index.html delete mode 100644 _old/Part 3. node.js/Quest 12. AJAX/skeleton/client/notepad.js delete mode 100644 _old/Part 3. node.js/Quest 12. AJAX/skeleton/client/style.css delete mode 100644 _old/Part 3. node.js/Quest 12. AJAX/skeleton/package.json delete mode 100644 _old/Part 3. node.js/Quest 12. AJAX/skeleton/server.js delete mode 100644 _old/Part 3. node.js/Quest 13. Session and Login/README.md delete mode 100644 _old/Part 3. node.js/Quest 13. Session and Login/skeleton/client/index.html delete mode 100644 _old/Part 3. node.js/Quest 13. Session and Login/skeleton/client/notepad.js delete mode 100644 _old/Part 3. node.js/Quest 13. Session and Login/skeleton/client/style.css delete mode 100644 _old/Part 3. node.js/Quest 13. Session and Login/skeleton/package.json delete mode 100644 _old/Part 3. node.js/Quest 13. Session and Login/skeleton/server.js delete mode 100644 _old/Part 4. Database/Quest 14. Hello, MySQL/README.md delete mode 100644 _old/Part 4. Database/Quest 15. ORM/README.md delete mode 100644 _old/Part 5. Web 2018/Quest 16. Vue.js/README.md delete mode 100644 _old/Part 5. Web 2018/Quest 17. Webpack/README.md delete mode 100644 _old/Part 5. Web 2018/Quest 18. GraphQL/README.md delete mode 100644 _old/Part 5. Web 2018/Quest 19. Jest & Puppeteer/README.md delete mode 100644 _old/Part 6. Final Project/Quest 20. Final Project/README.md diff --git a/Quest18-B/README.md b/Quest18-B/README.md index dba920f19..865399d9d 100644 --- a/Quest18-B/README.md +++ b/Quest18-B/README.md @@ -9,9 +9,9 @@ * Grafana ## Resources -* https://www.elastic.co/kr/what-is/elasticsearch -* https://www.elastic.co/kr/webinars/getting-started-elasticsearch -* https://grafana.com/docs/grafana/latest/panels/ +* [ElasticSearch](https://www.elastic.co/kr/what-is/elasticsearch) +* [ElasticSearch 101](https://www.elastic.co/kr/webinars/getting-started-elasticsearch) +* [Grafana Panels](https://grafana.com/docs/grafana/latest/panels/) ## Checklist * ElasticSearch는 어떤 DB인가요? 기존의 RDB와 어떻게 다르고 어떤 장단점을 가지고 있나요? diff --git a/_old/Part 0. git/Quest 00. Hello, git/README.md b/_old/Part 0. git/Quest 00. Hello, git/README.md deleted file mode 100644 index 5d1e99763..000000000 --- a/_old/Part 0. git/Quest 00. Hello, git/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# Quest 00. Hello, git - - -## Introduction -* git은 2018년 현재 개발 생태계에서 가장 각광받고 있는 버전 관리 시스템입니다. 이번 퀘스트를 통해 git의 기초적인 사용법을 알아볼 예정입니다. - -## Topics -* git - * `git clone` - * `git add` - * `git commit` - * `git push` - * `git pull` - * `git branch` - * `git stash` -* GitHub - -## Resources -* [git, 분산 버전 관리 시스템](http://www.yes24.com/24/goods/3676100?scode=032&OzSrank=1), 인사이트 -* [GitHub 사용 설명서](http://www.yes24.com/24/Goods/17638082?Acode=101), 교학사 -* https://try.github.io -* http://pcottle.github.io/learnGitBranching - -## Checklist -* 버전 관리 시스템은 왜 필요한가요? -* git 외의 버전관리 시스템에는 무엇이 있나요? git은 그 시스템과 어떤 점이 다르며, 어떤 장점을 가지고 있나요? -* git의 `clone`/`add`/`commit`/`push`/`pull`/`branch`/`stash` 명령은 무엇이며 어떨 때 이용하나요? 그리고 어떻게 사용하나요? - -## Quest -* github에 가입한 뒤, [이 커리큘럼의 github 저장소](https://github.com/KnowRe/WebDevCurriculum)의 우상단의 Fork 버튼을 눌러 자신의 저장소에 복사해 둡니다. -* [GitHub Desktop](https://desktop.github.com/)을 다운받아 설치합니다. -* Windows의 경우 같이 설치된 git shell을, MacOSX의 경우 터미널을 실행시켜 커맨드라인에 들어간 뒤, 명령어를 이용하여 복사한 저장소를 clone합니다. - * 앞으로의 git 작업은 되도록 커맨드라인을 통해 하는 것을 권장합니다. -* 이 문서가 있는 폴더 바로 밑에 있는 sandbox 폴더에 파일을 추가한 후 커밋해 보기도 하고, 파일을 삭제해 보기도 하고, 수정해 보기도 하면서 각각의 단계에서 커밋했을 때 어떤 것들이 저장되는지를 확인합니다. -* `clone`/`add`/`commit`/`push`/`pull`/`branch`/`stash` 명령을 충분히 익혔다고 생각되면, 자신의 저장소에 이력을 push합니다. diff --git a/_old/Part 0. git/Quest 00. Hello, git/sandbox/DUMMY.txt b/_old/Part 0. git/Quest 00. Hello, git/sandbox/DUMMY.txt deleted file mode 100644 index 08a48b67c..000000000 --- a/_old/Part 0. git/Quest 00. Hello, git/sandbox/DUMMY.txt +++ /dev/null @@ -1,2 +0,0 @@ -Hello, git! -This is dummy text file! diff --git a/_old/Part 1. HTML & CSS/Quest 01. Hello, HTML/README.md b/_old/Part 1. HTML & CSS/Quest 01. Hello, HTML/README.md deleted file mode 100644 index cf6baa216..000000000 --- a/_old/Part 1. HTML & CSS/Quest 01. Hello, HTML/README.md +++ /dev/null @@ -1,43 +0,0 @@ -# Quest 01. Hello, HTML - - -## Introduction -* HTML은 HyperText Markup Language의 약자로, 웹 브라우저에 내용을 표시하기 위한 가장 기본적인 언어입니다. 이번 퀘스트를 통해 HTML에 관한 기초적인 사항들을 알아볼 예정입니다. - -## Topics -* 브라우저의 역사 - * Mosaic - * Netscape - * Internet Explorer - * Firefox - * Chrome - * Safari (for iOS) - * Edge -* HTML 표준의 역사 - * HTML 4.01 - * XHTML 1.0, XHTML 1.1 - * XHTML 2.0 - * HTML5 - * HTML 5.3 -* HTML 문서의 구조 -* HTML 문서의 엘리먼트 - * Semantic elements - * Block-level elements vs Inline elements - -## Resources -* [MDN - HTML](https://developer.mozilla.org/ko/docs/Web/HTML) -* [모던 웹 디자인을 위한 HTML5+CSS3 입문](http://www.yes24.com/24/Goods/15683538?Acode=101), 한빛미디어 -* [웹 디자인 2.0 고급 CSS](http://www.yes24.com/24/Goods/2808075?Acode=101), 에이콘출판사 -* [StatCounter Global Stats](http://gs.statcounter.com/) - -## Checklist -* HTML 4.x 이후의 HTML 표준의 변천사는 어떻게 되나요? -* MS와 IE는 왜 역사에 오점을 남기게 되었을까요? -* `
`과 `
`, `
`, `