꾸매코딩

결과 Infinite Scroll 기능을 구현하였다. Api 데이터에서 해당 [ Tv / 영화 ]와 관련된 추천 영상을 불러와서 출력해주었다. Infinite Scroll Tv / 영화 두 곳에서 필요로 하기 때문에 기능이 중복된다. 따라서 Custom Hook으로 따로 분리해주었다. page값이 url 마지막에 붙어(...&language=en-US&page=1) 있어서 params : { page : page }로 전달해주었다. lodash uniqBy()로 id 값을 비교해서 중복을 방지해주었다. [ useInfiniteScroll.js ] import { useEffect, useState } from 'react'; const useInfiniteScroll = () => { const [pag..

결과 Search (검색) 기능을 만들었다. [ TV 프로그램 / 영화 ] 출력 형태를 스크롤에 따라 새로운 데이터를 불러오기 좋게 변경하였다. 홈, Tv, 영화, 검색 page에 있을때 border-bottom 값에 붉은색을 추가하였다. 오류 계획은 헤더 부분에서 찾을 제목을 입력하고 form을 제출하면 search 페이지로 이동하면서 결과를 출력하고 싶었다. 막힌 부분 form을 제출할때 /search로 이동하려면? ([해결] action="" / method="") → input의 value값을 받아올 수 없다. → action="/search/{input_value}"를 통해 URL에서 String 분리를 할까 했는데 어거지로 불러오는 기분이 들어서 우선은 다른 방법을 찾아보기로 했다. input..

결과 영화, TV 프로그램에 Detail Page를 만들어 세부 내용을 나타내 주었다. Route path를 "/movie/:id" , "/tv/:id"로 지정해 주었다. 영화는 IMDB 링크를 연결하였고, TV 프로그램은 각 Homepage와 연결하였다. 계획 이번에 해결하지 못한 평점을 ★7 이 아닌 ★★★☆☆ (star rating) 형태로 나타낼 예정이다. 포스터 상단에 [기본 정보 / 무비 클립 / 시즌 정보]를 클릭하면 각각의 내용을 보여주도록 할 예정이다. 느낀 점 class component로 한번 했던 내용이라 비교적 쉽게 하고 있다. function component로 다시 만들면서 코드의 길이가 줄어드는 것을 느끼고 있다. 만들면 만들수록 추가해보고 싶은 기능들이 너무 많아서 행복하면..

결과 Header 부분을 완성 하였다. [ 홈 / TV 프로그램 / 영화 ]로 분류 하였고 각각 Router를 이용해 경로를 지정해주었다. createGlobalStyle로 GlobalStyle을 설정하였다. jsconfig.json을 사용하여 절대경로로 지정하였다. [JavaScript] import (상대경로 → 절대경로) path 설정 방법 절대 경로 설정 방법 프로젝트 최상위 폴더(root)에 jsconfig.json 파일을 추가한 뒤 아래 코드 입력 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 경로 (Path) 문서, 파일, 그림 등의 위.. shin1303.tistory.com Header npm i styled-comp..

최종 결과 타이머의 시작, 정지, 리셋 기능을 만들었고 정상 작동 중이다. 현재 상황 어제 React Hook 사용이 익숙하지 않다는 것을 뼈저리게 느끼고 Hook 공식 문서를 읽으며 이해하고자 노력했다. 공식문서를 읽는 횟수가 늘어날수록 점점 이해하는 것이 느껴지기 시작했고 읽기 전보다는 조금 더 성장했다고 느껴진다. 지금까지 타이머와 타이머의 시작 버튼을 눌렀을 때 시작되는 것까지 만들었기 때문에 오늘 정지와 리셋 버튼을 만들려고 시도해보았다. 추가적으로 시작 버튼이 중복으로 눌릴 경우 setInterval이 반복해서 작동하는 오류를 수정하려 했다. 설명 updateTimer 함수가 화면에 보이는 타이머의 시간을 변경하는 함수이다. 블로그를 참고하여 시작, 정지, 리셋 기능이 가능한 1초에 1씩 증가..

Hook 이란? Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있도록 해줍니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. [react reference] Hook은 class 없이 React 기능들을 사용하는 방법을 제시 → Hook을 통해 function component에서 state와 lifeCycle 사용 가능 Hook 사용 시 장·단점 장점(function component) 단점(class component) 계층의 변화 없이 상태 관련 로직을 재사용할 수 있음 컴포넌트 사이..