├── .github ├── ISSUE_TEMPLATE │ ├── step1.md │ ├── step2.md │ ├── step3.md │ ├── step4.md │ ├── step5.md │ ├── step6.md │ └── step7.md ├── PULL_REQUEST_TEMPLATE │ ├── step1.md │ ├── step2.md │ ├── step3.md │ ├── step4.md │ ├── step5.md │ ├── step6.md │ ├── step7.md │ └── step8.md └── pull_request_template.md ├── .gitignore ├── README.md ├── docs ├── assets │ └── js-subway-admin-sample.png ├── step1.md ├── step2.md ├── step3.md ├── step4.md ├── step5.md ├── step6.md ├── step7.md └── step8.md └── pull_request_template.md /.github/ISSUE_TEMPLATE/step1.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Step1 3 | about: 프레임워크에 대한 이해 4 | title: '[Step1] ' 5 | labels: step1 6 | assignees: '' 7 | 8 | --- 9 | 10 | <!-- 별도의 링크를 첨부해도 무방합니다 --> 11 | 12 | ## 기술에 대한 조사 13 | 14 | ### 브라우저, HTTP Protocal, HTML 등의 연관성에 대해 조사하기 (5문장 요약) 15 | 16 | ### DOM(Document Object Model) 조사하기 (3문장 요약) 17 | 18 | ### BOM(Browser Object Model) 조사하기 (3문장 요약) 19 | 20 | ### CSS(Cascading Style Sheet) 조사하기 (3문장 요약) 21 | 22 | ### Javascript 조사하기 (3문장 요약) 23 | 24 | ### ECMAScript 조사하기 (3문장 요약) 25 | 26 | ### Javascript Framework가 등장한 배경에 대해 조사하기 (5문장 요약) 27 | 28 | ### Vue와 React의 장단점에 대해 비교하기 (5가지) 29 | 30 | 31 | ## 비즈니스에 대한 고찰 32 | 33 | > 💡 나만의 생각을 이야기해봅시다. 34 | 35 | ### 프론트엔드 프레임워크가 등장하게 된 배경은 무엇일까? 36 | 37 | ### 프론트엔드 개발자들은 현업에서 어떤 일을 하게 될까? 38 | 39 | ### 프론트엔드 개발자의 역할은 무엇일까? 40 | 41 | ### 프론트엔드 씬에서 변하지 않는 기술은 무엇일까? 42 | 43 | ### 장기 생존을 위해 어떤 공부를 하면 좋을까? 44 | 45 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/step2.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Step2 3 | about: Vanilla Javascript로 무작정 TodoList 만들기 4 | title: '[Step2] <title>' 5 | labels: step2 6 | assignees: '' 7 | 8 | --- 9 | 10 | <!-- 별도의 링크를 첨부해도 무방합니다 --> 11 | 12 | ## Javascript Array Method에 대해 조사하고 간단한 예제 코드 추가하기 13 | 14 | ### Array.prototype.map() 15 | 16 | ### Array.prototype.filter() 17 | 18 | ### Array.prototype.reduce() 19 | 20 | ### Array.prototype.forEach() 21 | 22 | ### Array.prototype.some() 23 | 24 | ### Array.prototype.every() 25 | 26 | ### Array.prototype.find() 27 | 28 | ### Array.prototype.findIndex() 29 | 30 | ### Array.prototype.includes() 31 | 32 | ### Array.prototype.push() 33 | 34 | ### Array.prototype.splice() 35 | 36 | ### Array.prototype.slice() 37 | 38 | ### Array.prototype.shift() 39 | 40 | ### Array.prototype.unshift() 41 | 42 | ### Array.prototype.concat() 43 | 44 | ### Array.prototype.join() 45 | 46 | ### Array.prototype.reverse() 47 | 48 | ### Array.prototype.sort() 49 | 50 | ### Array.prototype.flat() 51 | 52 | ### Array.prototype.flatMap() 53 | 54 | ### Array.prototype.fill() 55 | 56 | ### Array.prototype.pop() 57 | 58 | ### Array.prototype.indexOf() 59 | 60 | ### Array.prototype.from() 61 | 62 | ## ECMAScript와 Javascript의 차이점에 대해 조사하기 (5문장 요약) 63 | 64 | ## Javascript의 프로토타입에 대해 조사하기 (5문장 요약) 65 | 66 | ## Javascript의 클로저에 대해 조사하기 (5문장 요약) 67 | 68 | ## Javascript의 스코프에 대해 조사하기 (5문장 요약) 69 | 70 | ## Javascript의 this에 대해 조사하기 (5문장 요약) 71 | 72 | ## Javascript의 실행컨텍스트에 대해 조사하기 (10문장 요약) 73 | 74 | ## Javascript의 이벤트에 대해 조사하기 (5문장 요약) 75 | 76 | ### 이벤트 위임 77 | 78 | ### 이벤트 버블링 79 | 80 | ### 이벤트 캡처링 81 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/step3.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Step3 3 | about: Component 구성하기 4 | title: '[Step3] <title>' 5 | labels: step3 6 | assignees: '' 7 | 8 | --- 9 | 10 | <!-- 별도의 링크를 첨부해도 무방합니다 --> 11 | 12 | ## ES5의 Class와 ES6의 Class의 차이점에 대해 조사하기 (5가지) 13 | 14 | ## ES6의 Class만이 가지고 있는 특징과 장점에 대해 조사하기 (3가지) 15 | 16 | ## 객체지향 5대원칙에 대해 조사하기 (각각 5문장 요약) 17 | 18 | ### SRP(Single Responsibility Principle) 19 | 20 | ### OCP(Open-Closed Principle) 21 | 22 | ### LSP(Liskov Substitution Principle) 23 | 24 | ### ISP(Interface Segregation Principle) 25 | 26 | ### DIP(Dependency Inversion Principle) 27 | 28 | 29 | ## 다형성, 캡슐화, 추상화, 상속, 인터페이스 등에 대해 조사하기 (각각 5문장 요약) 30 | 31 | ### 다형성 32 | 33 | ### 캡슐화 34 | 35 | ### 추상화 36 | 37 | ### 상속 38 | 39 | ### 인터페이스 40 | 41 | 42 | ## MVC Pattern, MVVM Pattern 등에 대해 조사하기 (각각 5문장 요약) 43 | 44 | ### MVC 45 | 46 | ### MVVM 47 | 48 | 49 | ## ESModule에 대해 조사하기 (5문장 요약) 50 | 51 | 52 | ## 가상돔에 대해 조사하기 (5줄 요약) 53 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/step4.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Step4 3 | about: 옵저버 패턴 학습 4 | title: '[Step4] <title>' 5 | labels: step4 6 | assignees: '' 7 | 8 | --- 9 | 10 | <!-- 별도의 링크를 첨부해도 무방합니다 --> 11 | 12 | ## Observer Pattern에 대해 조사하기 (10문장) 13 | 14 | > 구독자, 구독, 발행 등의 키워드를 이용하여 표현해보기 15 | 16 | 17 | ## Javascript Object API 조사하기 (각각 5문장 요약) 18 | 19 | ### Object.defineProperty 20 | 21 | ### Object.defineProperties 22 | 23 | 24 | ## Javascript Proxy API (5문장 요약) 25 | 26 | ## 테스트 도구 조사 (각각 5문장 요약) 27 | 28 | ### jest 29 | 30 | ### vitest 31 | 32 | ### nodejs test runner 33 | 34 | ### cypress 35 | 36 | ### playwrite 37 | 38 | ### puppeteer 39 | 40 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/step5.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Step5 3 | about: Store 직접 만들기 4 | title: '[Step5] <title>' 5 | labels: step5 6 | assignees: '' 7 | 8 | --- 9 | 10 | <!-- 별도의 링크를 첨부해도 무방합니다 --> 11 | 12 | > 각각 10문장 요약 13 | 14 | ## redux 15 | 16 | ## mobx 17 | 18 | ## vuex 19 | 20 | ## recoil 21 | 22 | ## jotai 23 | 24 | ## justand 25 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/step6.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Step6 3 | about: Router 직접 만들기 4 | title: '[Step6] <title>' 5 | labels: step6 6 | assignees: '' 7 | 8 | --- 9 | 10 | <!-- 별도의 링크를 첨부해도 무방합니다 --> 11 | 12 | ### History API (5문장 요약) 13 | 14 | ### Hash bang (5문장 요약) 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/step7.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Step7 3 | about: 패키지로 구성하기 4 | title: '[Step7] <title>' 5 | labels: step7 6 | assignees: '' 7 | 8 | --- 9 | 10 | <!-- 별도의 링크를 첨부해도 무방합니다 --> 11 | 12 | ## monorepo에 대해 정리하기 (각각 5문장 요약) 13 | 14 | ### lerna 15 | 16 | ### yarn workspace 17 | 18 | ### npm workspace 19 | 20 | ### pnpm 21 | 22 | ### nx 23 | 24 | ### Turborepo 25 | 26 | 27 | ## bundler에 대해 정리하기 (각각 5문장 요약) 28 | 29 | ### vite 30 | 31 | ### rollup 32 | 33 | ### parcel 34 | 35 | ### webpack 36 | 37 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/step1.md: -------------------------------------------------------------------------------- 1 | ## 데모 2 | 3 | <!-- 배포한 링크(github pages)를 첨부해주세요 --> 4 | - [데모 링크]() 5 | 6 | ## 🎯 완료한 Task 7 | 8 | - [ ] Vue로 TodoList 만들기 9 | - [ ] Vue CLI로 프로젝트 구성 10 | - [ ] TodoList 만들기 11 | - [ ] 목록 12 | - [ ] 추가 13 | - [ ] 수정 14 | - [ ] 삭제 15 | - [ ] 토글 16 | - [ ] React로 TodoList 만들기 17 | - [ ] CRA(Create React App)로 프로젝트 구성 18 | - [ ] TodoList 만들기 19 | - [ ] 목록 20 | - [ ] 추가 21 | - [ ] 수정 22 | - [ ] 삭제 23 | - [ ] 토글 24 | 25 | ## 피드백 26 | 27 | ### 학습 시간 28 | - 이번 주에 학습에 투자한 시간 → 29 | - 학습에 집중될 때 나는 어떤 상태였는가 → 30 | - 집중되지 않을 땐 어떤 상태였는가 → 31 | 32 | ### 몰입 33 | - 학습 하면서 좋았던 점 → 34 | - 학습 하면서 아쉬웠던 점 → 35 | 36 | ### 미션 37 | - 미션 진행 과정에서 어려움을 겪었던 부분 → 38 | - 미션에서 개선되었으면 하는 점 → 39 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/step2.md: -------------------------------------------------------------------------------- 1 | ## 데모 2 | 3 | <!-- 배포한 링크(github pages)를 첨부해주세요 --> 4 | - [데모 링크]() 5 | 6 | ## 🎯 완료한 Task 7 | 8 | > 💡 일단 무작정 만들어보기 9 | 10 | - [ ] 목록 11 | - [ ] 추가 12 | - [ ] 수정 13 | - [ ] 삭제 14 | - [ ] 토글 15 | 16 | ## 피드백 17 | 18 | ### 학습 시간 19 | - 이번 주에 학습에 투자한 시간 → 20 | - 학습에 집중될 때 나는 어떤 상태였는가 → 21 | - 집중되지 않을 땐 어떤 상태였는가 → 22 | 23 | ### 몰입 24 | - 학습 하면서 좋았던 점 → 25 | - 학습 하면서 아쉬웠던 점 → 26 | 27 | ### 미션 28 | - 미션 진행 과정에서 어려움을 겪었던 부분 → 29 | - 미션에서 개선되었으면 하는 점 → 30 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/step3.md: -------------------------------------------------------------------------------- 1 | ## 데모 2 | 3 | <!-- 배포한 링크(github pages)를 첨부해주세요 --> 4 | - [데모 링크]() 5 | 6 | ## 🎯 완료한 Task 7 | 8 | ### 필수 요구사항 9 | 10 | - [ ] Component Class 만들기 11 | - [ ] Vue와 React class를 참고하여 자유롭게 구성해보기 12 | - [ ] DOM 사용 최소화화기 13 | - [ ] State(혹은 data)가 변할 때 만 렌더링이 되도록 구성 14 | - [ ] Browser Module 방식으로 파일을 분리하기 15 | - [ ] Component를 이용하여 TodoList 리팩토링 16 | - [ ] 목록 17 | - [ ] 추가 18 | - [ ] 수정 19 | - [ ] 삭제 20 | - [ ] 토글 21 | 22 | ### 선택 요구사항 23 | 24 | - [ ] 가상돔에 대해 조사하기 (5줄 요약) 25 | - [ ] diff 알고리즘 적용 26 | - render를 실행할 때 변경된 부분(attribute 등)에 대해서만 DOM에 반영되게 하기 27 | - [ ] 가상돔 적용 28 | - [ ] real dom이 아닌, virtual dom을 사용하여 render에 반영하기 29 | - 이 때 jsx 문법은 사용하지 않기 30 | 31 | ## 피드백 32 | 33 | ### 학습 시간 34 | - 이번 주에 학습에 투자한 시간 → 35 | - 학습에 집중될 때 나는 어떤 상태였는가 → 36 | - 집중되지 않을 땐 어떤 상태였는가 → 37 | 38 | ### 몰입 39 | - 학습 하면서 좋았던 점 → 40 | - 학습 하면서 아쉬웠던 점 → 41 | 42 | ### 미션 43 | - 미션 진행 과정에서 어려움을 겪었던 부분 → 44 | - 미션에서 개선되었으면 하는 점 → 45 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/step4.md: -------------------------------------------------------------------------------- 1 | ## 데모 2 | 3 | <!-- 배포한 링크(github pages)를 첨부해주세요 --> 4 | - [데모 링크]() 5 | 6 | ## 🎯 완료한 Task 7 | 8 | 9 | ### 필수 요구사항 10 | 11 | - [ ] observable 구현 12 | - [ ] observe 구현 13 | - [ ] 배치 기능 적용 14 | - [ ] observable의 값이 변경될 때, 마지막으로 변경된 값에 대해서만 observe를 실행하기 15 | - [ ] requestAnimationFrame의 경우, 내부의 코드가 비동기적으로 1frame 뒤에 실행됨 → 이 때도 observe에 있는 것을 실행 16 | 17 | ### 선택 요구사항 18 | 19 | - [ ] observable, observe에 대한 단위 테스트 작성 20 | 21 | ## 피드백 22 | 23 | ### 학습 시간 24 | - 이번 주에 학습에 투자한 시간 → 25 | - 학습에 집중될 때 나는 어떤 상태였는가 → 26 | - 집중되지 않을 땐 어떤 상태였는가 → 27 | 28 | ### 몰입 29 | - 학습 하면서 좋았던 점 → 30 | - 학습 하면서 아쉬웠던 점 → 31 | 32 | ### 미션 33 | - 미션 진행 과정에서 어려움을 겪었던 부분 → 34 | - 미션에서 개선되었으면 하는 점 → 35 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/step5.md: -------------------------------------------------------------------------------- 1 | ## 데모 2 | 3 | <!-- 배포한 링크(github pages)를 첨부해주세요 --> 4 | - [데모 링크]() 5 | 6 | ## 🎯 완료한 Task 7 | 8 | ### 필수 요구사항 9 | 10 | - [ ] store 직접 만들기 11 | - [ ] 여태까지 만든 어플리케이션에 store 적용하기 12 | 13 | ### 선택 요구사항 14 | 15 | - [ ] store에 middleware 적용해보기 16 | - [ ] 테스트코드 작성 17 | 18 | ## 피드백 19 | 20 | ### 학습 시간 21 | - 이번 주에 학습에 투자한 시간 → 22 | - 학습에 집중될 때 나는 어떤 상태였는가 → 23 | - 집중되지 않을 땐 어떤 상태였는가 → 24 | 25 | ### 몰입 26 | - 학습 하면서 좋았던 점 → 27 | - 학습 하면서 아쉬웠던 점 → 28 | 29 | ### 미션 30 | - 미션 진행 과정에서 어려움을 겪었던 부분 → 31 | - 미션에서 개선되었으면 하는 점 → 32 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/step6.md: -------------------------------------------------------------------------------- 1 | ## 데모 2 | 3 | <!-- 배포한 링크(github pages)를 첨부해주세요 --> 4 | - [데모 링크]() 5 | 6 | ## 🎯 완료한 Task 7 | 8 | ### 필수 요구사항 9 | 10 | - [ ] History API를 이용하여 Router를 구현하기 11 | - [ ] Hash bang을 이용하여 Router를 구현하기 12 | - [ ] History API와 Hash Bang을 둘 다 사용 가능한 Router 구현하기 13 | - [ ] baseUrl 14 | - [ ] observe 15 | - [ ] push interface 다양화 16 | 17 | - [ ] 어플리케이션에 적용 18 | 19 | ### 선택 요구사항 20 | 21 | - [ ] 테스트코드 작성 22 | 23 | 24 | ## 피드백 25 | 26 | ### 학습 시간 27 | - 이번 주에 학습에 투자한 시간 → 28 | - 학습에 집중될 때 나는 어떤 상태였는가 → 29 | - 집중되지 않을 땐 어떤 상태였는가 → 30 | 31 | ### 몰입 32 | - 학습 하면서 좋았던 점 → 33 | - 학습 하면서 아쉬웠던 점 → 34 | 35 | ### 미션 36 | - 미션 진행 과정에서 어려움을 겪었던 부분 → 37 | - 미션에서 개선되었으면 하는 점 → 38 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/step7.md: -------------------------------------------------------------------------------- 1 | ## 데모 2 | 3 | <!-- 배포한 링크(github pages)를 첨부해주세요 --> 4 | - [데모 링크]() 5 | 6 | ## 🎯 완료한 Task 7 | 8 | ### 필수 요구사항 9 | 10 | - [ ] 모노레포로 프로젝트를 수정한다. 11 | - [ ] 핵심적인 개념을 core package로 분리한다. 12 | - [ ] app package에서 core package를 불러와서 사용하는 방식으로 리팩토링을 진행한다. 13 | 14 | ### 선택 요구사항 15 | 16 | - [ ] core의 각각의 코어 함수에는 테스트 코드를 추가하여 관리한다. 17 | - 가능하다면, 커버리지 100% 달성하기 18 | - [ ] 패키지를 npm registry에 배포하기 19 | - [ ] 일단 배포하기 20 | - [ ] github actions로 배포 자동화하기 21 | - commit 로그를 보고 배포하는 등 22 | - [ ] 배포한 패키지를 app 패키지에 가져와서 사용하기 23 | - [ ] cli 만들고 배포하기 24 | - [ ] cli 만들기 25 | - [ ] cli 배포하기 26 | - [ ] cli로 프로젝트 구성해보기 27 | 28 | ## 피드백 29 | 30 | ### 학습 시간 31 | - 이번 주에 학습에 투자한 시간 → 32 | - 학습에 집중될 때 나는 어떤 상태였는가 → 33 | - 집중되지 않을 땐 어떤 상태였는가 → 34 | 35 | ### 몰입 36 | - 학습 하면서 좋았던 점 → 37 | - 학습 하면서 아쉬웠던 점 → 38 | 39 | ### 미션 40 | - 미션 진행 과정에서 어려움을 겪었던 부분 → 41 | - 미션에서 개선되었으면 하는 점 → 42 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/step8.md: -------------------------------------------------------------------------------- 1 | ## 데모 2 | 3 | <!-- 배포한 링크(github pages)를 첨부해주세요 --> 4 | - [데모 링크]() 5 | 6 | ## 🎯 완료한 Task 7 | 8 | ### 기술 요구사항 9 | 10 | - [ ] store 11 | - [ ] router 12 | - [ ] component 13 | - [ ] observer pattern 14 | - [ ] 가상돔 15 | - [ ] diff 알고리즘 16 | - [ ] 렌더링 최적화 17 | 18 | ### 지하철역 관리 기능 19 | 20 | - [ ] 지하철역을 등록할 수 있다. 21 | - [ ] 지하철역은 2글자 이상이어야 한다. 22 | - [ ] 엔터키 또는 마우스 클릭으로 역을 추가할 수 있어야 한다. 23 | - [ ] 지하철역의 이름은 최대 20자 이하이다. 24 | - [ ] 중복된 지하철역은 추가할 수 없다. 25 | - [ ] 지하철역의 이름을 수정할 수 있다. 26 | - [ ] 수정하는 UI는 modal을 이용하여 수정할 수 있게 한다. 27 | - [ ] 지하철역을 삭제할 수 있다. 28 | - [ ] 삭제 시 confirm을 이용하여 한 번 더 유저가 확인할 수 있어야 한다. 29 | - [ ] 이미 노선에 등록된 역인 경우 삭제할 수 없다. 30 | 31 | ### 지하철 노선 관리 기능 32 | 33 | - [ ] 지하철 노선을 등록할 수 있다. 34 | - [ ] 지하철 노선의 이름은 2글자 이상이어야 한다. 35 | - [ ] 중복된 지하철 노선 이름이 등록될 수 없다. 36 | - [ ] 지하철 노선의 이름은 최대 10자 이하이다. 37 | - [ ] 지하철 노선 생성시 필요한 값은 색상, 상행역, 하행역, (최초 상행역과 하행역 구간의)거리, 시간이다. 38 | - [ ] 지하철 노선을 수정할 수 있다. 39 | - [ ] 지하철 노선의 이름, 상행역, 하행역, 거리, 시간, 색상을 수정할 수 있다. 40 | - [ ] 지하철 노선을 삭제할 수 있다. 41 | - [ ] 삭제 시 confirm을 이용하여 한 번 더 유저가 확인할 수 있어야 한다. 42 | 43 | ### 지하철 구간 관리 기능 44 | 45 | - [ ] 지하철 노선에 구간을 추가, 수정, 삭제할 수 있다. 46 | - [ ] 구간 조회 시, 노선을 변경하면 해당 노선의 Color로 Select 엘리먼트의 배경색을 변경한다. 47 | 48 | ### 회원 기능 49 | 50 | - [ ] 유저는 회원 가입을 할 수 있다, 51 | - [ ] 회원 가입시 받는 정보는 `email`, `name`, `password`이다. 52 | - [ ] 유저는 로그인 할 수 있다. 53 | - [ ] 로그인하고 나면 로그인 버튼은 로그아웃 버튼으로 변경되어야 한다. 54 | - [ ] 로그인한 유저만, 정보의 수정이 가능하다. 55 | - [ ] 로그인하지 않은 유저에게는 로그인 외 다른 버튼은 보이지 않는다. 56 | - [ ] 유저는 로그아웃할 수 있다. 57 | - [ ] 로그아웃하면 `/` 루트 페이지로 돌아온다. 58 | 59 | 60 | ## 피드백 61 | 62 | ### 학습 시간 63 | - 이번 주에 학습에 투자한 시간 → 64 | - 학습에 집중될 때 나는 어떤 상태였는가 → 65 | - 집중되지 않을 땐 어떤 상태였는가 → 66 | 67 | ### 몰입 68 | - 학습 하면서 좋았던 점 → 69 | - 학습 하면서 아쉬웠던 점 → 70 | 71 | ### 미션 72 | - 미션 진행 과정에서 어려움을 겪었던 부분 → 73 | - 미션에서 개선되었으면 하는 점 → 74 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## 데모 2 | 3 | <!-- 배포한 링크(github pages)를 첨부해주세요 --> 4 | - [데모 링크]() 5 | 6 | ## 🎯 완료한 Task 7 | 8 | <!-- 작업이 완료된 task를 작성해주세요 --> 9 | 10 | ## 피드백 11 | 12 | ### 학습 시간 13 | - 이번 주에 학습에 투자한 시간 → 14 | - 학습에 집중될 때 나는 어떤 상태였는가 → 15 | - 집중되지 않을 땐 어떤 상태였는가 → 16 | 17 | ### 몰입 18 | - 학습 하면서 좋았던 점 → 19 | - 학습 하면서 아쉬웠던 점 → 20 | 21 | ### 미션 22 | - 미션 진행 과정에서 어려움을 겪었던 부분 → 23 | - 미션에서 개선되었으면 하는 점 → 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | .DS_Store 4 | .vscode 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # D-Cording - React 심화 스터디 2 | 3 | > 본 페이지는 [이 노션](https://junilhwang.notion.site/8a696794843742b981e3be6143260301)페이지의 내용을 기반으로 구성되었습니다. 4 | 5 | ## 1. 학습 방향 6 | 7 | ### 1) 야생학습 8 | 9 | - 야생 학습은 대부분 협력적이다 (학교 학습은 대부분 개별적이다) 10 | - 야생 학습은 대부분 비순차적이다 (학교 학습은 대부분 공부 순서가 정해져 있다) 11 | - 야생 학습은 대부분 자료에 한정이 없다 (학교 학습은 대부분 교과서, 교재, 시험 범위 등이 정해져 있다) 12 | - 야생 학습은 대부분 명확한 평가가 없다 (학교 학습은 대부분 시험이라는 명확한 평가 기준이 있다) 13 | - 야생 학습은 대부분 정답이 없다 (학교 학습은 무엇이 정답이라고 하는 것이 명확하다) 14 | - 야생 학습은 대부분 목표가 불분명하고 바뀌기도 한다 (학교 학습은 대부분 합격, 자격증 같은 목표가 분명하다) 15 | 16 | ### 2) 지속 성장 17 | 18 | - **학습 자체에 대해** 고민하기 19 | - 기술을 학습하기 이전에 **기술이 왜 필요한지** 고민하기 20 | - 학습할 필요가 있는지 고민하기 21 | - 깊게 학습하기 22 | 23 | ### 3) 함께 성장 + 페어프로그래밍 24 | 25 | - 지식은 어떻게든 슥듭할 수 있다 → 혼자서도 가능하다 26 | - 사회에 나가면 같이 성장해야한다 → 혼자서는 불가능하다 27 | - 같이 고민하고 28 | - 같이 공부하고 29 | - 같이 성장하자 30 | - 같이 성장하기 위한 도구 → 페어프로그래밍, 페어잡 31 | 32 | ### 4) 스터디가 끝났을 때 33 | 34 | - 스터디 후에 나의 모습을 그려보자 35 | - 즉, 스터디에서 얻어가고 싶은 것을 명확하게 그려보자 36 | - 같이 공부할 수 있는 동료 37 | - 공부하는 습관 혹은 환경 38 | 39 | ## 2. 미션 진행 방법 40 | 41 | ### 미션에 대한 이야기 나누기 42 | 43 | - 매주 모일 수 있는 날을 정해서 미션에 대한 이야기를 나눕니다. 44 | - 미션 학습에 필요한 최소 지식 등을 공유합니다. 45 | - 필요하다면, 코드에 대해서도 다룹니다. 46 | 47 | ### 이론 학습 48 | 49 | - 각 단계별로 이론학습을 하도록 가이드하고 있습니다. 50 | - 각자 학습한 내용을 정리해서 issue에 올려주세요. 51 | 52 | ### 실습 53 | - style(css)는 고려하지 않아도 무방합니다. 54 | - 각 단계를 진행할 때, 최소 2회 이상 페어프로그래밍으로 진행합니다. 55 | - 오프라인으로 해도 좋고, 온라인으로 해도 좋습니다. 56 | - 페어를 진행할 때, 간단하게 같이 있는 사진을 찍어주세요! 57 | - 얼굴이 나오는게 부담스럽다면 손만 나오게라도? 58 | - 돌아가면서 30분씩 코딩합니다. 59 | - 미션을 진행 후에 PR을 올려주세요. 60 | - PR에는 어떤 미션을 진행했는지, 어떤 고민을 했는지, 어떤 결과가 나왔는지, 어떤 느낀점이 있는지 적어주세요. 61 | 62 | ### 코드리뷰 63 | 64 | - 미션을 완료 후에, 서로의 PR에 대해 코드리뷰를 진행합니다. 65 | - 기본적으로 **모든 사람들의 PR에 대해** 리뷰를 남겨야합니다. 66 | - 코드리뷰 그라운드룰 67 | - 변경이 필요한 근거를 제시하기 68 | - 명령 X, 제안 O 69 | - “정답”이 아닌 “의견”을 이야기 한다는 느낌으로! 70 | 71 | ## 3. Git 기본 학습 72 | 73 | Git에 대한 학습은 git에 대해 아는 사람이 git에 대해 모르는 사람에게 알려줍니다. 74 | 75 | - git이란 무엇인가? 76 | - 명령어 77 | - add 78 | - commit 79 | - push 80 | - pull 81 | - origin 82 | - github란 무엇인가? 83 | 84 | ## 4. 미션 85 | 86 | > 1주일에 1개의 미션을 수행합니다. 87 | 88 | | Step | 학습태그 | 89 | |-----------------------------------------------------------------|---------------------------------------------------------------| 90 | | [Step 1. 프레임워크에 대한 이해](./docs/step1.md) | `react` `vue` `framework` `web` | 91 | | [Step 2. Vanilla Javascript로 무작정 TodoList 만들기](./docs/step2.md) | `array api` `ECMAScript` `prototype` `clousre` `this` `event` | 92 | | [Step 3. Component 구성하기](./docs/step3.md) | `state` `class` `OOP` `component` | 93 | | [Step 4. 옵저버 패턴 학습](./docs/step4.md) | `proxy` `object api` `observer` | 94 | | [Step 5. Store 직접 만들기](./docs/step5.md) | `observer pattern` | 95 | | [Step 6. Router 직접 만들기](./docs/step6.md) | `router` `history api` `hash bang` | 96 | | [Step 7. 패키지로 구성하기](./docs/step7.md) | `bundler` `monorepo` | 97 | | [Step 8. 나만의 코드로 SPA 만들기](./docs/step8.md) | `single page application` | 98 | 99 | ### 스스로 난이도 조절하기 100 | 101 | - 타입스크립트 사용 102 | - 단위테스트 작성 103 | - e2e테스트 작성 104 | - cypress 등의 도구 이용 105 | - 선택 요구사항에 대한 고민 106 | 107 | ## 5. 멘토의 역할 108 | 109 | - 올라온 PR에 대해 코드리뷰를 남긴다. 110 | - 정답을 제공하는게 아닌, 정답을 스스로 찾아볼 수 있도록, 근접할 수 있도록 가이드한다. 111 | - 부득이한 경우를 제외하곤, 정답을 제시하지 않는다. 112 | - 멘티가 스스로 정답에 근접할 수 있게, 혹은 자기 자신만의 정답을 가질 수 있게 가이드한다. 113 | - 공부에 대한 키워드를 제시한다. 114 | - 예시) 115 | React가 왜 등장한걸까요? 116 | React를 안 써도 되는 상황은 언제일까요? 117 | React가 렌더링 최적화를 어떻게 할까요? 118 | 가상돔이 꼭 필요한걸까요? 119 | … 120 | - 기술적으로 궁금한 부분들에 대해 답변한다. 121 | - 앞서 제시한 것들과 마찬가지로 정답을 제시하기보단, 정답에 근접할 수 있도록 가이드한다. 122 | -------------------------------------------------------------------------------- /docs/assets/js-subway-admin-sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DKU-D-Coding/js-study-make-framework-lv1/a5a4fd43151aa9cf77c3b2528c3bcfd26afc2dd0/docs/assets/js-subway-admin-sample.png -------------------------------------------------------------------------------- /docs/step1.md: -------------------------------------------------------------------------------- 1 | # Step 1. 프레임워크에 대한 이해 2 | 3 | ## 이론 4 | 5 | ### 기술에 대한 조사 6 | 7 | - [ ] 브라우저, HTTP Protocal, HTML 등의 연관성에 대해 조사하기 (5문장 요약) 8 | - [ ] DOM(Document Object Model) 조사하기 (3문장 요약) 9 | - [ ] BOM(Browser Object Model) 조사하기 (3문장 요약) 10 | - [ ] CSS(Cascading Style Sheet) 조사하기 (3문장 요약) 11 | - [ ] Javascript 조사하기 (3문장 요약) 12 | - [ ] ECMAScript 조사하기 (3문장 요약) 13 | - [ ] Javascript Framework가 등장한 배경에 대해 조사하기 (5문장 요약) 14 | - [ ] Vue와 React의 장단점에 대해 비교하기 (5가지) 15 | 16 | ### 비즈니스에 대한 고찰 17 | 18 | > 💡 나만의 생각을 이야기해봅시다. 19 | 20 | - [ ] 프론트엔드 프레임워크가 등장하게 된 배경은 무엇일까? 21 | - [ ] 프론트엔드 개발자들은 현업에서 어떤 일을 하게 될까? 22 | - [ ] 프론트엔드 개발자의 역할은 무엇일까? 23 | - [ ] 프론트엔드 씬에서 변하지 않는 기술은 무엇일까? 24 | - [ ] 장기 생존을 위해 어떤 공부를 하면 좋을까? 25 | 26 | ## 실습 27 | 28 | - [ ] Vue로 TodoList 만들기 29 | - [ ] Vue CLI로 프로젝트 구성 30 | - [ ] TodoList 만들기 31 | - [ ] 목록 32 | - [ ] 추가 33 | - [ ] 수정 34 | - [ ] 삭제 35 | - [ ] 토글 36 | - [ ] React로 TodoList 만들기 37 | - [ ] CRA(Create React App)로 프로젝트 구성 38 | - [ ] TodoList 만들기 39 | - [ ] 목록 40 | - [ ] 추가 41 | - [ ] 수정 42 | - [ ] 삭제 43 | - [ ] 토글 44 | -------------------------------------------------------------------------------- /docs/step2.md: -------------------------------------------------------------------------------- 1 | # Step 2. Vanilla Javascript로 무작정 TodoList 만들기 2 | 3 | > 💡 어떻게 만들든 상관 없고 일단 무작정 만들어보기 4 | 5 | ### 이론 6 | 7 | - [ ] Javascript Array Method에 대해 조사하고 간단한 예제 코드 추가하기 8 | - [ ] Array.prototype.map() 9 | - [ ] Array.prototype.filter() 10 | - [ ] Array.prototype.reduce() 11 | - [ ] Array.prototype.forEach() 12 | - [ ] Array.prototype.some() 13 | - [ ] Array.prototype.every() 14 | - [ ] Array.prototype.find() 15 | - [ ] Array.prototype.findIndex() 16 | - [ ] Array.prototype.includes() 17 | - [ ] Array.prototype.push() 18 | - [ ] Array.prototype.splice() 19 | - [ ] Array.prototype.slice() 20 | - [ ] Array.prototype.shift() 21 | - [ ] Array.prototype.unshift() 22 | - [ ] Array.prototype.concat() 23 | - [ ] Array.prototype.join() 24 | - [ ] Array.prototype.reverse() 25 | - [ ] Array.prototype.sort() 26 | - [ ] Array.prototype.flat() 27 | - [ ] Array.prototype.flatMap() 28 | - [ ] Array.prototype.fill() 29 | - [ ] Array.prototype.pop() 30 | - [ ] Array.prototype.indexOf() 31 | - [ ] Array.prototype.from() 32 | - [ ] ECMAScript와 Javascript의 차이점에 대해 조사하기 (5문장 요약) 33 | - [ ] Javascript의 프로토타입에 대해 조사하기 (5문장 요약) 34 | - [ ] Javascript의 클로저에 대해 조사하기 (5문장 요약) 35 | - [ ] Javascript의 스코프에 대해 조사하기 (5문장 요약) 36 | - [ ] Javascript의 this에 대해 조사하기 (5문장 요약) 37 | - [ ] Javascript의 실행컨텍스트에 대해 조사하기 (10문장 요약) 38 | - [ ] Javascript의 이벤트에 대해 조사하기 (5문장 요약) 39 | - [ ] 이벤트 위임 40 | - [ ] 이벤트 버블링 41 | - [ ] 이벤트 캡처링 42 | 43 | ### 실습 44 | 45 | - [ ] 목록 46 | - [ ] 추가 47 | - [ ] 수정 48 | - [ ] 삭제 49 | - [ ] 토글 50 | -------------------------------------------------------------------------------- /docs/step3.md: -------------------------------------------------------------------------------- 1 | # Step 3. Component 구성하기 2 | 3 | ## 이론 4 | 5 | - [ ] ES5의 Class와 ES6의 Class의 차이점에 대해 조사하기 (5가지) 6 | - [ ] ES6의 Class만이 가지고 있는 특징과 장점에 대해 조사하기 (3가지) 7 | - [ ] 객체지향 5대원칙에 대해 조사하기 (각각 5문장 요약) 8 | - [ ] SRP(Single Responsibility Principle) 9 | - [ ] OCP(Open-Closed Principle) 10 | - [ ] LSP(Liskov Substitution Principle) 11 | - [ ] ISP(Interface Segregation Principle) 12 | - [ ] DIP(Dependency Inversion Principle) 13 | - [ ] 다형성, 캡슐화, 추상화, 상속, 인터페이스 등에 대해 조사하기 (각각 5문장 요약) 14 | - [ ] 다형성 15 | - [ ] 캡슐화 16 | - [ ] 추상화 17 | - [ ] 상속 18 | - [ ] 인터페이스 19 | - [ ] MVC Pattern, MVVM Pattern 등에 대해 조사하기 (각각 5문장 요약) 20 | - [ ] MVC 21 | - [ ] MVVM 22 | - [ ] ESModule에 대해 조사하기 (5문장 요약) 23 | 24 | ## 실습 25 | 26 | ### 필수 요구사항 27 | 28 | - [ ] Component Class 만들기 29 | - [ ] Vue와 React class를 참고하여 자유롭게 구성해보기 30 | - [ ] DOM 사용 최소화화기 31 | - [ ] State(혹은 data)가 변할 때 만 렌더링이 되도록 구성 32 | 33 | ```jsx 34 | const $app = document.querySelector('#app'); 35 | 36 | let state = { 37 | items: ['item1', 'item2', 'item3', 'item4'] 38 | } 39 | 40 | const render = () => { 41 | const { items } = state; 42 | $app.innerHTML = ` 43 | <ul> 44 | ${items.map(item => `<li>${item}</li>`).join('')} 45 | </ul> 46 | <button id="append">추가</button> 47 | `; 48 | document.querySelector('#append').addEventListener('click', () => { 49 | setState({ items: [ ...items, `item${items.length + 1}` ] }) 50 | }) 51 | } 52 | 53 | const setState = (newState) => { 54 | state = { ...state, ...newState }; 55 | render(); 56 | } 57 | 58 | render(); 59 | ``` 60 | 61 | - [ ] Browser Module 방식으로 파일을 분리하기 62 | - [ ] Component를 이용하여 TodoList 리팩토링 63 | - [ ] 목록 64 | - [ ] 추가 65 | - [ ] 수정 66 | - [ ] 삭제 67 | - [ ] 토글 68 | 69 | ### 선택 요구사항 70 | 71 | - [ ] 가상돔에 대해 조사하기 (5줄 요약) 72 | - [ ] diff 알고리즘 적용 73 | - render를 실행할 때 변경된 부분(attribute 등)에 대해서만 DOM에 반영되게 하기 74 | - [ ] 가상돔 적용 75 | - [ ] real dom이 아닌, virtual dom을 사용하여 render에 반영하기 76 | - 이 때 jsx 문법은 사용하지 않기 77 | -------------------------------------------------------------------------------- /docs/step4.md: -------------------------------------------------------------------------------- 1 | # Step 4. 옵저버 패턴 학습 2 | 3 | ## 이론 4 | 5 | - [ ] Observer Pattern에 대해 조사하기 (10문장) 6 | - [ ] 구독자, 구독, 발행 등의 키워드를 이용하여 표현해보기 7 | - [ ] Javascript Object API 조사하기 8 | - [ ] Object.defineProperty 9 | - [ ] Object.defineProperties 10 | - [ ] Javascript Proxy API 조사하기 11 | 12 | ## 실습 13 | 14 | ### 필수 요구사항 15 | 16 | - [ ] observable 구현 17 | - [ ] observe 구현 18 | 19 | ```jsx 20 | const state = observable({ 21 | a: 1, 22 | b: 2, 23 | }); 24 | 25 | observe(() => console.log(`state.a + state.b = ${state.a + state.b}`)); // 3 26 | 27 | state.a = 10; // 할당하는 순간 state.a + state.b = 12 출력 28 | state.b = 20; // 할당하는 순간 state.a + state.b = 30 출력 29 | ``` 30 | 31 | https://user-images.githubusercontent.com/18749057/210731971-15a960b2-51b7-48cd-9f59-7e78f8860bde.mov 32 | 33 | - [ ] 배치 기능 적용 34 | 35 | ```jsx 36 | const state = observable({ 37 | a: 1, 38 | b: 2, 39 | }); 40 | 41 | observe(() => console.log(`state.a + state.b = ${state.a + state.b}`)); // 3 42 | 43 | state.a = 10; 44 | state.b = 20; 45 | state.a = 100; 46 | state.b = 200; // 이 때만 observe에 등록한 함수 실행 47 | 48 | requestAnimationFrame(() => { 49 | state.b = 300; // 이 때에도 실행되어야 함 50 | }) 51 | ``` 52 | 53 | - [ ] observable의 값이 변경될 때, 마지막으로 변경된 값에 대해서만 observe를 실행하기 54 | - [ ] requestAnimationFrame의 경우, 내부의 코드가 비동기적으로 1frame 뒤에 실행됨 → 이 때도 observe에 있는 것을 실행 55 | 56 | ### 선택 요구사항 57 | 58 | - [ ] 테스트 도구 조사 59 | - [ ] jest 60 | - [ ] vitest 61 | - [ ] nodejs test runner 62 | - [ ] cypress 63 | - [ ] playwrite 64 | - [ ] puppeteer 65 | - [ ] observable, observe에 대한 단위 테스트 작성 66 | -------------------------------------------------------------------------------- /docs/step5.md: -------------------------------------------------------------------------------- 1 | # Step 5. Store 직접 만들기 2 | 3 | ## 이론 4 | 5 | 중앙 집중 저장소에 대해 조사하기 (각각 10문장 요약) 6 | 7 | - [ ] redux 8 | - [ ] mobx 9 | - [ ] vuex 10 | - [ ] recoil 11 | - [ ] jotai 12 | - [ ] justand 13 | 14 | ## 실습 15 | 16 | ### 필수 요구사항 17 | 18 | - [ ] store 직접 만들기 19 | 20 | ```tsx 21 | function counter(state = 0, action) { 22 | switch (action.type) { 23 | case 'INCREMENT': 24 | return state + 1 25 | case 'DECREMENT': 26 | return state - 1 27 | default: 28 | return state 29 | } 30 | } 31 | 32 | // 앱의 상태를 보관하는 Redux 저장소를 만듭니다. 33 | // API로는 { subscribe, dispatch, getState }가 있습니다. 34 | const store = new Store(counter) 35 | 36 | // subscribe()를 이용해 상태 변화에 따라 UI가 변경되게 할 수 있습니다. 37 | // 보통은 subscribe()를 직접 사용하기보다는 뷰 바인딩 라이브러리(예를 들어 React Redux)를 사용합니다. 38 | // 하지만 현재 상태를 localStorage에 영속적으로 저장할 때도 편리합니다. 39 | 40 | store.subscribe(() => console.log(store.getState()))) 41 | 42 | // 내부 상태를 변경하는 유일한 방법은 액션을 보내는 것뿐입니다. 43 | // 액션은 직렬화할수도, 로깅할수도, 저장할수도 있으며 나중에 재실행할수도 있습니다. 44 | store.dispatch({ type: 'INCREMENT' }) 45 | // 1 46 | store.dispatch({ type: 'INCREMENT' }) 47 | // 2 48 | store.dispatch({ type: 'DECREMENT' }) 49 | // 1 50 | ``` 51 | 52 | - [ ] 여태까지 만든 어플리케이션에 store 적용하기 53 | 54 | ### 선택 요구사항 55 | 56 | - [ ] store에 middleware 적용해보기 57 | 58 | ```tsx 59 | function counter(state = 0, action) { 60 | switch (action.type) { 61 | case 'INCREMENT': 62 | return state + 1 63 | case 'DECREMENT': 64 | return state - 1 65 | default: 66 | return state 67 | } 68 | } 69 | 70 | const store = new Store(counter, { 71 | middlewares: [ 72 | (dispatch, action) => { 73 | console.log('first middleware'); 74 | next(action); 75 | }, 76 | (dispatch, action) => { 77 | next(action); 78 | if(action === 'DECREMENT') { 79 | console.log('second middleware'); 80 | } 81 | }, 82 | ] 83 | }) 84 | 85 | store.subscribe(() => console.log(store.getState()))) 86 | 87 | // first middleware 88 | // 1 89 | store.dispatch({ type: 'INCREMENT' }) 90 | 91 | // first middleware 92 | // 2 93 | store.dispatch({ type: 'INCREMENT' }) 94 | 95 | // first middleware 96 | // 1 97 | // second middleware 98 | store.dispatch({ type: 'DECREMENT' }) 99 | ``` 100 | 101 | - [ ] 테스트코드 작성 102 | 103 | -------------------------------------------------------------------------------- /docs/step6.md: -------------------------------------------------------------------------------- 1 | # Step 6. Router 직접 만들기 2 | 3 | ## 이론 4 | 5 | 각각 5문장 요약 6 | 7 | - [ ] History API 8 | - [ ] Hash bang 9 | 10 | ## 실습 11 | 12 | ### 필수 요구사항 13 | 14 | - [ ] History API를 이용하여 Router를 구현하기 15 | 16 | ```tsx 17 | const router = new HistoryRouter(); 18 | 19 | router.push('/posts?page=1'); 20 | 21 | const { path, queryString } = router; 22 | 23 | console.log(path); // '/posts' 24 | console.log(queryString); // { page: "1" } 25 | ``` 26 | 27 | - [ ] Hash bang을 이용하여 Router를 구현하기 28 | 29 | ```tsx 30 | const router = new HashBangRouter(); 31 | 32 | // /#!/posts?page=1 33 | router.push('/posts?page=1'); 34 | 35 | const { path, queryString } = router; 36 | 37 | console.log(path); // '/posts' 38 | console.log(queryString); // { page: "1" } 39 | ``` 40 | 41 | - [ ] History API와 Hash Bang을 둘 다 사용 가능한 Router 구현하기 42 | 43 | ```tsx 44 | const router1 = new Router(); 45 | const router2 = new Router({ history: false }); // hash bang 사용 46 | 47 | router1.push('/posts?page=1'); 48 | router2.push('/posts?page=1'); // 주소: /#!/posts?page=1 49 | 50 | ``` 51 | 52 | - [ ] baseUrl 53 | 54 | ```tsx 55 | const router = new Router({ 56 | baseUrl: '/base', 57 | }); 58 | 59 | router.push('/test'); // 주소: /base/test 60 | ``` 61 | 62 | - [ ] observe 63 | 64 | ```tsx 65 | const router = new Router(); 66 | router.observe(() => console.log('페이지 주소가 변경되었습니다.')); 67 | 68 | router.push('/test1'); 69 | router.push('/test2'); 70 | ``` 71 | 72 | - [ ] push interface 다양화 73 | 74 | ```tsx 75 | const router = new Router(); 76 | 77 | router.push('/test?key=value'); 78 | router.push({ path: '/test', queryString: { key: 'value' } }); 79 | router.push({ path: '/test2' }); 80 | 81 | // 주소: /test2?key2=value2 82 | router.push({ queryString: { key2: 'value2' } }); 83 | 84 | //주소: /test2?key2=value2&key3=value3 85 | router.push({ queryString: { ...router.queryString, key3: 'value3' } }); 86 | ``` 87 | 88 | - [ ] 어플리케이션에 적용 89 | 90 | ### 선택 요구사항 91 | 92 | - [ ] 테스트코드 작성 93 | -------------------------------------------------------------------------------- /docs/step7.md: -------------------------------------------------------------------------------- 1 | # Step 7. 패키지로 구성하기 2 | 3 | ## 이론 4 | 5 | - [ ] monorepo에 대해 정리하기 (각각 5문장 요약) 6 | - [ ] lerna 7 | - [ ] yarn workspace 8 | - [ ] npm workspace 9 | - [ ] pnpm 10 | - [ ] nx 11 | - [ ] Turborepo 12 | - [ ] bundler에 대해 정리하기 (각각 5문장 요약) 13 | - [ ] vite 14 | - [ ] rollup 15 | - [ ] parcel 16 | - [ ] webpack 17 | 18 | ## 실습 19 | 20 | ### 필수 요구사항 21 | 22 | - [ ] 모노레포로 프로젝트를 수정한다. 23 | - [ ] 핵심적인 개념을 core package로 분리한다. 24 | - [ ] app package에서 core package를 불러와서 사용하는 방식으로 리팩토링을 진행한다. 25 | 26 | ### 선택 요구사항 27 | 28 | - [ ] core의 각각의 코어 함수에는 테스트 코드를 추가하여 관리한다. 29 | - 가능하다면, 커버리지 100% 달성하기 30 | - [ ] 패키지를 npm registry에 배포하기 31 | - [ ] 일단 배포하기 32 | - [ ] github actions로 배포 자동화하기 33 | - commit 로그를 보고 배포하는 등 34 | - [ ] 배포한 패키지를 app 패키지에 가져와서 사용하기 35 | - [ ] cli 만들고 배포하기 36 | - [ ] cli 만들기 37 | - [ ] cli 배포하기 38 | - [ ] cli로 프로젝트 구성해보기 39 | 40 | ```bash 41 | # 이러한 흐름으로 진행할 수 있게 cli 만들고 배포하기 42 | $ npm install -g junil-spa-framework 43 | $ junil-spa-framework init sample-app 44 | $ cd sample-app 45 | $ npm install 46 | $ npm run dev 47 | ``` 48 | 49 | 50 | -------------------------------------------------------------------------------- /docs/step8.md: -------------------------------------------------------------------------------- 1 | # Step 8. 나만의 코드로 SPA 만들기 2 | 3 | > 💡 여태까지 학습한 모든 내용을 적용합니다. 4 | > - store 5 | > - router 6 | > - component 7 | > - observer pattern 8 | > - 가상돔 9 | > - diff 알고리즘 10 | > - 렌더링 최적화 11 | 12 | ![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/04777c39-4064-4db2-bbda-86f68ca37662/Untitled.png) 13 | 14 | ### 참고 저장소 15 | 16 | [https://github.com/next-step/js-subway-admin](https://github.com/next-step/js-subway-admin) 17 | 18 | ### 지하철역 관리 기능 19 | 20 | - [ ] 지하철역을 등록할 수 있다. 21 | - [ ] 지하철역은 2글자 이상이어야 한다. 22 | - [ ] 엔터키 또는 마우스 클릭으로 역을 추가할 수 있어야 한다. 23 | - [ ] 지하철역의 이름은 최대 20자 이하이다. 24 | - [ ] 중복된 지하철역은 추가할 수 없다. 25 | - [ ] 지하철역의 이름을 수정할 수 있다. 26 | - [ ] 수정하는 UI는 modal을 이용하여 수정할 수 있게 한다. 27 | - [ ] 지하철역을 삭제할 수 있다. 28 | - [ ] 삭제 시 confirm을 이용하여 한 번 더 유저가 확인할 수 있어야 한다. 29 | - [ ] 이미 노선에 등록된 역인 경우 삭제할 수 없다. 30 | 31 | ### 지하철 노선 관리 기능 32 | 33 | - [ ] 지하철 노선을 등록할 수 있다. 34 | - [ ] 지하철 노선의 이름은 2글자 이상이어야 한다. 35 | - [ ] 중복된 지하철 노선 이름이 등록될 수 없다. 36 | - [ ] 지하철 노선의 이름은 최대 10자 이하이다. 37 | - [ ] 지하철 노선 생성시 필요한 값은 색상, 상행역, 하행역, (최초 상행역과 하행역 구간의)거리, 시간이다. 38 | - [ ] 지하철 노선을 수정할 수 있다. 39 | - [ ] 지하철 노선의 이름, 상행역, 하행역, 거리, 시간, 색상을 수정할 수 있다. 40 | - [ ] 지하철 노선을 삭제할 수 있다. 41 | - [ ] 삭제 시 confirm을 이용하여 한 번 더 유저가 확인할 수 있어야 한다. 42 | 43 | ### 지하철 구간 관리 기능 44 | 45 | - [ ] 지하철 노선에 구간을 추가, 수정, 삭제할 수 있다. 46 | - [ ] 구간 조회 시, 노선을 변경하면 해당 노선의 Color로 Select 엘리먼트의 배경색을 변경한다. 47 | 48 | ### 회원 기능 49 | 50 | - [ ] 유저는 회원 가입을 할 수 있다, 51 | - [ ] 회원 가입시 받는 정보는 `email`, `name`, `password`이다. 52 | - [ ] 유저는 로그인 할 수 있다. 53 | - [ ] 로그인하고 나면 로그인 버튼은 로그아웃 버튼으로 변경되어야 한다. 54 | - [ ] 로그인한 유저만, 정보의 수정이 가능하다. 55 | - [ ] 로그인하지 않은 유저에게는 로그인 외 다른 버튼은 보이지 않는다. 56 | - [ ] 유저는 로그아웃할 수 있다. 57 | - [ ] 로그아웃하면 `/` 루트 페이지로 돌아온다. 58 | -------------------------------------------------------------------------------- /pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## 데모 2 | 3 | <!-- 배포한 링크(github pages)를 첨부해주세요 --> 4 | - [데모 링크]() 5 | 6 | ## 🎯 완료한 Task 7 | 8 | <!-- 각 미션의 Task 목록을 여기에 추가해주세요 --> 9 | 10 | ## 피드백 11 | 12 | ### 학습 시간 13 | - 이번 주에 학습에 투자한 시간 → 14 | - 학습에 집중될 때 나는 어떤 상태였는가 → 15 | - 집중되지 않을 땐 어떤 상태였는가 → 16 | 17 | ### 몰입 18 | - 학습 하면서 좋았던 점 → 19 | - 학습 하면서 아쉬웠던 점 → 20 | 21 | ### 미션 22 | - 미션 진행 과정에서 어려움을 겪었던 부분 → 23 | - 미션에서 개선되었으면 하는 점 → 24 | --------------------------------------------------------------------------------