잼굴 코딩공장

이제 힘든 리덕스도 연결을 다했고, 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페이지: 영화에 대한 상세정보(포스터, 제목, 줄거리, 점수, 인기도, 청불여부, 예산, 이익, 러닝타임 등등) 트레일러, 리뷰, 관련 영화 확인 가능 검색 및 필터링 가능

문제 1. 문자열 다루기 기본 풀이순서: 1. 문자열s를 배열로 만든다. 2. s의 길이만큼 숫자만 골라내서 box라는 빈배열에 넣기를반복한다 3. s의 길이와 box의 길이를 비교해서 true false를 판가름한다. function solution(s) { var answer = ""; let box = [] s.split(""); for(let i=0; i

문제 1. 음양 더하기 문제 풀이: 1. 원하는 값을 담을 빈 배열을 만든다. 2. 반복문을 통해서 sign의 i번째 원소가 true라면 i번째 absolutes를 빈배열에 넣어준다. 3. sign의 i번째 원소가 false라면 i번째 absolutes 값에 마이너스를 곱해서 빈배열에 넣어준다. 4. 빈배열의 값을 모두 더해준다. function solution(absolutes, signs) { let hmm = [] let answer = 0 for(j=0; j(a+b)) return answer; } 문제 3. 가운데 글자 가져오기 문제 풀이: 1. s값을 객체로 바꾼다. 2. s의 길이가 짝수라면 가운데 2개값을 3. s의 길이가 홀수라면 정 가운데 값만 가져온다. 4. 홀수인 경우 s의 길이가 ..

문제 1. 나누어 떨어지는 숫자 배열 풀이 순서: 1. for문을 배열길이만큼 반복한다. 2. 배열의 값을 divisor로 나눈 나머지가 0이라면 answer배열에 push한다. 3. for문을 다 돈뒤에 answer에 값이 없다면, -1이라는 값을 넣어준다. 4. 배열을 오름차순으로 정렬한다. 사용문법 for() : 반복문 if(): 조건문 sort(function(a,b){return a-b}) : 오름차순 function solution(arr, divisor) { var answer = []; for(i=0; i

문제 1. 서울에서 김서방 찾기 풀이순서: 1. 배열에서 Kim이 몇번째에 있는지 찾는다. 사용문법: indexOf() : 배열에서 원하는 값이 어디에 위치한지 알아낸다. function solution(seoul) { var answer = "김서방은 "+seoul.indexOf("Kim")+"에 있다" return answer; } 문제 2. 핸드폰 번호 가리기 풀이순서: 1. *을 폰넘버의 길이-4 만큼 반복한다. 2. 뒷자리 4개는 따로 추출한다. 3. 두개를 더한다. 사용문법: repeat(): 해당 값만큼 반복한다. slice(): 원하는 만큼 잘라낸다. 헤맨부분: 배열로 만들고 splice()를 사용해서 *로 대체하려했는데 어떤이유에서인지 안돼서.. 다른 방법사용 썻던 식 : answer =..

문제 1. 두 정수 사이의 합 풀이 순서 1. b가 a보다 크면 b-a 만큼의 횟수로 a+1씩 등차수열로 더해준다. 2. a가 b보다 크면 a-b만큼의 횟수로 b+1씩 등차수열로 더해준다. 3. a와 b가 같다면 a나 b를 반환한다. 사용문법 if(){} , else if(){}, else{} : 조건문 for(){} : 반복문 function solution(a, b) { let answer = 0; let namu = 0; if(b>a){ let N = (b-a) for(i=1; ib){ let N = (a-b) for(i=1; i