예전에 AngularJS 를 학습하면서 (프로젝트를 하면서) grunt나 gulp를 사용하여서 프론트엔드 소스코드를 '빌드' 하고는 했다. 그렇게 빌드하고 나온 소스들은 javascript 소스나 css 파일들이 한대로 묶이고, 뭔가 보기 힘든 형태의 소스코드로 바뀌어있었다. 또한 이미지 파일들도 자동으로 파일 이름이 변경되면서 브라우저 캐싱에 대응하여 변경이 되었다. 환경(개발/라이브)에 따라서 정해놓은 값들을 바꾸어주는 역할도 했다. 심지어 이걸 내가 세팅하고 만들었는데 3~4년 지난 지금 전혀 기억이 나질 않는다. 역시 눈에서 멀어지면 마음에서도 멀어지나보다. 아 대략 이렇게 나오는 구나~ 그냥 빌드, 실행을 통해서 나오는 화면을 보고는 이렇게 말할 수 있었다. '그때 그것처럼 되겠구나' 했지만 그..

아직 Firebase 에 대한 이해 수준이 낮은 편이라서 Vue에 별로 신경을 못쓰고 있다. 그래서 일단은 프로젝트를 어느 정도 마무리 하고 이후에 진행하려고 마지막 글을 쓰게 되었다. 일단 하고 싶었던 것은 Firebase cloud functions 로 만든 API를 VueJS 에서 사용하여 데이터를 노출시켜주고 입력하는 기능을 만들고 싶었다. 이번 글은 전반적인 설명 보다, 소감을 위주로 작성해야 할 것 같다. (아직 모두 정리가 된 것이 아니라서) 만들면서 크게 신경써서 만들었던 스펙들은 이렇다. 보안상의 문제가 없는지 확인(예전 AWS EC2 요금 폭탄의 추억) 데이터의 입력은 Firebase database (cloud firestore) 를 사용 최대한 RESTful API 형태로 개발 (H..

대강 있는 것들을 복붙하면서 만든 페이지 이므로 디자인 같은건 Bootstrap 이 대애충 해주고 있습니다. 이번에 bootstrap-vue를 추가로 사용하면서 연습을 하고 있는데, 본격적으로 wepack 을 통한 vue 파일 빌드와 컴포넌트의 구조화를 적극 활용하기 위해서 다음과 같은 형태로 파일을 구성했습니다. 뭐 꼭 이렇게 까지 해야하나 싶지만... main.js (시작) └ App.vue (기본 vue) └ VuePetList (사진 목록) └ VuePetForm (사진 등록) 일단 사진 목록에 대한 표현의 방법은 굉장히 쉬웠습니다. 거기에 bootstrap 을 사용하는 방법이 함께 녹아져 있어서 신경써야 할 것들이 많기는 하지만 데이터를 바인딩하는 방법 자체가 굉장히 간단했습니다. 새로운 것들에..

가장 먼저 시작한 것은 Vue에 좀 친숙해지기 위해서 화면부터 구성해보기로 했다. 보통의 방법으로 마크업을 만들어서 화면을 구성하는 것 자체는 크게 문제가 안된다고 생각했는데 Vue의 룰에서 화면을 구성을 하는 것은 조금 더 이해가 필요했다. 그런데 또 다른 형태의 Vue의 개발도 있어서 조금 놀랐다. 먼저 Vue의 한글화 공식 홈페이지의 튜토리얼을 보면 아래와 같이 되어있다. {{ message }} var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } }) cdn에 있는 vue js 라이브러리를 선언하고 이후에 마크업과 스크립트를 이용하면 필요한 화면을 구성할 수 있다. 그런데 vue-cli 를 통해서 생성한 프로젝트 안에는 조금 다른 형태..

먼저 만들고 싶은건 갤러리 형식의 반려 동물의 사진을 공유 하는 곳이다. 대략 아래와 같은 형태가 될 것 같다. 사진과 간단을 소개를 등록하는 화면과 사진의 목록과 소개 내용을 살펴보는 곳 이렇게 두 가지 정도의 기능을 제공하면 될 것 같다. 조금 더 구조화 해서 표현을 하면 대략 이런 모습 이겠다. 로그인 구글 계정으로 로그인하기 사진 목록 목록 표시 정렬 사진/글 등록 (로그인 필수) 등록하기 파일 업로드 (사진 유형, 필수 등록) 반려 동물 이름과 간략한 사진 소개 글 수정하기 업로드된 사진은 수정 불가 반려 동물 이름과 사진 소개를 수정할 수 있음 삭제하기 등록된 사진을 제거 일단 구현을 하려면 백엔드가 갖춰져야 할거 같으니 일단 UI 수준에서만 대략 구성하는 것을 먼저 해야겠다. 그리고 백엔드는..

개인적으로 가장 하기 싫으면서도 가장 중요한 것이라고 생각하는게 개발환경 설정이다. 모든 프로젝트의 근간이 되고 대충 어설프게 알고 세팅했다가는 나중에 출시할 시기가 되면 본전도 못찾는 그런 것. 처음 수행했던 프론트엔드 개발 환경 구축에서는 뭔가 좋아보이면 이것저것 다 집어 넣었었는데 (Yeoman, grunt, gulp, uglify, browserify 등) 왜 어떤 이유에서인지는 모르고 대략 필요하다고 싶은 것들을 그냥 다 집어 넣었던 것 같다. 물론 최소한의 이해만 한 상태로 말이다. 하지만 프로덕트 수준의 빌드가 나올 쯤에는 문제점 들이 조금씩 나왔다. 사전에 조금 더 시간을 두고 패키지들을 이해하는 시간을 가졌으면 좋았을텐데, 늘 언제나 그렇듯 업무의 속도는 학습보다 빠르다. 뭐 어찌되었던 ..