diff --git a/PREFACE.md b/PREFACE.md new file mode 100644 index 000000000..3f69a1421 --- /dev/null +++ b/PREFACE.md @@ -0,0 +1,31 @@ +# Knowre 웹개발 커리큘럼 - 4th Edition, 2021 머리말 + +대 양적완화의 시대입니다. 시중에 돈이 넘쳐나고, 많은 테크기업들이 막대한 투자금으로 좋은 개발자들을 사냥하고 있습니다. 프로 엔지니어를 꿈꾸는 취업준비생들 사이에서는 한국의 IT회사들의 서열을 가리키는 단어도 유행하고 있고, 은근히 그것을 부추기며 그 서열 한켠에 본인의 회사를 끼워넣는 여론을 만들어 내는 사람들도 있습니다. + +구인 현장에서 한 해에도 세 자리수의 소프트웨어 엔지니어들을 면접하고 팀을 이끌어가는 입장에서, 창업 이후에 올해처럼 어렵고 치열했던 시기가 없었던 것 같습니다. 이런 시장에서 스타트업은 어떤 식으로 살아남아야 할까요? + +옛날 어떤 농구 감독이 했다는, 전설처럼 내려오는 이야기가 있습니다. '너희들은 공격과 수비 딱 두 가지가 안돼'.. 테크 회사의 엔지니어링 조직 역시 저는 마찬가지라고 생각합니다. 좋은 사람을 뽑고, 좋은 팀을 만들면 됩니다. 문제는 그것을 실행하는 방법이겠지요. + +좋은 사람을 뽑으려면 무엇보다 좋은 팀이 되어야 합니다. 하지만 좋은 팀이 되려면 좋은 사람들이 필요하죠. 이런 상황을 전산학에서는 데드락Deadlock 이라고 부릅니다. 이러한 데드락을 피하기 위해서는 무언가 다른 전략이 필요할 것입니다. + +이 커리큘럼은 그러한 질문에 대한 고민의 결과이기도 합니다. 이런 상황에서 스타트업이 취할 수 있는 전략 중 하나는, 좋은 사람들을 직접 키워내는 것입니다. 인력시장에는 포텐셜이 충만하지만 아직 더 완성될 부분이 남아있는 꿈나무 엔지니어들이 많습니다. 저는 이런 엔지니어들에게 좋은 엔지니어로 성장할 수 있는 계기를 제공하고 싶고, 그것은 본인에게도 팀에게도 아주 유익한 일일 것입니다. + +그렇기 때문에 저는 팀이 커지고 회사가 인수된 지금까지도 10년째 쉬지 않고 그러한 작업을 하고 있습니다. 정확히 세어보진 않았으나 40명 내외의 엔지니어가 저와 이 커리큘럼을 진행했습니다. 그 중에는 아직 저의 팀 동료로 남아있는 사람도 있고 다른 회사로 떠난 사람도 있지만 대부분이 훌륭한 엔지니어로 성장했고, 미국의 가장 큰 테크회사에서부터 스타트업의 키 엔지니어에 이르기까지 다양한 곳에서 활약하고 있습니다. + +## 이 커리큘럼을 진행하시는 신규 입사자 분들께 + +- 여러분들도 이 과정을 통해 프로페셔널 커리어를 설계할 수 있다면 더할나위 없이 좋겠습니다. 이 커리큘럼에서 다루는 지식들도 물론 중요하지만, 그 보다 더 중요한 것은 이 커리큘럼이 이야기하는 소프트웨어 엔지니어로서의 덕목Virtue입니다. +- 이 커리큘럼을 통해 얻은 지식들 중 어떤 것은 자주 쓰지 않아 잊거나 또 언젠가 다시 기억을 되살리게 될 때가 있을 것입니다. 하지만 이 커리큘럼을 통해 얻은 "공부하는 방법"을 잊지 않는다면 틀림없이 몇 년 후에 매력적인 엔지니어로 성장해 있을 것입니다. +- 현업 프로젝트의 일정에 압박받지 않고 기술의 깊은 부분을 공부할 수 있는 기회는 앞으로도 쉽게 오는 것이 아닐 것입니다. 아무쪼록 이번 과정을 통해 커리어를 바꿀만한 좋은 경험을 할 수 있기를 기원합니다. + +## 이 커리큘럼을 접하신 회사 밖의 분들께 + +- 이 커리큘럼을 통해 스터디를 진행하는 경우도 있고, 회사에서 신입의 온보딩을 돕는 경우도 있는 것으로 알고 있습니다. 어떤 경우에도 피드백은 아주 중요합니다. 피드백이 없다면 얻을 수 있는 부분이 제한적이기 때문입니다. +- 퀘스트의 결과물에 대한 피드백은 '이 결과물이 정말 최선인지, 더 개선한다면 어떤 부분을 개선할 수 있을지, 퀘스트를 수행하는 동안 의문스럽거나 꺼림칙한 부분이 있지는 않았는지'를 중심으로 진행하면 좋습니다. +- 체크리스트의 이론적인 부분에 대한 피드백은 여기에 소개된 링크 이외에도 웹의 방대한 자료를 참조하시면 좋으나, 너무 많은 자료가 오히려 갈피를 잡기 어렵게 만들 수도 있을 것입니다. 또한 '어디까지 파고들어야 하나'를 알 수 없어 막막하기도 할 것입니다. +- 그런 경우에는 너무 고민하기보다는 커리큘럼의 총 수행기간을 정해 놓고 진행하는 것도 한 가지 방법일 수 있습니다. Knowre의 경우 이 커리큘럼의 총 수행기간은 풀타임(주 40시간 할애) 기준 2~3개월 정도로 잡고 있으니, 그 정도의 시간을 들인다고 생각하시면 참고가 될 수 있을 것 같습니다. +- 정말 막막하신 경우 저에게 [이메일](mailto:kivoloid@gmail.com)을 보내주셔도 좋습니다. 시간이 닿는 범위에서 최대한 자세히 답변드리도록 하겠습니다. + +2011년 말, 2012년 초쯤 창업을 했으니 벌써 9~10년이 되었습니다. 그 세월동안 이 커리큘럼 역시 세 번의 변화를 거쳤습니다. 창업하여 첫 팀원을 받으며 초판을 작성한 후로 2015년과 2018년, 그리고 2021년에 크게 리뉴얼을 했으니 책으로 따지면 4판이라고 할 수 있겠습니다. 정확히 3년정도 주기로 리뉴얼을 했는데, 체감상 3년정도면 기술의 트렌드도 많이 바뀌고 중요한 부분도 달라져 기존의 커리큘럼으로 진행해 나가기에는 아쉽게 되는 것 같습니다. 그렇기 때문에 아마 다음 리뉴얼은 2024년쯤이 되지 않을까 싶습니다. + +자매품으로 데브옵스 신입 엔지니어를 위한 [DevOps 커리큘럼](https://github.com/Knowre-Dev/DevOpsCurriculum)도 새로 만들었으니 참고하시면 좋을 것 같습니다. 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/_old/Part 2. JavaScript/Quest 06. JavaScript OOP - Design/skeleton/desktop.css b/Quest04/skeleton/desktop.css similarity index 100% rename from _old/Part 2. JavaScript/Quest 06. JavaScript OOP - Design/skeleton/desktop.css rename to Quest04/skeleton/desktop.css diff --git a/_old/Part 2. JavaScript/Quest 06. JavaScript OOP - Design/skeleton/desktop.html b/Quest04/skeleton/desktop.html similarity index 100% rename from _old/Part 2. JavaScript/Quest 06. JavaScript OOP - Design/skeleton/desktop.html rename to Quest04/skeleton/desktop.html diff --git a/_old/Part 2. JavaScript/Quest 06. JavaScript OOP - Design/skeleton/desktop.js b/Quest04/skeleton/desktop.js similarity index 100% rename from _old/Part 2. JavaScript/Quest 06. JavaScript OOP - Design/skeleton/desktop.js rename to Quest04/skeleton/desktop.js diff --git a/_old/Part 3. node.js/Quest 12. AJAX/skeleton/client/index.html b/Quest05/skeleton/index.html similarity index 100% rename from _old/Part 3. node.js/Quest 12. AJAX/skeleton/client/index.html rename to Quest05/skeleton/index.html diff --git a/_old/Part 3. node.js/Quest 12. AJAX/skeleton/client/notepad.js b/Quest05/skeleton/notepad.js similarity index 100% rename from _old/Part 3. node.js/Quest 12. AJAX/skeleton/client/notepad.js rename to Quest05/skeleton/notepad.js diff --git a/_old/Part 3. node.js/Quest 12. AJAX/skeleton/client/style.css b/Quest05/skeleton/style.css similarity index 100% rename from _old/Part 3. node.js/Quest 12. AJAX/skeleton/client/style.css rename to Quest05/skeleton/style.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" +} 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); diff --git a/Quest09/README.md b/Quest09/README.md index 67a7e0393..7e2950c0c 100644 --- a/Quest09/README.md +++ b/Quest09/README.md @@ -1,8 +1,49 @@ # Quest 09. 서버와 클라이언트의 대화 ## Introduction +* 이번 퀘스트에서는 서버와 클라이언트의 연동, 그리고 웹 API의 설계 방법론 중 하나인 REST에 대해 알아보겠습니다. + ## Topics +* 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/) +* [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에 해당하는 과제입니다. 분량이 제법 많으니 한 번 기능별로 세부 일정을 정해 보고, 과제 완수 후에 그 일정이 얼마나 지켜졌는지 스스로 한 번 돌아보세요. + * 이번 퀘스트부터는 skeleton을 제공하지 않습니다! +* Quest 05에서 만든 메모장 시스템을 서버와 연동하는 어플리케이션으로 만들어 보겠습니다. + * 클라이언트는 `fetch` API를 통해 서버와 통신합니다. + * 서버는 8000번 포트에 REST API를 엔드포인트로 제공하여, 클라이언트의 요청에 응답합니다. + * 클라이언트로부터 온 새 파일 저장, 삭제, 다른 이름으로 저장 등의 요청을 받아 서버의 로컬 파일시스템을 통해 저장되어야 합니다. + * 서버에 어떤 식으로 저장하는 것이 좋을까요? + * API 서버 외에, 클라이언트를 띄우기 위한 서버가 3000번 포트로 따로 떠서 API 서버와 서로 통신할 수 있어야 합니다. + * Express나 Fastify 등의 프레임워크를 사용해도 무방합니다. +* 클라이언트 프로젝트와 서버 프로젝트 모두 `npm i`만으로 디펜던시를 설치하고 바로 실행될 수 있게 제출되어야 합니다. +* 이번 퀘스트부터는 앞의 퀘스트의 결과물에 의존적인 경우가 많습니다. 제출 폴더를 직접 만들어 제출해 보세요! + ## Advanced +* `fetch` API는 구현할 수 없지만 `XMLHttpRequest`로는 구현할 수 있는 기능이 있을까요? +* REST 이전에는 HTTP API에 어떤 패러다임들이 있었을까요? REST의 대안으로는 어떤 것들이 제시되고 있을까요? 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란 무엇인가요? 이것을 사용할 때의 장점과 단점은 무엇일까요? +* 이전에 쓰이던 해시함수들에는 어떤 것이 있을까요? 패스워드 해싱의 추세의 역사는 어떻게 이어져왔나요? diff --git a/Quest12/README.md b/Quest12/README.md index 749182021..790143a43 100644 --- a/Quest12/README.md +++ b/Quest12/README.md @@ -1,8 +1,32 @@ # Quest 12. 보안의 기초 ## Introduction +* 이번 퀘스트에서는 가장 기초적인 웹 서비스 보안에 대해 알아보겠습니다. + ## Topics +* XSS, CSRF, SQL Injection +* HTTPS, TLS + ## Resources +* [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/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..835469b61 100644 --- a/Quest14/README.md +++ b/Quest14/README.md @@ -1,8 +1,31 @@ # Quest 14. 정적 분석: 타입스크립트와 린트 시스템 ## Introduction +* 이번 퀘스트에서는 타입스크립트와 린트 시스템을 통해 코드에 대한 정적분석의 장점에 대해 알아보겠습니다. + ## Topics +* Lint + * ESLint +* TypeScript + ## Resources +* [ESLint](https://eslint.org/) +* [TypeScript](https://www.typescriptlang.org/) + ## Checklist +* 코드를 린팅하는 것의 장점은 무엇일까요? + * 린트 규칙은 어떻게 설정하는 것이 좋을까요? 너무 빡빡한 규칙과 너무 헐거운 규칙 사이에서 어떻게 밸런스를 잡아야 할까요? +* 타입스크립트는 어떤 언어인가요? + * 타입스크립트를 사용했을 때 얻을 수 있는 장점은 무엇인가요? + * 타입스크립트를 사용하면서 타입이 없는 라이브러리나 프레임워크를 사용해야 할 경우에는 어떻게 해야 할까요? + * any 타입을 남용하는 것은 왜 좋지 않을까요? +* 린트와 빌드 등의 과정을 개발 싸이클에서 편하게 수행하려면 어떻게 하는 것이 좋을까요? + ## Quest +* 메모장 시스템에 린트 시스템을 적용해 보세요. +* 메모장 시스템을 타입스크립트 기반으로 수정해 보세요. +* `package.json` 파일의 `scripts` 항목을 이용하여 린트와 빌드 등의 작업을 스크립트화 해 보세요. + ## Advanced +* 자바스크립트 코드에 대한 정적분석은 어떤 과정을 통해 이루어질까요? + * 이러한 정적분석을 수행해 주는 핵심 역할을 하는 npm 패키지는 어떤 것이 있을까요? 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 +* 테스트의 커버리지는 어떤 개념일까요? 프로젝트에서 테스트의 커버리지는 어떻게 접근하는 것이 좋을까요? 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 +* 도커 외의 컨테이너 기술의 대안은 어떤 것이 있을까요? +* 맥이나 윈도우에서도 컨테이너 기술을 사용할 수 있는 원리는 무엇일까요? diff --git a/Quest16-F/README.md b/Quest16-F/README.md index da5525a74..2713f7458 100644 --- a/Quest16-F/README.md +++ b/Quest16-F/README.md @@ -1,8 +1,36 @@ # Quest 16-F. 컴포넌트 기반 개발 ## Introduction +* 이번 퀘스트에서는 Vue.js 프레임워크를 통해 컴포넌트 기반의 웹 클라이언트 개발 방법론을 더 자세히 알아보겠습니다. + ## Topics +* Vue.js framework +* vuex +* 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.js 시스템에 타입스크립트는 어떤 식으로 적용할 수 있을까요? + * 컴포넌트간에 데이터를 주고받으려면 어떤 식으로 하는 것이 좋을까요? + * `vue-cli`와 같은 Vue의 Boilterplating 기능을 이용하셔서 세팅하시면 됩니다. + ## Advanced +* React와 Angular는 어떤 프레임워크이고 어떤 특징을 가지고 있을까요? Vue와는 어떤 점이 다를까요? +* Web Component는 어떤 개념인가요? 이 개념이 Vue나 React를 대체하게 될까요? +* Reactive Programming이란 무엇일까요? diff --git a/Quest17-B/README.md b/Quest17-B/README.md index 471cf547a..c04321dcf 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 +* 빅테크 회사들이 코드를 빌드하고 배포하는 시스템은 어떻게 설계되고 운영되고 있을까요? 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 이전과 이후에는 어떤 번들러가 있었을까요? 각각의 장단점은 무엇일까요? diff --git a/Quest18-B/README.md b/Quest18-B/README.md index 4d64bfb46..6b9134541 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 +* [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와 어떻게 다르고 어떤 장단점을 가지고 있나요? +* AWS의 ElasticSearch Service는 어떤 서비스인가요? ElasticSearch를 직접 설치하거나 elastic.co에서 직접 제공하는 클라우드 서비스와 비교하여 어떤 장단점이 있을까요? +* Grafana의 Panel 형식에는 어떤 것이 있을까요? 로그를 보기에 적합한 판넬은 어떤 형태일까요? + ## Quest +* 우리의 웹 서버가 stdout으로 적절한 로그를 남기도록 해 보세요. +* ElasticSearch Service 클러스터를 작은 사양으로 하나 만들고, 도커 컨테이너의 stdout으로 출력된 로그가 ElasticSearch로 스트리밍 되도록 해 보세요. +* Grafana를 이용해 ElasticSearch의 로그를 실시간으로 볼 수 있는 페이지를 만들어 보세요. + ## Advanced +* ElasticSearch와 Grafana는 어떤 라이센스로 배포되고 있을까요? AWS와 같은 클라우드 제공자들이 이러한 오픈소스를 서비스화 하는 것을 둘러싼 논란은 어떤 논점일까요? diff --git a/Quest18-F/README.md b/Quest18-F/README.md index 5bf2d82d6..13d4180a0 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/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/Quest19-F/README.md b/Quest19-F/README.md index 226d5387f..a8a5a0fe8 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 - sha2](https://docs.rs/sha2/0.9.5/sha2/) + ## Checklist +* 웹 어셈블리란 어떤 기술인가요? +* 웹 어셈블리 모듈을 웹 프론트엔드 상에서 실행시키려면 어떻게 해야 할까요? +* Rust란 어떤 특징을 가진 프로그래밍 언어인가요? +* 웹 어셈블리 모듈을 만드는 방법에는 어떤 것들이 있나요? +* 웹 어셈블리가 할 수 없는 작업에는 무엇이 있을까요? 웹 어셈블리는 어떤 목적에 주로 쓰이게 될까요? + ## Quest +* 텍스트 에디터 프로그램에서 각 탭의 내용의 SHA-256 해시를 실시간으로 계산하여 화면 아래에 표시해 보세요. + * 해당 해시는 Rust로 작성된 웹 어셈블리 함수를 통해 계산되어야 합니다. + * 순수 자바스크립트로 계산할 때와의 퍼포먼스 차이를 체크해 보세요. (퍼포먼스 차이를 알아보는 데에 어떤 전략들이 있을까요?) + ## Advanced +* 웹 어셈블리 바이너리는 어떻게 구성되어 있을까요? 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에 생성했던 리소스가 있다면 모두 삭제해 보세요. +* 이제 동료들과 함께 일할 시간입니다! diff --git a/README.md b/README.md index aeb4e6d8f..a69c76876 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,20 @@ -# Knowre Web Development Curriculum 2021 +# Knowre 웹개발 커리큘럼 - 4th Edition, 2021 ## 소개 * Knowre의 신입 웹 개발자 교육을 위한 웹 개발 교육 커리큘럼의 2021년 버전입니다. * 이 커리큘럼을 통해 신입 개발자들은 git, HTML, CSS, front-end JavaScript, node.js, MySQL, 그리고 더 나아가 선택된 몇 가지의 최신 웹 기술과 그 작동 원리에 대해 익히게 됩니다. +### 광고 + +* Knowre에서 수시로 신입/경력 엔지니어를 모시고 있습니다. [이 링크](https://www.wanted.co.kr/company/96) 를 참고해 주십시오! + + +## 머리말 + +* [머리말](./PREFACE.md) + + ## 목차
펼치기 @@ -19,23 +29,23 @@ * [Quest 06. 인터넷의 이해](./Quest06) * [Quest 07. node.js의 기초](./Quest07) * [Quest 08. 웹 API의 기초: REST와 CRUD](./Quest08) - * [Quest 09. 서버와 클라이언트의 대화](./Quest09) (AJAX/fetch()/async-await) - * [Quest 10. 인증의 이해](./Quest10) (쿠키, 세션, 토큰) + * [Quest 09. 서버와 클라이언트의 대화](./Quest09) + * [Quest 10. 인증의 이해](./Quest10) * [Quest 11. RDB의 기초와 ORM](./Quest11) * [Quest 12. 보안의 기초](./Quest12) * [Quest 13. 웹 API의 응용과 GraphQL](./Quest13) * [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) * [Quest 17-B. 배포 파이프라인](./Quest17-B) * [Quest 18-B. 서비스의 운영: 로깅과 모니터링](./Quest18-B) - * [Quest 19-B. 서버 아키텍쳐 패턴](./Quest19-B) (모노리틱, 마이크로서비스, 서버리스 등) + * [Quest 19-B. 서버 아키텍쳐 패턴](./Quest19-B) * [Quest 20. 세상 밖으로](./Quest20)

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는 왜 역사에 오점을 남기게 되었을까요? -* `
`과 `
`, `
`, `