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

이 글은 이미지를 미리 로딩하는 법에 대해 다룬다.흔히 이미지 프리로딩(Image Preloading) 이라고 불린다.참고 - https://www.photo-mark.com/notes/image-preloading/ 웹 사이트에는 많은 이미지가 존재한다.특히 갤러리 관련 페이지에는 더욱 많을 것이다.많은 자원을 통해 웹 페이지는 무거워질 수 밖에 없다.그에 대한 해결책으로 현재는 이미지의 크기, 질 등을 최소화하는 작업이 존재한다. 다른 방법 중에는 preloading 이 존재한다.용어 그대로 이미지를 미리 로딩해놓는다는 의미가 된다.즉, preloading 은 미리 로딩하고 캐시로 가져오게 하는 방식이다. preloading 을 구현하는 방법은 여러가지가 존재한다.자바스크립트를 활용한 대표적인 방법은..

이 글은 백준 알고리즘 문제 7570번 "줄 세우기" 를 풀이한다.정올 초등부, 중등부에서 출제된 문제이다.동적계획법과 구현을 통한 2가지 풀이를 다뤄본다.문제 링크 - https://www.acmicpc.net/problem/7570 예를 들어, 5명의 어린이들에게 1부터 5까지의 번호가 주어져 있고, 다음과 같은 순서로 줄서 있다고 하자. 5 2 4 1 3위 방법을 이용해서 다음과 같이 번호순서대로 줄을 세울 수 있다. (1) 1번 어린이를 제일 앞으로 보낸다. (5 2 4 1 3 → 1 5 2 4 3)(2) 4번 어린이를 제일 뒤로 보낸다. (1 5 2 4 3 → 1 5 2 3 4)(3) 5번 어린이를 제일 뒤로 보낸다. (1 5 2 3 4 → 1 2 3 4 5)위의 예에서는 세 명의 어린이를 제일..

이 글은 메모리 캐시와 디스크 캐시에 대해 다룬다.(2018.01.07 수정)웹 개발 시 캐시에는 크게 2가지로 나눌 수 있다.클라이언트 측 또는 서버측을 활용한 캐시 사용이다.서버를 통한 캐시 활용은 예로 CDN 서버를 들 수 있고, 클라이언트는 브라우저 캐시이다.여기서는 브라우저 캐시를 다뤄본다.브라우저 캐시는 크게 메모리 캐시와 디스크 캐시로 나뉜다. (크롬 기준)참고 - http://d2.naver.com/helloworld/1059747 개발자 도구를 통해 다음과 같은 모습을 볼 수 있다. Size 항목에서 from memory cache와 from disk cache 를 볼 수 있다.또한 Size 항목에 따른 Time 항목에서도 많이 차이가 난다는 것을 볼 수 있다.캐시를 통해 가져온다는 것은..

이 글은 OSI(Open Systems Interconnection Reference Model) 7 계층 모델을 다룬다.네트워크 관련 수업이나 기술을 접해야 할때, 우선적으로 나타나는 용어이다.그만큼 네트워크의 시작이라고 봐도 무방하다.각 계층이 하는 기능에 대해 자세한 것들은 많은 글들에서 볼 수 있다.그렇기에 본인은 세부적인 개념들은 생략하고, 이해를 돕기 위한 글을 작성했다. OSI 7계층은 국제표준기구(ISO) 에서 개발한 모델이다.용어의 해석대로 개방형 시스템 상호연결을 위한 모델이라는 것을 알 수 있다. 어떠한 것이든 호환과 관리를 위해 규약과 같은 서로간의 약속이 필요하다.이렇듯 네트워크 통신에서도 마찬가지다. 만약 서로 다른 업체의 장비를 통신한다고 생각해보자.서로 다른 구조 및 개발 방..

이 글은 백준 알고리즘 문제 10800번 "컬러볼" 을 풀이한다. 정올 초등부, 고등부에서 출제된 적이 있다. 본인의 푼 방식은 다른 풀이보다 속도면에서는 떨어진다. 문제 링크 - https://www.acmicpc.net/problem/10800 2019.10.10 수정 완료 지훈이가 최근에 즐기는 컴퓨터 게임이 있다. 이 게임은 여러 플레이어가 참여하며, 각 플레이어는 특정한 색과 크기를 가진 자기 공 하나를 조종하여 게임에 참여한다. 각 플레이어의 목표는 자기 공보다 크기가 작고 색이 다른 공을 사로잡아 그 공의 크기만큼의 점수를 얻는 것이다. 그리고 다른 공을 사로잡은 이후에도 본인의 공의 색과 크기는 변하지 않는다. 다음 예제는 네 개의 공이 있다. 편의상 색은 숫자로 표현한다. 공 번호색크기 ..

이 글은 백준 알고리즘 문제 2890번 "도로와 신호등" 을 풀이한다.시뮬레이션 문제로써, 시나리오를 정확히 이해한 후 그대로 구현하면 된다.문제 링크 - https://www.acmicpc.net/problem/2980 상근이는 트럭을 가지고 긴 일직선 도로를 운전하고 있다. 도로에는 신호등이 설치되어 있다. 상근이는 각 신호등에 대해서 빨간 불이 지속되는 시간과 초록 불이 지속되는 시간을 미리 구해왔다. (빨강색과 초록색 불빛은 무한히 반복된다)상근이의 트럭이 도로에 진입했을 때, 모든 신호등의 색상은 빨간색이고, 사이클이 막 시작한 상태이다. 상근이는 1초에 1미터를 움직인다. 신호등의 색상이 빨간색인 경우에는 그 자리에서 멈추고 초록색으로 바뀔때 까지 기다린다.상근이가 도로의 끝까지 이동하는데 걸..

이 글은 백준 알고리즘 문제 2512번 "예산" 을 풀이한다.시뮬레이션 문제로써, 시나리오를 정확히 이해한 후, 그대로 구현하면 된다.문제 링크 - https://www.acmicpc.net/problem/2512 국가의 역할 중 하나는 여러 지방의 예산요청을 심사하여 국가의 예산을 분배하는 것이다. 국가예산의 총액은 미리 정해져 있어서 모든 예산요청을 배정해 주기는 어려울 수도 있다. 그래서 정해진 총액 이하에서 가능한 한 최대의 총 예산을 다음과 같은 방법으로 배정한다.모든 요청이 배정될 수 있는 경우에는 요청한 금액을 그대로 배정한다.모든 요청이 배정될 수 없는 경우에는 특정한 정수 상한액을 계산하여 그 이상인 예산요청에는 모두 상한액을 배정한다. 상한액 이하의 예산요청에 대해서는 요청한 금액을 그..

이 글은 Velocity.js 을 통해 스프라이트 이미지를 조작해본다.Velocity.js 는 애니메이션을 보다 쉽게 구현하고, 빠른 성능을 낼 수 있는 라이브러리다.Velocity.js 의 기본적인 사용법을 알리기 위해 만든 예제이다.Velocity.js 사용 예제 - https://codepen.io/mygumi/pen/baGVRWVue.js 버전 예제 - https://codesandbox.io/s/vj2ymr9p2y공식 사이트 - http://velocityjs.org/ Velocity.js 는 무엇인가? jQuery의 $.animate() 와 동일한 API를 사용하는 애니메이션 엔진이다.jQuery와 함께 사용할 수도 있지만, 독립적으로 사용할 수도 있다. 오래 전부터 $.animate() 와 ..