마이구미의 HelloWorld 마이구미의 HelloWorld

이 글은 일렉트론에서 소스 변경시 새로고침에 대한 기능을 다뤄본다.이 기능은 소스를 변경했을 때, 다시 실행할 필요없이 자동으로 리로드를 하게 한다.그로 인해 개발 환경 개선에 도움을 주게 된다.일렉트론 환경에서 자동 리로드 기능을 원한다면, 읽어보길 바란다.Electron-reload - https://github.com/hotehrud/electron-reload 현재 프론트쪽에서 핫 리로드(hot-reload) 라는 기능이 이용되고 있다.핫 리로드는 페이지에 대한 단순히 새로고침이 아니라 수정된 관련 인스턴스만 반응하게 된다.그로 인해 다른 영역은 상태를 보존할 수 있게 되어 개발 환경에 많은 도움을 준다.이 기능은 관련 cli 프로젝트를 가져온다면 바로 사용할 수 있다. 이 글에서는 핫 리로드가 ..

이 글은 vscode 에서 스니펫(snippet) 기능을 다룬다.스니펫이란 재사용 가능한 소스 코드를 의미한다.즉, 자주 쓰는 코드를 저장해두고, 필요할 때마다 별칭을 통해 불러올 수 있다.공식 문서 - https://code.visualstudio.com/docs/editor/userdefinedsnippets 예를 들어 상당히 자주 쓰지만, 매번 타이핑 하기가 귀찮다.그래서 코드 패턴을 저장해놨다가, 매번 단어를 통해 불러오면 개발 환경에 있어, 많은 도움을 준다. 크게 직접 스니펫 코드를 만들 수도 있고, 플러그인을 통해 만들 수도 있다.플러그인을 통해 쉽게 만들고, 그것을 쉽게 커스텀하는 것이 효율적이다. 본인은 띄어쓰기 등 조금 번거로울 수 있기 때문에 위와 같은 코드를 만들어주는 플러그인을 이..

이 글은 백준 알고리즘 문제 11559번 "Puyo Puyo" 를 풀이한다.시뮬레이션 문제로써, 시나리오를 정확히 이해한 후 그대로 구현하면 된다.본인은 그 과정속에 DFS를 통해 해결했다.문제 링크 - https://www.acmicpc.net/problem/11559 뿌요뿌요의 룰은 다음과 같다.필드에 여러 가지 색깔의 뿌요를 놓는다. 뿌요는 중력의 영향을 받아 아래에 바닥이나 다른 뿌요가 나올 때까지 아래로 떨어진다.뿌요를 놓고 난 후, 같은 색 뿌요가 4개 이상 상하좌우로 연결되어 있으면 연결된 같은 색 뿌요들이 한꺼번에 없어진다.뿌요들이 없어지고 나서 위에 다른 뿌요들이 있다면, 역시 중력의 영향을 받아 차례대로 아래로 떨어지게 된다.아래로 떨어지고 나서 다시 같은 색의 뿌요들이 4개 이상 모이..

이 글은 Vue.js 기능 중 하나인 믹스인(Mixin) 을 다룬다.뷰를 사용하고 있더라도 생소할 수 있지만 유용한 기능이고, 알게 된다면 사용할 수 밖에 없을 것이다.공식 문서 - https://kr.vuejs.org/v2/guide/mixins.html참고 링크 - https://css-tricks.com/using-mixins-vue-js/ 뷰는 독립적인 단위인 컴포넌트를 통해 구현된다.하나의 상황으로 비슷한 2개의 컴포넌트를 가지고 있다고 가정해본다.같은 기능을 가지고 있지만, 확실히 서로 다른 컴포넌트이다. 이러한 경우 2가지 방법을 생각해볼 수 있다. 1개의 컴포넌트로 만들고 props 를 이용해 구분한다.기존대로 2개의 컴포넌트로 분리한다. 2가지 방법 모두 퍼펙트 하지않다.1개의 컴포넌트 ..

이 글은 싱글톤 패턴(Singleton Pattern) 에 대해 다룬다.디자인 패턴 중 가장 기본적이고 쉬운 패턴이다.싱글톤 패턴에 대한 편중된 글이 아닌 전체적인 모습을 다뤄본다.위키 - https://en.wikipedia.org/wiki/Singleton_pattern 제목과 같이 "싱글톤 패턴에 대한 우려"에 대한 글이다.본인의 경우에는 "싱글톤 패턴은 사용하지 않는 것이 좋다" 에 대한 입장이다.먼저 무엇인지부터 천천히 보면서 근거들을 확인해보자. 싱글톤(Singleton) 패턴은 무엇인가? 싱글톤 패턴은 한번쯤은 사용해봤거나 현재도 사용하고 있을 것이다.실제 프로젝트에서도 사용하는 정도로 많이 알려진 패턴이다. 클래스의 객체를 하나로 제한한다.즉, 생성자를 여러번 호출한다하더라도 최초로 생성된..

이 글은 팩토리 메소드 패턴(Factory Method Pattern) 을 다룬다.디자인 패턴 중 하나로써, 특히 Java 에서 많이 사용하는 패턴 중 하나이다.Java 에서는 abstract 를 지원하기 때문에 abstract 를 활용한다.그렇기에 이 글에서는 interface 와 abstract 가 동일한 역할을 한다고 가정한다.사전 지식으로 interface, abstract 의 개념을 이해하길 바란다.interface, abstract - http://mygumi.tistory.com/257 팩토리 메소드 패턴을 보기에 앞서 팩토리라는 용어가 낯설지 않을 것이라 생각한다.오픈 소스나 누군가의 코드에서 이름으로 Factory 를 붙이는 것을 접해봤을 것이다. *Factory.get*()ex) Pro..

이 글은 백준 알고리즘 문제 5623번 "수열의 합" 을 풀이한다.방법으로는 수학을 이용한 풀이가 된다.문제 링크 - https://www.acmicpc.net/problem/5623 양의 정수 N개로 이루어진 수열 A가 있다. 상근이는 수열 A의 모든 두 수의 합을 알고 있다. 이 때, 수열 A를 구하는 프로그램을 작성하시오. 다음 N개 줄에는 100,000보다 작거나 같은 양의 정수가 N개씩 주어진다. 이 숫자들은 S를 이루는 숫자이며, S(i,j) = A[i] + A[j] (i≠j), S(i,j) = 0 (i=j) 이다. S(i,j)는 i번째 줄, j번째 숫자를 의미하며, A[i]는 A의 i번째 수이다. S(i,j) = A[i] + B[j] 이 부분만 이해하면 쉽게 문제를 해결 할 수 있다. 4 0..

이 글은 Vue.js 에서 제공하는 요소에 대해 다룬다.크게 Slots, Named Slots, Scoped Slot 기능을 위한 예제를 통해 진행한다.관련 문서 - https://kr.vuejs.org/v2/guide/components.html#슬롯을-사용한-컨텐츠-배포참고 링크 - https://skyronic.com/blog/vue-slots-example최종 예제 - https://codesandbox.io/s/y0z5ql69112019/4/22 업데이트 수정 SlotsNamed SlotsScoped Slot 뷰를 접했다면 아마 슬롯에 대한 문서를 이미 읽었을 것이다.본인은 문서를 통해 슬롯을 이해했을 때, 어렵지 않게 이해할 수 있다.하지만 왜 쓰는거지? 확 와닿지 않았다. 다음 의미를 이해한..