계산기앱 만들기 프로젝트 1

$$config title: MWU_SW아카데미-FE 과정 5기 keywords: - IT - Front-End - MWU $$ ![img](https://i.imgur.com/5Y8SYPp.png) ![img](https://i.imgur.com/aiScRFZ.png) --- --- # 수업 - 수업명 : MWU_SW아카데미-FE 과정 5기 수업페이지 - [주소 : https://www.slog.gg/p/13600](https://slog.gg/p/13600) - [프로젝트 저장소](https://github.com/MWU-SW-Academy-FE) - [강사 오픈톡](https://open.kakao.com/o/swKTT78e) ## 프로젝트 저장소 정리 - [PR 방법](https://www.youtube.com/watch?v=yHsfHAAyhTA) - [프로젝트 1](https://github.com/devpang20/project1-calc-202405) - [프로젝트 2](https://github.com/sik2/notion2409) - [프로젝트 3](https://github.com/sik2/movie_app2410) - [프로젝트 4](https://github.com/sik2/project4-2411) # 기초수련 - [타이핑 정글](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://school.programmers.co.kr/learn/courses/3/3-hello-javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8) # 가입해야할 사이트 - [프로그래머스](https://programmers.co.kr/) - [github](https://github.com/) - [코드펜](https://codepen.io/) - [벨로그](https://velog.io/) # 생각하는 힘을 기르는 방법 - [영상 - 생각할 줄 모르는 아이, 이렇게 연습시키세요!!(황농문 교수)](https://www.youtube.com/watch?v=4QSl6r6hzYU) - 우리 두뇌는 목표 지향적으로 설계 되어 있습니다. 즉, 무얼 원하느냐에 따라서 관련 시냅스가 발달하게 됩니다. - 개발자는 논리사고력이 기본 코어가 탄탄해야 합니다. 쉽게 말해 생각하는 힘이 있어야 합니다. 이를 기르기위해선 수학적 문제를 풀어야합니다.(알고리즘) - 이때 성장을 위해선 본인이 풀 수 있는 문제에서 조금 어려운 문제를 선택해야 합니다. 그리고 절대로 정답을 봐서는 안됩니다. 한문제를 붙들고 일주일 혹은 한달을 고민해도 좋습니다. 스스로 풀어낼 때까지 도전 하세요. - 왜냐면 사고력은 어떤문제를 해결할때 도무지 어떻게 해야할지 모르겠다는 그순간부터 생각할때 성장하기 때문입니다. - 다만, 초심자 입장에서는 쉬운 난이도로 성공경험을 10번 정도 만들고 시작하는 걸 추천합니다. 결국 재미가 있어야 꾸준히 할 수 있습니다. # 무조건 알아야하는 사실 - 지식은 적을 수록 좋고, 지혜는 많을 수록 좋다. - 적게 배우고, 많이 활용하세요. - 공학은 예술이 아니다. - 완벽주의는 제발 버리세요. - 초보가 완벽을 추구하면 절대 안됩니다. - 초보자는 작동하게 만드는 것을 추구해야 합니다. - 개발실력은 자전거 타기와 비슷하다. - 많이 넘어져 보는게 최고의 공부법이다. # 초심자를 방해하는 생각 5가지 - 이렇게 하는거 맞나? - 초보자는 구현을 하는것에 초점을 맞추는게 압도적으로 유리합니다. - 내가 모르는 뭔가가 있고, 그것을 배우기 전까지 나는 제대로된 작업물을 구현할 수 없다. - 제일 바보같은 생각입니다. - 이 생각이 초보자의 성장을 사로잡는 제일 병적인 생각입니다. - 개발을 하는데 있어서 특별함은 필요없다. 꾸준함이 필요합니다. - 최선을 다해서 최고의 퀄리티를 추구하자. - 최선의 설계, 최선의 구현은 불가능 합니다. 적당한 수준의 타협이 필수입니다. - 우리는 뛰어난 과학자나 예술가가 아닌, 능숙한 엔지니어가 되어야 합니다. - 양보다는 질이니까, 완벽한 작품을 만들어야겠다. - 바보 같은 생각입니다. - 초보자는 완벽한 하나의 작품을 만들 수 없습니다. - 바보같은 작품 10개를 만드는게 압도적으로 더 유리합니다. # 1주차 ~ 2주차 ## 공지 - 앞으로 해야할 데일리 루틴(기술블로그 포스팅, 알고리즘) ### 벨로그 - [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) # -- ## 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) - 모던 자바스크립트 - [필수영상 - 개발실력 수직상승을 위한 필수 역량](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) ## 모던 자바스크립트 개념 - [개념 - 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 ⟼ ['■','●'] ``` ## 불변성 - [[10분 테코톡] ? 인치의 불변성](https://www.youtube.com/watch?v=eV4Yzssr9MA) - [생활코딩- JavaScript Immutability](https://opentutorials.org/module/4075) ## 불변성 개념 - [개념 - 레퍼런스](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) ## Vanilla Todo app - [레포지토리](https://github.com/sik2/vanilla_2408) ### 히스토리 - [컴포넌트 구성, 할일 등록](https://github.com/sik2/vanilla_2408/commit/d0e666) - [헤더 state 출가](https://github.com/sik2/vanilla_2408/commit/2ebaff5562515857916869909bccb47f0fa289eb) - [할일 삭제 구현](https://github.com/sik2/vanilla_2408/commit/c5552af8f08affddd90696e836af466660cde542) ## React Todo App 만들기 - [레포](https://github.com/sik2/react_simple_todo2024.git) - [커밋 히스토리](https://github.com/sik2/react_simple_todo2024/commits/main/) ```bash # 설치 npm create vite@latest . # 의존성 설치 npm install # 로컬 서버 실행 npm run dev ``` ## React Todo App 만들기 2 - [레포](https://github.com/sik2/react_simple_todo2024.git) - [커밋 히스토리](https://github.com/sik2/react_simple_todo2024/commits/main/) - 라우터 작업 부터 시작 ```bash npm i react-router-dom ``` - [dummyjson - todos api](https://dummyjson.com/docs/todos) - [postman](https://www.postman.com/downloads/) ## 포켓몬 도감 클론 - [참고 사이트](https://pokemonkorea.co.kr/pokedex) - [레포](https://github.com/sik2/pokemon2408.git) - [커밋 히스토리](https://github.com/sik2/pokemon2408/commits/main/) ## 필수교양영상 - [[10분 테코톡] 룩소의 React Hooks](https://youtu.be/qjEcsNYFWYg?si=k6jN6jmTdsDTHtbo) ## 포켓몬 도감 만들기 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) ``` https://cdn.jsdelivr.net/gh/PokeAPI/sprites/sprites/pokemon/1.png ``` ## 사전에 필요한 학습내용 - Hooks api - fetch ### 사전 준비 - [cdnjs.com](https://cdnjs.com/) ## 프로젝트 셋팅 ```js npm create vite@latest √ Project name: . #현재 디렉토리에 설치 √ Package name: todoapp √ Select a framework: » React √ Select a variant: » JavaScript npm install npm run dev ``` - README.md ``` ] fetch api 연결 - [ ] 이미지 불러오기 - [ ] 컴포넌트 최적화 작업 useMemo - [ ] 컴포넌트 최적화 작업 useCallback - [ ] 의존모듈 설치 React-Router list 라우팅 처리 - [ ] 상세페이지 구현 - [ ] 테일윈드 도입 디자인 개선 ``` - 테일윈드 cdn ```html ``` - 테일윈드 설치 ``` npm install -D tailwindcss npx tailwindcss init ``` - 설정 파일 - tailwind.config.js ``` /** @type {import('tailwindcss').Config} */ export default { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], }; ``` - daisyui 설치 ``` npm i -D daisyui@latest ``` - 설정 파일 - tailwind.config.js ``` /** @type {import('tailwindcss').Config} */ export default { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [ require('daisyui'), ], }; ``` ## CSS 심화 - [테일윈드 CSS](https://www.slog.gg/p/13720#f) ## Project1 계산기 앱 만들기 - [조직 초대 이메일 신청](https://docs.google.com/forms/d/e/1FAIpQLSdqciKwyIyJplZ0Dlddr6uUo3YPJ1n7tCZQF_axw-dkLLvFlA/viewform) 1. Project1 저장소 fork 2. Project1(본인) clone ``` git clone [저장소 url] . ``` 3. 소스코드 작업 후 commit & push ``` git add . git commit -m "메세지명" git push origin main ``` 4. Pull Request 보내기 ## 요구사항 ``` 계산기앱 프로젝트 아래 요구사항과 결과물 사진을 확인하시고 실습 진행해주세요~ 상세 요구사항 1) HTML 구현 index.html 파일에 Button Element 제어를 위한 데이터 속성을 지정. 숫자 / 연산기호 / 지우기 / 초기화 버튼 관련된 요소끼리 그룹핑하여 HTML 엘리먼트 요소 구현. 2) Javascript 구현 index.js을 생성하고 파일에서 계산기능에 대한 클래스 Calculator 생성. 각 Button Element값(DOM 제어 요소)을 참조하여 Calculator 객체를 이용하여 계산 로직이 정상적으로 작동 되도록 구현. 3) 기능 구현 참고 2개의 숫자까지 연산되는 기본 기능 부터 구현 CSS 구현은 기본 제공 소스를 활용하거나 UI 를 참고하여 자유롭게 구현해도 됨. 도전 과제 3개 이상의 숫자 연산이 가능하도록 구현 계산식들의 히스토리 보기 (좌측 혹은 우측내에 계산이 진행되었던 히스토리 열람 기능) 괄호가 포함된 추가 기능 구현 ``` - UI/UX - ![img](https://i.imgur.com/54u6KY8.png) ## 제공 코드 - index.html ```html 계산기앱 만들기 프로젝트 1

``` - style ```css html { background: rgb(179, 155, 254); background: linear-gradient(150deg, rgba(179, 155, 254, 1) 0%, rgba(140, 0, 161, 1) 100%); } html, body { padding: 0; margin: 0; width: 100%; height: 100%; } * { font-family: 'Roboto', sans-serif; } .container { display: flex; flex-flow: column; align-items: center; justify-content: center; width: 100%; height: 100%; } .wrapper { /* width: 90%; max-width: 500px; margin: 0 auto; */ } .cal {} .cal .cal-header { display: flex; flex-flow: column; justify-content: center; align-items: flex-end; padding: 20px; height: 60px; word-break: break-all; } .cal-header { text-align: right; background-color: rgba(0, 0, 0, .62); color: white; } .cal-body { margin-top: -4px; background-color: white; } .cal-header .cal-previous-preview { opacity: .7; font-size: 14px; margin-bottom: 10px; } .cal-header .cal-current-preview { font-size: 25px; } .cal .cal-body .cal-space { width: 100%; display: flex; } .cal-space { display: flex; width: 100%; flex: 4; flex-shrink: 0; gap: 4px; margin-top: 4px } .cal-space>button { width: 100%; display: flex; flex: 1 calc(25% - 4px); border: none; width: 80px; height: 80px; align-items: center; justify-content: center; cursor: pointer; background-color: rgb(250 241 255); font-size: 20px; font-weight: bold; } .cal-space .space-2 { flex: 2 calc(50% - 4px); } @media (min-width: 601px) { .cal-space>button:hover { background-color: white; } } @media (max-width: 600px) { .wrapper { width: 100%; height: 100%; max-width: 100%; } .cal { height: 100%; } .cal .cal-header { height: 20%; padding: 10px; } .cal .cal-body { height: calc(100% - 20% - 10px + 4px); display: flex; flex-flow: column; } .cal .cal-space>button { width: auto; height: auto; } } ``` ## 작업 v1 내역 - [저장소24-09](https://github.com/devpang20/calc_2409) - [커밋 히스토리 전체보기](https://github.com/devpang20/calc_2409/commits/main/) ### 작업 v2 내역 - [저장소](https://github.com/devpang20/project1-calc-202405) - [커밋 히스토리 전체보기](https://github.com/devpang20/project1-calc-202405/commits/main/) ## Project2 노션 클린코딩 - [전체 작업 히스토리](https://github.com/sik2/notion2409/commits/main/) ## UI/UX - ![img](https://i.imgur.com/HAFVyFk.png) ## CSS - style.css ```css @import 'reset.css'; #app { display: flex; flex-decoration: row; } /* sidebar */ ul { list-style-type: circle; } li { margin-top: 4%; } .listContainer { width: 300px; height: 1000px; background-color: #f7f6f3; overflow: auto; resize: horizontal; } .dataList { margin: 10% 0; color: #808080; } .addBtn, .delBtn { background-color: #f7f6f3; color: black; border: none; } .addBtn:hover, .delBtn:hover { cursor: pointer; } .newBtn { background-color: #f7f6f3; border: none; font-size: 1.2rem; text-align: left; width: 100%; height: 20px; color: #696969; } .newBtn:hover { cursor: pointer; color: #000000; } .editorPage { display: flex; flex-direction: column; margin: 10% 20%; } .editorTitle { border: none; font-size: 2.5rem; width: 1000px; color: #808080; outline: none; } .editorContent { margin-top: 30px; border: none; width: 1000px; color: #808080; height: 600px; font-size: 1.5rem; outline: none; color: #808080; resize: none; } ``` - reset.css ```css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } ``` ## 작업 내역 - [전체커밋](https://github.com/devpang20/js_notion_2405/commits/main/) - [초기화](https://github.com/devpang20/js_notion_2405/commit/b883b5) - [초기 컴포넌트 구성, css 구성](https://github.com/devpang20/js_notion_2405/commit/696b26) - [사이드바 테스트 데이터 구현](https://github.com/devpang20/js_notion_2405/commit/18f4668) - [사이드바 재귀 형태로 구현](https://github.com/devpang20/js_notion_2405/commit/7055b3f) - [사이드바 List, Page 컴포넌트 분리](https://github.com/devpang20/js_notion_2405/commit/7454cee) - [New Button 만들기](https://github.com/devpang20/js_notion_2405/commit/3cfa08c) - [editor page 구현](https://github.com/devpang20/js_notion_2405/commit/1f086f9) - [에디터 페이지 컴포넌트 분리](https://github.com/devpang20/js_notion_2405/commit/96dfa77) - [전체목록 api 연동](https://github.com/devpang20/js_notion_2405/commit/4fd862c) ## 영화 앱 만들기 ## 작업 히스토리 - [커밋히스토리](https://github.com/sik2/movie_app2410/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 react-router-dom ``` ### api key 발급 방법 - [api key 발급](https://velog.io/@yoonezi/TMDB-API-key-%EB%B0%9C%EA%B8%89%EB%B0%9B%EA%B8%B0) ### 테일윈드 적용 - [vite tailwindcss](https://tailwindcss.com/docs/guides/vite) - 가데이터 ``` export const data = { "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 } ``` - api 연동 ```jsx import { useEffect, useState } from "react"; export default function Home() { const [movies, setMovies] = useState([]) useEffect( () => { fetch("https://api.themoviedb.org/3/movie/popular?language=ko-KR&api_key=ac770053b0b8a5509c03c3d6e2110597") .then(res => res.json()) .then(res => {setMovies(res.results)}) }, []) return ( <>

{row.title}

); } ``` ```bash # 라우터 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) ## 프로젝트4 - 자율프로젝트 - [자율프로젝트 페이지](https://www.slog.gg/p/13735#f) - [DB 기초](https://www.slog.gg/p/13251) - [A조 - 김형기 조장, 대동](https://github.com/KHyeonggi/Project-4/tree/main/Deadong_WebProject) - [배포](https://project-4-ten-mu.vercel.app/) - [B조 - 백민기 조장, 개인프로젝트 대체]() - [C조 - 김영현 조장, SMTS](https://github.com/SuperNoobChallenge/Project-4/tree/main/SMTS) - [배포](project-4-pied-ten.vercel.app) - [D조 - 박도은 조장]() - [E조 - 이재희 조장 E-Card](https://github.com/EJ-pro/Project-4/tree/main) - [배포](https://project-4-doob-n9ndprr22-ej-pros-projects.vercel.app/) ## 수료 후 공부 자료 ## 자바 기초 훈련 - [자바 튜토리얼 - 자바 입문](https://programmers.co.kr/learn/courses/5) - [자바 튜토리얼 - 자바 중급](https://programmers.co.kr/learn/courses/9) - [자바 튜토리얼 - ＜Must Have＞ 이재환의 자바프로그래밍 입문](https://school.programmers.co.kr/app/courses/14330/curriculum) - [자바 알고리즘 입문 - 차근차근 시작해 보세요 참고](https://school.programmers.co.kr/learn/challenges/beginner?order=acceptance_desc&languages=java) - [자바 알고리즘 - 프로그래머스 알고리즘, 자바, 레벨 0, 쉬운순정렬](https://school.programmers.co.kr/learn/challenges?order=acceptance_desc&page=1&languages=java&levels=0) - [자바 알고리즘 - 프로그래머스 알고리즘, 자바, 레벨 1, 쉬운순정렬](https://school.programmers.co.kr/learn/challenges?order=acceptance_desc&page=1&languages=java&levels=1) - [자바 알고리즘 - 프로그래머스 알고리즘, 자바, 레벨 2, 쉬운순정렬](https://school.programmers.co.kr/learn/challenges?order=acceptance_desc&page=1&languages=java&levels=2) - [알고리즘 풀때 자동으로 커밋 히스토리 남기기](https://velog.io/@betterfuture4/%EA%B9%83%ED%97%88%EB%B8%8C-%EC%9E%94%EB%94%94%EC%97%90-%EB%AC%BC-%EC%A3%BC%EA%B8%B0feat.BaekjoonHub%EB%A1%9C-%EB%B0%B1%EC%A4%80-%EB%AC%B8%EC%A0%9C-%EC%9E%90%EB%8F%99-%EC%97%85%EB%A1%9C%EB%93%9C) ## 자바 웹 개발 자료 - [DB - 기초 slog.gg/p/13251#f](https://www.slog.gg/p/13251#f) - [스프링부트 - QnA 게시판 만들기 slog.gg/p/13708#f](https://www.slog.gg/p/13708#f) - [AWS 기초](https://www.slog.gg/p/13871#f) $$hide 최수빈, 김서영 https://github.com/BENNY-CHOI/FortuneChristmas https://fortune-christmas.vercel.app/

게시글 상세