Development Artist

지난 시간까지 Web Server 용(jmcunst-depl-ws), Django Server 용(jmcunst-depl-django), DB Server 용(jmcunst-depl-db) 인스턴스를 만들었습니다. 이번 시간에는 Vuejs를 어떻게 배포하는지 알아보도록 하겠습니다. 일단 Vuejs는 ‘jmcunst-depl-ws’ 인스턴스에 배포할 예정입니다. Vue 프로젝트의 package.json의 scripts를 보시면 serve와 build가 보일 것입니다. serve의 경우 컴퓨터의 nodejs 엔진에 내장된 Web Server를 통해 웹 서비스를 합니다. build 의 경우 node-modules의 소스들을 하나로 합쳐 하나의 정적 웹소스를 만들게 됩니다. 이것이 dist/ 폴더로 만들어지고 ..

Life Cycle 이전 시간까지 우리는 Vue의 디자인패턴과 그에 따라 어떻게 동작하는지 살펴 보았는데요, 이번 시간에는 Vue의 라이프 사이클과 그에 따라 // src/views/AboutPage.vue Home | About 이곳은 About Page. COUNT:{{cnt}}, ONE:{{data1}}, TWO:{{data2}}, THREE:{{data3}} click 그 다음, src 아래에 router.js 파일을 생성해줍니다. HomePage는 / 경로로, AboutPage는 /about 경로로 사용하기 위한 설정을 담고 있습니다. // /src/router.js import Vue from "vue"; import VueRouter from "vue-router"; import Home f..

Design Pattern 이전 장에서, 깡통 Vue 프로젝트를 하나 생성하고 실행도 시켜보았습니다. 이제 궁금해집니다. 어떻게 저런 모양을 하고 있는 것이지? 이것을 이해하기 위해서는 Vue의 디자인 패턴을 알아야합니다. 구글링해보면 알겠지만, Vue의 디자인 패턴은 MVVM 입니다. MVVM은(Model-View-ViewModel)의 약자입니다. 각자의 역할이 무엇일까요? ‘View’는 사용자에게 보여지는 UI 부분이 됩니다. ‘Model’은 데이터가 들어있습니다. ‘ViewModel’은 ‘Model’의 데이터를 가져다가 View에 바인딩합니다. 이렇게 설명하면 잘 와닿지가 않습니다. 실제 코드를 한번 봐볼까요? 아래는 src/main.js 입니다. Vue가 실행되면 가장 먼저 main.js를 보게 ..

Create Vue Project 이전 장에서, Vuejs를 시작하기 위해 nodejs, npm, vue-cli 설치를 완료했습니다. 이제는 Vue 프로젝트를 시작해봅시다. CLI를 켭니다. ( 저는 Git bash ) vue create [원하는 프로젝트 명] 그러면 다음과 같이 뜰겁니다. Vue 3는 2020년 9월 19일에 출시되어 2022년 2월 즈음 정식 기본 버전으로 채택된 것으로 알고 있습니다. 하지만, 여전히 Vue 2를 지원하는 라이브러리가 많이 있는 상황입니다. 따라서, 이번 포탈 개발은 Vue 2로 진행하였습니다. Vue 3와 Vue 2의 차이점은 https://www.samsungsds.com/kr/insights/vue_js_3.html 다음 링크를 참고 바랍니다. 아래와 같이 V..

Install 일단 지금 Vuejs를 시작하려는 PC의 환경이 다양할텐데요, OS의 차이라던지, CLI의 차이라던지. 저는 Window11, Git bash로 진행을 하는 점 참고 부탁드립니다. Vuejs는 패키지 관리 툴로 npm을 사용합니다. ( 가령 Linux에서는 rpm, yum, apt-get. 파이썬에서는 pip.) 따라서, Vuejs를 시작하기전에 npm이 설치가 되어야 하는데요, npm은 nodejs를 설치하게 되면 자동적으로 설치가 됩니다. 먼저 nodejs와 npm이 PC에 설치되어 있는지 확인해 봅시다. node --version # or node -v npm --version # or npm -v 설치가 안되어 있다면, https://nodejs.org/en/ 해당 페이지로 접속하여..

사내 포탈 웹 서비스를 개발하기 위해서 어떤 기술 스택을 사용할 것인지 '선택'이 필요했습니다. 또한, 어떤 '구조'로 서비스를 할 것인지에 대한 디자인도 필요했습니다. 이에 대한 고민들을 이번 글에서 풀어보도록 하겠습니다. Frontend 프론트엔드는 웹 서비스의 UI 및 서버에 API 요청을 담당하고 있습니다. 현재 React가 프론트엔드 시장에서 가장 많이 쓰이는 기술 스택인데요, React는 진입장벽이 높아 혼자서 프론트엔드, 백엔드, 인프라를 하기에 모든 부분에서 여유가 없었습니다. Vuejs는 디자인 패턴이 굉장히 직관적이고 처음 배우기에도 쉽기 때문에 이번 포탈 개발의 프론트엔드 스택으로 Vuejs를 선택하였습니다. 또한, 이전 회사에서 인턴을 할때 Vuejs를 조금 다뤄본 경험이 있어 고민..

안녕하세요, Ezcom,Inc CloudBiz팀 엔지니어 황정목입니다. 2달 동안 이지컴아이앤씨 사내 포탈 개발을 진행하면서 사용했던 기술 스택을 정리하는 시간을 가져보자 합니다. 하나의 서비스를 만들기 위해, 프론트엔드에서 백엔드 및 인프라까지 다양한 기술을 사용하였습니다. Vuejs Django Nginx Hypervisor Docker Kubernetes Nexus 글의 서순은 기술 별이 아닌, 개발 과정 별이기 때문에 위의 목록순서는 참고만 부탁드립니다. 글 제목에서 [태깅]을 통해 어떤 기술에 대한 글인지 나타내기 때문에 가령 Vuejs에 대한 부분만 보실 분들은 [Vuejs] 태깅의 글들만 보시면 될 것 같습니다. 가시죠!

이슈 router 설정하면서, 다음과 같이 multi-word로 구성을 해야한다고 하면서 빌드가 안되는 모습. 해결 multi-word로 구성을 해주면 된다. ex) ProfileView.vue 와 같이... 원인 html 태그와 혼동을 없애기 위함이다.

이전 포스트에서 깡통 Vue 프로젝트를 생성하는 법을 기록하였다. 지금 포스트는 Vuetify 설치에 대한 기록이다. Vuetify Vuetify를 설치하는 것은 굉장히 쉽다. # vue add vuetify Veutify 2 를 선택. Check > package.json 파일 > vue.config.js 파일

이슈 해결 1번 방법: export 하는 부분의 name을 Home -> TheHome 또는 the-home 등 2개 이상의 단어로 작명한다. 2번 방법: export 하는 부분의 name 위에 '//eslint-disable-next-line'을 추가해준다. 원인 Vue에서 view의 이름을 작명할 때 2개 이상의 word로 구성하는 것을 따르기 때문이다. HTML의 요소와 충돌을 방지하기 위해서이다.