[프론트엔드]Vue.js 3일 스터디(2일차)
- Vue.js 컴포넌트 샘플 구현하기
회사에서 진행 중인 프로젝트에 갑자기 Vue.js를 적용한다고 한다. 그래서 뜬금없지만 급하게 주말에 공부를 해서 정리를 하려고 한다. 최신 기술을 따라가지 못하고 있는 아재(?)이면서, React , Angular 도 잘 모르는 프론트엔드 무식자이다. 해야 할 공부가 많아서 프론트엔드 기술은 당장 공부하고 싶지는 않았지만... 일정상 조금 급하게 기본 개념과 간단한 샘플 소스를 정리할 예정이다. 목차는 아래와 같다.
1. Vue.js 기본 개념(1일 차)
2. Vue.js 심화 - 컴포넌트 샘플 구현하기(2일 차) - 현재글
3. Vue.js 심화 - 미정
혹시, Vue.js를 전혀 모른다면 공식 가이드 페이지를 먼저 읽어보길 바란다. Vue.js를 전혀 모른다면 이 글을 제대로 이해할 수 없다.
그리고, 큰 도움은 안 되겠지만, 필자가 지난 주말에 급하게 작성한 글을 읽어봐도 나쁘진 않다. Vue.js 가 뭔지 대략적으로 빠르게 알수 있는 글이다.
https://brunch.co.kr/@springboot/18
2. 컴포넌트 샘플 구현하기
Vue.js 의 컴포넌트를 활용하여 샘플 소스를 구현한다.
2.1 퍼즐 맞추기 게임 구현 스펙
Vue.js 의 컴포넌트 기능으로 뭘 만들어볼까?? 가볍게 구현할 수 있는 퍼즐 맞추기 게임을 만들어보겠다. 뜬금없지만, 아래 사진은 지난 2013년에 여행 중 찍은 사진이다. 이 사진을 활용할 예정이다.
2013년 여행 중에 직접 찍은 사진이 사진을 9개의 조각으로 나누고 우측 하단의 한 조각은 뺀다. 난이도 조절을 위해서 모서리에 표시를 했다. 퍼즐을 맞추는데 힌트가 될 것이다.
게임은 랜덤 하게 사진을 섞은 다음에 사진 조각을 맞춰서 완성된 사진으로 만드는 단순한 게임이다. 단, 사진 조각은 빈 공간으로만 이동할 수 있다. 빈 공간의 주변에 있는 조각을 클릭하면 사진 조각이 이동한다. 내가 구현한 데모는 크롬의 최신버전에서만 정상적으로 동작한다. IE, 사파리(모바일) 등 모든 브라우저에서 정상 작동하도록 구현하고 싶었지만 그럴 시간이 없었다. 해당 데모 샘플을 구현하는데 걸린 시간은 3시간이다. 참고로 이미지를 9조각으로 자르고, CSS를 구현하는데 한 시간 넘게 걸렸다. 아래 링크에서 데모를 실행해볼 수 있다. 다시한번 말하지만, 반드시 크롬에서 확인하길 바란다.
http://vuejs.co.kr/game/puzzle.html
페이지를 새로 고침 할 때마다 퍼즐 조각이 랜덤 하게 섞인다. 퍼즐을 완성하면 완성되었다는 알림 창이 실행이 되면서 게임이 종료된다. 클릭 횟수에 따라서 "퍼즐 이동 횟수"의 카운트가 +1 씩 증가한다. 필자가 머리가 나빠서인지, 구현해놓고 정상적으로 퍼즐이 완성되는지 테스트를 제대로 못했다. 원리를 모르면 의외로 어려운 게임이다. 알고보면 간단한데... 아무튼, 혹시라도 이 글을 보고 있는 사람이 있다면 한 번 해보고 테스트를 해주길 바란다.
기능 스펙
9개의 사진 조각을 맞추는 퍼즐 게임을 구현한다.
단, 9개의 사진 중 제일 우측 하단의 사진을 제외하고 8개의 사진을 랜덤 하게 섞는다.
근접하고 있는 빈 공간으로 사진 조각을 이동시키면서 사진을 맞춰야 한다.
퍼즐이 이동하면 이동 횟수를 증가시킨다.
기술 스펙
Vue.js 의 컴포넌트를 적극 활용한다.
Parent Component는 퍼즐의 전체 판이된다.
Child Component는 퍼즐(사진)의 한 조각이 된다.
Parent(부모), Child(자식) 사이에 데이터 전송, 이벤트 발생을 활용한다. (props와 emit)
추가로 해주고 싶은 말
3시간 이내로 구현한다.
웹 개발자라면 UI(마크업)은 이쁘지 않아도 된다. (CSS 작업에 너무 많은 시간을 내지 않아도 된다고 생각하는데... 현업에서는 보통 퍼블리싱(UI, 마크업)과 웹 개발 업무는 분리되기 때문에, CSS 에 너무 집중하지 않아도 될 것 같다는 의견이다.)
자!! 이제 요구사항에 대해서 설명했으니, 혼자서 구현해보길 바란다.
참고로 본인은 지난 주말에 Vue.js를 5시간 공부한 것이 전부이다. 프런트엔드 전문 개발자가 아니고 컴포넌트의 개념도 완벽하게 이해하지 못했다. 그래서, 필자가 작성한 소스를 보고 무조건 참고하지 않았으면 좋겠다는 의견을 전하고 싶다. 직접 개발해보길 바라며, 필자의 소스는 가볍게 참고만 하길 바란다.
2.2 퍼즐 맞추기 게임 개념 정리
퍼즐 게임 개발의 목적은, Vue.js 의 컴포넌트를 공부하기 위해 구현하는 것이다. 컴포넌트에 대해서 이해해야 한다. 컴포넌트란? "재사용할 수 있도록 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적인 개념" 이라고 한다. 솔직히 어떻게 설명을 해야 할지 잘 모르겠다. 상세한 내용은 아래 공식 가이드 페이지를 참고하면 된다. 시중에 출판된 [퀵스타트 Vue.js ]라는 책도 볼 만하다.
https://kr.vuejs.org/v2/guide/components.html
한번이라도 Vue.js 의 개발경험이 있거나, 지금 이 글의 퍼즐 게임을 Vue.js 로 활용해서 구현해 봤다면 컴포넌트에 대해서 충분히 이해했을 것이라 판단된다. 컴포넌트에 대해서 대략적으로 이해했다는 가정하에 읽어주길 바란다. 컴포넌트에 대해서 이해하지 못했다면 이 글을 이해하기 어려울 수 있다.
(급하게 3시간만에 만든)퍼즐 게임에서의 컴포넌트 개념에 대해서 설명한다. Parent(부모) 컴포넌트는 퍼즐의 전체 판, Child(자식) 컴포넌트는 퍼즐의 각 조각으로 설정하였다. 1개의 전체 퍼즐 판이 있고, 그 아래로 9개의 퍼즐 사진 조각으로 나누어져 있다. 즉, Child(자식) Component는 9개가 된다. 하지만, 우측 하단의 1개의 조각은 빈 이미지 값을 갖게 된다. 왜냐하면, 퍼즐을 움직일 수 있도록 한 칸은 비워있어야 하기 때문이다. 컴포넌트를 공부할 때 가장 중요한 것은 부모 컴포넌트와 자식 컴포넌트 사이에서 발생하는 정보 전달(통신)이다. 부모 컴포넌트와 자식 컴포넌트 사이에서는 Pass Props , Emit Event를 이용하여 서로 통신한다. 아래 그림을 참고해보면, Pass Props를 이용하여 Parent 컴포넌트는 puzzles라는 속성명으로 데이터를 받고, Child 컴포넌트는 piece라는 속성명으로 데이터를 받도록 명시적으로 선언하였다.
반대로 Child 컴포넌트에서 Parent 컴포넌트로의 정보 전달은, Emit Event(이벤트 발신)를 이용한다. Child 컴포넌트에서 이벤트 발신 (this.$emit('puzzleclick'... 를 수행하면 Parent 컴포넌트에서는 puzzleclickEvnet를 실행한다. 이때 필요한 정보를 파라미터에 담아서 전달할 수 있다. puzzleclickEvent에서는 퍼즐 이동 횟수의 카운트를 증가시키고, 변경된 퍼즐 조각을 세팅하여주는 로직을 수행한다.
퍼즐 조각을 클릭하는 과정(퍼즐의 위치를 바꾸는 과정)은 Parent 컴포넌트에 선언된 puzzleclickEvent에서 수행하도록 구현했지만, 사실, 퍼즐의 원본 데이터(puzzleDataOrigin)는 전역 변수로 선언되어 있기 때문에, Child Component에서 로직을 수행해도 상관은 없다. 전역 변수로 선언된 데이터이기 때문에 어디서 조작을 하든 상관이 없는 구조이다. 해당 구조에 대해서는 Redux, Vuex 등 많은 공부가 필요할 것 같다.
2.3 퍼즐 맞추기 게임 샘플 소스
샘플 소스는 http://vuejs.co.kr/game/puzzle.html 에서 소스보기 로 직접 확인이 가능하다.
2.4 아쉬운 점
시간이 부족해서 제대로 파악하지 못한 사항을 정리했다.
소스를 깔끔하게 정리하지 못했다. js 는 깔끔하게 분리해야 하고, 코딩 컨벤션에 맞게 개발해야 한다.
Vue Devtools 이 실행이 되지를 않는다. Vue.config.devtools = true; 를 선언하면 원래 잘 되어야 하는데... 뭐가 문제인지 잘 안되고 있다. Vue Devtools 를 사용하면 컴포넌트 개념을 이해하는데 많은 도움이 된다.
Webpack 을 사용하지 못했다.
Vue.js 의 개념을 제대로 이해하지 못하고 개발을 하였다.
이번 글에서는 [[프론트엔드]Vue.js 3일 스터디(2일차) - Vue.js 컴포넌트 샘플 구현하기]라는 주제로 Vue.js 의 컴포넌트를 활용하여 퍼즐맞추기 게임을 구현해봤다. 전반적으로 아쉬운 공부였지만, 시간이 부족해서 이정도로 정리할려고 한다. 컴포넌트가 뭔지 가볍게 알 수 있는 공부라고 생각하지만, 수박겉핥기 수준으로 매우 부족한 글이다. Vue.js 공식 가이드 페이지나 시중에 나온 책들을 참고해서 많은 공부가 필요할 것 같다.
다음 글에서는 실제로 Spring 환경에서 Vue.js 를 적용하여 개발을 진행해보겠다.
https://brunch.co.kr/@springboot/52
