넷플릭스 클론코딩 및 포트폴리오사이트로!

리액트 공부를 하려고 하는데 넷플릭스 클론코딩이 하고 싶었다.깃허브를 돌아다녀보니 여러가지 자료들이 있었지만 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&#x3A

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 애플리케이션에서 많이 사용되는