웹개발 (4) 썸네일형 리스트형 Vue 학습하기 ③ - vue 파일로 작업하기 그리고 디버깅 가장 먼저 시작한 것은 Vue에 좀 친숙해지기 위해서 화면부터 구성해보기로 했다. 보통의 방법으로 마크업을 만들어서 화면을 구성하는 것 자체는 크게 문제가 안된다고 생각했는데 Vue의 룰에서 화면을 구성을 하는 것은 조금 더 이해가 필요했다. 그런데 또 다른 형태의 Vue의 개발도 있어서 조금 놀랐다. 먼저 Vue의 한글화 공식 홈페이지의 튜토리얼을 보면 아래와 같이 되어있다. {{ message }} var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } }) cdn에 있는 vue js 라이브러리를 선언하고 이후에 마크업과 스크립트를 이용하면 필요한 화면을 구성할 수 있다. 그런데 vue-cli 를 통해서 생성한 프로젝트 안에는 조금 다른 형태.. Vue 학습하기 ② - 무엇을 어떻게 만들것인가? 먼저 만들고 싶은건 갤러리 형식의 반려 동물의 사진을 공유 하는 곳이다. 대략 아래와 같은 형태가 될 것 같다. 사진과 간단을 소개를 등록하는 화면과 사진의 목록과 소개 내용을 살펴보는 곳 이렇게 두 가지 정도의 기능을 제공하면 될 것 같다. 조금 더 구조화 해서 표현을 하면 대략 이런 모습 이겠다. 로그인 구글 계정으로 로그인하기 사진 목록 목록 표시 정렬 사진/글 등록 (로그인 필수) 등록하기 파일 업로드 (사진 유형, 필수 등록) 반려 동물 이름과 간략한 사진 소개 글 수정하기 업로드된 사진은 수정 불가 반려 동물 이름과 사진 소개를 수정할 수 있음 삭제하기 등록된 사진을 제거 일단 구현을 하려면 백엔드가 갖춰져야 할거 같으니 일단 UI 수준에서만 대략 구성하는 것을 먼저 해야겠다. 그리고 백엔드는.. Vue를 처음 체험하다 웹 개발을 처음 시작할때 jQuery 버전이 1.4 정도 였던 것 같다. 지금하고 무슨 차이가 있냐고 물어본다면 그냥 jQuery 버전이 올랐다는 점이다. 그 밖에는 마크업을 만들때 아무렇게나 했다면 반응형 웹을 지원하며, 비교적 디자인이 예쁜 Bootstrap 을 사용한다는 점이다. 그래서 늘 뭔가 변화가 없는 이 웹 개발이 늘 지겨웠지만 jQuery 로 어지간한 웹 개발은 다 가능하여서 딱히 불만이랄 것도 없었다. 그러다 jQuery를 안쓰자고 다짐했던게 2014년 정도였다. (아래 글) 그렇게 새롭게 시작한게 AngularJS 였는데 나에게는 굉장히 센세이션이었다. 늘 jQuery 기반의 개발을 하면서 '재사용' 에 대한 것이 항상 스트레스 였다. (하지만 Element Selector는 정말 편-.. 후기 : 간단한 SOFEA 만들어보기 어느 언어를 하든 새로운 환경 설정을 하고 이를 통해 올바른 결과를 한번에 보기란 쉽지 않은 것 같네요. 기본적으로는 개발자로서의 아집과 선입견들이 일부 장애 요소가 된다고 생각하기도 하고.. 새것에 대한 개념이나 철학에 다소 맹목적이 되기도 하고.. 계속적으로 비슷한 감상이 계속되지는 않았나 싶네요. (계속 같은 실수를 반복했다는 것이죠) 이번에도 여지없이 비슷한 실수를 하곤 했는데.. 어쩌면 누구나 다 겪는 것일지도 모르겠네요. 1. 개념이나 원리에 대한 이해를 무시하고 무작정 시도를 해본다.2. 위의 이해를 빼다보니 단순한 것에 쉽게 막히고 많은 시간을 허비한다.3. 다 완료 하다보면 이게 정말 좋은 방식의 개발 방법인가보다 하고 금방 허상에 빠지고 만다. (종래의 것보다 좋다고만 느낀다) 이렇게 .. 이전 1 다음
