매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용이 있으면 지적해주시면 감사하겠습니다. Stream API Stream API는 Data를 파이프 라인 형식으로 처리하기 위한 API이다. Collection, 배열, 파일등 데이터의 집합체(Data Source)에서 각각의 요소를 꺼내서 그것을 처리의 흐름(Stream)에 전달하기 위한 구성을 제공한다. Stream에 대해서 함수 조작을 한 결과를 Stream으로 반환하는 "중간조작"과 처리 결과를 Data로 반환하는 "종단조작"이 있다. 중간조작도 종단조작도 메소드 인수로 함수형 인터페이스를 받는 경우가 많으므로, 여기서 람다식의 지식을 이용하면 똑똑하게 코드를 작성할 수 있다. import java.ut..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. Optional이란? Optional은 값을 랩핑하여 그 값을 null일지도 모른다는 것을 표시하시는 클래스이다. 사용법 메소드 getHoge()는 null을 반환하는 경우가 있다고 상정한다. 지금까지라면 다음과 같이 null체크를 했을 것이라고 생각된다. String hoge = getHoge(); // hoge는 null일지도 if (hoge != null) { // null체크 System.out.println(hoge.length()); // hoge가 null이 아니므로 length메소드를 호출 } null일지도 모르는 변수 hoge의 메소드를 호출하는 경우, 사전에 ..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 몇 직역, 의역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 개요 SPA, SSR, SSG이라는 기술 용어를 작업 중이나 블로 그 글에서 본 적이 있지만, 지금까지 구체적으로 알아보지 않고 지냈다. 일단 Gatsby.js이나 Next.js를 다루고 있으므로, 이러한 개념을 제대로 이해해두면 안 될 것 같다는 생각이 들어 이번 기회에 정리해봤다. SPA SPA의 요지를 간단하게 말하자면, 하나의 페이지에 먼저 호스팅 서버에서 얻은 그 페이지를 기축으로, 표시하고 싶은 것이 있다면 그에 대한 데이터를 매번 API에서 취득하는 아키텍처이다. 이것은 Single Page Application의 약칭으로, 하나의 페이지를 바탕으로 이것 저것 동작..

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의 내용을 모두 삭제하면 아무것도 표시되지 않게..