Simple-to-do-app

$$config title: MWU_SW아카데미-FE 과정 3기 keywords: - IT - Front-End - MWU $$ ![img](https://i.imgur.com/5Y8SYPp.png) ![img](https://i.imgur.com/aiScRFZ.png) --- --- # 수업 - 수업명 : MWU_SW아카데미-FE 과정 3기 수업페이지 - [주소 : https://slog.gg/p/12577](https://slog.gg/p/12577) - [강사 오픈톡](https://open.kakao.com/o/swKTT78e) # 기초수련 - [타이핑 정글](https://www.typingclub.com/sportal/program-3.game) - [스피드코더](https://www.speedcoder.net/) - [code.org 코스 3](https://studio.code.org/s/course3) - [code.org 코스 4](https://studio.code.org/s/course4) - [코드몽키플레이(유료)](https://app.codemonkey.com/challenges/0) # 가입해야할 사이트 - [프로그래머스](https://programmers.co.kr/) - [github](https://github.com/) - [코드펜](https://codepen.io/) - [벨로그](https://velog.io/) # 과제 제출 - [프로젝트 저장소](https://github.com/MWU-SW-Academy-FE) # 무조건 알아야하는 사실 - 지식은 적을 수록 좋고, 지혜는 많을 수록 좋다. - 적게 배우고, 많이 활용하세요. - 공학은 예술이 아니다. - 완벽주의는 제발 버리세요. - 초보가 완벽을 추구하면 절대 안됩니다. - 초보자는 작동하게 만드는 것을 추구해야 합니다. - 개발실력은 자전거 타기와 비슷하다. - 많이 넘어져 보는게 최고의 공부법이다. # 초심자를 방해하는 생각 5가지 - 이렇게 하는거 맞나? - 초보자는 구현을 하는것에 초점을 맞추는게 압도적으로 유리합니다. - 내가 모르는 뭔가가 있고, 그것을 배우기 전까지 나는 제대로된 작업물을 구현할 수 없다. - 제일 바보같은 생각입니다. - 이 생각이 초보자의 성장을 사로잡는 제일 병적인 생각입니다. - 개발을 하는데 있어서 특별함은 필요없다. 꾸준함이 필요합니다. - 최선을 다해서 최고의 퀄리티를 추구하자. - 최선의 설계, 최선의 구현은 불가능 합니다. 적당한 수준의 타협이 필수입니다. - 우리는 뛰어난 과학자나 예술가가 아닌, 능숙한 엔지니어가 되어야 합니다. - 양보다는 질이니까, 완벽한 작품을 만들어야겠다. - 바보 같은 생각입니다. - 초보자는 완벽한 하나의 작품을 만들 수 없습니다. - 바보같은 작품 10개를 만드는게 압도적으로 더 유리합니다. # 1주차(세션) ## 공지 - 앞으로 해야할 데일리 루틴(기술블로그 포스팅, 알고리즘) ### 벨로그 - [https://velog.io](https://velog.io) ### 알고리즘 기초 100제 - [알고리즘 기초 100제](https://school.programmers.co.kr/learn/challenges/beginner?order=acceptance_desc&page=1&languages=javascript) ## velog 영상후기 글 템플릿 ### 템플릿 ``` [![movie](https://img.youtube.com/vi/유튜브비디오코드/0.jpg)](https://youtu.be/유튜브비디오코드) - 영상 내용 요약 한줄 1 - 영상 내용 요약 한줄 2 ``` ### 예시 - [샘플영상 - 인터넷과 웹의 역사](https://youtu.be/A2kt9oyMjSg) - 샘플영상 주소 : https://youtu.be/A2kt9oyMjSg - 여기서 뒷 부분 `A2kt9oyMjSg` (이)가 유튜브-비디오-코드 이다. ``` [![movie](https://img.youtube.com/vi/A2kt9oyMjSg/0.jpg)](https://youtu.be/A2kt9oyMjSg) - 인터넷은 작은 네트워크들이 합쳐진 거대한 하나의 네트워크이다. - 웹은 네트워크위에 구현되어 있다. - 웹은 웹 브라우저와 웹 서버로가 통신하는 방식으로 작동한다. ``` - [완성된 글 - velog.io/@dev-sik2/영상후기-생활코딩-인터넷과-웹의-역사](https://velog.io/@dev-sik2/영상후기-생활코딩-인터넷과-웹의-역사) ## velog 프로그래머스 알고리즘 정답 글 템플릿 ### 템플릿(#은 무시하세요.) ```` [문제링크 - 문제명](문제링크) ```js // 정답 소스코드 ``` ```` ### 예시 [샘플문제 - 프로그래머스 - 두 수의 차](https://school.programmers.co.kr/learn/courses/30/lessons/120803?language=javascript) ```` [문제링크 - 프로그래머스 - 두 수의 차](https://school.programmers.co.kr/learn/courses/30/lessons/120803?language=javascript) ```js function solution(num1, num2) { return num1 - num2; } ``` ```` - [완성된 글 - https://velog.io/@devpang30/프로그래머스-두-수의-차](https://velog.io/@devpang30/프로그래머스-두-수의-차) ## 필수영상 - [필수영상 - 공부하기 싫어 몸서리쳐질 때 '이것'부터 해보세요. 효과가 좋습니다 (박문호 뇌과학자)](https://youtu.be/Ek_CMWVd_0I) - [필수영상 - “이래도 효과 없으면 따지러 오세요” 황농문 교수가 추천하는 '현실적인' 몰입 훈련법](https://youtu.be/yzE9sOR0v3o) - [필수영상 - [고정댓글 필독] HTML, CSS, JavaScript가 뭔가요?](https://youtu.be/ffENjt7aEdc) ## 자바스크립트 개념 - JS 개념 - 2대 구성요소 - 변수 - 값 - 숫자 : 1, 1.5 - 문장 : "안녕", "a", "잘가세요." - 논리 : true, false - 객체 : {이름: "홍길동", 나이: 22} - 함수 : function() {} - 2대 제어요소 - 조건문 - if, else if, else - 반복문 - while, for ## 기초 - [개념 - console.log, 프로그램은 위에서 아래로 실행된다.](https://codepen.io/jangka44/pen/JJERBz) - [개념 - CSS 보다 우선순위가 높은 자바스크립트, 자바스크립트는 감독입니다.](https://codepen.io/jangka44/pen/awpmER) - [개념 - 자바스크립트와 CSS가 협력하는 바람직한 방법](https://codepen.io/jangka44/pen/VWPKdo) ## 콘솔 - [문제 - `안녕하세요.`를 10번 출력해주세요.](https://codepen.io/jangka44/pen/PBxLMR) - [문제 - 정답](https://codepen.io/jangka44/pen/mjQgdp) ## 변수 - [문제 - 변수 a와 b의 값을 서로 교체해주세요.(변수 없이)](https://codepen.io/jangka44/pen/KBrYXP) - [문제 - 정답](https://codepen.io/jangka44/pen/pZQBWo) - [문제 - 변수 a와 b의 값을 서로 교체해주세요.(temp 변수 활용)](https://codepen.io/jangka44/pen/MBzROw) - [문제 - 정답](https://codepen.io/jangka44/pen/MBzROa) ## 조건문 - [문제 - age의 값에 따라서 성년인지 미성년인지 출력해주세요.](https://codepen.io/jangka44/pen/OBzmVw) - [문제 - 정답](https://codepen.io/jangka44/pen/NOXjqe) - [문제 - if문 개념문제 - 실행되는 출력문에는 참 그렇지 않으면 거짓 이라고 적어주세요.](https://codepen.io/jangka44/pen/rNamKJP) - [문제 - 정답](https://codepen.io/jangka44/pen/dyPWKQM) - [문제 - 할인 대상인지 아닌지 출력(&& 사용)](https://codepen.io/jangka44/pen/zYxwaaQ) - [문제 - 정답](https://codepen.io/jangka44/pen/wvBdXOy) - [문제 - 할인 대상인지 아닌지 출력(|| 사용)](https://codepen.io/jangka44/pen/PowmaBj) - [문제 - 정답](https://codepen.io/jangka44/pen/bGNWKZv) - [문제 - 할인 대상인지 아닌지 출력(중첩 if문 사용, &&와 ||는 사용 금지)](https://codepen.io/jangka44/pen/BayRVPw) - [문제 - 정답](https://codepen.io/jangka44/pen/NWPjzJM) - [문제 - 할인 대상인지 아닌지 출력(if, else if, else 만 사용, &&와 ||는 사용 금지)](https://codepen.io/jangka44/pen/wvBdXxP) - [문제 - 정답](https://codepen.io/jangka44/pen/jOEmKJv) - [문제 - 정답 v2](https://codepen.io/jangka44/pen/dyPWjPN) ## 자바스크립트 개념 - 자바스크립트의 4대 구성요소 - 조건문 - if - switch(안배움) - 반복문 - while - for - do while(안배움) - 변수 - 값(데이터, 자료) - 자료형 - 실행할 수 없는 자료(데이터) - 숫자(number) - 문장(string) - 논리(boolean) - 객체(object) - 객체는 일종의 버스이다. - 버스에는 승객을 계속 추가할 수 있다. - 복잡한 자료를 만들때 사용된다. - `[]`, `.` 문법으로 객체 내부의 변수(좌석)을 관리한다. - 실행할 수 있는 자료(데이터) - 함수(function) - 지역변수 - 함수가 실행될 때만 잠깐 생겼다가 사라지는(찰나동안에만 존재한다.) 하루살이 변수 - 해당 변수의 활동범위는 함수를 벗어날 수 없다. - 매개변수 - 지역변수의 한 종류로 함수의 데이터 입구 역할을 한다. - return - 함수의 데이터 출구 역할을 한다. 즉 변신한다. ## 반복문(준비단계) - [문제 - 구구단 8단을 출력해주세요.(변수 없이)](https://codepen.io/jangka44/pen/pZQBom) - [문제 - 정답](https://codepen.io/jangka44/pen/rrQbaa) - [문제 - 구구단 8단을 출력해주세요.(dan 변수만 사용)](https://codepen.io/jangka44/pen/bjQJNm) - [문제 - 정답](https://codepen.io/jangka44/pen/rrQbVa) - [문제 - 구구단 8단을 출력해주세요.(dan과 i 변수 사용)](https://codepen.io/jangka44/pen/ejQaRe) - [문제 - 정답](https://codepen.io/jangka44/pen/XBywgZ) ## 반복문(while) - [문제 - 구구단 8단을 출력해주세요.(while문 사용)](https://codepen.io/jangka44/pen/ZjPxEK) - [문제 - 정답](https://codepen.io/jangka44/pen/ejXMYR) - [문제 - 1부터 100까지 출력해주세요.(while문 사용)](https://codepen.io/jangka44/pen/JmvEXE) - [문제 - 정답](https://codepen.io/jangka44/pen/LgmxNy) - [문제 - 1부터 100까지의 합을 출력해주세요.(while문 사용)](https://codepen.io/jangka44/pen/dgeNMz) - [문제 - 정답](https://codepen.io/jangka44/pen/vVjgGp) - [문제 - 1, 2, 3을 10번 출력해주세요.(while문 사용)](https://codepen.io/jangka44/pen/pxVRdv) - [문제 - 정답](https://codepen.io/jangka44/pen/yRjgPN) - [문제 - 구구단 2~9단을 출력해주세요.(while문 사용)](https://codepen.io/jangka44/pen/XBGEyP) - [문제 - 정답](https://codepen.io/jangka44/pen/ajMYQP) ## 반복문(for) - [문제 - 구구단 8단을 출력해주세요.(for문 사용)](https://codepen.io/jangka44/pen/YjmpMZ) - [문제 - 정답](https://codepen.io/jangka44/pen/gjVLyX) - [문제 - 구구단 2~9단을 출력해주세요.(for문 사용)](https://codepen.io/jangka44/pen/PBMbgE) - [문제 - 정답](https://codepen.io/jangka44/pen/BPXQEr) - [문제 - 구구단 2~9단을 출력해주세요.(for문 2개만 사용)](https://codepen.io/jangka44/pen/wxVoZj) - [문제 - 정답](https://codepen.io/jangka44/pen/NBQbmB) - [문제 - 구구구단을 출력해주세요.(for문 3개만 사용)](https://codepen.io/jangka44/pen/ajepov) - [문제 - 정답](https://codepen.io/jangka44/pen/xJvgKZ) - [문제 - 1부터 1000까지 출력해주세요.](https://codepen.io/jangka44/pen/WKVpeb) - [문제 - 정답](https://codepen.io/jangka44/pen/QBepLb) - [문제 - 1부터 1000까지의 합을 출력해주세요.](https://codepen.io/jangka44/pen/OwKWxB) - [문제 - 정답](https://codepen.io/jangka44/pen/BPXpwG) ## 함수 - [개념 - 함수](https://codepen.io/jangka44/pen/OBoggj) - [문제 - 함수 3개를 정의하고 실행해주세요.](https://codepen.io/jangka44/pen/MPqoVL) - [문제 - 정답](https://codepen.io/jangka44/pen/xyarjb) ## 함수 - 매개변수 - [문제 - 매번 다르게 행동하는 함수를 만들어주세요.](https://codepen.io/jangka44/pen/PydjBO) - [문제 - 정답](https://codepen.io/jangka44/pen/BqOZPY) - [문제 - 매번 다르게 행동하는 함수(v2)를 만들어주세요.](https://codepen.io/jangka44/pen/ePLENm) - [문제 - 정답](https://codepen.io/jangka44/pen/rqZzVV) - 개념 : 세미콜론 안 붙이는 곳 - if, switch, while, for, function 뒤에 - 단 아래 형식은 예외로 붙인다. - var hello = function() { }; - [문제 - 특정 언어로 인사를 여러번 하는 함수를 만들어주세요.](https://codepen.io/jangka44/pen/xyyWLe) - [문제 - 정답](https://codepen.io/jangka44/pen/dggmVy) - 위 `특정 언어로 인사를 여러번 하는 함수를 만들어주세요.` 푸는 순서 - 함수실행 먼저한다[] - 함수를 만들기 전에 실행부터 시킨다. - 그 후에 오류가 나는걸 확인하고 오류를 고친다. 즉 함수를 만든다. - 여기서 함수를 만들때는 오류가 안나게 끔만 하면 된다. - 뭔가가 출력이라도 되게 하기[] - 매개변수 `언어`의 값을 일단 출력한다. - 뭔가가 여러번 출력되게 하기[] - 전 단계에서 출력한 값이 10번 나오도록 for문을 구성한다. - 인자값으로 넘긴 횟수만큼 반복시키기[] - `10` 이라는 상수를 `횟수` 라는 변수의 값으로 대채한다. - 언어가 아니라 인사말이 나오도록 하기[] - var 인사말 = "안녕하세요."; // 로 `인사말` 변수를 만들고 출력 내용을 교체한다. - 인자값으로 넘긴 각 언어에 따른 인사말이 나오도록 하기[] - if 문을 사용하여 인사말의 값을 조건에 따라 바꾼다. - [문제 - 매개변수 2개짜리 printDan 함수를 구현해주세요.](https://codepen.io/jangka44/pen/pxQQwr) - [문제 - 정답](https://codepen.io/jangka44/pen/XxyyBx) ## 함수 - 리턴 - [개념 - 매개변수와 리턴, 함수(자판기)에서 데이터의 투입구와 배출구](https://codepen.io/jangka44/pen/gBQZbm) - [개념 - typeof 함수](https://codepen.io/jangka44/pen/zmJzqb) - [문제 - 4칙연산 함수를 만들고 실행해주세요.](https://codepen.io/jangka44/pen/VEVqve) - [문제 - 정답](https://codepen.io/jangka44/pen/OBaryg) ## 객체 - [개념 - 객체](https://codepen.io/jangka44/pen/dgwExK) - [개념 - 객체 2](https://codepen.io/jangka44/pen/WaLqzG) - [개념 - 객체 3](https://codepen.io/jangka44/pen/EdGBEL) - [문제 - 각기 다른 3가지 방법으로 객체를 만들어주세요](https://codepen.io/jangka44/pen/aRPevX) - [문제 - 정답](https://codepen.io/jangka44/pen/oaJKLv) - [문제 - 객체안의 함수를 올바르게 정의해주세요.](https://codepen.io/jangka44/pen/ePopdJ) - [문제 - 정답](https://codepen.io/jangka44/pen/YJMyrL) - [문제 - 객체안의 함수를 올바르게 정의해주세요., this 사용](https://codepen.io/jangka44/pen/EdJVbW) # 4주차 - DOM API ## 공부 or 복습 방법 - 주석 공부법 => 라인 한줄 한줄 주석으로 이해한 내용을 적어보기 => 다 적을 수 있다면 말로 설명해보기 - 백지 공부법 => 이해가 되었다면 다시 백지부터 만들어보기 ## 필수영상 - [필수영상 - 웹개발 필수개념! DOM이 뭔가요? (+ Web API)](https://www.youtube.com/watch?v=mFawNZz_Uu0) - [필수영상 - DOM은 뭐고 가상 DOM은 뭔가요? (+ Svelte와 React의 차이)](https://www.youtube.com/watch?v=1ojA5mLWts8) - [필수영상 - 개발자라면 무조건 알아야하는 자료구조! 5분컷.](https://www.youtube.com/watch?v=Nk_dGScimz8) ## DOM 이란 ? - 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스 - 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 - 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다. - 새로운 HTML 요소나 속성을 추가할 수 있습니다. - 존재하는 HTML 요소나 속성을 제거할 수 있습니다. - HTML 문서의 모든 HTML 요소를 변경할 수 있습니다. - HTML 문서의 모든 HTML 속성을 변경할 수 있습니다. - HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다. - HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다. - HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다. ## 프론트엔드 생태계 변천사 - JavaScript 탄생 => jQuery 등장 => HTML5 등장 => Node.js 등장 => ES6 문법과 모바일과 SPA 앱 등장 => 계속해서 생태계 발전 중(현재) # DOM - 바닐라 - [개념 - 경고창](https://codepen.io/jangka44/pen/eYdmoRL) - [개념 - 바닐라 DOM 조작](https://codepen.io/jangka44/pen/BaLyEmR) - [문제 - 버튼을 누르면 div 2개의 배경색을 변경해주세요.(바닐라)](https://codepen.io/jangka44/pen/RwNxLrM) - [문제 - 정답](https://codepen.io/jangka44/pen/dyPJzER) - [문제 - 버튼을 누르면 div 7개를 각각 빨, 주, 노, 초, 파, 남, 보로 변경해주세요.(바닐라)](https://codepen.io/jangka44/pen/qBEpPZj) - [문제 - 정답](https://codepen.io/jangka44/pen/povpWbo) - [문제 - 버튼을 누르면 div 700개의 배경색을 파란색으로 변경해주세요.(바닐라)](https://codepen.io/jangka44/pen/GRgyMvY) - [문제 - 정답](https://codepen.io/jangka44/pen/gOboGXZ) # 4주차 - 모던 자바스크립트 - [필수영상 - 개발실력 수직상승을 위한 필수 역량](https://www.youtube.com/watch?v=Eq8ZRCokn5Y) - [필수영상 - 초보들은 무조건 보세요! TOP3 배열 메서드 5분컷!](https://www.youtube.com/watch?v=N7xZRJJ8Thc) - [필수영상 - 진짜 웹개발로 배우는 실용 자바스크립트 : 셀렉터 selector](https://www.youtube.com/watch?v=8rv8GTgYYrU) - [필수영상 - (자바스크립트 객체, 구조분해할당)](https://www.youtube.com/watch?v=fKjJIzvBJcg) ## 알고리즘 접근 전략 - [프로그래머스 코테 입문](https://school.programmers.co.kr/learn/challenges/beginner?order=acceptance_desc&languages=javascript) - [프로그래머스 고득점 Kit](https://school.programmers.co.kr/learn/challenges?tab=algorithm_practice_kit) ## 모던 자바스크립트 개념 - [개념 - const와 let](https://codepen.io/jangka44/pen/PoEERma?editors=0012) - [개념 - 배열과 객체](https://codepen.io/jangka44/pen/QWaamwJ?editors=0012) - [개념 - 객체를 만드는 다양한 방법](https://codepen.io/jangka44/pen/vYppjdM?editors=0012) - [개념 - 삼항연산자](https://codepen.io/jangka44/pen/ExooQMx?editors=0012) - [개념 - falsy](https://codepen.io/jangka44/pen/VwyyXMM?editors=0012) - [개념 - 구조분해할당](https://codepen.io/jangka44/pen/mdppXow?editors=0012) ## 모던 자바스크립트 실습 1. - [ ] [문제 - 배열에 과일이름들을 담아주세요, push 사용](https://codepen.io/jangka44/pen/abEppor?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/ExoZNqJ?editors=0102) - [정답](https://codepen.io/jangka44/pen/ExoZNqJ?editors=0012) 1. - [ ] [문제 - 배열안의 모든 숫자를 출력해주세요, for 사용](https://codepen.io/jangka44/pen/XWVppjw?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/WNdRRoJ?editors=0102) - [정답](https://codepen.io/jangka44/pen/WNdRRoJ?editors=0012) 1. - [ ] [문제 - 배열안의 모든 숫자를 출력해주세요, for 사용, 역순](https://codepen.io/jangka44/pen/PoEWWpK?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/popRRex?editors=0102) - [정답](https://codepen.io/jangka44/pen/popRRex?editors=0012) 1. - [ ] [문제 - 구구단 8단을 출력해주세요.](https://codepen.io/jangka44/pen/popPQKL?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/YzYVROX?editors=0102) - [정답](https://codepen.io/jangka44/pen/YzYVROX?editors=0012) 1. - [ ] [문제 - 사람객체를 6가지 방식으로 만들어주세요.](https://codepen.io/jangka44/pen/PoEQwLq?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/vYppygG?editors=0102) - [정답](https://codepen.io/jangka44/pen/vYppygG?editors=0012) 1. - [ ] [문제 - 삼항연산자로 문제를 해결해주세요.](https://codepen.io/jangka44/pen/bGaLNJe?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/WNddEgo?editors=0102) - [정답](https://codepen.io/jangka44/pen/WNddEgo?editors=0012) 1. - [ ] [문제 - falsy를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/QWaQbxQ?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/abEELwr?editors=0102) - [정답](https://codepen.io/jangka44/pen/abEELwr?editors=0012) 1. - [ ] [문제 - 구조분해할당을 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/MWrQwBP?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/GRyyMPE?editors=0102) - [정답](https://codepen.io/jangka44/pen/GRyyMPE?editors=0012) 1. - [ ] [문제 - 전개연산자를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/gOovpBm?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/rNppYNB?editors=0102) - [정답](https://codepen.io/jangka44/pen/rNppYNB?editors=0012) ## Array Functions 개념 - [개념 - 함수](https://codepen.io/jangka44/pen/oNppdKR?editors=0012) - [개념 - map](https://codepen.io/jangka44/pen/Vwyyxoo?editors=0012) - [개념 - filter](https://codepen.io/jangka44/pen/mdppKbJ?editors=0012) - [개념 - indexOf](https://codepen.io/jangka44/pen/RwxxJbN?editors=0012) ## Array Functions 실습 1. - [ ] [문제 - 함수를 다양한 형태로 선언해보세요, arrow function](https://codepen.io/jangka44/pen/vYpmPwG?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/yLpbwWq?editors=0102) - [정답](https://codepen.io/jangka44/pen/yLpbwWq?editors=0012) 1. - [ ] [문제 - join 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/mdpwJao?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/NWXgqeq?editors=0102) - [정답](https://codepen.io/jangka44/pen/NWXgqeq?editors=0012) 1. - [ ] [문제 - slice 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/qBpjaNE?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/ZEvypQV?editors=0102) - [정답](https://codepen.io/jangka44/pen/ZEvypQV?editors=0012) 1. - [ ] [문제 - indexOf 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/abEwmWb?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/yLpXagQ?editors=0102) - [정답](https://codepen.io/jangka44/pen/yLpXagQ?editors=0012) 1. - [ ] [문제 - lastIndexOf 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/PoEjGjJ?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/KKZqgmG?editors=0102) - [정답](https://codepen.io/jangka44/pen/KKZqgmG?editors=0012) 1. - [ ] [문제 - forEach 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/MWrojOx?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/abEwmLz?editors=0102) - [정답](https://codepen.io/jangka44/pen/abEwmLz?editors=0012) 1. - [ ] [문제 - every 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/mdpBKWM?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/bGaRwMj?editors=0102) - [정답](https://codepen.io/jangka44/pen/bGaRwMj?editors=0012) 1. - [ ] [문제 - some 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/popWKeG?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/KKZqgeJ?editors=0102) - [정답](https://codepen.io/jangka44/pen/KKZqgeJ?editors=0012) 1. - [ ] [문제 - filter 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/GRyMGmM?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/xxprEaV?editors=0102) - [정답](https://codepen.io/jangka44/pen/xxprEaV?editors=0012) 1. - [ ] [문제 - map 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/XWVVJYq?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/MWrEXmd?editors=0102) - [정답](https://codepen.io/jangka44/pen/MWrEXmd?editors=0012) 1. - [ ] [문제 - reduce 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/BaJJyVK?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/eYyGjjR?editors=0102) - [정답](https://codepen.io/jangka44/pen/eYyGjjR?editors=0012) 1. - [ ] [문제 - reduceRight 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/ZEvvYov?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/VwyMBEV?editors=0102) - [정답](https://codepen.io/jangka44/pen/VwyMBEV?editors=0012) 1. - [ ] [문제 - pop 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/KKZyLGb?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/gOooyLy?editors=0102) - [정답](https://codepen.io/jangka44/pen/gOooyLy?editors=0012) 1. - [ ] [문제 - push 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/bGaYymK?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/yLpzqQg?editors=0102) - [정답](https://codepen.io/jangka44/pen/yLpzqQg?editors=0012) 1. - [ ] [문제 - reverse 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/vYpWwVm?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/vYpeaQP?editors=0102) - [정답](https://codepen.io/jangka44/pen/vYpeaQP?editors=0012) 1. - [ ] [문제 - sort 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/PoEOvBO?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/popWZqR?editors=0102) - [정답](https://codepen.io/jangka44/pen/popWZqR?editors=0012) 1. - [ ] [문제 - splice 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/XWVzwYv?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/BaJmeYJ?editors=0102) - [정답](https://codepen.io/jangka44/pen/BaJmeYJ?editors=0012) 1. - [ ] [문제 - unshift 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/bGaaZKz?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/rNpYgvE?editors=0102) - [정답](https://codepen.io/jangka44/pen/rNpYgvE?editors=0012) ## 배열 API 치트시트 , 도형 ### Deriving a new Array from an existing Array ``` ['■','●','▲'].slice(1, 3) ⟼ ['●','▲'] ['■','●','■'].filter(x => x==='■') ⟼ ['■','■'] ['▲','●'].map(x => x+x) ⟼ ['▲▲','●●'] ['▲','●'].flatMap(x => [x,x]) ⟼ ['▲','▲','●','●'] ``` ### Computing a summary of an Array ``` ['■','●','▲'].some(x => x==='●') ⟼ true ['■','●','▲'].every(x => x==='●') ⟼ false ['■','●','▲'].join('-') ⟼ '■-●-▲' ['■','●'].reduce((result,x) => result+x, '▲') ⟼ '▲■●' ['■','●'].reduceRight((result,x) => result+x, '▲') ⟼ '▲●■' ``` ### Changing all of an Array (the input Array is modified and returned) ``` ['■','●','▲'].fill('●') ⟼ ['●','●','●'] ['■','●','▲'].reverse() ⟼ ['▲','●','■'] ['■','●','■'].sort() ⟼ ['■','■','●'] ``` ### Finding Array elements ``` ['■','●','■'].includes('■') ⟼ true ['■','●','■'].indexOf('■') ⟼ 0 ['■','●','■'].lastIndexOf('■') ⟼ 2 ['■','●','■'].find(x => x==='■') ⟼ '■' ['■','●','■'].findIndex(x => x==='■') ⟼ 0 ``` ### Listing elements (spreading via '...' is needed because the methods return iterables) ``` [...['■','●','▲'].keys()] ⟼ [0,1,2] [...['■','●','▲'].values()] ⟼ ['■','●','▲'] [...['■','●','▲'].entries()] ⟼ [[0,'■'],[1,'●'],[2,'▲']] ``` ### Adding or removing an element at either end of an Array ``` arr=['■','●']; arr.push('▲'); arr ⟼ ['■','●','▲'] arr=['■','●','▲']; arr.pop(); arr ⟼ ['■','●'] arr=['■','●']; arr.unshift('▲'); arr ⟼ ['▲','■','●'] arr=['▲','■','●']; arr.shift(); arr ⟼ ['■','●'] ``` # 4주차 - 미니 프로젝트 - [필수영상 - 바닐라 자바스크립트 건너뛰고, 리액트 공부하지말라구!](https://www.youtube.com/watch?v=qlFLBQ_ixtg) - [필수영상 - [10분 테코톡] ? 브랜의 프론트엔드에서 Component란](https://www.youtube.com/watch?v=2C1tXVHu9XQ) - [필수영상 - 구글링 잘하는 법 7개 (네이버쓰셈 ㅅㄱ)](https://www.youtube.com/watch?v=Y8bH6lGZD1I) - [바닐라자바스크립트 설치?](http://vanilla-js.com/) ## 바닐라로 Simple-to-do-app 만들기 ## 기본 요구사항 - 바닐라 js로 todo app 을 만들어 주세요. - index.html에 메인 태그를 통해 앱이 진입 되도록 해주세요. - DOM 을 담은 변수는 앞에 $로 시작해주세요. ex) $target - 데이터를 갱신하는 메서드는 set 을 붙여서 작성해주세요. ex) setState - 디렉토리구조 - index.html - /src/main.js - /src/App.js - /src/Header.js - /src/TodoForm.js - /src/TodoList.js - /src/storage.js - App.js 에서 Header.js TodoForm.js TodoList.js 가 import 되어한다. - Header.js 는 text 요소를 출력한다. - TodoForm.js 는 input box 가 있고 할 일을 적고 입력을 누르면 할일이 추가된다. - TodoList.js 는 입력 받은 할일을 리스트로 출력한다. - 완성 화면 ![img](https://i.imgur.com/ISsJk0O.png) - 완성된 코드는 github에 푸쉬 후 슬랙 화이팅 채널에 올리기 ? +) 도전과제 - storage.js 를 이용해 데이터를 저장하기 ### 제공 코드 - index.html ```html Simple-to-do-app

``` - /src/storage.js ```js const storage = window.localStorage; export const setItem = (key, value) => { try { storage.setItem(key, value); } catch (e) { console.log(e); } } export const getItem = (key, defaultValue) => { try{ const storedValue = storage.getItem(key); if (storedValue) { return JSON.parse(storedValue); } return defaultValue; } catch (e) { console.log(e); return defaultValue; } } ``` ## DOM 제어 요소 정리 ### CheatSheet | 메소드 또는 기능 | 설명 | |---------------------------------|---------------------------------------------------| | getElementById(id) | 주어진 ID로 DOM에서 요소를 가져옵니다. | | getElementsByClassName(className) | 주어진 클래스 이름으로 DOM에서 요소들을 가져옵니다. | | getElementsByTagName(tagName) | 주어진 태그 이름으로 DOM에서 요소들을 가져옵니다. | | querySelector(cssSelector) | 주어진 CSS 선택자로 DOM에서 첫 번째 일치하는 요소를 가져옵니다. | | querySelectorAll(cssSelector) | 주어진 CSS 선택자로 DOM에서 모든 일치하는 요소들을 가져옵니다. | | innerHTML | 요소의 내부 HTML 콘텐츠를 가져오거나 설정합니다. | | innerText | 요소의 내부 텍스트 콘텐츠를 가져오거나 설정합니다. | | getAttribute(attrName) | 요소의 특정 속성 값을 가져옵니다. | | setAttribute(attrName, value) | 요소의 특정 속성 값을 설정합니다. | | classList | 요소의 클래스 리스트를 조작합니다. (요소의 클래스 추가, 삭제, 토글 등) | | addEventListener(event, handler)| 요소에 이벤트 리스너를 추가합니다. | | removeEventListener(event, handler)| 요소에 추가한 이벤트 리스너를 제거합니다. | | createElement(tagName) | 새로운 HTML 요소를 생성합니다. | | appendChild(childElement) | 새로운 자식 요소를 기존 요소에 추가합니다. | | removeChild(childElement) | 기존의 자식 요소를 제거합니다. | ## 설명과 예제코드 - getElementById() 주어진 ID로 DOM에서 요소를 가져옵니다. ```js const element = document.getElementById('elementId'); ``` - getElementsByClassName(): 주어진 클래스 이름으로 DOM에서 요소들을 가져옵니다. (여러 개의 요소가 반환됩니다.) ```js const elements = document.getElementsByClassName('className'); ``` - getElementsByTagName(): 주어진 태그 이름으로 DOM에서 요소들을 가져옵니다. (여러 개의 요소가 반환됩니다.) ```js const elements = document.getElementsByTagName('tagname'); ``` - querySelector(): 주어진 CSS 선택자로 DOM에서 첫 번째로 일치하는 요소를 가져옵니다. ```js const element = document.querySelector('cssSelector'); ``` - querySelectorAll(): 주어진 CSS 선택자로 DOM에서 모든 일치하는 요소들을 가져옵니다. (NodeList로 반환됩니다.) ```js const elements = document.querySelectorAll('cssSelector'); ``` - innerHTML: 요소의 내부 HTML 콘텐츠를 가져오거나 설정합니다. ```js const element = document.getElementById('elementId'); const htmlContent = element.innerHTML; element.innerHTML = '

New HTML content

'; ``` - innerText: 요소의 내부 텍스트 콘텐츠를 가져오거나 설정합니다. ```js const element = document.getElementById('elementId'); const textContent = element.innerText; element.innerText = 'New text content'; ``` - getAttribute(): 요소의 특정 속성 값을 가져옵니다. ```js const element = document.getElementById('elementId'); const attributeValue = element.getAttribute('attributeName'); ``` - setAttribute(): 요소의 특정 속성 값을 설정합니다. ```js const element = document.getElementById('elementId'); element.setAttribute('attributeName', 'attributeValue'); ``` - classList: 요소의 클래스 리스트를 조작합니다. (요소의 클래스 추가, 삭제, 토글 등) ```js const element = document.getElementById('elementId'); element.classList.add('className'); element.classList.remove('className'); element.classList.toggle('className'); ``` - addEventListener(): 요소에 이벤트 리스너를 추가합니다. ```js const element = document.getElementById('elementId'); element.addEventListener('click', eventHandler); ``` - removeEventListener(): 요소에 추가한 이벤트 리스너를 제거합니다. ```js const element = document.getElementById('elementId'); element.removeEventListener('click', eventHandler); ``` - createElement(): 새로운 HTML 요소를 생성합니다. ```js const newElement = document.createElement('tagname'); ``` - appendChild(): 새로운 자식 요소를 기존 요소에 추가합니다. ```js const parentElement = document.getElementById('parentElementId'); parentElement.appendChild(newElement); ``` - removeChild(): 기존의 자식 요소를 제거합니다. ```js const parentElement = document.getElementById('parentElementId'); const childElement = document.getElementById('childElementId'); parentElement.removeChild(childElement); ``` # 7주차 ## 필수시청 교양 영상 - [[10분 테코톡] ? 인치의 불변성](https://www.youtube.com/watch?v=eV4Yzssr9MA) - [Ajax가 무엇인지 설명하는 영상 (+CORS, fetch 어쩌구)](https://www.youtube.com/watch?v=nKD1atl6cAw) - [[코딩만화] 비동기 프로그래밍이 뭔가요?](https://www.youtube.com/watch?v=m0icCqHY39U) ## 불변성 개념 - [개념 - 레퍼런스](https://codepen.io/jangka44/pen/xxpYZNa?editors=0012) - [개념 - 불변성](https://codepen.io/jangka44/pen/qBpxbGQ?editors=0012) ### 불변성 실습 1. - [ ] [문제 - 레퍼런스를 활용해서 원본값을 다른 함수에서도 수정할 수 있도록 해주세요, 배열이용](https://codepen.io/jangka44/pen/VwyyOLo?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/KKZZLMy?editors=0102) - [정답](https://codepen.io/jangka44/pen/KKZZLMy?editors=0012) 1. - [ ] [문제 - 레퍼런스를 활용해서 원본값을 다른 함수에서도 수정할 수 있도록 해주세요, 객체이용](https://codepen.io/jangka44/pen/wvppbWg?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/zYppQBM?editors=0102) - [정답](https://codepen.io/jangka44/pen/zYppQBM?editors=0012) 1. - [ ] [문제 - pop 함수 대신 불변성 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/gOooydO?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/RwxxOoE?editors=0102) - [정답](https://codepen.io/jangka44/pen/RwxxOoE?editors=0012) 1. - [ ] [문제 - push 함수 대신 불변성 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/XWVVQPZ?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/mdppgpY?editors=0102) - [정답](https://codepen.io/jangka44/pen/mdppgpY?editors=0012) 1. - [ ] [문제 - reverse 함수 대신 불변성 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/ExooJGR?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/PoEEgRY?editors=0102) - [정답](https://codepen.io/jangka44/pen/PoEEgRY?editors=0012) 1. - [ ] [문제 - sort 함수 대신 불변성 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/jOYYoOw?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/MWrrRVm?editors=0102) - [정답](https://codepen.io/jangka44/pen/MWrrRVm?editors=0012) 1. - [ ] [문제 - map 함수를 사용해서 불변성을 유지시켜주세요, 배열이용](https://codepen.io/jangka44/pen/qBppGEv?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/oNppRgR?editors=0102) - [정답](https://codepen.io/jangka44/pen/oNppRgR?editors=0012) 1. - [ ] [문제 - flatMap을 이용해서 1부터 3까지 5번 반복되는 1차원 배열을 만들어주세요.](https://codepen.io/jangka44/pen/qBppGEv?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/JjMMqWq?editors=0102) - [정답](https://codepen.io/jangka44/pen/JjMMqWq?editors=0012) ## 필수교양영상 - [성공적인 개발 공부를 위한 6가지 방법](https://youtu.be/ozUUDHpOqo4) - [코딩 1도 모르는 사람이 빠르고 재밌게 웹 프론트엔드 개발자 되는 로드맵](https://youtu.be/E9YDnkNHm4U) - [[10분 테코톡] 루루의 Scope & Closure](https://youtu.be/xJtVVLPxgco) ## 프로그램을 완성하는 TIP - 분할 정복법 - 분할정복만 잘하면 누구나 위대한 프로그램을 만들 수 있다! ## Vanilla Todo App 만들기 요구사항 해설 - [강사 레포 버전](https://github.com/devpang20/mwu-v-todo2309.git) - [강사 레포 1s 버전](https://github1s.com/devpang20/mwu-v-todo2309) - [강사 레포 전체 커밋](https://github.com/devpang20/mwu-v-todo2309/commits/main) - 파일 셋팅 - [GIT](https://github.com/devpang20/mwu-v-todo2309/commit/c6e97e) - 컴포넌트화 - [GIT](https://github.com/devpang20/mwu-v-todo2309/commit/9b80688) - 할일 추가, 할일 리스트 - [GIT](https://github.com/devpang20/mwu-v-todo2309/commit/584ca35) - 삭제 기능 추가 - [GIT](https://github.com/devpang20/mwu-v-todo2309/commit/ac23b57) - 수정 기능 추가 - [GIT](https://github.com/devpang20/mwu-v-todo2309/commit/fac65c9) - 로컬스토리지 추가 - [GIT](https://github.com/devpang20/mwu-v-todo2309/commit/c00ac41) ## React 로 구현해 보는 Todo App ```js npm create vite@latest √ Project name: . #현재 디렉토리에 설치 √ Package name: todoapp √ Select a framework: » React √ Select a variant: » JavaScript npm install npm run dev ``` ## React Todo App 만들기 - [강사 레포 전체 커밋](https://github.com/devpang20/simple_react_todo2308/commits/main) - [강사 레포 1s 버전](https://github1s.com/devpang20/simple_react_todo2308/commits/main) - 파일 초기화 - [GIT](https://github.com/devpang20/simple_react_todo2308/commit/5d87263) - readme 추가 - [GIT](https://github.com/devpang20/simple_react_todo2308/commit/a8ff5d7) - 컴포넌트 나누기 추가 - [GIT](https://github.com/devpang20/simple_react_todo2308/commit/c32aabb) - 1차구현 - [GIT](https://github.com/devpang20/simple_react_todo2308/commit/4314fdd) - 삭제 기능 개발 - [GIT](https://github.com/devpang20/simple_react_todo2308/commit/c9930ca) - 할일 등록 수정 - [GIT](https://github.com/devpang20/simple_react_todo2308/commit/bd5fd7e) - 할일 여부 체크 - [GIT](https://github.com/devpang20/simple_react_todo2308/commit/0b36c31) - TodoItem 컴포넌트 나누기 - [GIT](https://github.com/devpang20/simple_react_todo2308/commit/e1097c5) # 10주차 ~ 11주차 ## 프로젝트 1 해설 - UI/UX - ![img](https://i.imgur.com/54u6KY8.png) - [강사 레포](https://github.com/devpang20/calculator2309_2nd) - [강사 레포 전체 커밋](https://github.com/devpang20/calculator2309_2nd/commits/main) - readme 추가 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/b2a59b1) - 기본 UI 완성 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/cd0260c) - data 속성 추가 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/7064bcd) - calculator class 만들기 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/4b7e666) - 계산기 기능 관련 DOM 셋팅 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/d150081) - 숫자 버튼 기능(onPressNumber) 출력 구현 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/be7a202) - 사칙연산 버튼 기능(onPressOperation) 출력 구현 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/c66fb10) - 1차 벨리데이션 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/ea3125e) - onEqual 기능 구현 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/f46f2b3) - onReset 기능 구현 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/33e1f7c) - onDelete 기능 구현 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/053dc0f) - onEqual 리펙토링 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/e3245c5) # 12주차 ~ 16주차 ## 프로젝트 2 해설 ### UI - ![img](https://i.imgur.com/BCTSd9R.png) ### api ```js export const API_END_POINT = "https://mwu1.notion.edu-api.programmers.co.kr" export const request = async(url, option = {}) => { try { const res = await fetch(`${API_END_POINT}${url}`, { ...option, headers: { "x-username": "test", "Content-Type": "application/json" } }) if (res.ok) { return res.json(); } throw new Error('API 처리 문제') } catch (e) { console.log(e.message) } } ``` - [강사 레포](https://github.com/devpang20/notion_clone_2309) - [강사 레포 전체 커밋](https://github.com/devpang20/notion_clone_2309/commits/main) - init - [GIT](https://github.com/devpang20/notion_clone_2309/commit/0d3cb8ce) - 프로젝트 셋팅 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/17f45a6a) - 초기 컴포넌트 구성 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/3edd4c5) - 테스트 데이터 출력 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/3b9391a) - 초기 스타일 작업 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/27fb33b) - tree 형태 데이터 출력 구현 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/49a0cb9) - New Button 만들기 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/d774632) - api 연동 테스트 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/03f4426) - 전체 목록 api 연동 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/700e250) - 등록 기능 관련 editor 구현 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/a6cde5c) - Editor, EditorPage컨포넌트 분리 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/3dfdd5e) - EditorPage, Editor 1차 구현 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/614a2c6) - EditorPage, Editor 2차 구현 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/8e5990d) - Editor, EditorPage 리펙토링 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/367f1d9) - Sidebar 삭제 구현 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/a8bb5f5) - Sidebar 등록 구현 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/1737373) - 라우터 파일 만들기 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/073a686) - Sidebar, Editor 데이터 연동 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/63acd53) - 에러 해결 - [GIT](https://github.com/devpang20/notion_clone_2309/commit/5fd75e1) ## 영화 서비스 앱 만들기(17주차 ~ 20주차) - [강사 레포](https://github.com/devpang20/movie_app2310.git) - [강사 레포 전체 커밋](https://github.com/devpang20/movie_app2310/commits/main) - vite + 리액트 설치 ```bash npm create vite@latest √ Project name: . or 생성할 폴더명(본인이름) √ Package name: movie-app √ Select a framework: » React √ Select a variant: » JavaScript npm install npm run dev ``` - 의존 모듈 설치 명령어 ```bash # 스타일 컴포넌트 npm install styled-components@5.3.10 # 라우터 npm install react-router-dom # 슬라이드쇼 npm install react-responsive-carousel ``` - [테스트 데이터](https://github.com/devpang20/movie_app2310/blob/main/src/data/test.js) - [global css](https://github.com/devpang20/movie_app2310/blob/main/src/styles/global.js) - [파일 초기화](https://github.com/devpang20/movie_app2310/commit/71213321b16849c9410bcad4c21fb44df14cbaa7) - [기본 구조 셋팅, 테스트 데이터 셋팅](https://github.com/devpang20/movie_app2310/commit/177847194cb0d51163fce1396c60d1580b42143b) - [메인, 서브 페이지 셋팅(라우터)](https://github.com/devpang20/movie_app2310/commit/b956515ede1fc7bebd291faa3dd2703204773a2d) - [스타일 작업(스타일 컴포넌트 설치, 전역 스타일 적용)](https://github.com/devpang20/movie_app2310/commit/5f6eec1d068cc68c23cb09707e13bd4094d777de) - [API 키 발급 관련 처리](https://github.com/devpang20/movie_app2310/commit/52fc87023f03e355aeab3b728cf8fb24240e50d6) - [헤더 작업 1차](https://github.com/devpang20/movie_app2310/commit/8caeedca8aacb2b2fbf4367e61b8492807ec1aa5) - [헤더 작업 2차](https://github.com/devpang20/movie_app2310/commit/be14621649305b652ddb08645990df1b1568c8cc) - [홈 화면 구현 1차](https://github.com/devpang20/movie_app2310/commit/194de2ea5b58432306c16609e6e5c14ee75adef1) - [MovieItem 컴포넌트 작업](https://github.com/devpang20/movie_app2310/commit/b0f999d051529e30a1e39ca24e0222ed1c9ba965) - [홈 화면 API 연동](https://github.com/devpang20/movie_app2310/commit/98c1b9599140496da732cbe393ae3aa1a5117aa4) - [서브페이지 라우팅, 페이지 작업](https://github.com/devpang20/movie_app2310/commit/741415c) - [Card 컴포넌트 작업](https://github.com/devpang20/movie_app2310/commit/6288fbb) - [상세페이지 1차 작업](https://github.com/devpang20/movie_app2310/commit/0fef098) - [상세페이지 2차 작업](https://github.com/devpang20/movie_app2310/commit/0e72077) - [검색기능 개발](https://github.com/devpang20/movie_app2310/commit/333979e) - [기타 안정화](https://github.com/devpang20/movie_app2310/commit/a94e196) $$hide - 사칙연산 버튼 기능(onPressOperation) 출력 구현 - [GIT](https://github.com/devpang20/calculator2309_2nd/commit/2f5c004) $$ ## 프로젝트 4 요구사항 수요도 조사 - Reactjs vs Reactjs +Express vs Nextjs ~~ - React 만을 이용한 기술블로그 만들기! - React 기술 스택 - React Router - Immer.js - Recoil(상태관리) - TanStack Query(React Query)~~ - React +Express 를 이용한 풀스택 서비스 만들기 - 프론트 - React 기술 스택 - React Router - Immer.js - Recoil(상태관리) - TanStack Query(React Query) - 백엔드 - Express 기술 스택 - nodejs - MariaDB(MySQL) ~~ - Next.js 를 이용한 기술블로그 만들기 ! - 풀스택 프레임 워크를 이용한 SSR 서비스 만들기! - TanStack Query(React Query)~~ --- - 타입스크립트 사용여부(구현 난이도가 올라갑니다) - 자바스크립트 vs ~~타입스크립트~~ - 서버 배포여부 - AWS(서버 비용 발생) - NCP 3개월까지 무료(10만포인트 무료제공) - 무료 호스팅 사용하기(깃헙 페이지, Vercel 등) # 21주 ~ 24주 ## 프로젝트 4 - [프로젝트 4 요구사항](https://www.slog.gg/p/13174/live)