목표한 구현을 완료하였다! 하지만 마음에 들지 않는것이 하나 있는데 그것은 이미지 슬라이드 구현이다. 현재는 넣어진 데이터베이스의 갯수를 전부 나눠서 들어가게 되었는데 이것을 슬라이드로 바꾸는 작업을 하였다. react-slick React Slick은 React 애플리케이션에서 많이 사용되는 캐러셀/슬라이더 라이브러리입니다. 이 라이브러리는 다양한 옵션과 기능을 가진 반응형 및 인터랙티브한 캐러셀을 유연하게 생성하고 사용할 수 있도록 제공합니다. 이 라이브러리는 인기 있는 Slick 캐러셀 jQuery 플러그인을 기반으로 구축되었습니다. yarn add react-slick React Slick GitHub 저장소 React Slick 문서 React Slick 라이브러리를 사용하여서 슬라이드 구현을 ..

기본적으로 접속을하면 로그인 권한에 따른 브라우저 라우트 설정을 한다. 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..

코드 수정 /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..

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..

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..

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+ 버전 사..

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..

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..

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 ..

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..