일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 느낀 점
- expo
- 마무리
- vanilla js
- Nomad
- Firebase
- 프로젝트
- coding
- Nomad coder
- Vanilla
- HTML
- Project
- TiMER
- 계획
- scflix
- github
- react-native
- javascript
- react-hook
- 코코아톡
- react
- 오류
- CSS
- Nicolas
- Clone
- 바닐라 자바스크립트
- 클론코딩
- 자바스크립트
- Hook
- Netflix
- Today
- Total
목록react (26)
꾸매코딩
결과 검색 화면의 결과를 TV와 영화로 분리하였다. 검색 화면 결과를 infinite Scroll을 통해 결과를 계속 불러온다. iframe을 사용해서 불러온 유튜브 영상을 전체 화면이 가능하도록 변경해주었다. [ 예고편 영상 ] [ 검색 창 ] iframe 유튜브 영상 전체 화면 적용 유튜브 영상에서 공유 -> 퍼가기를 하면 코드로 복사가 가능하다. 하지만, 전체 화면으로 볼 수 없어서 검색해보았더니 allowfullscreen = 'true'가 아닌 allow='fullscreen'을 적용해주었더니 해결되었다.
결과 추천 영상, 예고편 슬라이드(Splide 사용) 기능을 적용하였다. 각 페이지 [ Tv / 영화 / 검색 ] 배치와 디자인을 수정하였다. [ TV / 영화 페이지 ] [ 검색 창 ] [ 예고편 ] [ 추천 영상 ] 슬라이더(Slider) Splide( $ npm install @splidejs/react-splide )를 활용하여 구현했다. 슬라이드 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 계획 검색 화면의 결과를 TV와 영화로 분리한 뒤, infinite Scroll을 통해 결과를 계속 불러올 예정이다. 예고편(Youtube) 영상에 전체화면 기능이 안되는 것을 해결할 예정이다. 점차적으로 반응형 페이지로 변경할 예정이다. 느낀 점 배치와 스타일을 싹 변경하는데 많은 노가다를 하였고..
결과 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..
결과 Detail Page 헤더 부분에 onClick 이벤트를 활용하여 기본 정보, 출연진을 볼 수 있게 변경하였다. 출연진은 최대 10명까지만 나오도록 설정해두었다. 마우스를 가져가면(hover) 배우 이름이 나오고, 사진 아래에 캐릭터 이름이 나오도록 하였다. 계획 Detail 페이지 아래 부분에 해당 Tv 프로그램 / 영화와 비슷한 영상을 출력할 예정이다. Infinite Scroll을 추가할 예정이다. 느낀 점 처음 생각했던 레이아웃이 마음에 들지 않아 변경하는중인데, 코드가 뒤엉키면서 뒤죽 박죽 되어가는것 같다. 처음에 계획하는 시간이 얼마나 중요한지, 또한 코드를 확장성 있게 작성해두는것이 수정할때 얼마나 편리한지 몸으로 체험하고 있는것 같다. 코드 https://github.com/ssc98..
결과 Search (검색) 기능을 만들었다. [ TV 프로그램 / 영화 ] 출력 형태를 스크롤에 따라 새로운 데이터를 불러오기 좋게 변경하였다. 홈, Tv, 영화, 검색 page에 있을때 border-bottom 값에 붉은색을 추가하였다. 오류 계획은 헤더 부분에서 찾을 제목을 입력하고 form을 제출하면 search 페이지로 이동하면서 결과를 출력하고 싶었다. 막힌 부분 form을 제출할때 /search로 이동하려면? ([해결] action="" / method="") → input의 value값을 받아올 수 없다. → action="/search/{input_value}"를 통해 URL에서 String 분리를 할까 했는데 어거지로 불러오는 기분이 들어서 우선은 다른 방법을 찾아보기로 했다. input..
서론 React 파일은 'create-react-app'을 통해 만들었다. GitHub Repository 생성 테스트를 위해 gh-pages-test 명으로 repository를 만들었다. 로컬 저장소와 연결 default 브런치명이 main으로 변경되었지만, create-react-app을 통해 설치하면 브런치명이 master로 나온다. 아래 명령어를 터미널에 입력하여 로컬 저장소와 원격 저장소를 연결한다. git init git remote add origin [repository 주소] gh-pages 설치하기 gh-pages를 이용하기 위해서는 패키지를 설치해야 한다. npm install gh-pages package.json에 주소 추가 패키지 설치가 완료되면 package.json에 "ho..