일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Firebase
- Hook
- coding
- 마무리
- vanilla js
- Nicolas
- scflix
- Vanilla
- react-native
- HTML
- CSS
- 클론코딩
- 계획
- 프로젝트
- github
- Project
- Netflix
- 느낀 점
- 코코아톡
- react-hook
- 자바스크립트
- javascript
- Clone
- Nomad
- expo
- TiMER
- 오류
- Nomad coder
- react
- 바닐라 자바스크립트
- Today
- Total
목록Project (24)
꾸매코딩
결과 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 챌린지에서 Class Component로 영화 프로그램을 만들었는데, 이를 function Component로 다시 만들면서 추가하고 싶은 기능들을 추가할 예정이다. 계획 기능적인 부분은 계속 추가할 예정이다. 일정 9월 19일까지 계획 중이다. 기능 포스터 슬라이드 기능. 스크롤을 통해 데이터 계속 불러오는 기능. Home 화면에 간단한 설명과 인기 있는 Movie, Tv 프로그램. function component로 구현. 여러 애니메이션 적용. API TMDB API를 사용하여 Movie, TV 프로그램을 불러올 예정이다. 목표 Class component로 작성했던 코드를 function component로 다시 작성하면서 hook에 대한 활용 능력과 각각을 비교..
결론 [ 로그인 화면 ] Create Account를 누르면 계정을 만들 수 있다. Log in 상태에서 만들어진 아이디로 로그인하면 로그인 가능하다. Login 기능은 Firebase의 Authentication을 활용했다. [ Timer 화면 ] 타이머의 시작, 정지, 종료, 시간과 내용 저장 기능을 만들었다. FontAwesome을 통해 무료 아이콘을 이용했다. Send 버튼 클릭 시 새로운 DB로 내용(시간-Text들)이 저장된다. [ Contents 화면 ] 다른 Id로 Send 한 내용도 볼 수 있다. - 공유 목적 [ About 화면 ] Log Out을 누르면 Log Out이 된다. 회고에 대한 나의 이해 프로젝트 기간을 돌아보며, 부족한 부분과 긍정적인 부분을 되돌아보는 것 이를 통한 성장..
결과 [ 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..
결과 Firebase를 이용하여 타이머의 현재시간과 메모를 저장하고, 불러와서 타이머 밑에 출력해주고 있다. Firebase Firebase에 시간, 메모를 저장해서 불러와주었다. 우선은 타이머 시간과, 적은 내용, 작성된 시간을 저장해주고 있다. Firebase (파이어베이스)란 무엇인가? [용어 정리] Firebase (파이어베이스)란 무엇인가? Firebase 란 Android, iOS, 웹, C++, Unity에서 앱을 빌드하고 출시하는 데 도움이 되는 자세한 설명서와 플랫폼 간 SDK(Software Development Kit, 소프트웨어 개발 키트)를 제공합니다. [공식 홈페이지] < 정리.. shin1303.tistory.com [ Create ] - 코드 길이가 길어서 해당 부분만 작성하..