Simple-to-do-app

$$config title: CNU_SW아카데미-FE 과정 3기 keywords: - IT - Front-End - CNU $$ ![img](https://i.imgur.com/5Y8SYPp.png) ![img](https://i.imgur.com/42NmqzO.png) --- --- # 수업 - 수업명 : CNU_SW아카데미-FE 과정 3기 수업페이지 - [주소 : https://slog.gg/p/12564](https://slog.gg/p/12564) # 기초수련 - [타이핑 정글](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/) # 무조건 알아야하는 사실 - 지식은 적을 수록 좋고, 지혜는 많을 수록 좋다. - 적게 배우고, 많이 활용하세요. - 공학은 예술이 아니다. - 완벽주의는 제발 버리세요. - 초보가 완벽을 추구하면 절대 안됩니다. - 초보자는 작동하게 만드는 것을 추구해야 합니다. - 개발실력은 자전거 타기와 비슷하다. - 많이 넘어져 보는게 최고의 공부법이다. # 초심자를 방해하는 생각 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) - [문제 - 정답](https://codepen.io/jangka44/pen/BqEomb) # 2주차 ## 공부 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) ## DOM - 제이쿼리 라이브러리 활용(체험용) - [개념 - 제이쿼리, 개요](https://codepen.io/jangka44/pen/JjRRVYG) - [개념 - 제이쿼리, 원리](https://codepen.io/jangka44/pen/JjRRVYG) - [문제 - 버튼을 누르면 div 2개의 배경색을 변경해주세요.](https://codepen.io/jangka44/pen/RwNxLrM) - [문제 - 정답](https://codepen.io/jangka44/pen/ZEppZgO) - [문제 - 버튼을 누르면 div 7개를 각각 빨, 주, 노, 초, 파, 남, 보로 변경해주세요.](https://codepen.io/jangka44/pen/qBEpPZj) - [문제 - 정답](https://codepen.io/jangka44/pen/KKggLdd) - [문제 - 버튼을 누르면 div 700개의 배경색을 파란색으로 변경해주세요.](https://codepen.io/jangka44/pen/GRgyMvY) - [문제 - 정답](https://codepen.io/jangka44/pen/vYXXwyQ) # 3주차 ## 필수영상 - [필수영상 - 개발실력 수직상승을 위한 필수 역량](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) ## 지금까지 배운 내용 테스트 => 해당 문제를 모두 풀수 있어야 됩니다. - [배열함수를 이용하여 문제를 풀어주세요.](https://codepen.io/jangka44/pen/gOoEwgQ?editors=0012) ## 바닐라로 Simple-to-do-app 만들기 - [바닐라자바스크립트 설치?](http://vanilla-js.com/) ## 기본 요구사항 - 바닐라 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 제어 요소 정리 ### CheatShee | 메소드 또는 기능 | 설명 | |---------------------------------|---------------------------------------------------| | 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); ``` # 5주차 ## 필수시청 교양 영상 - [[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) ## Todo App 만들기 1차 요구사항 해설 - [강사 레포 1s 버전](https://github1s.com/devpang20/vanilla_todo_2307) - [강사 레포 전체 커밋](https://github.com/devpang20/vanilla_todo_2307/commits/main) - 셋팅 [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/b341eaff) - 예시 코드 [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/95e6e59) - 프로젝트 기본 셋업 [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/7228032) - App.js 에서 Header.js TodoForm.js TodoList.js 가 import 되어한다. [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/e12969c) - Header.js 는 text 요소를 출력한다. [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/9a08205) - TodoForm.js, TodoList.js 요구사항에 맞게 구조를 만든다. [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/d4f4f8d) - 투두 할일 추가 및 리스트 출력 [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/b276b63) - Header.js 수정 [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/570e5d9) - 도전과제 스토리지 자장 구현 [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/41c5b18) ## 불변성 개념 - [개념 - 레퍼런스](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) ## 요구사항 2차 - 할일 대한 수정 기능 구현 => 체크박스 누르면 할일에 밑줄 그어지기 - 할일 삭제 기능 구현 => 삭제버튼을 누르면 해당 할일 삭제 ## 도전과제 - fetch 를 이용해서 api 연동 - 완성 화면 ![img](https://i.imgur.com/BNgmRBE.png) - 완성된 코드는 github에 푸쉬 후 슬랙 화이팅 채널에 올리기 ? ## api 정보 - [프로그래머스 api 정보 바로가기](https://campus.programmers.co.kr/app/courses/17642/curriculum/lessons/202600) ``` https://cnu2.todo.edu-api.programmers.co.kr ``` # 6주차 ## 필수교양영상 - [성공적인 개발 공부를 위한 6가지 방법](https://youtu.be/ozUUDHpOqo4) - [코딩 1도 모르는 사람이 빠르고 재밌게 웹 프론트엔드 개발자 되는 로드맵](https://youtu.be/E9YDnkNHm4U) - [[10분 테코톡] 루루의 Scope & Closure](https://youtu.be/xJtVVLPxgco) ## 프로그램을 완성하는 TIP - 분할 정복법 - 분할정복만 잘하면 누구나 위대한 프로그램을 만들 수 있다! ## React 로 구현해 보는 Todo ```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 만들기 [강사 레포 1s 버전](https://github1s.com/devpang20/simple_react_todo2308) - 파일 초기화 [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) # 7주차 ## 필수교양영상 - [데이터 유치원 - 네? 저는 JSON이 뭔지 모르는데...](https://youtu.be/Pvo_AT8hnso) - [스파르타코딩클럽 - 엄마에게 API를 가르쳐보았다.](https://youtu.be/uawQC2b0Pqg) - [얄팍한 코딩사전 - REST API가 뭔가요?](https://youtu.be/iOueE9AXDQQ) ## Vanilla Todo App 만들기 2차 요구사항 해설 - [강사 레포 1s 버전](https://github1s.com/devpang20/vanilla_todo_2307) - [강사 레포 전체 커밋](https://github.com/devpang20/vanilla_todo_2307/commits/main) - 삭제 기능 개발 - [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/4926133) - 할일 등록 수정 - [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/0afb8a5) - 할일 체크 여부 - [GIT](https://github.com/devpang20/vanilla_todo_2307/commit/8f034fb) ## React Todo App 만들기 2차 요구사항 해설 - [강사 레포 1s 버전](https://github1s.com/devpang20/simple_react_todo2308) - [강사 레포 전체 커밋](https://github.com/devpang20/simple_react_todo2308/commits/main) - 삭제 기능 개발 - [GIT](https://github.com/devpang20/simple_react_todo2308/commits/c9930ca) - 할일 등록 수정 - [GIT](https://github.com/devpang20/simple_react_todo2308/commits/bd5fd7e) - 할일 여부 체크 - [GIT](https://github.com/devpang20/simple_react_todo2308/commits/0b36c31) - TodoItem 컴포넌트 나누기 - [GIT](https://github.com/devpang20/simple_react_todo2308/commits/e1097c5) # 8주차 ## 필수교양영상 - [[10분 테코톡] 룩소의 React Hooks](https://youtu.be/qjEcsNYFWYg?si=k6jN6jmTdsDTHtbo) - [[10분 테코톡] 온스타의 상태관리](https://youtu.be/jqir73Lourk?si=yCDzl8Ik2D7lOvAu) - [1분 JS - 불변의 Immer.js](https://youtube.com/shorts/Dbl8n5uGPZk?si=kadM84m-9jMmGqF2) ## 포켓몬 도감 클론 - [참고 사이트](https://pokemonkorea.co.kr/pokedex) ## 포켓몬 도감 만들기 API - [POKE API](https://pokeapi.co/) - [POKE API - 포켓몬 리스트](https://pokeapi.co/api/v2/pokemon) - [JSON VIEWER - 크롬 익스텐션](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ko) ## 사전에 필요한 학습내용 - Hooks api - immer.js - 전역상태관리(recoil) - fetch ### 사전 준비 - [cdnjs.com](https://cdnjs.com/) - [리액트 시작 소스코드(가벼운 version)](https://to2.kr/dun) ### 소스코드 - [강사 레포 1s 버전](https://github1s.com/devpang20/pokemon_2308) - [강사 레포](https://github.com/devpang20/pokemon_2308) - [강사 레포 전체 커밋](https://github.com/devpang20/pokemon_2308/commits/main) ```js npm create vite@latest √ Project name: . #현재 디렉토리에 설치 √ Package name: todoapp √ Select a framework: » React √ Select a variant: » JavaScript npm install npm run dev ``` - 초기화 - [GIT](https://github.com/devpang20/pokemon_2308/commit/ea839e) - readme 추가 - [GIT](https://github.com/devpang20/pokemon_2308/commit/9b6ed2) - api 연동 - [GIT](https://github.com/devpang20/pokemon_2308/commit/1422275) - 이전 이후 페이지 이동 추가 - [GIT](https://github.com/devpang20/pokemon_2308/commit/64bf114) ## 9주차 ## 필수교양영상 - [와 Vite 쓰면 리액트 10배 빨라짐 (과장아님)](https://youtu.be/iX3Nu1FcZKA?si=CoviPEmiZuk4ovFA) - [아 저는 css 버리고 tailwind 씁니다](https://youtu.be/--D4WMPEIZI?si=NPwZicmLnylja_fP) ## 학습자료 - [이번에야말로 CSS Flex를 익혀보자](https://studiomeal.com/archives/197) - [CSS flexbox 속성 배우기 게임 - FLEXBOX FROGGY](https://flexboxfroggy.com/#ko) ## 2차작업 - 이미지 받아오기 - [GIT](https://github.com/devpang20/pokemon_2308/commit/f73d436) ``` https://cdn.jsdelivr.net/gh/PokeAPI/sprites/sprites/pokemon/[이미지번호].png ``` - 이미지 불러오기 로직 리펙토링 - [GIT - 1](https://github.com/devpang20/pokemon_2308/commit/5e7e1d1) - [GIT - 2](https://github.com/devpang20/pokemon_2308/commit/ab0c22e) - 컴포넌트 최적화 작업 useCallback - [GIT](https://github.com/devpang20/pokemon_2308/commit/dfb6595) - 의존모듈 설치 React-Router, immer, recoil, list 라우팅 처리 - [GIT](https://github.com/devpang20/pokemon_2308/commit/ae7abff) - 상세페이지 구현 - [GIT](https://github.com/devpang20/pokemon_2308/commit/9b88e3f) - 디자인 개선 - [GIT](https://github.com/devpang20/pokemon_2308/commit/ec4969d) # 10주차 ## 프로젝트 1 해설 - UI/UX - ![img](https://i.imgur.com/54u6KY8.png) - [강사 레포](https://github.com/devpang20/calculator2309) - [강사 레포 전체 커밋](https://github.com/devpang20/calculator2309/commits/main) - [일부공개 - 해설영상](https://youtu.be/EdLHZSVcQZU) - init - [GIT](https://github.com/devpang20/calculator2309/commit/7e836f) - UI 구현 - [GIT](https://github.com/devpang20/calculator2309/commit/6f3ea6) - data 속성 및 calculator class 만들기 - [GIT](https://github.com/devpang20/calculator2309/commit/76fdae) - DOM 생성 - [GIT](https://github.com/devpang20/calculator2309/commit/d176081) - 숫자 버튼 기능(onPressNumber) 구현 - [GIT](https://github.com/devpang20/calculator2309/commit/7c43096) - 사칙연산 버튼 기능(onPressOperation) 구현 - [GIT](https://github.com/devpang20/calculator2309/commit/79bee93) - onPressNumber, onPressOperation 벨리데이션 1차 구현 - [GIT](https://github.com/devpang20/calculator2309/commit/af28957) - onEqual 기능 구현 - [GIT](https://github.com/devpang20/calculator2309/commit/c3975d) - onReset 기능 구현 - [GIT](https://github.com/devpang20/calculator2309/commit/d97a19) - onDelete 기능 구현 - [GIT](https://github.com/devpang20/calculator2309/commit/b2c41b) # 11주차 ~ 13주차 ## step1 ## 프로젝트 2 해설 ### UI - ![img](https://i.imgur.com/BCTSd9R.png) ### 요구사항 ``` 기본 요구사항 바닐라 JS만을 이용해 노션을 클로닝합니다. 기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다. 글 단위를 Document라고 합니다. Document는 Document 여러개를 포함할 수 있습니다. 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링합니다. Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링합니다. 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링 합니다. Document Tree에서 각 Document 우측에는 + 버튼이 있습니다. 해당 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다. 편집기에는 기본적으로 저장 버튼이 없습니다. Document Save API를 이용해 지속적으로 서버에 저장되도록 합니다. History API를 이용해 SPA 형태로 만듭니다. 루트 URL 접속 시엔 별다른 편집기 선택이 안 된 상태입니다. /documents/{documentId} 로 접속시, 해당 Document 의 content를 불러와 편집기에 로딩합니다. 보너스 요구사항 기본적으로 편집기는 textarea 기반으로 단순한 텍스트 편집기로 시작하되, 여력이 되면 div와 contentEditable을 조합해서 좀 더 Rich한 에디터를 만들어봅니다. 편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링하도록 추가합니다. 편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가합니다. 그외 개선하거나 구현했으면 좋겠다는 부분이 있으면 적극적으로 구현해봅니다! ``` - [강사 레포](https://github.com/devpang20/notion_2309) - [강사 레포 전체 커밋](https://github.com/devpang20/notion_2309/commits/main) - init - [GIT](https://github.com/devpang20/notion_2309/commit/0) - 초기 디렉토리 셋팅 - [GIT](https://github.com/devpang20/notion_2309/commit/c5d004d) - 사이드바 컴포넌트 분리 작업 - [GIT](https://github.com/devpang20/notion_2309/commit/5cd4863) - 사이드바 컴포넌트 render 함수 추가 - [GIT](https://github.com/devpang20/notion_2309/commit/7e432a) - Editor 컴포넌트 추가 - [GIT](https://github.com/devpang20/notion_2309/commit/d27567c) - DOM 요소 골자 만들기 - [GIT](https://github.com/devpang20/notion_2309/commit/046c6b1) - 디렉토리 2차 작업 - [GIT](https://github.com/devpang20/notion_2309/commit/bd912fe) # step2 - CSS 셋팅 - [GIT](https://github.com/devpang20/notion_2309/commit/) ```js export const API_END_POINT = "https://cnu1.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) } } ``` - API 셋팅 - [GIT](https://github.com/devpang20/notion_2309/commit/) - api 사용법 ```js 1. 기본사항 모든 API에는 headers에 아래의 값을 넣어야 합니다. header에 해당 값이 누락이 되면 API 호출에 실패합니다. 'x-username': '다른 사람과 겹치지 않는 고유한 이름' 2. Root Documents 가져오기 API URL : https://cnu1.notion.edu-api.programmers.co.kr/documents method : GET 전체 Document의 구조를 트리 형태로 가져옵니다. Response의 형태는 아래와 같습니다. [ { "id": 1, // Document id "title": "노션을 만들자", // Document title "documents": [ { "id": 2, "title": "블라블라", "documents": [ { "id": 3, "title": "함냐함냐", "documents": [] } ] } ] }, { "id": 4, "title": "hello!", "documents": [] } ] 3. 특정 Document의 content 조회하기 API URL : https://cnu1.notion.edu-api.programmers.co.kr/documents/{documentId} method : GET Response의 형태는 아래와 같습니다. { "id": 1, "title": "노션을 만들자", "content": "즐거운 자바스크립트의 세계!", "documents": [ { "id": 2, "title": "", "createdAt": "", "updatedAt": "" } ], "createdAt": "", "updatedAt": "" } 4. Document 생성하기 API URL : https://cnu1.notion.edu-api.programmers.co.kr/documents method : POST request body에 JSON 형태로 아래처럼 값을 넣어야 합니다. { "title": "문서 제목", // parent가 null이면 루트 Document가 됩니다. // 특정 Document에 속하게 하려면 parent에 // 해당 Document id를 넣으세요. "parent": null } 생성에 성공하면 reponse에 아래처럼 생성된 결과를 내려줍니다. { "id": 6, "title": "문서 제목", "createdAt": "생성된 날짜", "updatedAt": "수정된 날짜" } 5. 특정 Document 수정하기 API URL : https://cnu1.notion.edu-api.programmers.co.kr/documents/{documentId} method : PUT request body에 수정할 내용을 JSON 형태로 넣으면 됩니다. { "title": "제목 수정", "content": "내용 수정" } 6. 특정 Document 삭제하기 API URL : https://cnu1.notion.edu-api.programmers.co.kr/documents/{documentId} method : DELETE documentId에 해당하는 Document를 삭제합니다. 만약 하위 documents가 있는 document를 삭제한 경우, 하위 documents 등은 상위 document가 없어지므로 root document로 인식됩니다. ``` # 14주차 ~ 16주차 ## 영화 서비스 앱 만들기 - [강사 레포](https://github.com/devpang20/movie_app2309.git) - [강사 레포 전체 커밋](https://github.com/devpang20/movie_app2309/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 ``` - 테스트 데이터 ```js { "page": 1, "results": [ { "adult": false, "backdrop_path": "/a2tys4sD7xzVaogPntGsT1ypVoT.jpg", "genre_ids": [ 53, 35, 27, 80 ], "id": 804150, "original_language": "en", "original_title": "Cocaine Bear", "overview": "1985년 마약 밀매업자의 비행기 추락 사고로 인해 비행기에 실려있던 코카인이 조지아주 채터후치 국유림에 떨어지고 코카인을 손에 넣기 위한 마약상들과 관광객들이 코카인을 먹은 흑곰에 의해 처참하게 죽임을 당한다는 내용의 실화를 바탕으로 한 영화", "popularity": 4435.857, "poster_path": "/gOnmaxHo0412UVr1QM5Nekv1xPi.jpg", "release_date": "2023-02-22", "title": "코카인 베어", "video": false, "vote_average": 6.6, "vote_count": 492 }, { "adult": false, "backdrop_path": "/i8dshLvq4LE3s0v8PrkDdUyb1ae.jpg", "genre_ids": [ 28, 53, 80 ], "id": 603692, "original_language": "en", "original_title": "John Wick: Chapter 4", "overview": "죽을 위기에서 살아난 ‘존 윅’은 ‘최고 회의’를 쓰러트릴 방법을 찾아낸다. 비로소 완전한 자유의 희망을 보지만, NEW 빌런 ‘그라몽 후작’과 전 세계의 최강 연합은 ‘존 윅’의 오랜 친구까지 적으로 만들어 버리고, 새로운 위기에 놓인 ‘존 윅’은 최후의 반격을 준비하는데...", "popularity": 3734.86, "poster_path": "/3omok5sZ5nqNVBG65en2H3WHyFp.jpg", "release_date": "2023-03-22", "title": "존 윅 4", "video": false, "vote_average": 8.2, "vote_count": 307 }, { "adult": false, "backdrop_path": "/ouB7hwclG7QI3INoYJHaZL4vOaa.jpg", "genre_ids": [ 16, 12, 35, 10751 ], "id": 315162, "original_language": "en", "original_title": "Puss in Boots: The Last Wish", "overview": "아홉 개의 목숨 중 단 하나의 목숨만 남은 장화신은 고양이. 마지막 남은 목숨을 지키기 위해 히어로의 삶 대신 반려묘의 삶을 선택한 그에게 찾아온 마지막 기회, 바로 소원을 들어주는 소원별이 있는 곳을 알려주는 지도! 잃어버린 목숨을 되찾고 다시 히어로가 되기를 꿈꾸는 장화신은 고양이는 뜻밖에 동료가 된 앙숙 파트너 '키티 말랑손', 그저 친구들과 함께라면 모든 게 행복한 강아지 '페로'와 함께 소원별을 찾기 위해 길을 떠난다. 그리고 소원별을 노리는 또 다른 빌런들과 마주치게 되는데…", "popularity": 2473.436, "poster_path": "/rKgvctIuPXyuqOzCQ16VGdnHxKx.jpg", "release_date": "2022-12-07", "title": "장화신은 고양이: 끝내주는 모험", "video": false, "vote_average": 8.3, "vote_count": 4834 }, { "adult": false, "backdrop_path": "/wD2kUCX1Bb6oeIb2uz7kbdfLP6k.jpg", "genre_ids": [ 27, 53 ], "id": 980078, "original_language": "en", "original_title": "Winnie the Pooh: Blood and Honey", "overview": "어릴 적 친구로부터 버림받은 곰돌이 ‘푸’와 ‘피글렛’ 참을 수 없는 분노와 배신감을 느끼며 잔혹한 복수를 시작한다.", "popularity": 2912.564, "poster_path": "/y64HSjYAoHUOgKuR2L52ywZ3eJe.jpg", "release_date": "2023-01-27", "title": "곰돌이 푸: 피와 꿀", "video": false, "vote_average": 5.9, "vote_count": 189 }, { "adult": false, "backdrop_path": "/2Eewgp7o5AU1xCataDmiIL2nYxd.jpg", "genre_ids": [ 18, 36 ], "id": 943822, "original_language": "en", "original_title": "Prizefighter: The Life of Jem Belcher", "overview": "", "popularity": 2068.646, "poster_path": "/x3PIk93PTbxT88ohfeb26L1VpZw.jpg", "release_date": "2022-06-30", "title": "프라이즈파이터: 더 라이프 오브 젬 벨처", "video": false, "vote_average": 6.2, "vote_count": 93 }, { "adult": false, "backdrop_path": "/ovM06PdF3M8wvKb06i4sjW3xoww.jpg", "genre_ids": [ 878, 12, 28 ], "id": 76600, "original_language": "en", "original_title": "Avatar: The Way of Water", "overview": "판도라 행성에서 제이크 설리와 네이티리가 이룬 가족이 겪게 되는 무자비한 위협과 살아남기 위해 떠나야 하는 긴 여정과 전투, 그리고 견뎌내야 할 상처에 대한 이야기를 그렸다. 살아남기 위해 설리 가족이 숲에서 바다로 터전을 옮기면서 겪게 되는 화합의 과정, 그리고 곳곳에서 도사리는 새로운 위협까지 역경 속에서 더 아름답게 펼쳐진다.", "popularity": 2474.413, "poster_path": "/z56bVX93oRG6uDeMACR7cXCnAbh.jpg", "release_date": "2022-12-14", "title": "아바타: 물의 길", "video": false, "vote_average": 7.7, "vote_count": 5918 }, { "adult": false, "backdrop_path": "/zM9RGbJBZ3UNpFOabcRqh0iVAYP.jpg", "genre_ids": [ 27, 9648, 53 ], "id": 631842, "original_language": "en", "original_title": "Knock at the Cabin", "overview": "휴가를 떠난 한 가족은 별장에 무단침입한 낯선 방문자들과 대치하게 된다. ‘레너드’(데이브 바티스타)와 낯선 방문자들은 세상의 종말을 막으러 왔다며, 가족 중 한 명을 희생시켜야만 인류의 멸망을 막을 수 있다는 잔혹한 선택을 하게 하는데… 가족을 살리면 인류가 멸망하고, 인류를 살리면 가족이 죽는다!", "popularity": 1850.666, "poster_path": "/mCDSOfcVJfMkGUNrNpXWFO7oNBY.jpg", "release_date": "2023-02-01", "title": "똑똑똑", "video": false, "vote_average": 6.4, "vote_count": 1114 }, { "adult": false, "backdrop_path": "/xDMIl84Qo5Tsu62c9DGWhmPI67A.jpg", "genre_ids": [ 28, 12, 878 ], "id": 505642, "original_language": "en", "original_title": "Black Panther: Wakanda Forever", "overview": "국왕이자 블랙 팬서인 티찰라의 죽음 이후 수많은 강대국으로부터 위협을 받게 된 와칸다. 라몬다, 슈리 그리고 나키아, 오코예, 음바쿠는 각자 사명감을 갖고 와칸다를 지키기 위해 외로운 싸움을 이어간다. 한편, 비브라늄의 패권을 둘러싼 미스터리한 음모와 함께 깊은 해저에서 모습을 드러낸 최강의 적 네이머와 탈로칸의 전사들은 와칸다를 향해 무차별 공격을 퍼붓기 시작하는데…", "popularity": 1770.433, "poster_path": "/3PCRWLeqp5y20k6XVzcamZR3BWF.jpg", "release_date": "2022-11-09", "title": "블랙 팬서: 와칸다 포에버", "video": false, "vote_average": 7.3, "vote_count": 4289 }, { "adult": false, "backdrop_path": "/7eccX0xay9pDj6ZQvU4cu3whw18.jpg", "genre_ids": [ 16, 9648, 14, 28 ], "id": 1003579, "original_language": "en", "original_title": "Batman: The Doom That Came to Gotham", "overview": "", "popularity": 1421.439, "poster_path": "/hrATQE8ScQceohwInaMluluNEaf.jpg", "release_date": "2023-03-10", "title": "Batman: The Doom That Came to Gotham", "video": false, "vote_average": 6.4, "vote_count": 37 }, { "adult": false, "backdrop_path": "/sGE6N1vJjxZLkOJEXdIOqTslxuL.jpg", "genre_ids": [ 99 ], "id": 1087040, "original_language": "en", "original_title": "Money Shot: The Pornhub Story", "overview": "폰허브의 성공과 추문에 대해 깊숙이 파헤친다. 배우, 운동가 그리고 전직 직원들의 인터뷰로 이루어진 다큐멘터리.", "popularity": 1364.563, "poster_path": "/kUWTY8rwEZ3d8G31GuPMbvqS67D.jpg", "release_date": "2023-03-15", "title": "머니 샷: 폰허브를 말하다", "video": false, "vote_average": 5.9, "vote_count": 96 }, { "adult": false, "backdrop_path": "/9Rq14Eyrf7Tu1xk0Pl7VcNbNh1n.jpg", "genre_ids": [ 28, 12, 53 ], "id": 646389, "original_language": "en", "original_title": "Plane", "overview": "평소와 다를 것 없던 어느 날, 기장 토렌스는 비행기 운행 중 거대한 폭풍우를 만나 정체모를 섬에 불시착한다. 살아남았다는 기쁨도 잠시, 비행기를 탈취하려는 무장단체의 인질극이 시작되고 토렌스는 탑승객 중 가장 피해야 할 의문의 살인범 가스파레와 손을 잡고 승객들과 함께 탈출을 시도하는데… 무장단체의 표적은 단 하나, 토렌스와 탑승객들! 목숨을 건 위험한 탈출 작전이 시작된다!", "popularity": 1444.356, "poster_path": "/8XDLgSlM6hb01iEWNRbqxKdFnGD.jpg", "release_date": "2023-01-12", "title": "플레인", "video": false, "vote_average": 6.9, "vote_count": 958 }, { "adult": false, "backdrop_path": "/muw9YsAsSd3DDRme2OEJJoVqun9.jpg", "genre_ids": [ 53, 28 ], "id": 850871, "original_language": "es", "original_title": "Sayen", "overview": "칠레 남부, 사옌이라는 젊은 마푸체 여성이 할머니를 죽인 용병들을 추적하러 길을 떠난다. 지금껏 받은 훈련을 통해 침입자들을 상대로 살아남고 보복할 수 있게 되는데… 사악한 기업이 땅과 생계를 위협하는 가운데 그냥 떠날 것인가, 아니면 자신을 비롯한 다른 토착민들을 지킬 것인가.", "popularity": 1342.144, "poster_path": "/aCy61aU7BMG7SfhkaAaasS0KzUO.jpg", "release_date": "2023-03-03", "title": "사옌", "video": false, "vote_average": 6.2, "vote_count": 61 }, { "adult": false, "backdrop_path": "/wybmSmviUXxlBmX44gtpow5Y9TB.jpg", "genre_ids": [ 28, 35, 14 ], "id": 594767, "original_language": "en", "original_title": "Shazam! Fury of the Gods", "overview": "신들의 힘을 갖게 된 빌리(애셔 앤젤)와 친구들은 각자의 방법으로 슈퍼히어로의 삶을 즐기게 된다. 그러던 그들 앞에 잃어버린 힘을 되찾고자 그리스 여신 헤스페라(헬렌 미렌)와 칼립소(루시 리우)가 나타나게 되고, 세상은 혼돈에 빠지게 되는데…", "popularity": 1194.931, "poster_path": "/f5907P7GdAGI22PHNRfqoKCAcDR.jpg", "release_date": "2023-03-15", "title": "샤잠! 신들의 분노", "video": false, "vote_average": 7, "vote_count": 244 }, { "adult": false, "backdrop_path": "/AsEgGeccI32SwMBkxpwhOkhbzmF.jpg", "genre_ids": [ 28, 878, 53, 27 ], "id": 1011679, "original_language": "en", "original_title": "Shark Side of the Moon", "overview": "", "popularity": 1198.333, "poster_path": "/v5CfpzxoJDkZxjZAizClFdlEF0U.jpg", "release_date": "2022-08-12", "title": "샤크 사이드 오브 더 문", "video": false, "vote_average": 5.3, "vote_count": 112 }, { "adult": false, "backdrop_path": "/5i6SjyDbDWqyun8klUuCxrlFbyw.jpg", "genre_ids": [ 18 ], "id": 677179, "original_language": "en", "original_title": "Creed III", "overview": "록키의 후계자인 크리드는 월드 챔피언으로 권투계를 장악한 후 완벽한 삶을 살던 중 과거 친형제 같았던 데미안과 재회한다. 오랜 시간 감옥 생활을 마치고 나온 데미안은 그가 꿈꾸던 인생을 사는 크리드와 충돌하며 그의 모든 것을 빼앗으려 하고, 크리드는 이에 맞서 자신의 미래를 지키기 위한 일생일대의 대결을 준비하는데…", "popularity": 1148.95, "poster_path": "/56HGRCoEY2OmO1yZro77IvldDpE.jpg", "release_date": "2023-03-01", "title": "크리드 3", "video": false, "vote_average": 7.1, "vote_count": 427 }, { "adult": false, "backdrop_path": "/sp7MPK2K60LLd7A6zjHKsfgjFil.jpg", "genre_ids": [ 27, 53 ], "id": 296271, "original_language": "en", "original_title": "The Devil Conspiracy", "overview": "", "popularity": 1379.449, "poster_path": "/1AWcMtUZjpkq4h52yDnNIp9FwEO.jpg", "release_date": "2023-01-13", "title": "더 데빌 컨스피러시", "video": false, "vote_average": 6.5, "vote_count": 51 }, { "adult": false, "backdrop_path": "/pxJbfnMIQQxCrdeLD0zQnWr6ouL.jpg", "genre_ids": [ 28, 35, 53 ], "id": 1077280, "original_language": "en", "original_title": "Die Hart", "overview": "가상의 케빈 하트가 액션 영화 배우가 되기 위해 노력하는 과정을 따라가 보세요. 그는 론 윌콕스가 운영하는 학교에 다니며 업계에서 가장 탐내는 액션 스타가 되기 위한 방법을 배우려고 노력합니다.", "popularity": 1181.299, "poster_path": "/1EnBjTJ5utgT1OXYBZ8YwByRCzP.jpg", "release_date": "2023-02-22", "title": "다이 하트: 더 무비", "video": false, "vote_average": 6.2, "vote_count": 215 }, { "adult": false, "backdrop_path": "/2E6pIbJien7B9yWpaz8Yd2njzUI.jpg", "genre_ids": [ 18, 27 ], "id": 1026563, "original_language": "es", "original_title": "13 exorcismos", "overview": "", "popularity": 1230.969, "poster_path": "/8LpnMIqpRiwxpbGR33ALCmVl7gj.jpg", "release_date": "2022-11-04", "title": "13 exorcismos", "video": false, "vote_average": 5.9, "vote_count": 31 }, { "adult": false, "backdrop_path": "/uNK5dHo6HJpwk1BPcDHHyvX7ZLz.jpg", "genre_ids": [ 28, 53 ], "id": 983768, "original_language": "en", "original_title": "Black Warrant", "overview": "", "popularity": 1027.695, "poster_path": "/A7vFFZHbDyxfjuYKzJwruTnwwjT.jpg", "release_date": "2023-01-09", "title": "Black Warrant", "video": false, "vote_average": 5.1, "vote_count": 11 }, { "adult": false, "backdrop_path": "/dlrWhn0G3AtxYUx2D9P2bmzcsvF.jpg", "genre_ids": [ 878, 27, 35 ], "id": 536554, "original_language": "en", "original_title": "M3GAN", "overview": "교통사고로 부모를 잃고 혼자가 된 소녀 ‘케이디’. 로봇 엔지니어이자, ‘케이디’의 보호자가 된 ‘젬마’는 ‘케이디’를 안전하게 지켜야 하는 프로그램이 입력된 AI 로봇 ‘메간’을 선물한다. 메간은 언제나 ‘케이디’의 곁을 지켜주며 함께 웃고, 힘들 땐 위로해주는 둘도 없는 친구가 된다. 어느 날, ‘케이디’가 위험에 처하자 ‘메간’은 예측할 수 없는 방향으로 업그레이드되며 감당할 수 없는 일들이 벌어지는데…", "popularity": 1086.691, "poster_path": "/v0TtgXaZZ6NeDxKackgQK9byEDL.jpg", "release_date": "2022-12-28", "title": "메간", "video": false, "vote_average": 7.4, "vote_count": 2195 } ], "total_pages": 37609, "total_results": 752161 } ``` - 스타일 ```css * { font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; } * { /* font-family: 'Noto Sans KR', sans-serif !important; */ /* font-family: LeferiFont; */ font-family: Pretendard; box-sizing: border-box; scroll-behavior: smooth; ::-webkit-scrollbar { width: 5px; height: 7px; } /* Track - ScrollBar-Track */ ::-webkit-scrollbar-track { background: #e6e6e6; border-radius: 10px; } /* Handle - ScrollBar-Circle */ ::-webkit-scrollbar-thumb { background: #9ea7af; border-radius: 10px; transition: 0.3s; cursor: pointer !important; &:hover { background: #868b90; } } /* Handle on hover */ ::-webkit-scrollbar-thumb:active { background: #65717b; cursor: pointer; } } html { /* overflow: auto; */ /* overflow: hidden; */ overflow: auto; } body { /* overflow: hidden; */ overflow: auto; height: 100%; background-color: black; color: white; } body, html { margin: 0; padding: 0; width: 100%; height: 100%; /* font-family: 'Nanum Gothic', sans-serif !important; */ font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1,h2,h3,h4,h5, ul, li, a,s p { padding: 0; margin: 0; list-style: inherit; color: inherit; text-decoration: inherit; } ``` - init - [GIT](https://github.com/devpang20/movie_app2309/commit/0ebe0bb8ee532c37c6e9681f354df4d5fe17de04s) - 메인, 서브 페이지 셋팅 그리고 테스트 데이터 연동 - [GIT](https://github.com/devpang20/movie_app2309/commit/0ebe0bb8ee532c37c6e9681f354df4d5fe17de04s) - 전역스타일 적용 - [GIT](https://github.com/devpang20/movie_app2309/commit/41cf49bbbdf1d06002af99c8b3901cdc5d0e04d5s) - 헤더작업 - [GIT](https://github.com/devpang20/movie_app2309/commit/be4a67889d13ec654071dcc22daa205c89a4ff58) - 메인 꾸미기 - [GIT](https://github.com/devpang20/movie_app2309/commit/25da63df5564375ca490f81e32065ebf6894ed44) - PosterItem 만들기 - [GIT](https://github.com/devpang20/movie_app2309/commit/974c11f173fc95c7327727eda070d47d291c906f) - 홈 api 연동 - [GIT](https://github.com/devpang20/movie_app2309/commit/f2283c8) - 서브페이지 구현 & api 연동 - [GIT](https://github.com/devpang20/movie_app2309/commit/d541665) - 상세페이지 구현 - [GIT](https://github.com/devpang20/movie_app2309/commit/39c1c09) - 검색기능 - [GIT](https://github.com/devpang20/movie_app2309/commit/5167061) $$hide - 000 - [GIT](https://github.com/devpang20/notion_2309/commit/0) ## Todo 만들기 2차 구현 실습 - [강사 레포 1s 버전](https://github1s.com/devpang20/vanilla_todo_2307) - [강사 레포 전체 커밋](https://github.com/devpang20/vanilla_todo_2307/commits/main) $$