[react, vite, graphQL] - SWAPI를 이용하여, Star Wars Movie Timeline 프로젝트 만들기 - 1

 

회사에서 graphQL을 무조건 사용해야 할 일이 생겨서 우리 백엔드 개발자님이 SWAPI graphQL을 알려주셔서 오 이거다 싶어서 주말동안 이걸 사용해서 react, vite.. 등 이것 저것을 사용해서 스타워즈 무비 타임라인 프로젝트를 만들어보기로 했다. 월요일날 처음 만들 프로젝트에 관해서도 약간 연관성이 있을 주제같아서.. 

 

물론 이 아이디어?는 챗지피티가 주었다.

 

1. Star Wars Movie Explorer

• 설명: Star Wars 영화들의 정보(제목, 감독, 개봉일 등)와 각 영화에 등장하는 종(species)을 탐색할 수 있는 웹 애플리케이션을 만듭니다.
• 기능:
  • 영화 목록을 표시하고, 사용자가 특정 영화를 클릭하면 해당 영화의 세부 정보(종, 종의 분류, 종의 출신 행성 등)를 볼 수 있습니다.
  • 사용자가 관심 있는 종을 클릭하면 그 종에 대한 추가 정보를 제공하는 상세 페이지로 이동합니다.
• 사용 기술: React, GraphQL, Apollo Client

2. Star Wars Species Directory

• 설명: Star Wars 영화에 등장하는 다양한 종들을 검색하고 탐색할 수 있는 디렉토리 애플리케이션을 만듭니다.
• 기능:
  • 모든 영화에 등장하는 종들을 리스트로 나열하고, 종 이름으로 검색할 수 있는 기능을 제공합니다.
  • 각 종의 상세 정보를 보여주는 페이지에서 종의 분류, 출신 행성 등의 정보를 확인할 수 있습니다.
• 사용 기술: Vue.js 또는 Angular, GraphQL, Apollo Client

3. Star Wars Film & Species Relationship Visualization

• 설명: Star Wars 영화와 각 영화에 등장하는 종 간의 관계를 시각화한 프로젝트입니다.
• 기능:
  • 각 영화에 등장하는 종들을 시각적으로 연결한 그래프를 제공합니다. 이를 통해 사용자는 영화와 종 간의 관계를 쉽게 이해할 수 있습니다.
  • 영화 또는 종을 클릭하면 세부 정보가 표시되며, 선택된 영화와 종의 관계를 강조 표시합니다.
• 사용 기술: D3.js, React, GraphQL, Apollo Client

4. Star Wars Movie Timeline

• 설명: Star Wars 영화들의 개봉일을 기반으로 한 타임라인을 제공하는 프로젝트입니다.
• 기능:
  • 타임라인 상에서 각 영화의 정보를 시각적으로 표시합니다.
  • 각 영화에 마우스를 오버하면 해당 영화의 세부 정보와 등장 종 정보를 툴팁으로 표시합니다.
• 사용 기술: React, GraphQL, Tailwind CSS 또는 Material-UI

 

이렇게 여러 개 추천을 해줬는데. 사실 스타워즈 관심 없어서 잘 몰라서 타임라인 정도면 할 수 있을 것 같다 생각 들었다.

 

Star Wars Movie Timeline 프로젝트는 Star Wars 팬들에게 영화의 개봉 순서를 시각적으로 보여주고, 각 영화에 대한 중요한 정보를 제공하는 웹 애플리케이션입니다. 이 프로젝트는 간단하면서도 사용자 경험을 고려한 디자인을 통해 프론트엔드 기술을 연습하는 좋은 기회가 될 것입니다. 아래에 프로젝트의 구성과 구체적인 개발 과정을 설명드리겠습니다.

1. 프로젝트 구조

• 프레임워크: React
• 스타일링: Tailwind CSS 또는 Material-UI (사용자 선호에 따라 선택)
• 데이터 관리: Apollo Client (GraphQL 쿼리를 위해)
• 시각화 라이브러리: D3.js 또는 React Timeline Library (타임라인 구현을 위해)

2. 주요 기능

1. 타임라인 뷰:
   • 모든 Star Wars 영화들을 개봉일 순서대로 타임라인에 표시합니다.
   • 타임라인 상에 각 영화의 포스터나 아이콘을 배치하여 사용자가 한눈에 영화들을 인식할 수 있도록 합니다.
   • 각 타임라인 노드에 마우스를 올리면 영화 제목, 개봉일, 감독 등의 정보를 표시하는 툴팁이 나타납니다.
2. 영화 세부 정보 패널:
   • 타임라인의 영화 포스터를 클릭하면 해당 영화의 상세 정보 패널이 나타나게 합니다.
   • 상세 정보에는 영화의 감독, 개봉일, 등장 종 정보 등이 포함됩니다.
   • 영화에 등장하는 종들을 클릭하면 해당 종에 대한 추가 정보를 팝업 또는 모달로 표시할 수 있습니다.
3. 필터 및 정렬 기능:
   • 사용자들이 원하는 조건에 따라 타임라인을 필터링하거나 정렬할 수 있는 기능을 추가합니다.
   • 예: 특정 감독의 영화만 보기, 개봉 연도에 따라 정렬하기 등.
4. 반응형 디자인:
   • 데스크톱과 모바일 환경 모두에서 잘 동작하도록 반응형 디자인을 구현합니다.
   • 모바일 환경에서는 타임라인이 세로로 표시되고, 영화 정보가 아래로 확장되는 방식으로 UX를 최적화합니다.

3. 구체적인 개발 단계

1. 프로젝트 세팅:
   • React와 Tailwind CSS 또는 Material-UI를 설치하고 기본 프로젝트 구조를 설정합니다.
   • Apollo Client를 설정하여 SWAPI GraphQL API와 통신할 수 있도록 합니다.
2. GraphQL 쿼리 작성:
   • 필요한 데이터를 가져오기 위해 GraphQL 쿼리를 작성합니다.
   • 필요한 데이터: 영화의 제목, 개봉일, 감독, 등장 종 (종의 이름, 분류, 출신 행성 등).
   • 예시 쿼리:
     graphql

     코드 복사

     query { allFilms { films { title director releaseDate speciesConnection { species { name classification homeworld { name } } } } } }
3. 타임라인 컴포넌트 구현:
   • 영화 데이터를 기반으로 타임라인을 생성하는 컴포넌트를 만듭니다.
   • D3.js나 React Timeline Library를 사용하여 각 영화의 위치를 타임라인에 맞게 배치합니다.
   • CSS를 이용해 각 영화에 마우스를 올렸을 때 툴팁이 나타나도록 스타일링합니다.
4. 영화 상세 정보 패널 구현:
   • 타임라인에서 영화를 클릭했을 때 해당 영화의 정보를 보여주는 패널을 구현합니다.
   • 이 패널은 영화의 포스터, 감독, 개봉일, 등장 종 등의 정보를 표시합니다.
5. 필터 및 정렬 기능 추가:
   • 사용자가 영화를 필터링하거나 정렬할 수 있는 기능을 추가합니다.
   • 이 기능은 영화 데이터를 기반으로 조건에 맞는 데이터를 필터링하여 타임라인에 재배치합니다.
6. 반응형 디자인 적용:
   • 다양한 화면 크기에서 타임라인과 영화 상세 정보 패널이 잘 보이도록 반응형 디자인을 적용합니다.
7. 테스트 및 배포:
   • 모든 기능이 정상적으로 작동하는지 테스트하고, 사용자 경험을 최적화합니다.
   • GitHub Pages, Netlify, Vercel 등으로 프로젝트를 배포합니다.

4. 추가 기능 및 개선 아이디어

• 타임라인 애니메이션: 타임라인의 영화 노드들이 등장할 때 애니메이션 효과를 추가하여 더 생동감 있는 UI를 제공합니다.
• 다크 모드 지원: 사용자가 선호하는 테마에 따라 다크 모드와 라이트 모드를 전환할 수 있는 기능을 추가합니다.
• 로컬 스토리지: 사용자가 마지막으로 본 영화나 선택한 필터를 로컬 스토리지에 저장하여, 재방문 시 동일한 상태로 시작할 수 있게 합니다.

이 프로젝트는 Star Wars 팬들에게는 흥미로운 자료가 될 뿐만 아니라, GraphQL과 React, 그리고 시각화 라이브러리를 활용하여 프론트엔드 개발 실력을 키울 수 있는 좋은 기회가 될 것입니다.

gpt는 똑똑한 친구다. 어떤 거 만들지도 정해주고, 너무 의존하면 좀 힘들겠지만 이런 사이드 프로젝트 같은거 간단히 만들어보려할 때 도움을 참 많이 준다. 오히려 정형화된 것보다 뭔가 아이디어가 gpt가 나보다 더 좋다..

 

어쨌든 지금은 셋팅을 하고 있는데, 일단 프로젝트 하기 전에 기록 하려고 적어놓은거고 최대한 간단하게나마 일요일까지 만들어 볼 예정이다.

 

사용해야 할 기술들

- react

- vite

- apollo client

- graphql

- codegen

- react-helmet

- zustand