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

이 글은 Github Pages 에 대해 다뤄본다.중심 주제는 Github Pages에 vue-cli 프로젝트를 적용한다.하지만 전체적인 내용과 연결되어있기 때문에, Github Pages 를 사용하는 법을 숙지할 수 있다. 중심 주제에 앞서, Github Pages 는 무엇인지부터 알아보자. Github Pages 란 무엇인가? Github Pages 는 Github 저장소의 내용을 웹페이지로 만들어 주는 서비스이다.Github 저장소의 내용을 직접 웹페이지를 통해서 보여줄 수 있다는 것이다.간단하게 말하자면, 무료로 웹 서버를 구축할 수 있다.아래와 같은 URL 형태를 경험해봤을 것이다. https://username.github.io 대표적인 사용 사례는 블로그로 이용된다.즉, 티스토리, 워드프레스..

이 글은 백준 알고리즘 문제 1074번 "Z" 을 풀이한다.풀이 방법으 말하자면, 분할 정복 알고리즘이다.분할 정복이란, 문제를 작은 부분으로 쪼개어 해결하는 방식이다.문제 링크 - https://www.acmicpc.net/problem/1074 한수는 2차원 배열 (항상 2^N * 2^N 크기이다)을 Z모양으로 탐색하려고 한다. 예를 들어, 2*2배열을 왼쪽 위칸, 오른쪽 위칸, 왼쪽 아래칸, 오른쪽 아래칸 순서대로 방문하면 Z모양이다.만약, 2차원 배열의 크기가 2^N * 2^N라서 왼쪽 위에 있는 칸이 하나가 아니라면, 배열을 4등분 한 후에 (크기가 같은 2^(N-1)로) 재귀적으로 순서대로 방문한다.다음 예는 2^2 * 2^2 크기의 배열을 방문한 순서이다.N이 주어졌을 때, (r, c)를 몇..

이 글은 이미지 파일 포맷 방식인 PNG 와 SVG를 비교하면서 SVG 를 알아가는 글이 된다.개발 시 이미지 파일은 대부분 .png를 사용하고 있어, .svg 를 모르는 경우도 많이 존재한다.모르더라도 크게 도움이 될 것이니 읽어보길 바란다.참고 링크 - https://stackoverflow.com/questions/24433640/svg-icons-vs-png-icons-in-modern-web-sitessvg 응용 - https://codepen.io/collection/DKaZba/ 먼저 기본적인 이해를 위해 무엇인지 알아보자.PNG 와 SVG 의 가장 큰 차이점은 이미지를 구성하는 방식이다.PNG 는 화소(pixel) 단위로 구성되는 형태로써, 비트맵 방식이라고 불린다.SVG 는 수학을 기반으..

이 글은 data URL 과 Image file 을 비교하는 글이 된다.data URL에 집중했다는 점을 참고바란다.이전에 작성된 메모리 캐시와 디스크 캐시에 대한 글을 보고 오면 좋다.메모리 캐시 vs 디스크 캐시 - http://mygumi.tistory.com/275* 2018.05.01 수정 이미지를 화면에 표시하는 방법에는 크게 2가지가 있다.data url 형태와 일반적인 image file 이다. // data url // image file data URL 방식의 가장 장점은 다음과 같다. 스프라이트 이미지처럼 HTTP 요청을 절약할 수 있다.HTML 파일로 관리할 수 있다. 알려진 단점은 다음과 같다. 캐시되지 않아 매번 불러와야한다.기존 파일보다 용량이 30% 커진다.일부 브라우저에서 ..

이 글은 문서의 로드 시점에 관련된 이벤트들을 다뤄본다.문서 로드 시점에 관련하여 onload 또는 jQuery 의 ready 를 접해봤을 것이다.로드 시점에 관련된 이벤트들을 통해 관련된 의문점들을 해결해본다.참고 링크 - http://javascript.info/onload-ondomcontentloaded 페이지 라이프사이클은 크게 3가지로 분류된다.로드 시점과 관련된 이벤트로써, 발생하는 시점은 다음과 같다. DOMContentLoaded - HTML 이 모두 로드되고, DOM 트리가 완성되었지만, 외부 리소스(img etc) 가 아직 로드되어지지 않았을 때load - 브라우저에 모든 리소스(img, style, script, etc) 가 로드되었을 때beforeunload / unload - 페..

이 글은 Sequelize.js 을 다루지만, 튜토리얼은 아니다.중심 주제는 ES6의 class 키워드를 활용한 모델 정의에 대한 문법을 다루는 것이다.sequelize 의 기본적인 내용을 다루지만, 자세히 다루지 않는다.관련 코드 - https://github.com/hotehrud/sequelize-class참고 링크 - https://github.com/sequelize/sequelize/issues/6524 본인이 이 글을 쓰게 된 동기는 다음과 같다.본인은 ES6의 class 키워드 도입 후부터 class 중심으로 코드를 짜고 있다.그래서 sequelize 관련 코드 또한 class 키워드를 사용하고 싶었다. 먼저 간단히 sequlize 에 대해 살펴보자. Sequelize.js 는 무엇인가? ..

이 글은 백준 알고리즘 문제 2529번 "부등호" 를 풀이한다.정올 초등부에서 출제된 문제이다.본인은 백트래킹을 활용해서 문제를 해결했다.문제 링크 - https://www.acmicpc.net/problem/2529 두 종류의 부등호 기호 ‘’가 k개 나열된 순서열 A가 있다. 우리는 이 부등호 기호 앞뒤에 서로 다른 한 자릿수 숫자를 넣어서 모든 부등호 관계를 만족시키려고 한다. 예를 들어, 제시된 부등호 순서열 A가 다음과 같다고 하자. A => 부등호 기호 앞뒤에 넣을 수 있는 숫자는 0부터 9까지의 정수이며 선택된 숫자는 모두 달라야 한다. 아래는 부등호 순서열 A를 만족시키는 한 예이다. 3 1 7 0이 상황에..

이 글은 백준 알고리즘 문제 2744번 "참외밭" 풀이한다.정올 초등부, 중등부 문제에 출제된 문제이다.풀이는 수학적 사고를 요구하는 문제가 된다.문제 링크 - https://www.acmicpc.net/problem/2477 1m^2의 넓이에 자라는 참외의 개수는 헤아렸고, 이제 참외밭의 넓이만 구하면 된다. 참외밭은 ㄱ-자 모양이거나 ㄱ-자를 90도, 180도, 270도 회전한 모양(┏, ┗, ┛ 모양)의 육각형이다. 다행히도 밭의 경계(육각형의 변)는 모두 동서 방향이거나 남북 방향이었다. 밭의 한 모퉁이에서 출발하여 밭의 둘레를 돌면서 밭경계 길이를 모두 측정하였다.예를 들어 참외밭이 위 그림과 같은 모양이라고 하자. 그림에서 오른쪽은 동쪽, 왼쪽은 서쪽, 아래쪽은 남쪽, 위쪽은 북쪽이다. 이 그..