[WIL] 프로그래머스 프론트엔드 데브코스 11주차 WIL - Vue 2편

데브코스 11주차가 끝났다.

10~11주차 총 2주간에 걸쳐 Vue를 배웠고, 결과적으로 Vue를 활용한 간단한 어플리케이션 정도는 만들 수 있는 지식을 쌓았다.

 

template문법 사용 방법, props emit 사용방법 등을 하나하나 적는 것은 어차피 공식문서를 그대로 가져오는는 것과 다르지 않으므로 큰 흐름에서 배우거나 익힌 것들 위주로 정리해보았다.

 

알게된 내용

 

세팅

• vite를 활용하면 편하다. vite는 번들러의 종류이고, 웹팩 대신 이번엔 vite를 사용하였다.
• 문법을 체크하는 eslint와 컨벤션을 잡아주는 prettier를 설치했다.
• eslint-plugin-prettier 혹은 @typescript-eslint/eslint-plugin 같은 플러그인들을 npm i 를 활용하여 설치해주었고, 이 초기세팅은 npm 명령어 검색으로 필요한 플러그인과 명령어의 역할을 알 수 있었다.
• eslintrc와 prettierrc 역시 작성해보았고, 옵션을 직접 찾아 작성하며 설정하는 경험을 쌓아야한다.

 

 

CompositionAPI

• options에 비해 좀 더 가독성과 재사용성이 좋은 CompositionAPI를 적극적으로 활용하자 (React스럽기도 하다)

 

 

Pinia

• Vue에서 전역상태관리 라이브러리인 Vuex를 제공한다.
• 현재는 Pinia라는 라이브러리를 사용하는 것을 권장한다.

이번 구현에 있어서는 Pinia를 사용할 만큼 크게 복잡하지 않았기 때문에, 오히려 props와 emit을 더 연습할 겸 pinia를 사용하지 않았다.

.

 

이 개념들을 활용해 영화를 검색하고, 키워드가 포함된 영화를 출력해주며, 클릭 시 모달창에 줄거리를 표현해주는 간단한 영화 검색기를 만들었다.

이 과정에서 서버리스 함수를 사용하였다.

 

 

 

서버리스 함수

기존의 fetch를 활용한 서버와의 API통신은 기능에는 아무 문제가 없었다.

그러나 네트워크 탭을 열어보면, Request요청과 api키 등 모든 정보가 담겨있었고, 이는 민감한 정보로 분류된다.

이를 방지하기 위해 로컬---서버 로 연결되던 기존 구성을

로컬---Vercel서버---서버 로 한 단계 필터링을 시도하였다.

 

1. 기존의 fetch를 실행하던 함수들은 서버가 아닌 vercelServer로 요청을 보내고, 
2. vercelServer가 실제 서버에 요청을보낸 후 ,
3. response를 vercelServer가 받아 데이터를 가공 한 후 
4. 로컬의 환경으로 돌려보내주도록

구현하였다.

 

구현에 있어서 백엔드 경험이 많은 팀원분이 공식문서를 활용해 뚝딱뚝딱 기본 틀을 만들어 주신 것에 많은 도움을 받긴 하였지만, 어떤 방식으로 로직이 짜여지고 민감한 정보들이 숨겨지는지 위의 흐름을 확실히 배워갈 수 있었다.

 

그리고 이 방식이 나중에 SSR의 대표 프레임워크인 Next.js가 작동하는 방식과 유사하다는 것을 알아갈 수 있었다.

SSR 경험이 없는 나에게 미리보기 정도의 경험을 선사해준 것 같다.

 

https://junly21-vue3-movie-search.vercel.app/