매일 꾸준히, 더 깊이

※ 일본의 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 직역해주시면 감사하겠습니다. Builder 패턴이란? 컨스트럭터에 대해 수 많은 파라미터를 세팅할 필요가 있을 때에 대신해서 사용하도록 추전되는 구현 방법이다. 그러나 이것이 추천되는 것은 컨스트럭터에 설정되어 있는 파라미터 중 필수인 요소가 적을 때에 한정되는 것 같다. 아무튼 용도에 따라 몇 가지 패턴이 있으므로, 여기에서 정리하고자한다. 생성하는 오브젝트의 조건 클래스명 : People 필드 : String name(필수), Integer age(필수), String hobby(옵션) 필수 요소는 null 금지 People 클래스는 String을 반환값으로 하는 hello메소드가 존재 이번에는 Build..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. JavaScript에 있어서 여러 개의 값을 다룰 때에 쓸 수 있는 것이 "배열"이다. 그러나 배열에서는 항목에 이름을 붙이고 싶은 경우가 있을 것이다. 그럴 때 사용할 수 있는 것이 "Map 오브젝트(연관 배열)"이다. 또한, JavaScript의 배열을 다루기 위한 편리한 메소드로는 "map" 메소드가 있다. 양쪽 모두 이름에 "map"이 있으므로, 프로그래밍 초심자의 경우 혼동하기 쉽다. 이번 포스트에서는 map메소드와 Map오브젝트의 차이나 사용법을 포함해 상세하게 해설하고자한다. Map 오브젝트 JavaScript에 있어서 Map 오브젝트는 키와 그에 대응하는 값을 보..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 직역, 의역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. JavaScript의 async/await는 Promise를 사용한 비동기 코드를 동기 처리처럼 해주지만, async/await를 이해하기 위해서는 Promise를 먼저 알아둬야할 필요가 있다. 따라서 Promise에 대해서 알아보자. 구문 먼저 기본적인 구문이다. 어떻게 Promise를 작성하는 것일까? function 비동기함수(성공시의 콜백, 실패시의 콜백) { if (...) { 성공시의 콜백(성과) } else { 실패시의 콜백(문제) } } // ↓executor new Promise(function (resolve, reject) { 비동기 함수( (성과) => r..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. JUnit5이란 JUnit5 User Guide에는 다음과 같이 기재되어 있다. JUnit 5 = JUnit Platform + JUnit Jupiter + JUnit Vintage 각각에 대해 간단히 설명하면 다음과 같다. JUnit Platform 테스트 실행을 위한 플랫폼과 같은 부분 JUnit Jupiter JUnit5의 테스트를 쓰기 위한 API나 테스트 엔진 JUnit Vintage JUnit3, JUnit4의 테스트 엔진 JUnit4에서는 모든 기능이 하나의 패키지에 들어 있었지만. JUnit5에서는 분할되어 있다. JUnit5에서는 필요에 따라 JAR 파일을 의존..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용이 있으면 지적해주시면 감사하겠습니다. 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의 메소드를 호출하는 경우, 사전에 ..

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