├── .gitignore ├── LICENSE ├── PREFACE.md ├── Quest00 ├── README.md └── sandbox │ └── example.txt ├── Quest01 ├── README.md ├── screen.png └── skeleton │ └── index.html ├── Quest02 ├── README.md └── screen.png ├── Quest03 ├── README.md ├── jsStars.png └── skeleton │ └── quest.html ├── Quest04 ├── README.md └── skeleton │ ├── desktop.css │ ├── desktop.html │ └── desktop.js ├── Quest05 ├── README.md └── skeleton │ ├── index.html │ ├── notepad.js │ └── style.css ├── Quest06 └── README.md ├── Quest07 ├── README.md └── skeleton │ ├── cjs-my-project │ ├── index.js │ └── package.json │ ├── cjs-package │ ├── index.js │ └── package.json │ ├── esm-my-project │ ├── index.mjs │ └── package.json │ └── esm-package │ ├── index.mjs │ └── package.json ├── Quest08 ├── README.md └── skeleton │ ├── package.json │ └── server.mjs ├── Quest09 └── README.md ├── Quest10 └── README.md ├── Quest11 └── README.md ├── Quest12 └── README.md ├── Quest13 └── README.md ├── Quest14 └── README.md ├── Quest15 └── README.md ├── Quest16-B └── README.md ├── Quest16-F └── README.md ├── Quest17-B └── README.md ├── Quest17-F └── README.md ├── Quest18-B └── README.md ├── Quest18-F └── README.md ├── Quest19-B └── README.md ├── Quest19-F └── README.md ├── Quest20 └── README.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | bower_components/* 3 | **/node_modules/* 4 | **/bower_components/* 5 | 6 | **/.DS_Store 7 | **/Thumbs.db 8 | npm-debug.log 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021 KnowRe <[http://about.knowre.com](http://www.knowre.com)> 4 | Copyright (c) 2021 SeungYun Cho <[http://kivol.net](http://kivol.net)> 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /PREFACE.md: -------------------------------------------------------------------------------- 1 | # Knowre 웹개발 커리큘럼 - 4th Edition, 2021 머리말 2 | 3 | 대 양적완화의 시대입니다. 시중에 돈이 넘쳐나고, 많은 테크기업들이 막대한 투자금으로 좋은 개발자들을 사냥하고 있습니다. 프로 엔지니어를 꿈꾸는 취업준비생들 사이에서는 한국의 IT회사들의 서열을 가리키는 단어도 유행하고 있고, 은근히 그것을 부추기며 그 서열 한켠에 본인의 회사를 끼워넣는 여론을 만들어 내는 사람들도 있습니다. 4 | 5 | 구인 현장에서 한 해에도 세 자리수의 소프트웨어 엔지니어들을 면접하고 팀을 이끌어가는 입장에서, 창업 이후에 올해처럼 어렵고 치열했던 시기가 없었던 것 같습니다. 이런 시장에서 스타트업은 어떤 식으로 살아남아야 할까요? 6 | 7 | 옛날 어떤 농구 감독이 했다는, 전설처럼 내려오는 이야기가 있습니다. '너희들은 공격과 수비 딱 두 가지가 안돼'.. 테크 회사의 엔지니어링 조직 역시 저는 마찬가지라고 생각합니다. 좋은 사람을 뽑고, 좋은 팀을 만들면 됩니다. 문제는 그것을 실행하는 방법이겠지요. 8 | 9 | 좋은 사람을 뽑으려면 무엇보다 좋은 팀이 되어야 합니다. 하지만 좋은 팀이 되려면 좋은 사람들이 필요하죠. 이런 상황을 전산학에서는 데드락Deadlock 이라고 부릅니다. 이러한 데드락을 피하기 위해서는 무언가 다른 전략이 필요할 것입니다. 10 | 11 | 이 커리큘럼은 그러한 질문에 대한 고민의 결과이기도 합니다. 이런 상황에서 스타트업이 취할 수 있는 전략 중 하나는, 좋은 사람들을 직접 키워내는 것입니다. 인력시장에는 포텐셜이 충만하지만 아직 더 완성될 부분이 남아있는 꿈나무 엔지니어들이 많습니다. 저는 이런 엔지니어들에게 좋은 엔지니어로 성장할 수 있는 계기를 제공하고 싶고, 그것은 본인에게도 팀에게도 아주 유익한 일일 것입니다. 12 | 13 | 그렇기 때문에 저는 팀이 커지고 회사가 인수된 지금까지도 10년째 쉬지 않고 그러한 작업을 하고 있습니다. 정확히 세어보진 않았으나 40명 내외의 엔지니어가 저와 이 커리큘럼을 진행했습니다. 그 중에는 아직 저의 팀 동료로 남아있는 사람도 있고 다른 회사로 떠난 사람도 있지만 대부분이 훌륭한 엔지니어로 성장했고, 미국의 가장 큰 테크회사에서부터 스타트업의 키 엔지니어에 이르기까지 다양한 곳에서 활약하고 있습니다. 14 | 15 | ## 이 커리큘럼을 진행하시는 신규 입사자 분들께 16 | 17 | - 여러분들도 이 과정을 통해 프로페셔널 커리어를 설계할 수 있다면 더할나위 없이 좋겠습니다. 이 커리큘럼에서 다루는 지식들도 물론 중요하지만, 그 보다 더 중요한 것은 이 커리큘럼이 이야기하는 소프트웨어 엔지니어로서의 덕목Virtue입니다. 18 | - 이 커리큘럼을 통해 얻은 지식들 중 어떤 것은 자주 쓰지 않아 잊거나 또 언젠가 다시 기억을 되살리게 될 때가 있을 것입니다. 하지만 이 커리큘럼을 통해 얻은 "공부하는 방법"을 잊지 않는다면 틀림없이 몇 년 후에 매력적인 엔지니어로 성장해 있을 것입니다. 19 | - 현업 프로젝트의 일정에 압박받지 않고 기술의 깊은 부분을 공부할 수 있는 기회는 앞으로도 쉽게 오는 것이 아닐 것입니다. 아무쪼록 이번 과정을 통해 커리어를 바꿀만한 좋은 경험을 할 수 있기를 기원합니다. 20 | 21 | ## 이 커리큘럼을 접하신 회사 밖의 분들께 22 | 23 | - 이 커리큘럼을 통해 스터디를 진행하는 경우도 있고, 회사에서 신입의 온보딩을 돕는 경우도 있는 것으로 알고 있습니다. 어떤 경우에도 피드백은 아주 중요합니다. 피드백이 없다면 얻을 수 있는 부분이 제한적이기 때문입니다. 24 | - 퀘스트의 결과물에 대한 피드백은 '이 결과물이 정말 최선인지, 더 개선한다면 어떤 부분을 개선할 수 있을지, 퀘스트를 수행하는 동안 의문스럽거나 꺼림칙한 부분이 있지는 않았는지'를 중심으로 진행하면 좋습니다. 25 | - 체크리스트의 이론적인 부분에 대한 피드백은 여기에 소개된 링크 이외에도 웹의 방대한 자료를 참조하시면 좋으나, 너무 많은 자료가 오히려 갈피를 잡기 어렵게 만들 수도 있을 것입니다. 또한 '어디까지 파고들어야 하나'를 알 수 없어 막막하기도 할 것입니다. 26 | - 그런 경우에는 너무 고민하기보다는 커리큘럼의 총 수행기간을 정해 놓고 진행하는 것도 한 가지 방법일 수 있습니다. Knowre의 경우 이 커리큘럼의 총 수행기간은 풀타임(주 40시간 할애) 기준 2~3개월 정도로 잡고 있으니, 그 정도의 시간을 들인다고 생각하시면 참고가 될 수 있을 것 같습니다. 27 | - 정말 막막하신 경우 저에게 [이메일](mailto:kivoloid@gmail.com)을 보내주셔도 좋습니다. 시간이 닿는 범위에서 최대한 자세히 답변드리도록 하겠습니다. 28 | 29 | 2011년 말, 2012년 초쯤 창업을 했으니 벌써 9~10년이 되었습니다. 그 세월동안 이 커리큘럼 역시 세 번의 변화를 거쳤습니다. 창업하여 첫 팀원을 받으며 초판을 작성한 후로 2015년과 2018년, 그리고 2021년에 크게 리뉴얼을 했으니 책으로 따지면 4판이라고 할 수 있겠습니다. 정확히 3년정도 주기로 리뉴얼을 했는데, 체감상 3년정도면 기술의 트렌드도 많이 바뀌고 중요한 부분도 달라져 기존의 커리큘럼으로 진행해 나가기에는 아쉽게 되는 것 같습니다. 그렇기 때문에 아마 다음 리뉴얼은 2024년쯤이 되지 않을까 싶습니다. 30 | 31 | 자매품으로 데브옵스 신입 엔지니어를 위한 [DevOps 커리큘럼](https://github.com/Knowre-Dev/DevOpsCurriculum)도 새로 만들었으니 참고하시면 좋을 것 같습니다. 32 | -------------------------------------------------------------------------------- /Quest00/README.md: -------------------------------------------------------------------------------- 1 | # Quest 00. 형상관리 시스템 2 | 3 | ## Introduction 4 | * git은 2021년 현재 개발 생태계에서 가장 각광받고 있는 버전 관리 시스템입니다. 이번 퀘스트를 통해 git의 기초적인 사용법을 알아볼 예정입니다. 5 | 6 | ## Topics 7 | * git 8 | * `git clone`, `git add`, `git commit`, `git push`, `git pull`, `git branch`, `git stash` 명령 9 | * `.git` 폴더 10 | * GitHub 11 | 12 | ## Resources 13 | * [Resources to learn Git](https://try.github.io) 14 | * [Learn Git Branching](https://learngitbranching.js.org/?locale=ko) 15 | * [Inside Git: .Git directory](https://githowto.com/git_internals_git_directory) 16 | 17 | ## Checklist 18 | * 형상관리 시스템은 왜 나오게 되었을까요? 19 | * git은 어떤 형상관리 시스템이고 어떤 특징을 가지고 있을까요? 분산형 형상관리 시스템이란 무엇일까요? 20 | * git은 어떻게 개발되게 되었을까요? git이 분산형 시스템을 채택한 이유는 무엇일까요? 21 | * git과 GitHub은 어떻게 다를까요? 22 | * git의 clone/add/commit/push/pull/branch/stash 명령은 무엇이며 어떨 때 이용하나요? 그리고 어떻게 사용하나요? 23 | * git의 Object, Commit, Head, Branch, Tag는 어떤 개념일까요? git 시스템은 프로젝트의 히스토리를 어떻게 저장할까요? 24 | * 리모트 git 저장소에 원하지 않는 파일이 올라갔을 때 이를 되돌리려면 어떻게 해야 할까요? 25 | 26 | ## Quest 27 | * GitHub에 가입한 뒤, [이 커리큘럼의 GitHub 저장소](https://github.com/KnowRe-Dev/WebDevCurriculum)의 우상단의 Fork 버튼을 눌러 자신의 저장소에 복사해 둡니다. 28 | * Windows의 경우 같이 설치된 git shell을, MacOSX의 경우 터미널을 실행시켜 커맨드라인에 들어간 뒤, 명령어를 이용하여 복사한 저장소를 clone합니다. 29 | * 앞으로의 git 작업은 되도록 커맨드라인을 통해 하는 것을 권장합니다. 30 | * 이 문서가 있는 폴더 바로 밑에 있는 sandbox 폴더에 파일을 추가한 후 커밋해 보기도 하고, 파일을 삭제해 보기도 하고, 수정해 보기도 하면서 각각의 단계에서 커밋했을 때 어떤 것들이 저장되는지를 확인합니다. 31 | * `clone`/`add`/`commit`/`push`/`pull`/`branch`/`stash` 명령을 충분히 익혔다고 생각되면, 자신의 저장소에 이력을 push합니다. 32 | 33 | ## Advanced 34 | * Mercurial은 어떤 형상관리 시스템일까요? 어떤 장점이 있을까요? 35 | * 실리콘밸리의 테크 대기업들은 어떤 형상관리 시스템을 쓰고 있을까요? 36 | -------------------------------------------------------------------------------- /Quest00/sandbox/example.txt: -------------------------------------------------------------------------------- 1 | Hello World! 2 | -------------------------------------------------------------------------------- /Quest01/README.md: -------------------------------------------------------------------------------- 1 | # Quest 01. HTML과 웹의 기초 2 | 3 | ## Introduction 4 | * HTML은 HyperText Markup Language의 약자로, 웹 브라우저에 내용을 표시하기 위한 가장 기본적인 언어입니다. 이번 퀘스트를 통해 HTML에 관한 기초적인 사항들을 알아볼 예정입니다. 5 | 6 | ## Topics 7 | * HTML의 역사 8 | * HTML 4.01, XHTML 1.0, XHTML 1.1 9 | * XHTML 2.0과 HTML5의 대립 10 | * HTML5와 현재 11 | * 브라우저의 역사 12 | * Mosaic와 Netscape 13 | * Internet Explorer의 독점시대 14 | * Firefox와 Chrome의 등장 15 | * iOS Safari와 모바일 환경의 브라우저 16 | * Edge와 Whale 등의 최근의 Chromium 계열 브라우저 17 | * HTML 문서의 구조 18 | * ``, ``와 `` 등의 HTML 문서의 기본 구조 19 | * 시맨틱 엘리먼트 20 | * 블록 엘리먼트와 인라인 엘리먼트의 차이 21 | 22 | ## Resources 23 | * [MDN - HTML](https://developer.mozilla.org/ko/docs/Web/HTML) 24 | * [HTML For Beginners](https://html.com/) 25 | * [History of the web browser](https://en.wikipedia.org/wiki/History_of_the_web_browser) 26 | * [History of HTML](https://en.wikipedia.org/wiki/HTML) 27 | * [StatCounter](https://gs.statcounter.com/) 28 | 29 | ## Checklist 30 | * HTML 표준의 역사는 어떻게 될까요? 31 | * HTML 표준을 지키는 것은 왜 중요할까요? 32 | * XHTML 2.0은 왜 세상에 나오지 못하게 되었을까요? 33 | * HTML5 표준은 어떤 과정을 통해 정해질까요? 34 | * 브라우저의 역사는 어떻게 될까요? 35 | * Internet Explorer가 브라우저 시장을 독점하면서 어떤 문제가 일어났고, 이 문제는 어떻게 해결되었을까요? 36 | * 현재 시점에 브라우저별 점유율은 어떻게 될까요? 이 브라우저별 점유율을 알아보는 것은 왜 중요할까요? 37 | * 브라우저 엔진(렌더링 엔진)이란 무엇일까요? 어떤 브라우저들이 어떤 엔진을 쓸까요? 38 | * 모바일 시대 이후, 최근에 출시된 브라우저들은 어떤 특징을 가지고 있을까요? 39 | * HTML 문서는 어떤 구조로 이루어져 있나요? 40 | * ``에 자주 들어가는 엘리먼트들은 어떤 것이 있고, 어떤 역할을 할까요? 41 | * 시맨틱 태그는 무엇일까요? 42 | * 시맨틱 엘리먼트를 사용하면 어떤 점이 좋을까요? 43 | * `
`과 `
`, `
`, `