DisneyClone

이번엔 디즈니+사이트를 클론코딩 해 볼 예정이다.먼저 컴포넌트별로 살펴보자헤더, 슬라이더, 카드뷰어, 무비리스트 로 크게 4가지 컴포넌트로 구성되어 있다.위에서부터 차례로 각각의 기본 틀을 먼저 잡아두는게 좋겠다.Header.js를 만들고 기본코드를 작성한 뒤 App.

Nav메뉴에 애니메이션을 추가해볼건데 이 프로젝트에서는 css의 &:after를 이용할 것이다.NavMenu의 스타일에이 코드를 추가하면이렇게 뒤에 추가한 content인 heyyyy가 더해지는것을 확인할 수 있다.하지만 지금 필요한 것은 text가 아닌 밑줄이다 따라

헤더는 완성했으니 홈을 만들면 되겠다.Home.js로 가서 똑같이 필요한것들을 import한 뒤 기본 코드를 작성하고 몇가지css를 주면vh, vw에 대해 잘 모르겠다면 자료를 찾아보자, 간단히 말하면 뷰포트의 비율이라고 할 수 있는데 100vh는 즉 viewporth

Viewer 카드섹션 코드를 작성할 Viewers.js를 만들고 Home.js에 import하고 테스트해보자.잘 나타나는것을 확인했으니 Viewers.js 에 styled-components를 import하고테스트용으로 5개의 이미지를 넣은 뒤 스타일css를 적용해 5

앞의 포스팅에 이어 Movies요소를 만들건데 Movies.js를 만들고 Home.js에 import하고 Container사이에 넣자Movies역시 잘 들어가있다.이번에 작성할 코드 역시 이전의 viewers.js와 유사하다.div태그들과 이미지들을 넣어주고css를 스

Detail페이지를 만들 예정인데 react router dom 패키지를 이용할 것이다.사용법은 공식 사이트를 참고하자 패키지를 사용할 때의 주의점은 패키지의 버전에 따라 사용법이 바뀌는 경우가 자주 있으므로 만약 에러가 난다면 해당 패키지의 공식 사이트에서 사용법을

Detail페이지에 이어 Login페이지를 만들자Login.js를 만들고 Detail과 동일하게 기본코드를 작성한 뒤 App.js에 Route로 감싸서 Routes태그 안에 넣자/login으로 가보면 작성한 Login.js가 보인다.배경 이미지 부터 적용해보자이것 역시

이제 심슨으로만 고정되어 있는 Movie들을 DB에 있는 리스트들을 가져와서 적용시켜보자.firebase DB를 이용할 예정이다.firebase.js를 만들고사용할 DB의 정보와 설정을 입력한다.이후 movieSlice.js를 만들고redux를 사용해 초기설정을 해준뒤

movieSlice와 동일하게 user폴더에 userSlice를 만들고초기설정을 해준다. 이 코드는 유저가 로그인하면 로그인 한 값으로 설정해주고 로그아웃 하면 그 값들을 다시 null로 바꿔준다.store.js에서 동일하게 import해주고 reducer에 추가해준다