전체 글11 [Design Patterns]Factory pattern, 객체를 만들어내는 Intro 이번에는 Factory pattern입니다. Factory pattern은 공장에서 상품을 찍어내는 것처럼 객체를 찍어내는 패턴입니다. Factory pattern은 factory Method와 abstract Factory, 두 가지로 나뉩니다. 공부하면서 비슷하지만 다른 두 형태를 구분하기가 까다로웠는데 stackoverflow의 답변 하나가 나름(?) 명쾌하게 풀어줍니다. The main difference between a "factory method" and an "abstract factory" is that the factory method is a method, and an abstract factory is an object. ‘factory method는 method이고, a.. 2022. 7. 4. [Kotlin]List to Array with Type cast, 리스트를 원하는 타입의 배열로 Intro Kotlin에서 List를 Array로 바꾸는 방법이야 여러가지가 있겠지만 가장 간단한 것으로 toTypedArray가 있습니다. 대부분의 경우에 toTypedArray로 해결이 됩니다. 하지만 만약 List을 Array으로 Casting이 필요한 경우에는 해결이 되지 않습니다. 그럴땐 이렇게! Result val anyList: List = listOf(1, 2, 3) val wantArray: Array = anyList.map { it as Int }.toTypedArray() List의 map 메서드를 활용해서 각 요소를 원하는 Type으로 변경한 이후 toTypedArray 메서드를 사용하는 방법입니다. (혹시 다른 방법이 있다면 알려주세요!) 전체 소스 코드는 이곳에서 확인 가능하십.. 2022. 6. 2. [Design Patterns]Observer pattern, 변화에 반응 Intro 오늘은 간단하게 Observer 패턴에 대해서 공부해봤습니다. Observer 패턴은 어떤 객체가 변했을 때 등록된(혹은 보고 있던) 관찰자(Observer)들에게 통지하는, Behavioral Pattern입니다. Kotlin에서는 Observer pattern을 두 가지의 형태로 구현할 수가 있습니다. 하나는 Standard, 그러니까 평범한 모습으로 구현이 가능하고, 하나는 Kotlin의 observable delagates를 활용한 방법입니다. Standard 먼저 Standard하게 구현한 모습입니다. Observer 관찰하고 있는 객체가 변했을 때 Observer의 update가 동작하게 될 겁니다. interface Observer { fun update() } Observable.. 2022. 5. 16. [Vue]Want Reuse? Use Composables, 재사용에는 믹스인 대신 컴포저블 Intro 기존, 그러니까 Vue2에서는 코드를 재사용하기 위한 방법으로 Mixin(믹스인)을 활용했습니다. Vue3로 넘어오면서 Mixin을 대체하는 Composables이 생겼습니다. Vue3 공식 문서에서는 Mixin 대신 Composables를 사용하기를 추천하고 있습니다. 하지만 생각보다 Composables를 소개해주는 문서(혹은 글)가 한국어로 된 건 없더군요. 아직 Vue3는 한국에서 사용하시는 분들이 조금 적은 게 아닌가 싶네요. 어쨌든 공식 문서를 요약하는 글이겠지만 Composables에 대해서 주저리주저리 떠들어보겠습니다 Result // App.vue Mouse position is at: {{ x }}, {{ y }} ... // mouse.js import {onMounted,.. 2022. 5. 12. [Vue]Pass Object as Router Params, 라우트 파라미터로 오브젝트 넘기기 Intro Vue에서는 다른 페이지로 이동하기 위해 Vue Router를 사용합니다. Router를 사용하다 보면 단순히 페이지만을 옮기는 게 아닌 데이터도 함께 옮기고 싶은 때가 있습니다. 그럴 때를 위해 query와 params를 Vue Router는 준비해 두었죠. 하지만 요게 요게 맘대로 안 될 때가 있습니다. 바로 Object 형식의 데이터를 옮기고 싶을 때 말이죠. Result // PUSH const router = useRouter() router.push({ name: 'xxx', params: { 'A': JSON.stringify({ stringify: 'JSON.stringfy', GOOD: 'So GOOD!!!' }) } }) // RECEIVE const route = useRo.. 2022. 4. 29. [Javascript]Array Multi Column Sorting, 여러 조건으로 배열 정렬 Intro 오랜만에 작성하는 글은 Javascript의 Array Multi Column Sorting. 뭔가 있어 보이지만 여러 개의 조건으로 배열을 정렬하는 건 기본 메서드인 sort로 이미 가능합니다. 하지만 그 모습은! 조금 못 생겼으므로 나름대로 다듬어 봤습니다. Result const multiSorting = (data, columns) => { const comparer = (a, b) => { return compareMultiple(a, b, Object.entries(columns)) } const compareMultiple = (a, b, columnsEntries) => { let index = -1 const length = columnsEntries.length while (.. 2022. 4. 7. [Spring]Filter와 Interceptor, 공통 업무를 처리하는 비슷하지만 다른 Intro 오늘은 Filter와 Interceptor의 이야기입니다. Spring의 중요한 요소 중 하나입니다. 하지만 업무 특성 때문인지 개인적으로는 자주 접하질 못해 매번 까먹는 부분이기도 합니다. ...생각해보면 접했던 게 손에 꼽을 만큼 보지 못한 거 같네요. Filter & Interceptor Filter와 Interceptor를 사용하는 이유에는 중복 코드 문제가 있습니다. 웹 개발을 하다보면 공통 업무(혹은 공통 관심사)에 관련된 것들이 생깁니다. 이를테면 로그인 관련 처리나 권한 확인과 같은 부분이죠. 이런 공통 업무는 다수의 페이지(혹은 요청)에 똑같은 코드가 필요하게 됩니다. 결국 중복 코드가 생기는거죠. 이런 공통 업무들을 처리할 수 있는 기능이 바로 Filter와 Intercept.. 2021. 12. 31. [Vue]Reactivity System, 뷰에서 값이 바뀔 때 일어나는 일 Intro 안녕하세요. 개발자 위성빈입니다. 오늘은 Dynamic Components에 이어서 Vue의 Reactivity 시스템에 대해서 알아보려 합니다. 그저 머릿속에만 있는 거보단 글로 남기는 게 기억도 잘 되고, 글을 쓰면서도 더 찾아보게 되니 참 좋은 거 같아요. 하지만 역시 글을 쓰는 게 쉽진 않네요. Vue Reactivity Vue의 장점이라고 하면 꼭 등장하는게 있습니다. 바로 Data Binding입니다. Vue의 데이터 바인딩은 화면에 표시되는 값과 데이터 값이 연결이 되어 서로를 변경시키기 때문에 양방향 데이터 바인딩이라고도 합니다. 그리고 이 양방향 데이터 바인딩이 가능한 이유가 Vue의 Reactivity 시스템 덕분입니다. Vue Guide Reactivity in Depth .. 2021. 12. 26. [Vue]Dynamic components, 내가 원할 때 내가 원하는 컴포넌트 불러오기 Intro 안녕하세요. 개발자 위성빈입니다. 최근에 Vue.js 공부를 시작했습니다. 새롭게 배운 놈이니 바로 써먹고 싶어 개인 프로젝트를 시작했죠. 프로젝트 제목은 'everything', '대시보드 위에 생각나는 모든 것을 올려보자'라는 아이디어를 바탕으로 차근차근 진행하고 있습니다. 그러다 만난 'Dynamic components', 동적 컴포넌트를 구현하면서 겪었던 것들을 오늘 적어보려 합니다. Result export default{ // ... data() { return { // ... , currentTab: 'VueRouter' } }, computed: { componentLoader() { const tab = this.currentTab return () =>import(`@/com.. 2021. 12. 26. [ToyProject]'뭐먹지' 개발기 아이디어나 기획은 작년에 해놨지만 1년이 지난 지금에서야 완성한 첫 토이 프로젝트 뭐먹지(what-eat). ’뭐먹지’를 개발하며 겪었던 이야기를 공유하려 합니다. 뭐먹지? 점심과 저녁 메뉴를 선뜻 고르지 못하고 하던 작은 미니게임이 있었습니다. 한식, 중식, 양식, 일식, 분식 중 오늘은 먹고 싶지 않은 카테고리를 빼고 남은 카테고리에서 메뉴를 고르는 방식의 게임이었죠. ’뭐먹지’는 그 게임을 고스란히 인터넷으로 옮겨놓은 프로젝트입니다. 실패 사실 뭐먹지는 이미 몇 번이고 제 repository에 이런저런 형태와 이름으로 만들어졌다가 사라졌습니다. 그 잔재가 남아있기도 하죠. (https://github.com/wesbin/what-eat/releases/tag/v20210317) 다시 생각해도 이 버.. 2021. 12. 26. [Gradle]Gradle에서 Runnable.jar 만들기 Result jar { manifest { attributes 'Version': version, 'Main-Class': mainClassName } from { configurations.compileClasspath.collect { it.isDirectory() ? it : zipTree(it) } } } build.gradle에 이렇게 코드를 추가해주세요. 주저리주저리 Gradle을 이용해서 Runnable.jar를 만들기 위해선 설정이 필요합니다. 설정 없이 jar를 만들어보면 처음에는 Manifest가 없다고 할 겁니다! 그러면 아래와 같이 build.gradle에 코드를 추가해주세요. mainClassName = 'wesbin.toy.blog' version = '1.0' jar { man.. 2021. 12. 26. 이전 1 다음
