잼굴 코딩공장

영화제목, 개봉년도, 평균 평점 , 장르를 설정하는 컴포넌트들을 작성했다. 각 컴포넌트들은 각자 movieFilterReducer를 통해 state에 값을 저장하고 있으며, state에 저장된 값들을 전달인자로 movieFilterActions의 getFilteredMovies 함수를 통해 GET 요청을 하도록 한다. 문제 1. movieFilterReducer의 state에 저장된 각 필터링 값들을 movieFilterAction의 action에서 GET요청을 하기전에, redux의 useSelector를 통해 전달받으려 하였고 에러가 발생했다. 에러: React Hook "useSelector" cannot be called at the top level React Hooks must be calle..

1. 조건부 랜더링 지금 컴포넌트를 불러올때마다 조건부 랜더링을 해주고있는데 뭔가 잘못된 느낌.. 분명 이렇게 하는게 아닐거같다. 마지막에 정리하자. 2. CSS파일 컴포넌트를 만들때 그에 맞는 css파일을 만드는게 아니라 그냥 App.css에다가 싹다 몰아놓고있는데 이것도 컴포넌트 별로 CSS파일 따로 만들어야 한다. 3. 깃허브 깃허브 리드미에 한눈에 프로젝트를 이해할수있도록 정리하자 지금 막힌 부분 원하는 영화를 선별하게끔 필터링, 검색하는 페이지를 만들려하는데 벽에 살짝 막힘

이미 수정을 다 해버려서 모든 흔적은 없지만 왜 잘 한거같은데 안되지?? 스펠링 하나하나 검토를 한 5번 6번을 하는동안 뭐가 그렇게 급했는지 고칠 부분이 한두개가 아니었다..... 대표적으로 id값을 넘겨줘야해서 매개변수에 id를 ({id}) 이렇게 써야하는데 const banner= (id) =>{ ~~ } 이렇게 쓴다던가 변수 선언을 똑같은거로 해버렸다던가 리듀서에서 실컷만든거 다르게 값을 줘버린다 던가 값을 어떻게 활용해야하는지 몰라서 괄호를 {} 이걸로 줘버렸다 이런 잔실수를 너무많이해서 고치는데 많은 시간이 지체됐다... 눈똑바로 뜨고 하자잉...

리덕스 툴킷을 사용하면 리덕스를 좀 더 간편하게 사용할수있다고해서 기존에 리덕스로 작성한것을 리덕스 툴킷으로 리팩토링 하였다. 1. 리덕스 툴킷 설치 npm install @reduxjs/toolkit react-redux 2. Reducer 바꾸기 일단 툴킷-리듀서의 핵심 createSlice를 import한다 import {createSlice} from "@reduxjs/toolkit" createSlice를 사용하면 직점 action name을 설정할 필요가없다. 알아서 해준다. const ~~~ = createSlice({ name: ~~ initialState, reducers: { ~~ } }) 기본적인 양식 저 reducers: { } 안에 기존에 switch 안에 return에 적었던 내..

데이터를 불러오는동안 로딩스피너를 보여주고자 한다 https://www.npmjs.com/package/react-spinners react-spinners A collection of react loading spinners. Latest version: 0.13.6, last published: 2 months ago. Start using react-spinners in your project by running `npm i react-spinners`. There are 711 other projects in the npm registry using react-spinners. www.npmjs.com 우선 이곳에서 제공해주는 npm을 이용하기위해 react-spinners를 다운 받는다. 대략적..

이제 힘든 리덕스도 연결을 다했고, API연결도 성공적으로 완료했다. 화면출력은 이제 불러오기만하면 되니까 쉽겠지? 왜 그렇지 생각하다가 알아낸 사실 useEffect에서 데이터를 가져오기전 랜더링과정에서 벌써 데이터를 요청했기 때문.. 이럴땐 조건부 렌더링을 해야한다. 성공!

let initialState = { popularMovies:{}, topRatedMovies:{}, upcomingMovies:{}, }; function movieReducer(state=initialState,action){ let{type,payload} = action switch(type){ case "GET_MOVIES_SUCCESS": return {...state,popularMovies: payload.popularMovies, topRatedMovies: payload.topRatedMovies, upcomingMovies: payload.upcomingMovies,}; default: return{...state} } } export default movieReducer; 리듀서를..

서로 연결되지 않는이상 await을 남발하면 퍼포먼스가 떨어질수도 있다. 이럴땐 Promise.all() 을 사용해서 병렬로 처리할수있다. function getMovies(){ return async (dispatch)=>{ const popularMovieApi = api.get(`movie/popular?api_key=${API_KEY}&language=en-US&page=1`) const topRateApi = api.get(`movie/top_rated?api_key=${API_KEY}&language=en-US&page=1`) const upComingApi = api.get(`movie/upcoming?api_key=${API_KEY}&language=en-US&page=1`) await P..

Axios를 사용하는 이유 1. 더 많은 기능을 제공함 (timeout, baseUrl 등등) 2. 사람들이 더 많이 사용함 3. 백엔드 nodeJS에서는 fetch를 사용할 수 없음 4. 단점은 설치해야한다 뿐임 axios를 사용하게 된다면 상당히 깔끔해진다 import api from "../api" const API_KEY=process.env.REACT_APP_API_KEY function getMovies(){ return async (dispatch)=>{ const popularMovieApi = await api.get(`movie/popular?api_key=${API_KEY}&language=en-US&page=1`) }} export const movieActions = { getMo..

설치 할 것 1. react 2. react-bootstrap 3. react-router 4. react-redux 5. redux-thunk 6. redux devtools 개발 할 것 정리 3개 페이지: 홈페이지, movie페이지, movieDetail 페이지 홈페이지: 배너 띄우기, 개봉예정작, 인기영화, 평점높은 영화 볼수있음 영화에 마우스 올리면 제목, 장르, 점수, 인기도, 청불여부 영화를 슬라이드로 넘기면서 볼 수 있다. movieDetail페이지: 영화에 대한 상세정보(포스터, 제목, 줄거리, 점수, 인기도, 청불여부, 예산, 이익, 러닝타임 등등) 트레일러, 리뷰, 관련 영화 확인 가능 검색 및 필터링 가능