[Vue] options api로 웹사이트 만들기 - 1. 초기세팅 ( + 환경변수 설정 )

시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! :  https://youthful-heyrovsky-6bcc71.netlify.app/ 

vue2-options

코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요!

GitHub - yoycode/vue2-options

1. vue 프로젝트 생성하기   

우선 초기세팅을 해줘야 합니다. ( npm, vue-cli 등이 설치되지 않았다면 설치해주세요. )
터미널에서 vue create <프로젝트명> 으로 프로젝트를 생성해줍니다. 저는 프로젝트 명을 vue2-options로 만들어주었습니다. 

vue create vue2-options

2. vuetify 설치 

좀 더 빠른 진행을 위해 vue UI 라이브러리인 vuetify를 사용해주도록 하겠습니다. 
 ( vue UI 라이브러리들을 비교해 놓은 글이 있으니 관심 있으신 분들은 읽어보시면 좋을 것 같습니다. https://imagineu.tistory.com/9) 

vue UI라이브러리 Vuetify vs. Quasar ( vs BootstrapVue) 사용해본 장단점 및 느낀점 비교

vue add vuetify

위의 명령어를 터미널에 입력하면 다음과 같은 프리셋 선택이 나타나는데, Default (recommended) 를 선택해주세요. 

뷰티파이 설치가 완료되면 App.vue의 코드가 vuetify 기반으로 변경되어 있을 것입니다. 터미널에 npm run serve를 해서 우리의 프로젝트를 실행시켜봅니다.

npm run serve

3. Vuetify에서 와이어프레임 가져오기 

(현재 버전 기준) 위와 같이 화면이 나타난다면 뷰티파이가 잘 설치되었습니다. 그럼 불필요한 Welcome to Vuetify와 같은 메세지와, component폴더의 HelloWorld.vue 등을 지워버리고, 빈 도화지부터 시작하도록 하겠습니다. 

App.vue의 코드를 다 지워버리고 전체적인 레이아웃을 새롭게 가져오겠습니다. https://vuetifyjs.com/en/getting-started/wireframes/ 에서 제가 만들 프로젝트에 가장 잘 어울려보이는 와이어프레임으로 "Three Column"을 사용하겠습니다. 

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/wireframes/three-column.vue 여기에 있는 코드를 그대로 복사 붙여넣기 해서 App.vue에 붙여넣어줍니다. 

저희가 만들 웹사이트의 큰 뼈대가 잡혔습니다! 전체적인 디테일은 프로젝트를 진행하면서 조금씩 수정해보겠습니다. 

4. API key 받아서 환경변수 설정하기

저희는 백엔드작업은 하지 않고 오직 프론트엔드 구현에만 신경을 쓰기 위해, 이미 만들어져 있는 api를 받아와서 사용하겠습니다. https://dummyapi.io 에서 간단하게 구글 로그인을 하고, Account 메뉴로 들어가서 App ID 를 발급받습니다. 해당 key가 있어야 api통신을 통해 데이터를 받아올 수 있습니다. (20222.02.20 기준) 해당 API는 완전 무료로 풀어놓은 상태입니다. ( 완전 무료화가 끝날 경우, 하루에 500건 이상의 api 요청을 하기위해선 한달에 1달러를 내야할 수도 있습니다. 참고해주세요! )  

그럼 우리가 받아온 API key가 깃헙에 올라가서 공개될경우 저의 key를 다른사람들이 사용할 수도 있기때문에, API key를 깃에 올라가지 않는 환경변수 파일에 별도로 지정해주겠습니다. 환경변수란 해당프로세스를 실행시키기 위해 참조하는 변수인데, 보통 개발모드(.env.development)와 배포모드(.env.production)를 구분하여 구성하지만, 저희는 그냥 디폴트 모드인 개발모드로 진행을 하겠습니다. 

저는 vue-cli를 통해서 vue를 설치했기때문에 .gitignore 파일을 보면 .env.local파일이 이미 들어있는데요. 이미 깃헙 repository에 push한 상태일 경우 .gitignore을 수정하기 위해서는 별도의 작업이 필요하기 때문에, 프로젝트 최상위경로(/)에서 .env.local 이라는 이름으로 파일을 하나 생성해줍니다. 

.env.local파일 안에 VUE_APP_API_KEY = < 아까 받아온 api key > 이렇게 작성해줍니다. VUE_APP_을 변수 앞에 꼭 사용해주도록 합니다.

VUE_APP_API_KEY = abcdefghijklmnop

 

터미널에서 ctrl + c 를 눌러 구동중인 사이트를 꺼주신 후, 다시 npm run serve를 해서 재시작해줍니다. 반드시 재시작을 해주어야 환경변수가 적용됩니다.
환경변수는 process.env객체에 정의되어 있기 때문에, 프로젝트 내 어디서든 process.env.이름 과 같은 방식으로 확인할 수 있습니다. 그럼 다음 글에서 이어서 axios를 사용해 직접 데이터를 받아와서 내 브라우저에 뿌려줘보도록 하겠습니다.