[멋쟁이사자처럼] 부트챌린지: 11시간만에 트위터만들기 - Vue.js 세팅

 

오늘부터 8월까지 멋쟁이사자처럼에서 진행하는 누구나 쉽게 만드는 웹서비스: 11시간 만에 트위터 만들고 배포까지를 진행한다. 수강 시간은 자유지만, 나는 하루에 한강씩 듣는 것을 목표로 하고 있다. 강의는 총 21강이고 8월 16일까지 진행하게 된다. 본 챌린지(이하 11시간만에 트위터 만들기)는 Vue.js와 typescript, MySQL, JWT 인증 등을 사용하며 최종적으로 Google Cloud를 통해 배포하는 트위터 클론 강의에 가깝다.

 

이 부트챌린지에 도전하게 된 이유는 내가 해본 적이 없던 프레임워크와 라이브러리, 그리고 기능으로 이루어져 있기 때문이다. Vue.js는 말만 들어봤지 해본적이 없고, JWT 인증도 해본 적이 전혀 없다. Google Cloud를 사용한 배포도 해본 적이 없어 좋은 경험이 될 거 같아 도전해보기로 했다. 이미 멀티캠퍼스의 부트캠프를 수료한 상태이기도 하고, 과정을 생각하면 KDT는 한동안 어렵다고 판단되어 KDC를 찾게 되었는데, 딱 좋아보이는 챌린지를 발견한 거 같다.

 

오늘 배운 것

오늘은 간단하게 오리엔테이션과 Hello, World까지 했다고 보면 된다. Node.js와 Vue.js에 대한 간단한 소개를 들었다. Vue.js는 프로그레시브 자바스크립트 프레임워크로서 React보다 더 접근하기 쉬운 편이다. 실제로 Vue.js를 사용할 수 있는 개발자를 모집하는 회사도 종종 보이고는 한다. Vue.js도 컴포넌트 기반 아키텍처를 사용하기 때문에, React와 비슷하지만 좀 더 쉽다는 느낌이라고 보는 게 편하다.

 

Vue.js를 구동하기 위해서는 먼저 Vue CLI를 설치해야한다. npm install -g @vue/cli 를 터미널(명령프롬프트, PowerShell 뭐든 괜찮다)에서 실행하면 설치가 된다. 이후 create를 통하여 프로젝트를 만들면 된다고 하는데, 나는 IDE를 인텔리제이로 쓰고 있어 Vue.js 프로젝트를 직접 생성했다. 

 

 

다만 이렇게 만들어진 Vue.js는 Vite를 기본적으로 내포하고 있으므로 유의. Vite 기반 명령어만 먹히게 된다. 이후로는 yarn을 설치하고, 프로젝트의 주요 폴더 구성요건에 대해서 설명해주셨는데 이건 React를 포함한 프레임워크를 하면 자연스레 알게 되므로 설명은 패스.

 

Vue.js의 핵심 파일은 src,  main.js,  App.vue로, 이중 App.vue는 루트 컴포넌트의 역할을 한다. React로 따지면  App.jsx 같은 것이라 보면 편할 것이다. 그리고 main.js는 Java의 메인 클래스와 비슷하게 진입점 역할을 한다.

 

이후 실습으로 Hello World 띄우기를 했다. 아래 화면처럼 문제 없이 Hello World!를 입력할 수 있었다.

 

 

내일은 Git에 관련된 부분일 텐데, 마찬가지로 간단하게 보기만 할 예정이다.