Search
💐

Vue.js로 무작정 Frontend 개발 시작: Hello, World 배포하기

작성일
2020/08/14
태그
Frontend
Hello World
Netlify
Vue.js
작성자
Empty
1 more property
나의 직업은 보통 데이터를 분석하거나, 머신러닝 모델을 개발하는 일로 이는 굳이 분류하자면 백엔드 개발에 가까운 일이다. 하지만 언제나 실력있는 프론트엔드 개발자들을 보면서 놀라기도 하고 기대하기도 한다. 프론트엔드, 웹 앱이나 네이티브 앱을 만들 수 있는 사람들은 기획력이 있고, 심미적인 감각을 가지고 있는 경우도 있고, 자신만의 제품을 만들 수 있는 어느정도의 잠재력을 가지고 있다고 보기 때문이다. 물론 백엔드 개발이나, 데이터 분석에 그러한 잠재적인 능력이 없느냐고 하면 또 그런 것은 아니지만 말이다.
때때로 나의 머릿속을 스치는 아이디어들이 있고, 그런 소프트웨어를 직접 만들어보는 생각을 하곤한다. 시간이 조금이라도 있을 때, 직접 뭐라도 만들어 보는 게 낫겠다고 생각한다.

Background

나는 Python을 주력으로 만 3년동안 데이터나 머신러닝과 관련된 코드를 봐왔다. JavaScript, CSS 등의 Web 스택은 이런 일을 시작하기 전에 주로 관심이 있었던 분야다. 하지만 일에는 언제나 연속성이란 게 필요하고, 기술들은 하루가 다르게 업데이트되니 그나마 최근까지도 가꾸던 GitHub Pages와 Jekyll 정적 페이지 생성기로 만든 나의 블로그도 이제는 그다지 기술적인 것이 아니란 생각이 든다.
JavaScript의 기본적인 문법조차도 잘 알지 못하는 상황에서, 제법 현대적인 웹 프레임워크를 알아가면서 무언가를 만들고 싶다.

Native Apps vs. Web Apps

원래는 Mac이 있으니 iOS Native App을 개발해보려는 생각을 했다. 하지만 makebook.io의 의견이나, 다음과 같은 글들을 읽어보며 Native App의 장점과 Web App의 장점을 알아본 결과 나의 첫 프론트엔드 공부는 웹이 더 낫겠다는 생각을 했다.
Native App의 장점
동일 기능 대비 구동 속도가 빠르다.
사용자의 습관을 만들 수 있다.
디바이스의 다양한 권한에 접근할 수 있다.
Web App의 장점
동일 기능 대비 개발 속도가 빠르다.
앱스토어의 승인이나 관련된 제반비용이 필요없고, 업데이트도 Push 한 번에 순식간이다.
개발 속도가 빠르다는 말에 나는 Web에 혹했다. 물론 여러가지 종단 단말을 지원하려고 하면 웹 앱에도 그만한 노력이 필요하지만, 여전히 웹이 시작하기에 더 좋다고 생각했다.
요즘에는 네이티브 앱이 유행하지 않는 것 같다. 카카오톡 같은 용량이 크고 본의아니게 사용자의 의존성이 매우 큰 슈퍼앱 안에는 내가 갯수를 헤아릴 수 없을만큼 많은 웹 앱이 들어있고, 사용자들은 SNS에서 공유된 링크로 앱에 접근한다. 웹 앱이 아니면 살아남을 수 없는 분위기가 형성된다.
Web App, 그 중에서도 SPA(Single Page Application)형식의 앱을 만들고 싶다고 생각한다.

Frontend Frameworks: React VS Vue

아니, 자바스크립트 문법도 잘 모른다면서 프레임워크부터 알아보려고 하는 것은 양심의 가책을 느끼지만, 그럼에도 하는 수 없다. 순수 자바스크립트로 짜는 일은 초기단계의 앱 개발에 있어 생산성이 낮으리라는 나의 제한된 상상력에서 나는 괜찮은 프론트엔드 웹 프레임워크를 찾는다.

Vue와 React는 어떻게 달라?

React에는 Vue.js에 비해 매직이 덜하다. Vue.js는 사용자에게 쉽게 느껴지는 API를 제공하기 위해 라이브러리가 직접 헤비 리프팅을 하는 경우가 많다.
React는 Vue.js에 비해 플레인 자바스크립트에 더 가깝다. 새로운 문법 내지는 컨벤션을 정의하는 대신 자바스크립트의 그것을 활용하는데 무리가 없다면 그리 한다.
React는 Vue.js에 비해 사용자 및 사용처에 대해 더 적은 가정을 하고, 컴포넌트 기반의 선언적 UI 렌더링이라는 가장 핵심적인 기능과 관련된 부분만 코어에 포함한다.
(위 세 bulletin-point의 내용들은 ahnheejong 님의 블로그의 내용을 그대로 가져온 것이다.)
나는 플레인 자바스크립트를 잘 모르고, 사용자에게 쉽게 느껴지는 API가 좋기 때문에 Vue쪽으로 마음이 빠르게 기울었다.

Vue 시작하기

유튜브에서 Vue.js Crash Course를 찾았다. 다음은 간단한 실습 내용이다.

Vue CLI 설치

# Mac에서 node(npm) 설치하기 brew install node # Vue CLI 설치하기 npm install -g @vue/cli
Python
Vue CLI는 Vue 개발에 필요한 표준화된 도구모음집이라고 한다. 나는 프레임워크를 고르는 수준의 추상화로는 만족할 수가 없기 때문에, 초기 환경 설정 등의 제반작업들까지도 자동으로 해준다고 하는 이 툴이 곧바로 마음에 들었다.
# 새 프로젝트 만들기 vue create new_project
Python
새 프로젝트를 만들어보려고 하자 처음부터 난관에 부딪힌다.
Vue2가 있고, Vue3가 있다고 한다. babel은 컴파일러, eslint는 pylint 처럼 코드의 에러 등을 검사해주고 스타일링해주는 도구인 것 같다. 과감하게 최신 버젼인 Vue3를 설치하기로 한다. 무조건 개발을 처음 시작하기 전에는 어떻게 해서든 최신 버젼의 프레임워크를 선택하려고 하는 편이다. 실무적인 측면에서 업그레이드에는 많은 출혈이 있기 때문에, 처음부터 제일 최신의 것을 쓰는 게 뒷탈이 없다는 생각이다.
글을 쓰는 도중 유튜브보다 내 템포로 따라하기 좋은 문서들을 찾아간다. (vscode tutorial)
이제 Vue CLI가 생성한 파일들을 둘러보고, npm run serve 명령을 입력해 헬로월드 화면을 본다.
Hello World 한 줄 치지 않았지만 Hello World보다 더 근사한 걸 만들어주니 세상이 너무 좋아졌다는 생각을 한다. 더 좋아졌으면!
그리고 나는 프론트엔드 프레임워크와 MSA로 구성된 SPA를 만들 예정이므로 배포하기가 정말 쉽다. 프론트엔드 페이지를 최초 1회 빌드하고, 컴파일된 정적페이지를 호스팅하면 끝이다. Vue CLI로 만든 파일들을 GitHub에 먼저 Push하자.
# …or create a new repository on the command line echo "# testrep" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/nyanye/testrep.git git push -u origin master
Python
Push가 끝났다면 이제 코드 한 줄 칠 필요가 없다. Netlify에서 master 브랜치 (혹은 원하는 브랜치)를 골라 배포하면 내 웹페이지를 바로 public 환경에서 볼 수 있다.

Coverage

웹개발을 해보자
Native App vs. Web App → Web App
React vs. Vue → Vue
Vue CLI로 프로젝트 만들기
Netlify로 정적페이지 배포하기