일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 바닐라 자바스크립트
- HTML
- Nomad
- 클론코딩
- 마무리
- 느낀 점
- 계획
- CSS
- coding
- Nicolas
- Hook
- scflix
- react
- Nomad coder
- Netflix
- 오류
- 프로젝트
- vanilla js
- Firebase
- TiMER
- Clone
- 자바스크립트
- expo
- react-hook
- react-native
- Vanilla
- 코코아톡
- github
- Project
- javascript
- Today
- Total
목록계획 (12)
꾸매코딩
결과 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..
결과 각 포스터에 나오던 평점을 점수에 맞게 별 모양으로 출력되도록 하였다. Detail 페이지에 나오는 평점을 평점 점수에 맞게 별 모양으로 출력되도록 하였다. Star Rating npm i react-star-ratings을 활용하여 만들었다. 해보려고 이런 저런 시도를 하다가, 잘 만들어진 라이브러리가 있어서 이용하였다. 설명이 잘 되어있으니 참고하여 필요에 맞게 사용하면 될 것 같다. https://www.npmjs.com/package/react-star-ratings react-star-ratings A customizable star rating component for selecting x stars or visualizing x stars www.npmjs.com 수정 포스터 상단에 [..
서론 노마드 클론 코딩 React 챌린지에서 Class Component로 영화 프로그램을 만들었는데, 이를 function Component로 다시 만들면서 추가하고 싶은 기능들을 추가할 예정이다. 계획 기능적인 부분은 계속 추가할 예정이다. 일정 9월 19일까지 계획 중이다. 기능 포스터 슬라이드 기능. 스크롤을 통해 데이터 계속 불러오는 기능. Home 화면에 간단한 설명과 인기 있는 Movie, Tv 프로그램. function component로 구현. 여러 애니메이션 적용. API TMDB API를 사용하여 Movie, TV 프로그램을 불러올 예정이다. 목표 Class component로 작성했던 코드를 function component로 다시 작성하면서 hook에 대한 활용 능력과 각각을 비교..
결과 [ Timer 화면 ] 아래에 Send 버튼을 누르면 saveTime(00:00:01)과 text (send 누르면 보내기)가 DB에 저장된다. [ Contents 화면 ] [DB 저장 화면] 묶음의 전체 id값인 creatorId는 Contents에서 내가 올린 글을 삭제할때 쓸 용도이다. DB에 저장된 saveTime과 text값을 Contents 페이지에 불러와서 출력해주면 된다. 오류 [ DB에서 불러온 data의 구조 ] DB에서 불러온 내용이 아래와 같이 array 안에 object안에 array안에 object의 구조이기 때문에 Object의 key값으로 불러올 수 없는 문제가 있었다. -> array의 [0] 배열값을 주면 불러올 수는 있었지만, 글이 여러 개일 때 처리 문제를 생각해..
오류 DB에 있는 id값과 현재 로그인 중인 user의 id값을 비교하던 중, map을 사용하니 조건에 맞지 않는 값들은 undefined 로 출력이 되었다. undefined 상태로 DB에 넣으려 했더니 'FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined' 오류가 나왔다. undefined를 없애기 위해 이런저런 시도를 하다가 filter를 통해 다시 돌려주었고 undefined를 지울 수 있었다. 아래 코드는 해결이 된 코드이다. useEffect(() => { dbService.collection("currentTime").onSnapshot(snapshot => { const co..