매일 꾸준히, 더 깊이

MVC모델이란? MVC는 Web 프레임워크에서 일반적으로 다뤄지지고 있는 어플리케이션 설정을 정리하기 위한 개념의 하나로 Model, View, Controller로 역할을 분리하여 코딩하는 모델을 일컫는다. 각각의 역할은 다음과 같다. Model : 시스템에서 비즈니스 모델을 담당한다. View : 표시나 입출력을 처리한다. Controller : 유저의 입력을 바탕으로 Model과 View를 제약한다. 그림으로 표시하면 다음과 같다. Model은 본래 한 묶음의 데이터를 처리하는 부품으로, 그 성질 때문에 내부가 복잡한 기능이 포함된 구현, 여러 메소드나 속성에 접근할 수 있게 되어 있으며, 하나가 아닌 여러 개의 View 클래스의 필요한 데이터에 대응하는 것이 일반적이다. 따라서 View가 직접 M..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번 포스트에서는 JavaScript의 테스트 프레임워크인 Jest의 기본적인 문법에 대해서 해설하고자 한다. Vue Test Utils는 Jest에 맞춰서 움직이기 때문에 먼저 Jest의 기본 분법을 이해해둘 필요가 있다. 제일 기본적인 3개의 메소드 (describe, it, expect) Jest로 테스트를 할 때에 빠트릴 수 없는 기본 메소드 세 가지를 소개하도록 하겠다. describe it(test) expect describe describe 메소드는 관련된 몇 가지 테스트를 묶는 블록을 작성하기 위한 메소드이다. 인수 데이터형 설명 제1인수(필수) String 테..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Jest란? Jest이란 Facebook에서 개발하고 있는 OSS의 JavaScript 테스트 워크 프레임이다. 유명한 프로젝트로는 Babel, TypeScript, Node, React, Angular, Vue 등에서 이용되고 있다. Jest의 Github 리포지토리는 다음의 URL을 참고해주시길 바란다. https://github.com/facebook/jest Jest 설치 및 기본 셋팅 npm의 환경이 준비되어 있다면 다음의 커맨드로 설치할 수 있다. $ npm init $ npm install --save-dev jest 그리고 package.json에 jest를 추가..

Vue Router이란? vue.js의 확장 라이브러리로 Vue Router을 사용하는 것으로 싱글 페이지 어플리케이션(SPA)를 구축할 수 있다. Vue Router를 이용하여 싱글 페이지 어플리케이션을 구축하면, 어떤 페이지에서 다른 페이지로 이동할 때에 페이지 전체의 정보를 읽어들일 필요가 없어진다. 페이지간에 공통 부분은 변경이 일어나지 않고 페이지 내에 달라지는 부분이 기재되어 있는 부분만 바뀐다. 예를 들어, header나 footer, sidebar가 있는 사이트의 경우, 공통된 정보가 있으므로 갱신에 필요하지 않은 정보는 매번 다시 읽어들이지 않게 된다. 그러므로 싱글 페이지 어플리케이션에서는 페이지의 이동이 스무스하게 된다. 도입 방법 1. 메뉴얼 셋업 (1) npm으로 설치한다. npm..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue.js를 다룰 때에, export default에 대해서 잘 몰랐기에 조사해서 정리해봤다. 단일 파일 컴포넌트 단일 파일 컴포넌트란 컴포넌트를 구성하는 template, style, script를 하나의 Vue 파일로 정리해서 관리하는 것을 말한다. 기능마다 "HTML", "CSS"를 분리하는 것이 아닌, 부품 단위로 관리하며, 이렇게 분리하는 것으로 UI를 작성할 수 있다. 단일 파일 컴포넌트의 생각법으로 만들어진 것이 VueCLI이다. 다른 컴포넌트에서 이용되도록 하기 위해서는 그렇다면, 단일 파일 컴포넌트의 생각법으로 다른 컴포넌트에서도 이용되도록 하기 위해서는 어떻..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Vue.js에서 사용할 수 있는 편리한 기능 중 하나로 "watch" 오브젝트가 있다. watch가 지정한 프로퍼티의 값을 감시하여 변경이 있으면, 지정한 처리를 자동적으로 실행해주는 것이다. watch에는 handler이나 deep, immediate이라는 키워드가 기재가 되어 있는 경우와 없는 경우가 있다. hanlder는? deep, immediate는? 그리고 있는 경우랑 없는 경우, watch 처리가 어떻게 바뀌는거지? 의문을 가지는 사람들이 있을 것이다. 여기에서는 watch의 handler나 depp, immediate 처리에 대해서 실례에 대해 살펴보고 해설하고자..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 환경 이번 포스트에서는 Vue CLI를 사용한다. 프로젝트를 생성하면 다음과 같은 디렉토리로 파일이 구성될 것이다. 기본적으로는 편집하는 것은 App.vue와 components 폴더이다. 그 외에는 디폴트 상태로 수정하지 않아도 된다. 터미널에서 다음의 커맨드를 실행하면 개발서버가 실행된다. $ npm run serve 이 상태에서 localhost URL(http://localhost:8080/)에 액세스하면 다음과 같은 화면이 표시된다. vue 파일을 변경하면 그 변경 내용이 이 페이지에 바로 반영된다. 테스트로 App.vue의 내용을 모두 삭제하면 아무것도 표시되지 않게..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 직역. 의역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. v-model이란 공식 사이트를 인용하면 다음과 같다. form의 input 요소나 textarea요소, select 요소에 쌍방향(two-way) 데이터 바인딩을 만들고 싶을 때, v-model 디렉티브를 사용할 수 있다. 너무 짧아서 알기 어렵다. v-model의 역할은 "변경과 데이터를 엮어주는 것"이라고 할 수 있다. 즉, (1) 표시할 데이터 (2) 변경이 있다면 데이터에 반영 이 두 가지를 세트로 한 것이 쌍방향(two-way) 데이터 바인딩이며, 이것을 v-model이 해준다는 것이다. 사용하자면 다음과 같이 쓸 수 있다. username: {{ username }..

deep selector이란? 간단하게 말하자면, Vue.js에서 scoped가 있는 style을 작성하고 있을 때에 그 컴포넌트의 자식 컴포넌트에도 style을 추가하고 싶을 때 사용하는 css의 셀렉터의 작성법을 일컫는다. Vue.js의 scoped CSS의 원리에 대해서 짤막하게 설명하면, scoped CSS를 이용하면 컴포넌트마다 data-v-[hash]가 할당되어 있고 그 속성과 세트가 되는 스타일이 적용되게 된다. 이로 인해 그 속성은 컴포넌트마다 다른 것이 적용되므로, 컴포넌트 단위로 스타일을 할당할 수 있다는 것이다. 그러나 추가로 부모 컴포넌트에서 자식 컴포넌트에 다른 style을 추가 혹은 적용하고 싶을 때 사용할 수 있는 것이 deep selector이다. deep selector의 ..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 컴포넌트 설계와 Atomic Design의 관계 Atomic Design은 원래 UI 설계를 위해 만들어진 것이다. 거대한 어플리케이션도 효율 좋게 부품으로 재이용하고, 더욱이 상세한 조절도 가능하도록 고려한 것이다. Atomic Design에서는 "컴포넌트"이라는 단어가 사용되고, 한 번보면 vue등 어플리케이션에도 그대로 설계로써 사용할 수 있다고 생각될 수 있다. 그러나 UI 설계의 방법, 사상을 그대로 어플리케이션의 컴포넌트 설계에 적용하면 일부분 되지 않는 곳이 있다. 어플리케이션 개발에서는, 동일한 레이어 아웃에서도 데이터의 갱신의 타이밍이 다른 경우가 있다. 이 데..