넷플릭스를 복제하고 전환점을 넣었어요.

Shopify 웹 세미나 참석에 관한 이메일을 받았을 때 바로 등록했습니다.우리는 모두 Shopify가 누구와 무엇인지 안다.인터넷 세미나에 참석한 사회자는 실습을 신청하는 링크를 제시했다.내가 신청을 보았을 때, 나는 그들도 네가 항목을 제출하기를 바라는 것을 발견했다.나는 매우 흥분했다. 왜냐하면 나는 "네! 지금 할 일이 있어요!"라고 생각했기 때문이다.개발자로서 우리는 항상 다음 행동을 생각할 때 곤경에 빠진다.나는 인코더 블록이라고 부르는 것을 좋아한다.
프로젝트
(Gif)

넷플릭스라는 이름의 이중관어를 소개합니다.유일한 차이점은 영화를 볼 수 없다는 것이다. 그것들에 대한 정보만 볼 수 있다는 것이다.이것은 내가 만든 영화 데이터베이스 응용 프로그램으로 사용자가 기존 영화를 검색하고 최대 5편의 영화를 선택적으로 지명(저장)할 수 있도록 한다. (Shopify의 도전 요구에 따라)이 프로젝트의 영감은 Shopify가 잠재적인 실습생을 필요로 하는 Shoppies 도전(또는 당신의 프로젝트)에서 나온 것입니다.
기술 창고
처음에 나는 MERN 창고 노선을 걷고 싶었지만, 나는 여전히 이 창고를 만지작거리고 있고, 프로젝트의 마지막 기한이 있기 때문에, 나는 Rails를 선택하여 반응을 보였다.Node보다 Rails에 대한 경험이 많습니다.나는 또한 OMDB 데이터베이스 API를 사용하여 영화 데이터를 추출하여 당신들에게 아름다운 사람을 보여 줍니다.
프로젝트 프로세스
저는 Rails를 백엔드로 사용하여 사용자 모델과 영화 모델을 만들었습니다.관련성은 다음과 같다...

User > has_many :movies, dependent: :destroy
Movie > belongs_to :user, optional: true

간단해.
나의 목표는 검색된 모든 영화를 나의 rails 백엔드 데이터베이스 (postgres) 로 보내는 것이다.이를 위해, 나는 영화를 오래 지속하고 클라이언트에서 렌더링을 처리하는 add_movie_to_home이라는 방법을 만들었다.

find_by(params[:plot])를 사용합니다.내가plot를 사용하는 이유는 영화 줄거리의 표현이 항상 다르다고 생각하기 때문이지, 어떤 영화에 대해 같은 제목을 사용하는 것이 아니라고 생각하기 때문이다.나는 그 독특한 영화들만 보존할 것을 확보하고 싶다.만약 그 영화가 이미 존재한다면, 나는 사용자에게 우호적인 힌트를 주어 그들에게 이 영화가 이미 존재한다는 것을 일깨워 줄 것이다.봐봐.

사용자가 영화 한 편을 저장할 수 있도록 현재 사용자를 얻고 영화를 영화 배열에 넣으면 됩니다.사용자가 5편의 영화만 지명할 수 있기 때문에, 나는 사용자 모델에서 이 점을 확보하기 위해 사용자 정의 방법을 만들었다.

그리고 나서 나는 나의 창설 작업에서 그것을 호출했다.그러나 나는 이런 방법에 대해 여전히 약간의 의심을 가지고 있다.나는 (지금은 여전히) 더 복잡한 관련을 사용할 수 있다고 생각한다. 예를 들어 다대다. 왜냐하면 한 편의 영화는 여러 사용자에 속할 수 있고 사용자는 많은 영화를 가질 수 있기 때문이다.나는 언젠가 그것을 재구성할 것이다.

이제 영화의 정렬과 렌더링 과정을 설명합니다.솔직히 말하면, 나는 분류에 좀 흥미가 있다.위gif에 표시된 정렬 단추가 있는 SortContainer 구성 요소를 만들었습니다.이것은 나의 All Movies Container에서 전달하는 함수인'sort Movies'가 있습니다.이 함수는movies의 매개 변수를 받아들이고 mymovies 속성의 상태를 업데이트합니다.나는 영화를 논점으로 사용하는데, 이것은 나의 재산 명칭인'영화'와 같다.현재 ES6 magic을 사용하면 영화의 속성 이름을 은밀하게 설정할 수 있습니다. 이렇게 현저하게 설정하는 것이 아니라

sortMovies = movies => {
     this.setState(
          movies: movies
     )
}

vs

그런 다음 SortContainer에서 만든 여러 정렬 방법에서 이 함수를 사용합니다.

일부 정렬 논리를 완성한 후, 나는 되돌아오는 그룹을 변수로 설정한 다음, 이 변수를sortMovies 함수에 전달하고, 이 함수는 업데이트된 영화 정렬 목록으로 페이지를 다시 보여 줍니다.만약 당신이 코드를 한 번 본다면, 당신은 내가 실현한 네 가지 다른 정렬을 볼 수 있을 것이다.
마지막으로 읽어줘서 고맙다고 말하고 싶어요.이 프로젝트는 매우 성공적이다.나는 코드를 더욱 간결하게 하기 위해 많은 다른 일을 할 수 있다고 생각한다.나는 내가 쓴 모든 프로젝트에 관한 블로그 글에서 이렇게 말할 수 있다.아마도, 나는 상태를 Redux로 옮길 것이다. 아마도, 나는 그것을 Node로 바꿀 것이다.누가 알겠어요?나는 서프라이즈로 가득 차 있다.다음 개발자까지😉