user-thumbnail
@smooth97
front-end 개발 공부일지
SERIES

Netflix Clone

[ Netflix Clone ]

2019년 9월 2일

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

[ Netflix Clone 1 ] Redux thunk API 연동하기 - 시작부터 어렵다

2019년 9월 2일

프로젝트 생성 - Git Bash를 열고 명령어를 입력해 프로젝트를 생성 `$ npx create-react-app netflix-clone 해당 디렉토리에서 필요한 모듈을 설치해 주고 $ yarn add redux react-redux axios 개발서버 실행! $ yarn start` API 연동 - 최신 영화 목록, 장르, 고품질 포...

[ Netflix Clone 2 ] Component - 폴더 구조 & UI

2019년 9월 5일

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

[ Netflix Clone 3 ] Style

2019년 9월 9일

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

[ Netflix Clone 4 ] Modal & Search Api

2019년 9월 14일

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