영화 검색 회고 (w. Vue)

영화 검색 제작(w. Vue) 후기!!

와 Vue를 급하게 공부하고 바로 과제를 진행하려다 보니 정말 재미있었습니다. ㅋㅋㅋㅋ
이게 애기 스타트업인가 라는 생각도 들면서 이번에는 기간을 길게 잡고 여유 부리면서 했는데 생각하지 못 한 오류들이 너무 많이 나와서 시간을 조금 오버하게 되었습니다. ㅜㅜ

다시 원래의 방법대로 빨리 완성한 후 리팩토링하는 방식으로 돌아가야 겠습니다.

배포 사이트 

https://melodic-douhua-da4c6d.netlify.app/

Paengflix

파일 구성

📦FEDC2-8_Vue
┣ 📂functions
┃ ┗ 📜apiHandler.js
┣ 📂src
┃ ┣ 📂assets
┃ ┃ ┣ 📂css
┃ ┃ ┃ ┗ 📜reset.css
┃ ┃ ┣ 📂images
┃ ┃ ┃ ┗ 📂favicon
┃ ┃ ┃ ┃ ┗ 📜favicon.ico
┃ ┃ ┗ 📂scss
┃ ┃ ┃ ┗ 📜reset.scss
┃ ┣ 📂components
┃ ┃ ┣ 📜IsLoading.vue
┃ ┃ ┣ 📜MovieHome.vue
┃ ┃ ┣ 📜MovieList.vue
┃ ┃ ┣ 📜MovieNotFound.vue
┃ ┃ ┣ 📜MovieSearch.vue
┃ ┃ ┗ 📜SelectedMovieModal.vue
┃ ┣ 📂routes
┃ ┃ ┗ 📜index.js
┃ ┣ 📂store
┃ ┃ ┣ 📜MovieInfo.js
┃ ┃ ┗ 📜index.js
┃ ┣ 📜App.vue
┃ ┣ 📜index.html
┃ ┗ 📜main.js
┣ 📜.env
┣ 📜.eslintrc.json
┣ 📜.gitignore
┣ 📜README.md
┣ 📜babel.config.json
┣ 📜netlify.toml
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜postcss.config.js
┣ 📜vue.config.js
┗ 📜webpack.config.js

 

😡 Vue & Webpack & Babel.... Setting에서의

해당 부분은 강의의 도움으로 엄청 어렵지는 않지만 혼자서 정리를 하며 아직 많이 부족하다는 것을 느끼게 해주는 부분이여서 넣게 되었습니다. 나름대로 정리를 한 것입니다. :)

1. Webpack

2. Vue & Html & ESLint

3. Vue 추가 기능

4. Babel

5. PostCss

 

📋 설계

Vue를 급하게 배우느라 어떻게 접근을 해야 하는지 정말 고민이 많이 되었지만 갑자기 뭔가 JS 가 기본이다라는 생각이 딱!! 나서 그냥 전에 하던 JS 설계하던 식으로 설계를 시작하게 되었습니다.

처음에는 그냥 큰 구조만 나누게 되었고 header 부분은 fixed 해놓고 main 부분만 바꿔가게 만들어 보려 하였습니다.

이 후... 하나씩 만들어 가며 vue-router의 /routes/index.js에서 주소를 가지고 이동하는 방법으로 하나씩 제작하였습니다.

/: Home

< MovieHome.vue />

/에 있는 Home Page
로 무료 css 디자인을 가져와 조금 변경하여 사용하였습니다.

/movieNotFound: NotFound

< MovieNotFound />

검색을 했는데 영화 list 데이터가 없는 경우

/:title: MovieList

< MovieList.vue />

:title부분이 검색한 영화 Title로 변화하며
영화 list에 관한 api를 가져와 출력하는 곳

추가로
해당 영화 image를 click하면 < SelectedMovieModal />로 영화 상세 정보가 나타나게 됩니다.

 

🤦 무한 내림

MovieList.vue에서 영화 정보에 관한 api값이 여러 개다 보니 출력을 하는 방법에서 고민이 발생했었습니다.

• 버튼 식으로 vs 무한 스크롤

이 과정에서 Team 동료들과도 같이 고민한 결과
'보통 Netflix, Watcha 같은 곳도 무한 스크롤이다.', '버튼을 누르는 것보다 훨씬 사용자 입장에서 편하다'등 여러 의견을 나누게 되어
=> 무한 스크롤로 진행을 하게 되었습니다.

사실 여기서 문제였습니다.
Vue에는 @event와 같은 기능이 있으니 Scroll기능이 있을 것이다.
그래서 @scroll을 찾게 되었는 데...
?안되네? 예제를 했는데도 ?안되네? 솔직히 정확한 이유를 찾지 못하고 개인적인 생각으로는 html 렌더링이 완료 되기 전 아무것도 없을 때 @scroll이 동작하는 것 같다라는 생각을 해서 JavaScript를 활용하여 문제를 해결하였습니다.

created() {
    window.addEventListener('scroll', this.handleScroll);
},
unmounted() {
    window.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const isScrollEnded = //범위 지정
    if (!isScrollEnded || this.isLoading || this.page > 100) return ;
    // ... 추가 데이터 가져오기
  },
}

 

🌟 디자인 흰색... 깜빡

처음에는 SPA가 잘 동작하지 않는 것인가? 라는 생각을 했지만
전반적인 배경을 검정색으로 하다보니 Page가 넘어갈 때 흰색 부분이 살짝씩 보여 🌝깜빡🌑 하는 느낌이 들었던 것이였습니다.

1차 도전

App.vue에서 배경을 검정색으로 만들기?
<style scoped>의 scoped를 지워 문제를 해결할려 했는데 다른 Page에 영향이 가게되어 실패...

2차 도전

각 Page(.vue)에서 배경을 검정색으로 만들기?
각 MovieList -> MovieList 이동 중 api로 데이터를 가져오며 각각의 component 렌더링차이가 있어 실패....

3차 도전

api로 데이터 가져오는 속도차이 동안 IsLoading.vue을 추가하여 전체 범위 검정색 만들기?
처음 전체 범위로 배경을 진행하였는데 header부분도 검정색으로 변해서 깜빡느낌 있어 실패

4차 도전

IsLoading.vue에서 header부분 빼고 main부분만 배경 검정색으로 만들어 문제 해결 성공!!!!

 

디자인을 하면서 정말 기쁘게 하나씩 알아가고 있습니다. 

 

😭 Hide api key를 위한 netlfy🔛axios

api key를 감추기 위해 webpack.config.js에서 .env가 잘 동작할 수 있도록

1. webpack에 dotenv사용

const { DefinePlugin } = require('webpack');
const dotenv = require('dotenv');

dotenv.config();

module.exports = {
  plugins: [
    new DefinePlugin({
      "process.env": JSON.stringify(process.env);
    })
  ]
}

2. webpack에 dotenv-webpack사용

const Dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [new Dotenv()],
};

다음과 같은 방법으로 .env에서 변수를 만들어 주면 사용이 가능했는데 배포를 할 때 적용이 잘 되지 않는 문제가 있었습니다.
그래서 netlify에서 변수 지정해보고 위와 같이 여러개 사용해보고 문제를 해결하려 했는데 해결이 되지 않았습니다. ㅜㅜ

결국 강의 내용을 참조해보니 netlify.toml을 제작하여 functions/의 함수와 store/의 함수를 연결하여 문제를 해결하는 것을 볼 수 있었습니다.

그래서 저도 비슷하게 functions/apiHandler 와 store/MovieInfo.js를 연결하였습니다.

functions/apiHandler

const axios = require('axios');

exports.handler = async function (event) {
  return {
    statusCode: 200,
    body: JSON.stringify(event),
  };
};

store/MovieInfo.js

async function _request(query) {
  console.log(
    await fetch(`/.netlify/functions/apiHandler/${query}`).then((res) =>
      res.json()
    )
  );
}

그런데... axios 사용, Netlify(Build functions with JavaScript)사용을 위한 개념을 확실히 파악을 못해 많은 문제점들을 먼저 만나게 되었습니다.

🙋 안녕 문제점들아!! 🙋

 

❗️특히❗️,

store/MovieInfo.js에서 payload를 주어 functions/apiHandler에서 어떻게 받는지가 가장 문제였습니다.

공식 문서를 보면 다음과 같이 { body: ... }를 사용할 수 있게 되어있습니다.

그런데 event.body부분이 없다고 Error가 계속 발생하는 것입니다.(사진찍어 놓을껄...)
결국, 차선책으로 event.path를 가공해서 사용하게 되었지만 아쉽습니다. 더 파볼려고 했는데 ㅋㅋㅋ

여러 문제를 해결하고 functions/apiHandler 부분에 dotenv를 연결하였습니다.

require('dotenv').config();

const { MOVIE_API_URL, MOVIE_API_KEY } = process.env;

exports.handler = async function (event) {};

그리고 드디어 다시 배포......... 기다림..........
❗️❗️❗️❗️❗️❗️❗️와우 된다❗️❗️❗️❗️❗️❗️❗️❗️ 이게 행복인가.

 

마치며

시간이 한정적이여서 고민을 더하고 더 좋은 방법으로 문제를 해결하고 싶었는데 그러지 못한 점이 너무 아쉽습니다... 회사 들어가서는 더 생각많이 해야지 ㅎㅎ 그리고
뭔가 이모지를 안쓰고 깔끔한 글을 작성하고 싶은데 잘 되지 않아 실력의 부족함을 느끼고 다음에는 티스토리 setting 변경과 코드와 같은 리팩토링 + 많은 생각하며 글쓰기를 통해 추후에는 저의 글이 이모지가 많이 없어도 깔끔하고 읽기 좋은 글을 작성할 수 있도록 노력하겠습니다.
추가로 배포가 끊길 수 있기 때문에 영상 첨부합니다. ㅋㅋㅋㅋ

 

 

REF

프로그래머스 데브코스
https://docs.netlify.com/
https://axios-http.com/docs/intro
https://vuejs.org/guide/introduction.html