https://youtu.be/IKNJfPJFY8g 혁오 - Goodbye Seoul
금요일의 빡공, 토요일의 적절한 나태함, 다시 일요일에 돌아와서 담주 준비(청소, 계획) + 빡공 좋다 좋아.
강의 두 개분 분량 + 앞으로 클론 코딩의 기반 다지는 파트라 생각하고 들으면 될 것 같다.
특히 파일 쪼개기 할 때 내 뇌를 쪼개지 말고 파일 잘 쪼개는 법 이해하고 기억하자. 고
Movie App Pt.1
pt.1에서는 저번 시간에 만든 코인트래커에서 코인 API 대신 영화 API로 바뀌었다고 생각하면 될 것 같다.
우리가 클론 코딩해서 결과적으로 만들려는 건 넷플릭스 웹페이지니까 코드 보자
loading문구를 보여주기 위해 state를 만들었어. boolean 값을 갖는 loading과 true, false 왔다 갔다 할 수 있게 하는 함수 setLoading으로 이루어져 있다. 초기값은 true 그리고 저번과 동일한 방법으로 영화 API를 가져온다.
저번과 동일하게 로딩 중을 보여주고 로딩이 끝나면 영화 데이터들을 보여주도록 함.
준비한 url에서 요청을 하고 response.json() 메서드를 호출하면 JSON 데이터를 javascript 객체로 변환한다.
console.log를 통해서 받아온 데이터를 보자. 뭘 들고 왔는지 어떻게 구워삶아 먹으면 되는지
우리가 필요한 데이터는 json.data.movies의 array에 있음을 확인 완료. 영화들을 저장할 state를 만든다.
state의 movies에 영화들이 잘 들어갔는지 확인해보자. 콘솔 로그 약간 정이 간다. 내가 잘하고 있는지 알려주는 친구 같아
확인 한 콘솔 창 🔽
여기서 좀 당황했는데 지금껏 쓴 then 말고 더 좋은 방법이 있다고(async-awiat)을 사용하라고 한다. 일단 따라 해 보자.
- async - await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법
- 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완
- 개발자가 보기 좋은 코드 작성 가능
아 골 아프다 비동기 처리 날 잡고 공부하고 일단 패스 기억해라 민규야 넌 비동기에 대해서는 무지하다.
async await사용된 거랑 + cosnt getMovies가 선언되고 시작한다는 차이 정도만 일단 알아두자.
loading의 값이 false가 되면 실행하는 코드 자리에 movies의 array의 아이템들을 map을 통해
div에 감싸진 영화 목록들을 보여주도록 한다.
영화 정보들 (title, summary들 보여주고) genre의 경우에는 한 영화에 여러 장르가 적혀있는 경우(array상으로 저장되어 있음.
장르 자체를 li의 key값으로 갖게 하고 한 번 더 map을 실행한다. (장르에다가 적용)
이미지를 가져오려고 한다. 사이즈에 맞게 medium_cover_image로 결정.
앞으로 할 내용 중 movie에 각각 id가 배정되어 있기에 영화의 세부내용 페이지로 넘어가기 위해 이 id를 활용하도록 하자.
여기까지가 pt.1이고, 결과 내용은 아래와 같다.
Movie App Pt.2 (Router 활용을 위한 빌드업 수업)
코딩 공부를 하다 보면 간간이 걱정이 된다. 약 30분 강의에 블로그 정리까지 해서 3시간가량을 쏟는 나 잘하고 있는 걸까?이런 불안한 생각이 엄습할 때면 지나치게 낙관주의자로 변한다. 안 하는 것 보다야 100배 좋지.효율을 따지고 행동하는 건 중요하지만, 효율적으로 행동하기 위해 비효율적인 지나친 고민을 갖는 건 이거대로 비효율적이지 않은가.
아무튼 뭐 딱복이든 물복이든 복숭아다 이거다. 일단 씹고 삼키자.
앞으로 계속 이런저런 코드들을 기능 구현을 위해 작성할 텐데, 한 파일에 너무 많은 코드가 쓰일 것이다.
우리가 html 한 파일에 css, js다 쏟아붓지 않고 분할하듯이 지금의 js파일들도 기능에 따라 쪼갤 필요가 있다.
새 컴포넌트를 만들자. Movie.js를 만들었다. functionMovie( ){return null;}movie에 관한 내용들을 옮긴다. 이중에 먼저 필요 없는 key값은 없애고, 정의되지 않아 오류가 뜨는 movie는 다 지운다.
movie를 지우고 남은 medium_cover_image, title, summary, genres 같은 프로퍼티들을 함수의 인자에 넣고그러면 Movie컴포넌트가 이 프로퍼티들을 parent component로부터 받아온다.
다시 App.js로 돌아와, ./Movie를 import 하고, line29에서 prop의 이름을 우리가 원하는 대로 변경이 가능하기에
coverImg로 변경한다. (이름 단축 + 가독성 좋게) 우린 전과 동일하게 movie에서 정보들을 가져오고 있는데,
지금은 prop으로써 component들이 이것들을 받아서 사용하게끔 하고 있다.
alt값을 가지는 게 좋다고 한다. alt에 title을 넣어준다.
import PropTypes를 통해 각 프로퍼티들의 type들 설정 완료
이제 페이지를 전환하는 기능 구현을 위해 react router을 배워 볼 것임 router -> URL을 보고 있는 컴포넌트
페이지 단위로 파일들 구현하고 제작해야 함.
메인 페이지(Home), 영화 페이지(영화 한 개만 보여줌) + components와 routes라는 폴더를 만듦
컴포넌트 폴더에 Movie.js를 넣었다., 파일 경로도 수정함./Movie가 아닌 /components/Movie로 각 파일에
import 해야 하는 것 , 경로 수정, export 완료했다. 현재까지 파일 상황
routes 폴더에서 homeroute 만들기 Home.js로 App.js의 대부분의 내용들이 들어갈 것이고, App.js는 return null;로 변경했다.
다 왔다. 마지막 Detail.js라는 파일을 한 개 만들고 기존 메인 페이지였던 App.js의 기능은 router를 render 하는 기능을 한다. Detail.js는 영화 한 개의 여러 정보들을 보여주는 역할을 한다.
URL에 따라 어떤 페이지를 보여줄지 정하는 기능은 다음 시간에 구현할 거 임 끝
밑은 현재까지 코드, 파일 상황들
저번에 만든 건 위 두 파일에 다 들어간 상황이다.
아직 빌드업 과정이라 정신없고 라우터가 정확히 뭔지, 각 파일들의 기능은 뭔지 감은 안 오지만
허허 앞으로 최소 강의 3개 더 듣고 다시 돌아오도록 하자. 오늘은 여기까지
'코딩 > REACT' 카테고리의 다른 글
| ~0602 React - parameter 풍비박산 (0) | 2022.06.03 |
|---|---|
| ~0530 React Router 6월이다. 22년 절반이 지나가려해 (0) | 2022.06.01 |
| ~ 0527 React coin-Tracker +뿌듯한 금요일 (3) | 2022.05.27 |
| ~0524 React toDolist pt.2 천천히 오가는 대화 속에 (0) | 2022.05.26 |
| ~0524 React toDolist pt.1 (0) | 2022.05.25 |
