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

$$config title: MWU_SW아카데미-FE 과정 4기 keywords: - IT - Front-End - MWU $$ ![img](https://i.imgur.com/5Y8SYPp.png) ![img](https://i.imgur.com/aiScRFZ.png) --- --- # 수업 - 수업명 : MWU_SW아카데미-FE 과정 4기 수업페이지 - [주소 : https://www.slog.gg/p/13432](https://slog.gg/p/13432) - [강사 오픈톡](https://open.kakao.com/o/swKTT78e) - [기수 오픈톡](https://open.kakao.com/o/gNDusfig) # 기초수련 - [타이핑 정글](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://docs.google.com/spreadsheets/d/1Ju7fM8hlEddIEvpKNsyRa9Tunft7h1jYKc1UgoJSJic/edit#gid=0) - [알고리즘 진행 시트](https://docs.google.com/spreadsheets/d/1NfJMV5Uu5EiflY7LHr9EcVTazNzyUvBlYhFaxWnQLB8/edit?usp=sharing) - [프로젝트 저장소](https://github.com/MWU-SW-Academy-FE) # 생각하는 힘을 기르는 방법 - [영상 - 생각할 줄 모르는 아이, 이렇게 연습시키세요!!(황농문 교수)](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 API ## 필수영상 - [필수영상 - 웹개발 필수개념! 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) ## 공부 or 복습 방법 - 주석 공부법 => 라인 한줄 한줄 주석으로 이해한 내용을 적어보기 => 다 적을 수 있다면 말로 설명해보기 - 백지 공부법 => 이해가 되었다면 다시 백지부터 만들어보기 ## 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) ## React Todo App 만들기 ```bash # 설치 npm create vite@latest . # 의존성 설치 npm install # 로컬 서버 실행 npm run dev ``` ## React Todo App 만들기 - [레포](https://github.com/devpang20/mwutodo2404.git) - step 1 (기본적인 등록, 리스트 출력) - [GIT](https://github.com/devpang20/mwutodo2404/commit/973bb8b) - step 2(id 추가 후 등록 수정, 삭제 구현) - [GIT](https://github.com/devpang20/mwutodo2404/commit/6e98a2d) - step 3(수정 처리 - [GIT](https://github.com/devpang20/mwutodo2404/commit/cc14f05) - 라우터 도입 - [GIT](https://github.com/devpang20/mwutodo2404/commit/8797dbb) - 라우터 도입2 - [GIT](https://github.com/devpang20/mwutodo2404/commit/75f844d) - 네비게이션 컴포넌트 만들고 적용(공통단으로 만들기) - [GIT](https://github.com/devpang20/mwutodo2404/commit/f37eb06) - 랜덤 할일 페이지 만들고 api 연동 - [GIT](https://github.com/devpang20/mwutodo2404/commit/2d9aefd) - 등록시 lastId 오류 문제 해결 - [GIT](https://github.com/devpang20/mwutodo2404/commit/) +) recoil, react-query ## Project1 계산기 앱 만들기 1. Project1 저장소 fork 3. Project1(본인) clone ``` git clone [저장소 url] . ``` 5. 소스코드 작업 후 commit & push ``` git add . git commit -m "메세지명" git push origin main ``` 7. 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; } } ``` ## 작업 내역 - [저장소](https://github.com/devpang20/project1-calc-202405) - [커밋 히스토리 전체보기](https://github.com/devpang20/project1-calc-202405/commits/main/) ### 커밋 - [초기화 코드](https://github.com/devpang20/project1-calc-202405/commit/7d8bf093888b4ad0d6955deef29abebb046b37f1) - [스켈레톤 코드](https://github.com/devpang20/project1-calc-202405/commit/0c71d8e) - [DOM 기본 요소](https://github.com/devpang20/project1-calc-202405/commit/5f5edb9) - [프롬프트 기능 1차 구현](https://github.com/devpang20/project1-calc-202405/commit/a14f2ce) - [onDelete, onEqual](https://github.com/devpang20/project1-calc-202405/commit/865d8b1) ## Project2 노션 클린코딩 ## UI/UX - ![img](https://i.imgur.com/HAFVyFk.png) ## 작업 내역 - [전체커밋](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) ## 영화 앱 만들기 - 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) - 가데이터 ``` 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}

); } ``` # 자율 프로젝트 # 개요 및 요구사항 ## 서비스 개요 - 서비스명 : 몰입시간 기록 서비스 - 설명 : 하루 몰입(집중) 시간을 기록하는 서비스 ### 기능정의 - 하루 몰입 시간에 대하여 스톱워치 형태로 누적 시간을 기록한다. - 기록한 내용은 저장하여 히스토리 관리를 한다. - 기록은 생성, 수정, 삭제, 조회가 가능하여야 한다. ## 필수미션(프론트엔드 구현) ### 프론트백엔드 ### 기술스택 - Vite - React.js - React-Router - Tanstack-Query - Recoil - Immer.js - TailwindCSS - +)github page를 통해 배포하기 ## 도전 미션(백엔드 구현) ## 백엔드 ### 기술스택 - Node.js - Express.js - MySQL(or PostgreSQL) - REST API ### 배포(CI/CD) ### 기술스택 - fly.io - Github Action $$hide 미니 프로젝트 - [필수영상 - 바닐라 자바스크립트 건너뛰고, 리액트 공부하지말라구!](https://www.youtube.com/watch?v=qlFLBQ_ixtg) - [필수영상 - [10분 테코톡] ? 브랜의 프론트엔드에서 Component란](https://www.youtube.com/watch?v=2C1tXVHu9XQ) - [필수영상 - 구글링 잘하는 법 7개 (네이버쓰셈 ㅅㄱ)](https://www.youtube.com/watch?v=Y8bH6lGZD1I) - [바닐라자바스크립트 설치?](http://vanilla-js.com/) ## 바닐라로 Simple-to-do-app 만들기 ## 기본 요구사항 - 바닐라 js로 todo app 을 만들어 주세요. - index.html에 메인 태그를 통해 앱이 진입 되도록 해주세요. - DOM 을 담은 변수는 앞에 $로 시작해주세요. ex) $target - 데이터를 갱신하는 메서드는 set 을 붙여서 작성해주세요. ex) setState - 디렉토리구조 - index.html - /src/main.js - /src/App.js - /src/Header.js - /src/TodoForm.js - /src/TodoList.js - /src/storage.js - App.js 에서 Header.js TodoForm.js TodoList.js 가 import 되어한다. - Header.js 는 text 요소를 출력한다. - TodoForm.js 는 input box 가 있고 할 일을 적고 입력을 누르면 할일이 추가된다. - TodoList.js 는 입력 받은 할일을 리스트로 출력한다. - 완성 화면 ![img](https://i.imgur.com/ISsJk0O.png) - 완성된 코드는 github에 푸쉬 후 슬랙 화이팅 채널에 올리기 ? +) 도전과제 - storage.js 를 이용해 데이터를 저장하기 ### 제공 코드 - index.html ```html Simple-to-do-app

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

New HTML content

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

게시글 상세