아카이브: 2018

CSS 상대 단위 - em과 rem

반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em과 rem라고 불리는 CSS 단위를 이용해서 스타일링이 되고 있습니다.이번 포스트에서는 em과 rem 단위가 실제로 브라우저에서 어떻게 동작하는지 정확히 알고 좀 더 적재적소에 사용하는 방법에 대해서 알아보도록 하겠습니다. 상대 단위란?상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유

[파이썬] PriorityQueue(우선순위 큐) 사용법

데이터를 정렬된 상태로 저장하기 위해서 사용하는 파이썬의 PriorityQueue(우선순위 큐)에 대해서 알아보겠습니다. 우선순위 큐 자료구조우선순위 큐는 데이터를 추가한 순서대로 제거하는 선입선출(FIFO) 특성을 가진 일반적인 큐의 자료구조와 달리,데이터 추가는 어떤 순서로 해도 상관이 없지만, 제거될 때는 가장 작은 값을 제거하는 독특한 특성을 지닌

[파이썬] heapq 모듈 사용법

데이터를 정렬된 상태로 저장하기 위해서 사용하는 파이썬의 heapq(힙큐) 내장 모듈에 대해서 알아보겠습니다. 힙 자료구조heapq 모듈은 이진 트리(binary tree) 기반의 최소 힙(min heap) 자료구조를 제공합니다.자바에 익숙하신 분이라면 PriorityQueue 클래스를 생각하시면 이해가 쉬우실 것 같습니다. min heap을 사용하면 원소

[자바스크립트] 비동기 처리 3부 - async/await

이전 두 개의 포스트를 통해서 기존에 자바스크립트로 어떻게 비동기 처리 코드를 작성해왔는지에 대해서 살펴보았습니다.이번 포스트에서는 좀 더 개선된 방식으로 비동기 처리를 할 수있도록 도와주는 async/await에 대해서 알아보도록 하겠습니다.async/await를 제대로 시용하려면 Callback과 Promise에 대한 이해가 무엇보다 중요하오니 아래 포

[자바스크립트] 비동기 처리 2부 - Promise

많은 분들이 자바스크립트 공부를 하시다가 프라미스(Promise)에 때문에 그만 두시곤 합니다.이번 포스트에서는 자바스크립트에서 비동기 처리를 위해 굉범위하게 사용되는 Promise에 대해서 알아보겠습니다. 콜백 함수를 통한 비동기 처리의 문제점ES6에서 Promise가 도입되어 지금처럼 널리 사용되기 이전에는 주로 콜백 함수를 다른 함수의 인자로 넘겨서

[자바스크립트] 비동기 처리 1부 - Callback

자바스크립트의 콜백 함수와 비동기 함수애 대해서 혼란스러워 하시는 분들이 주변에 많은 것 같아서 개념 정리를 해보고자 합니다.이번 포스트에서는 실제 프로젝트에서 자주 접할 수 있는 유저 데이터 조회 시나리오를 통해 콜백 함수를 이용한 비동기 처리에 대해서 알아보겠습니다. 콜백 함수유저 ID를 인자로 받아 DB나 API 연동 없이 임의의 유저 객체를 리턴하는

[Java] 객체 정렬하기 1부 - Comparable vs Comparator

자바와 같이 객체 지향 언어를 사용하여 프로그래밍을 하다보면 객체들을 정렬해야하는 경우가 생깁니다.예를 들면, 온라인 게임 서비스에서 게이머들을 높은 점수 순으로 보여주는 게이머 랭킹 페이지를 생각해볼 수 있겠습니다. 정렬 대상 클래스먼저, 각 게이머의 정보를 표현하기 위해 다음과 같은 간단한 클래스를 생각해보겠습니다. 1234567891011public

[Java] 객체 정렬하기 1부 - Comparable vs Comparator

자바와 같이 객체 지향 언어를 사용하여 프로그래밍을 하다보면 객체들을 정렬해야하는 경우가 생깁니다.예를 들면, 온라인 게임 서비스에서 게이머들을 높은 점수 순으로 보여주는 게이머 랭킹 페이지를 생각해볼 수 있겠습니다. 정렬 대상 클래스먼저, 각 게이머의 정보를 표현하기 위해 다음과 같은 간단한 클래스를 생각해보겠습니다. 1234567891011public

[Java] 최소/최대 원소 구하기 (Loop/Collections/Stream)

자바에서 최소나 최대 원소를 찾을 흔히 사용되는 3가지 코딩 스타일에 대해서 알아보겠습니다. Loop제일 먼저 반복문을 통해 각 원소에 하나씩 접근해서 최대값을 구하는 다음과 같은 고전적인 코드를 생각해볼 수 있습니다. 123456789List<Integer> numbers = List.of(4, 0, 5, 2, 7, 1, 8, 6, 9, 3);

CSS 박스 모델

웹페이지 상의 모든 엘리먼트는 하나의 박스의 개념으로 모델링 할 수 있습니다.이 박스 모델이라고 불리는 컨셉은 CSS의 근간이 되기 때문에 반드시 이해하고 있어야 합니다. Box Model 이란?우리가 웹페이지에 배치하는 모든 HTML 엘리먼트는 3개의 층을 가진 사각형 구조의 형태를 띠고 있습니다. 가장 외곽의 층을 margin 영역이라고 부르는데, 보