Development Artist

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] 태깅의 글들만 보시면 될 것 같습니다. 가시죠!

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

Vuejs 프로젝트를 만들고 지우기를 반복하면서, 깡통 Vuejs 프로젝트를 만드는 법을 기록하려고 한다. Configuration 나의 OS 환경은 Window11 Pro, 터미널은 Git Bash, 편한 것을 사용하면 된다. ex) cmd, Powershell 등등... Setting Vuejs 프로젝트를 만들기 전에 사전에 설치되어야 하는 것이 있다. 1. nodejs > 버전확인 # node --version > 설치 # https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. npm > 버전확인 # npm --version > 설치 # 위의 n..

Intro 개발 스택을 정해보자. 정하는데 가장 큰 기준은 빠르게 개발할 수 있는가, 즉, 접근성과 편의성이 좋은가를 중점으로 정해보려고 한다. App vs Web 앱 또는 웹에 대한 고민이 있었는데, 사용자의 접근성과 편의성을 고려해서 앱이 조금 더 낫다고 판단했다. 특히 채팅 기능은 모바일에서 사용 하는 것이 충분한 사용성을 제공할 것으로 보인다. Native vs Hybrid 앱에는 크게 안드로이드와 IOS가 있다. 각각을 네이티브앱으로 개발할 수도 있으나, 2가지 모두를 한번에 개발할 수 있는 하이브리드 앱도 있다. 하이브리드앱에는 크게 React Native와 Flutter가 있는데, 2년전 친구와 Flutter를 가지고 논 기억이 있어서, 이번에 Flutter로 정하게 되었다. Server 서..

MockUp & IA 설계 다음으로는 목업을 진행할 예정이다. 학부생때 안드로이드 어플을 만드는 프로젝트가 있었는데, 디자인에도 관심이 있던지라, 그때 처음으로 Adobe XD라는 툴을 사용해서 Mockup을 진행해보았다. 생각보다 재밋었다. 물론, 퀄리티는 기대할 수 없었다. https://github.com/Intensive-Education-Team2/HotPlace 그때 당시 진행했던 프로젝트이다. 지금보니, 디자인을 왜저렇게 핑크핑크하게 했을까 싶다. 목업은 '모형' 이라는 뜻으로 실제 제품을 만들기 전 미리 모형을 만들어 보는 것을 말한다. 이런 Mockup을 바탕으로 앱개발을 했다. 해당 텍스트 또는 이미지 크기등 수치도 거의 같게끔 작업을 했었다. 또한, 웹프로젝트를 할때 IA(Interf..

Code 이번에 대기업과 프로젝트를 진행하면서, 개발전에 몇가지 사항들을 코드화 시켰던 것이 생각이 났다. 특별한 것은 없는데, 꾀 유용했던 것 같아서 이번에 한번 적용시켜 보려고 한다. 엑셀로 정리도 하고 DB에 code 테이블을 만들어 두고 관리를 했었었다. 코드의 구성요소는 Code, 대분류, 중분류, 소분류, ParentCode, CodeName 정도로 쓸 수 있다. Code : Example 에픽세븐의 기사단전 컨텐츠가 있는데, 매일 열리는 것이 아니고 월, 수, 금 세번 열리게 된다. 월, 수, 금의 기사단전을 구별하기 위해 다음과 같이 코드를 작성할 수 있다. 아래 그림은 전쟁과 관련된 테이블인데, '요일' column에 'GWDAY0010'과 같이 코드로 넣어둘 수 있게 된다. 또한, 시즌..