본문 바로가기

Web Programming

 (56)
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 학습하기 ④ - 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 등) 왜 어떤 이유에서인지는 모르고 대략 필요하다고 싶은 것들을 그냥 다 집어 넣었던 것 같다. 물론 최소한의 이해만 한 상태로 말이다. 하지만 프로덕트 수준의 빌드가 나올 쯤에는 문제점 들이 조금씩 나왔다. 사전에 조금 더 시간을 두고 패키지들을 이해하는 시간을 가졌으면 좋았을텐데, 늘 언제나 그렇듯 업무의 속도는 학습보다 빠르다. 뭐 어찌되었던 ..
Vue를 처음 체험하다 웹 개발을 처음 시작할때 jQuery 버전이 1.4 정도 였던 것 같다. 지금하고 무슨 차이가 있냐고 물어본다면 그냥 jQuery 버전이 올랐다는 점이다. 그 밖에는 마크업을 만들때 아무렇게나 했다면 반응형 웹을 지원하며, 비교적 디자인이 예쁜 Bootstrap 을 사용한다는 점이다. 그래서 늘 뭔가 변화가 없는 이 웹 개발이 늘 지겨웠지만 jQuery 로 어지간한 웹 개발은 다 가능하여서 딱히 불만이랄 것도 없었다. 그러다 jQuery를 안쓰자고 다짐했던게 2014년 정도였다. (아래 글) 그렇게 새롭게 시작한게 AngularJS 였는데 나에게는 굉장히 센세이션이었다. 늘 jQuery 기반의 개발을 하면서 '재사용' 에 대한 것이 항상 스트레스 였다. (하지만 Element Selector는 정말 편-..
2019년 웹 개발자가 갖춰야하는 소양 학습을 해야겠다고 여겼던건 아마도 위의 글을 보고 나서 였던거 같다. 최근에 아는 분도 요 이미지를 두고서 이런 저런이야기를 했던걸 들었다. 나도 소감을 남기고 싶어서 이렇게 블로그를 다시 잡았다. (스킨도 바꾸고) 먼저 재미있던 건 이 로드맵 중에 Choose your path 정도만 보면 특별히 눈여겨 볼만한 것은 없었다. 다 한번씩들 어디서 들어보고 해본거고 당연한 것들 뿐이었으니까? 근데 보면 프론트, 백엔드, 그리고 DevOps 에 대한 내용들을 살펴보고나니 저 이하로는 별로 눈여겨 보지 않았던 것 같다. 일단 프론트엔드 쪽부터 살펴봤는데 한번도 이렇게 생각해본적이 없었던 것 같다. 누구나 그렇듯 그냥 필요에 의해서 사용한 기술들이 저렇게 정렬을 해놓으니까 아주 틀린 길을 가지는 않았나구나, 이..

티스토리툴바