
리액트 공부를 하려고 하는데 넷플릭스 클론코딩이 하고 싶었다.깃허브를 돌아다녀보니 여러가지 자료들이 있었지만 https://github.com/karlhadwen/netflix 의 코드가 가장 공부하기 좋아보였다.영어로되어있지만 동영상 10시간짜리의 영상이 있

https://nodejs.org/ko18.16.0 LTS 버전으로 설치하였다.node, npm(패키지 관리자) 버전확인설치확인 (1.22.19)Yarn은 Node.js 자바스크립트 런타임 환경을 위해 페이스북이 2016년 개발한 소프트웨어 패키지 시스템이다.

대표적인 CSS-in-JS 라이브러리https://styled-components.com/구글 Firebasehttps://firebase.google.com/?hl=ko클라이언트 측에서 사용되는 가볍고 강력한 텍스트 검색 라이브러리https:

JSX에서 사용되는 모든 속성(props)을 모아서 객체로 받아오는 문법. 이렇게 수집된 속성들은 restProps라는 이름의 객체에 할당, 이렇게 수집된 속성들은 다른 컴포넌트로 전달하거나 필요에 따라 사용children은 React 컴포넌트에서 내부에 포함된 컨텐츠
global-styles.js 만들기기본적으로 사용되는 스타일시트이다./src/global-styles.jseslint 설치ESLint : JavaScript 코드에서 일관성, 가독성 및 버그를 찾아내기 위한 정적 분석 도구src/index.jssrc/app.jssr
브라우저의 경로를 지정하기위해 리액트 라우터를 사용한다.react-router-domSPA앱을 만들 때 많이 사용되는 패키지react-router - 웹&앱react-router-dom - 웹react-router-native -앱사용 버전 "react-router-d

파이어베이스를 사용하기 위한 베이스 코드를 작성google firebase에 접속한다.https://firebase.google.com/적절히 설정하고 프로젝트를 생성한다.Firestore Database에 들어간후 데이터베이스 생성버튼을 누른다.상황에 맞게

firebase에 Authenication이메일/비밀번호를 누르고체크 후 저장lib/firebase.prod.jspage/signup.jscontext/firebase.jsindex.jsindex.js에서 firebase.prod 를 받아오고page인 signup.js

/src/pages/signin.js잘 로그인이 된다.

app.jsindex.jsuse-auth-listener.jsuse-content.jsroutes.js

목표한 구현을 완료하였다!하지만 마음에 들지 않는것이 하나 있는데 그것은 이미지 슬라이드 구현이다.현재는 넣어진 데이터베이스의 갯수를 전부 나눠서 들어가게 되었는데 이것을 슬라이드로 바꾸는 작업을 하였다.React Slick은 React 애플리케이션에서 많이 사용되는