SK 네트워크 부트캠프를 쭉 참여하면서, 다양한 프레임워크들을 다루었습니다. 프론트엔드에서 Vue.js, Vuetify, D3, Axios를 다루었고, 백엔드에서는 Django, Docker를, DB로는 MySQL을 사용하였습니다. AI 코어 부분에서는 비동기 통신을 위해 FastAPI를 사용하였고, 모델 구성에는 TensorFlow를 활용했습니다.
이번 주에 강사님 개인 일정으로 인해 일주일이라는 시간이 붕 뜬 기념으로, 그간 정리하지 못했던 부분들을 쭉 정리해보려고 합니다. 따라서 위에 나열한 각 프레임워크들에 대해서는 천천히 모두 다 다루어 보고자 합니다. (코로나 이슈로 인해 힘이 닿는데까지...)
가장 먼저, Vue.js 입니다. 아무래도 사용자에게 가장 가깝게 닿는 프레임워크이기도 하고 React와 양대 산맥으로 점점 그 점유율이 올라가고 있는 프레임워크인 만큼 중요하다고 판단되어 가장 먼저 다뤄보도록 하겠습니다.
Vue.js란 무엇인가?
Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크입니다. 다른 자바스크립트 라이브러리를 사용하는 웹 애플리케이션 프로젝트에 Vue.js를 도입하기 쉽게 설계되어 있는데, 이는 Vue.js가 점전적으로 채택할 수 있게 설계되어 있기 때문입니다. 한편 Vue.js는 고성능의 싱글 페이지 애플리케이션(SPA)을 구축하는데 이용 가능합니다. [https://ko.wikipedia.org/wiki/Vue.js]
위키백과의 글귀에서 중요하게 보아야 할 단어는 자바스크립트입니다. 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어입니다. 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있습니다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있습니다. [https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]
우리는 OS 종속성이라는 단어를 들어본 적이 있습니다. Windows, Linux, macOS 등 각 운영체제가 구성된 방식의 차이로 인해, A라는 OS에서 개발된 프로그램을 B라는 OS에서 구동 시키고자 할 때 작동하지 않는 경우가 발생합니다. 위에서 Vue.js를 활용하여 웹을 개발하고 Vue.js는 JavaScript로 이루어져 있다는 내용을 다시 끌고 와보겠습니다. 예를 들어, Windows 환경에서 Vue.js로 구동되는 웹 페이지를 개발했다고 가정해봅시다. 만약 OS 종속성을 해결하지 못할 경우에는, Windows를 사용하는 사용자를 제외하고는 웹 페이지를 구동 시키지 못하겠죠? 그래서 Vue.js는 Node.js를 통해 구동됩니다.
Node.js
Node.js는 웹 브라우저에 종속적인 자바스크립트에서 외부에서 실행할 수 있는 Runtime 환경을 Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공하게 됩니다. 즉, JavaScript 언어가 OS 종속성으로부터 자유로워질 수 있게끔 해준다는 것이죠. 지금부터 Node.js를 설치하는 과정을 설명하도록 하겠습니다. Vue.js를 개발하기 위한 첫 단계입니다.
먼저 제 개발 환경에 대해 명시하는 것이 먼저겠죠? 로컬 환경은 다음과 같습니다.
- OS: Windows 11 Education, 23H2
- CPU: AMD Ryzen 5 5600X
- Memory: DDR4 16GB * 2
- GPU: NVIDIA GeForce RTX 3060 12GB
그럼 본격적으로 Node.js 설치부터 시작해보겠습니다.
Node.js Download
https://nodejs.org/en 로 접속합니다. 그럼 다음과 같은 화면이 보입니다.
여기서 Download Node.js (LTS) 버튼이 보입니다. 눌러서 설치 파일을 다운받습니다. 이후 설치 파일을 실행시키면 다음과 같이 창이 뜹니다.
Next 클릭
I accept ... 체크박스 체크 후 Next 클릭
Node.js를 어디에 설치할 것인지 물어봅니다. 저는 default 경로를 그대로 냅두고 진행하겠습니다. Next 클릭
Custom Setup입니다. 그냥 Next클릭
Automatically install ... 체크박스 체크 후 Next 클릭합니다. 필수적인 툴들을 자동으로 설치해주는 것이기 때문에 체크합니다.
Install을 누르면, 쭉 설치가 진행됩니다. 이후 나온 창에서 Finish를 클릭합니다.
그럼 이런 창이 자동으로 뜹니다. 엔터 칩니다.
또 엔터
그럼 관리자 권한으로 PowerShell이 켜지고 필수적인 패키지들의 설치가 진행됩니다. 저는 이미 한 번 삭제 후 다시 설치하는 것이라 패키지들이 설치되어 있어서 금방 끝났지만 처음 설치하는 경우에는 꽤 시간이 걸립니다. Type ENTER to exit: 이 나오기 전까지 절대 PowerShell 창을 닫으면 안됩니다. 나왔다면 엔터를 칩니다. 이렇게 되면 Node.js 설치가 완료되었습니다.
Vue.js Download
터미널을 실행시킵니다. 이후 다음의 명령어를 입력합니다.
npm install -g @vue/cli
그럼 터미널에서 부지런히 설치가 진행됩니다. 설치가 완료되면 다음과 같은 화면이 나타납니다.
그리고 나서 Vue 프로젝트를 생성할 폴더 하나를 만듭니다.
이후 다음의 명령어를 입력하여 Vue 프로젝트 하나를 생성합니다.
vue create <프로젝트명><프로젝트명> 이라는 곳에는 원하는 프로젝트 명을 적으면 됩니다. 꺾쇠는 없애고 적습니다. 예를 들어, vue create frontend 이런 식으로요.
Manually select features 를 선택합니다. 이동은 화살표, 선택은 엔터, 다중 선택은 스페이스를 통해 작동합니다. 우리 프로젝트에서는 Vuetify라는 Vue.js에서 확장된 프레임워크를 사용합니다. 기본적으로 Vue.js가 제공하는 UI Components를 조금 더 보기 좋게 만들어 놓은 프레임워크로서, 그에 맞게 세팅을 진행하는 점 참고해주세요.
위와 같이 선택 후 엔터.
3.x 엔터.
그냥 엔터 누르면 대문자로 되어 있는 게 선택됩니다. Y/n이면 yes가, y/N이면 no가 선택됩니다. 엔터.
엔터.
엔터.
엔터.
Lint on save 선택 후 엔터.
엔터.
In package.json 선택.
엔터.
자 여기까지 오셨다면 거의 다 왔습니다.
위의 화면이 나온 것을 확인하셨다면, Vue.js 가 잘 켜지는지 확인해야겠죠? 친절하게 키는 방법을 알려줍니다.
cd frontend
npm run serve
위의 화면이 나온다면 성공입니다! 고생하셨습니다.
Vuetify를 Vue 프로젝트에 추가하기
init: [홍길동] Vue init commit 메시지를 쓰려면 아직 좀 더 해야 할 것이 있습니다. 아까 Vue.js를 세팅하면서 Vuetify를 사용하려고 한다고 언급한 부분이 있습니다. 기본적인 Vue.js의 UI components가 아주 못 쓸 정도로 구리지는 않지만, 조금 더 이쁘게 쓰라고 만들어진 Vuetify라는 프레임워크가 있는데 굳이 안 쓸 이유는 없겠죠? 바로 설치합니다.
아까 프로젝트 명을 입력했죠? 폴더 내 구조를 보면 다음과 같습니다.
여기서 frontend 프로젝트에 Vuetify를 추가할 것이기 때문에 프로젝트 폴더로 들어갑니다.
이후 다음의 명령어를 통해 Vuetify를 추가합니다.
vue add vuetify
Vuetify 3 - Vue CLI (preview)를 선택합니다. 우리가 Vue.js를 설치할 때 3.x 버전으로 설치했기 때문에 Vuetify도 동일하게 3 버전으로 갑니다.
성공적으로 설치되었습니다. 다시 서버를 켜보면 (npm run serve),
아까랑은 조금 다르죠? 이 화면이 떴다면, 성공입니다.
마무리
Vue.js + Vuetify 세팅 과정이 매우 매우 길었습니다. 사실 push 해온 프로젝트를 실행시키는 방법도 한 번 다루어야 하는데, 이번 글에서 동시에 다루기에는 너무 양이 방대해져서(이미 긴 것 같긴 하지만...) 글을 쪼개서 올리도록 하겠습니다.
프론트엔드 웹 개발에 한 걸음 다가갔는데 어떤 가요? 아무리 React가 좋다고 외치지만 다수의 기업에서 Vue를 활용하고 있습니다. 당장 현대차 계열사들 쪽에서도 Vue 기반으로 웹 개발을 진행한다고 하니 미리 공부해서 나쁠 거 1도 없는 웹 프레임워크라고 생각합니다. 질문 있으시면 댓글 남겨주세요! 좋아요는 큰 힘이 됩니다 😘
