티스토리

이세개발

검색하기

블로그 홈

이세개발

trinityforce.tistory.com/m

print(name) 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

넷플릭스 클론코딩 12 슬라이드 구현 및 github page 설정 목표한 구현을 완료하였다! 하지만 마음에 들지 않는것이 하나 있는데 그것은 이미지 슬라이드 구현이다. 현재는 넣어진 데이터베이스의 갯수를 전부 나눠서 들어가게 되었는데 이것을 슬라이드로 바꾸는 작업을 하였다. react-slick React Slick은 React 애플리케이션에서 많이 사용되는 캐러셀/슬라이더 라이브러리입니다. 이 라이브러리는 다양한 옵션과 기능을 가진 반응형 및 인터랙티브한 캐러셀을 유연하게 생성하고 사용할 수 있도록 제공합니다. 이 라이브러리는 인기 있는 Slick 캐러셀 jQuery 플러그인을 기반으로 구축되었습니다. yarn add react-slick React Slick GitHub 저장소 React Slick 문서 React Slick 라이브러리를 사용하여서 슬라이드 구현을 .. 공감수 0 댓글수 0 2023. 9. 7.
넷플릭스 클론코딩 11 라우팅 페이지 기본적으로 접속을하면 로그인 권한에 따른 브라우저 라우트 설정을 한다. app.js import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { Home, Browse, SignIn, SignUp } from './pages'; import * as ROUTES from './constants/routes'; import { IsUserRedirect, ProtectedRoute } from './helpers/routes'; import { useAuthListener } from './hooks'; export default function App() { const { user } = useAuthListener.. 공감수 0 댓글수 0 2023. 9. 7.
넷플릭스 클론코딩 10 로그인 기능구현 코드 수정 /src/pages/signin.js import React, { useState, useContext } from 'react'; import { useNavigate } from 'react-router-dom'; import { FirebaseContext } from '../context/firebase'; import { Form } from '../components'; import { HeaderContainer } from '../containers/header'; import { FooterContainer } from '../containers/footer'; import * as ROUTES from '../constants/routes'; import { signInWit.. 공감수 0 댓글수 0 2023. 9. 7.
넷플릭스 클론코딩 9 회원가입 페이지 만들기 Firebase signup 사용하기 firebase에 Authenication 이메일/비밀번호를 누르고 체크 후 저장 코드 만들기 회원가입 lib/firebase.prod.js import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const config = { apiKey: process.env.REACT_APP_apiKey, authDomain: process.env.REACT_APP_authDomain, projectId: process.env.REACT_APP_projectId , storageBucket: process.env.REACT_APP_storageBucket , messagingSen.. 공감수 0 댓글수 0 2023. 9. 7.
넷플릭스 클론코딩 8 firebase 설정 src/lib/firebase.prod.js import Firebase from 'firebase/app'; import 'firebase/firestore'; import 'firebase/auth'; // 1) when seeding the database you'll have to uncomment this! // import { seedDatabase } from '../seed'; const config = { apiKey: '', authDomain: '', databaseURL: '', projectId: '', storageBucket: '', messagingSenderId: '', appId: '', }; const firebase = Firebase.initializeApp(conf.. 공감수 0 댓글수 0 2023. 9. 6.
넷플릭스 클론코딩 7 메인페이지, Route 설정 mainPage 구성 및 Route 설정 Route 설정 브라우저의 경로를 지정하기위해 리액트 라우터를 사용한다. react-router-dom SPA앱을 만들 때 많이 사용되는 패키지 react-router - 웹&앱 react-router-dom - 웹 react-router-native -앱 사용 버전 "react-router-dom": "^6.13.0", ## react-router-dom 설치 yarn add react-router-dom 이후 footer, accordion, opt-form, header, feature 순으로 components를 구성하고 이전 app.js를 containers 폴더에 컨테이너화 시키면서 필요한 코드들을 작성한다. react-router-dom 6+ 버전 사.. 공감수 0 댓글수 0 2023. 9. 6.
넷플릭스 클론코딩 6 global-style, eslint global-styles.js 만들기 기본적으로 사용되는 스타일시트이다. /src/global-styles.js import { createGlobalStyle } from 'styled-components'; export const GlobalStyles = createGlobalStyle` html, body { height: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #000000; color: #333333; font-size: 16.. 공감수 0 댓글수 0 2023. 9. 6.
넷플릭스 클론코딩 5 Creating the Jumbotron component fixtures/jombotron 출력하기 jumbotron.js import styled from 'styled-components/macro'; export const Inner = styled.div` display: flex; align-items: center; flex-direction: ${({ direction }) => direction}; justify-content: space-between; max-width: 1100px; margin: auto; width: 100%; @media (max-width: 1000px) { flex-direction: column; } `; export const Container = styled.div``; jumbotron/index.js imp.. 공감수 0 댓글수 0 2023. 9. 6.
넷플릭스 클론코딩 4 Creating files/folders src/fixtures 폴더를 만들고 src/fixtures/faqs.json [ { "id": 1, "header": "What is Netflix?", "body": "Netflix is a streaming service that offers a wide variety of award-winning TV programmes, films, anime, documentaries and more – on thousands of internet-connected devices.\n\nYou can watch as much as you want, whenever you want, without a single advert – all for one low monthly price. There's always .. 공감수 0 댓글수 0 2023. 9. 6.
넷플릭스 클론코딩 3 (패키지설치 및 코드정리) 1. 여러가지 패키지들을 설치한다. yarn add styled-components yarn add firebase yarn add fuse.js yarn add normalize.css 대표적인 CSS-in-JS 라이브러리 https://styled-components.com/ 구글 Firebase https://firebase.google.com/?hl=ko 클라이언트 측에서 사용되는 가볍고 강력한 텍스트 검색 라이브러리 https://fusejs.io/getting-started/installation.html 웹 페이지의 스타일을 표준화시키는 CSS 리셋 스타일시트 https://github.com/necolas/normalize.css 2. 기본 튜토리얼 시작 코드 src/app.js expor.. 공감수 0 댓글수 0 2023. 9. 6.
넷플릭스 클론코딩 2 (설치) 1. node 설치 https://nodejs.org/ko 18.16.0 LTS 버전으로 설치하였다. node, npm(패키지 관리자) 버전확인 node -v npm -v 2. yarn 설치 npm install -g yarn 설치확인 (1.22.19) yarn --version Yarn은 Node.js 자바스크립트 런타임 환경을 위해 페이스북이 2016년 개발한 소프트웨어 패키지 시스템이다. NPM을 사용해도 되지만 이 튜토리얼에서는 NPM의 한계를 극복하기 위해 나온 Yarn 을 사용하였다. 3. yarn netflix 라는 react-app 을 만든다. yarn create react-app netflix 이렇게 나오면 완료. 중간에 뜨는 노란색 warning들은 무시해도 된다. 공감수 0 댓글수 0 2023. 9. 6.
넷플릭스 클론코딩 1 (개요) 리액트 공부를 하려고 하려고 정보들을 찾아보다 넷플릭스를 클론코딩 하고 싶었다. 깃허브를 돌아다녀보니 여러가지 자료들이 있었지만 https://github.com/karlhadwen/netflix 의 코드가 가장 공부하기 좋아보였다. 영어로되어있지만 동영상 10시간짜리의 영상이 있기에 따라해가면서 만들어보기로 하였고, 3년전 만들어진 코드라서 최신 상황에 맞게 바꿔나가면서 진행을 해보려고 한다. 이 프로젝트는 커스텀 훅, 컨텍스트, 포털 등의 기능을 활용하며, Firebase를 사용하여 데이터베이스와 인증 시스템을 구축하는것을 목표로 한다. 공감수 0 댓글수 0 2023. 9. 6.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.