본문 바로가기

전체 글

 (678)
Webpack 에 대한 이해를 해보자 ① 예전에 AngularJS 를 학습하면서 (프로젝트를 하면서) grunt나 gulp를 사용하여서 프론트엔드 소스코드를 '빌드' 하고는 했다. 그렇게 빌드하고 나온 소스들은 javascript 소스나 css 파일들이 한대로 묶이고, 뭔가 보기 힘든 형태의 소스코드로 바뀌어있었다. 또한 이미지 파일들도 자동으로 파일 이름이 변경되면서 브라우저 캐싱에 대응하여 변경이 되었다. 환경(개발/라이브)에 따라서 정해놓은 값들을 바꾸어주는 역할도 했다. 심지어 이걸 내가 세팅하고 만들었는데 3~4년 지난 지금 전혀 기억이 나질 않는다. 역시 눈에서 멀어지면 마음에서도 멀어지나보다. 아 대략 이렇게 나오는 구나~ 그냥 빌드, 실행을 통해서 나오는 화면을 보고는 이렇게 말할 수 있었다. '그때 그것처럼 되겠구나' 했지만 그..
Vue 학습하기 ⑦ - VueJS로 만든 프론트엔드와 Firebase 와 연동하기 아직 Firebase 에 대한 이해 수준이 낮은 편이라서 Vue에 별로 신경을 못쓰고 있다. 그래서 일단은 프로젝트를 어느 정도 마무리 하고 이후에 진행하려고 마지막 글을 쓰게 되었다. 일단 하고 싶었던 것은 Firebase cloud functions 로 만든 API를 VueJS 에서 사용하여 데이터를 노출시켜주고 입력하는 기능을 만들고 싶었다. 이번 글은 전반적인 설명 보다, 소감을 위주로 작성해야 할 것 같다. (아직 모두 정리가 된 것이 아니라서) 만들면서 크게 신경써서 만들었던 스펙들은 이렇다. 보안상의 문제가 없는지 확인(예전 AWS EC2 요금 폭탄의 추억) 데이터의 입력은 Firebase database (cloud firestore) 를 사용 최대한 RESTful API 형태로 개발 (H..
Vue 학습하기 ⑥ - Firebase Functions 로 만드는 HelloWorld API 정확히는 VueJS 개발을 학습하고 있지만 백엔드 포함을 목표로 잡아왔더니 Firebase도 함께 학습을 해야하는 상황이 되었다. 이번에는 Functions 라는 기능을 활용하여 웹 API를 개발해보려고 한다. 구체적으로 데이터 연동을 하거나 트리거를 만드는 것 까지는 아직 진행을 못해봤고, HelloWorld를 표시해주는 정도만 수행해봤다. Firebase로 백엔드를 이렇게 개발하면 되겠구나 정도를 이해하는 정도이다. 먼저 이를 사용하려면 최소한의 요건들을 갖추고 있어야 한다. nodejs npm firebase 이후에 firebase-tools 라는 것을 설치하면 된다. 이렇게 되면 필요한 것들은 대략 다 준비가 된 셈이다. firebase login 을 통해서 구글 계정 로그인이 필요하다. (fir..
Vue 학습하기 ⑤ - Firebase 를 이용한 Google 연동 로그인 만들기 이제 Vue를 살짝 벗어나서 백엔드를 개발해야하는 상황이 되었다. 대략적인 화면 구성은 나왔으니 구체적으로 인증과 권한, 데이터를 다루는 작업들을 시작해야하는데 직접 백엔드를 만들기 보다 Google firebase 를 활용하여 진행하려 한다고 이야기를 했었다. firebase를 사용하는 이유는 AWS 말고 다른 클라우드 서비스를 사용해보고 싶었던게 그 이유이고 그중에 GCP(google cloud platform) 이면 좋겠다고 생각했는데, 얻어걸린 셈이다. 콘솔창에 접근한 후에 프로젝트 추가를 통해서 위 그림과 같은 항목을 입력한다. 그리고 프로젝트 만들기 버튼을 누르면 너무 빠르게 앱 자체를 만들 수가 있다. 이 후에 만들어진 앱 이름으로 Project overview 화면에 도착하는데, 메뉴의 모..
Vue 학습하기 ④ - bootstrap-vue로 입력창 만들기와 이미지 미리보기 대강 있는 것들을 복붙하면서 만든 페이지 이므로 디자인 같은건 Bootstrap 이 대애충 해주고 있습니다. 이번에 bootstrap-vue를 추가로 사용하면서 연습을 하고 있는데, 본격적으로 wepack 을 통한 vue 파일 빌드와 컴포넌트의 구조화를 적극 활용하기 위해서 다음과 같은 형태로 파일을 구성했습니다. 뭐 꼭 이렇게 까지 해야하나 싶지만... main.js (시작) └ App.vue (기본 vue) └ VuePetList (사진 목록) └ VuePetForm (사진 등록) 일단 사진 목록에 대한 표현의 방법은 굉장히 쉬웠습니다. 거기에 bootstrap 을 사용하는 방법이 함께 녹아져 있어서 신경써야 할 것들이 많기는 하지만 데이터를 바인딩하는 방법 자체가 굉장히 간단했습니다. 새로운 것들에..
Vue 학습하기 ③ - vue 파일로 작업하기 그리고 디버깅 가장 먼저 시작한 것은 Vue에 좀 친숙해지기 위해서 화면부터 구성해보기로 했다. 보통의 방법으로 마크업을 만들어서 화면을 구성하는 것 자체는 크게 문제가 안된다고 생각했는데 Vue의 룰에서 화면을 구성을 하는 것은 조금 더 이해가 필요했다. 그런데 또 다른 형태의 Vue의 개발도 있어서 조금 놀랐다. 먼저 Vue의 한글화 공식 홈페이지의 튜토리얼을 보면 아래와 같이 되어있다. {{ message }} var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } }) cdn에 있는 vue js 라이브러리를 선언하고 이후에 마크업과 스크립트를 이용하면 필요한 화면을 구성할 수 있다. 그런데 vue-cli 를 통해서 생성한 프로젝트 안에는 조금 다른 형태..
Vue 학습하기 ② - 무엇을 어떻게 만들것인가? 먼저 만들고 싶은건 갤러리 형식의 반려 동물의 사진을 공유 하는 곳이다. 대략 아래와 같은 형태가 될 것 같다. 사진과 간단을 소개를 등록하는 화면과 사진의 목록과 소개 내용을 살펴보는 곳 이렇게 두 가지 정도의 기능을 제공하면 될 것 같다. 조금 더 구조화 해서 표현을 하면 대략 이런 모습 이겠다. 로그인 구글 계정으로 로그인하기 사진 목록 목록 표시 정렬 사진/글 등록 (로그인 필수) 등록하기 파일 업로드 (사진 유형, 필수 등록) 반려 동물 이름과 간략한 사진 소개 글 수정하기 업로드된 사진은 수정 불가 반려 동물 이름과 사진 소개를 수정할 수 있음 삭제하기 등록된 사진을 제거 일단 구현을 하려면 백엔드가 갖춰져야 할거 같으니 일단 UI 수준에서만 대략 구성하는 것을 먼저 해야겠다. 그리고 백엔드는..
Vue 학습하기 ① - 개발 환경 만들기 개인적으로 가장 하기 싫으면서도 가장 중요한 것이라고 생각하는게 개발환경 설정이다. 모든 프로젝트의 근간이 되고 대충 어설프게 알고 세팅했다가는 나중에 출시할 시기가 되면 본전도 못찾는 그런 것. 처음 수행했던 프론트엔드 개발 환경 구축에서는 뭔가 좋아보이면 이것저것 다 집어 넣었었는데 (Yeoman, grunt, gulp, uglify, browserify 등) 왜 어떤 이유에서인지는 모르고 대략 필요하다고 싶은 것들을 그냥 다 집어 넣었던 것 같다. 물론 최소한의 이해만 한 상태로 말이다. 하지만 프로덕트 수준의 빌드가 나올 쯤에는 문제점 들이 조금씩 나왔다. 사전에 조금 더 시간을 두고 패키지들을 이해하는 시간을 가졌으면 좋았을텐데, 늘 언제나 그렇듯 업무의 속도는 학습보다 빠르다. 뭐 어찌되었던 ..

티스토리툴바