Netflix Clone

들어가며 디자인 전공인 나는 혼자 개발 공부를 시작한지 4개월이 됐는데, 유튜브와 패스트 캠퍼스 온라인 강좌 등 많은 기초 강좌들을 보고 따라 하는 방식으로 공부를 해왔다. 지금까지 만들어 왔던 작은 프로젝트들을 보면 투두 리스트, 레시피 앱, 무비 앱, 웹사이트 퍼블리싱 같이 기초적인 기술을 배우기 좋은 간단한 프로젝트들인데, 설명되어 있는 코드를 따...

프로젝트 생성 Git Bash를 열고 명령어를 입력해 프로젝트를 생성 `$ npx create-react-app netflix-clone` 해당 디렉토리에서 필요한 모듈을 설치해 주고 `$ yarn add redux react-redux axios` 개발서버 실행

Directory 데이터를 가져왔으니 본격적으로 프론트 작업을 해보쟈! 전체적인 디렉토리의 구조 src폴더 내부에는 컴포넌트의 구조와 상태를 작성할 폴더를 Component / Container로 나눠 로직의 재사용성을 높혀주고 스타일링을 담당하는 폴더인 static과 Redux를 작성할 폴더인 store로 구성했다. image.png /Compone...

Static Directory image.png style을 담당하는 static (정적) 폴더에 스타일링에 관련된 파일들을 담아둔다. /images 필요한 이미지와 로고 등이 들어가있는 폴더 /sass scss 파일을 작성하는 폴더로 abstracts 와 components 두 가지 하위 폴더로 나눠져 있고 index 파일인 style.scss...

Modal 영화를 클릭하면 해당하는 영화정보를 담고있는 모달이 뜨게 만들어보자! 모달이 클릭한 영화의 정보를 담고있으려면 Movie컴포넌트와 같은 props를 받아야한다. 때문에 Movie 컴포넌트에서 Modal을 같이 렌더링 시키기로 했다. 일단 영화 정보를 담는 image / Title / overview 데이터를 props로 받고, Movie를 클...