이번 포스팅에서는 데이터의 개수를 셀 때 매우 유용한 파이썬의 collections 모듈의 Counter 클래스에 대해서 알아보겠습니다. Counter 기본 사용법 collections 모듈의 Counter 클래스는 별도 패키지 설치 없이 파이썬만 설치되어 있다면 다음과 같이 임포트해서 바로 사용할 수 있습니다. Counter 생성자는 여러 형태의 데이터를 인자로 받는데요. 먼저 중복된 데이터가 저장된 배열을 인자로 넘기면 각 원소가 몇 번씩 나오는지가 저장된 객체를 얻게 됩니다. Counter 생성자에 문자열을 인자로 넘기면 각
올인원(All-in-one) 테스팅 프레임워크 Jest를 사용하면 다른 라이브러리 설치 없이 바로 소위 mocking 기능을 쓸 수 있는데요. 그런데 여기서 mocking을 한국어로 뭐라고 번역해야 모르겠네요. 😅 주변에서 보면 “모킹”으로 그냥 영어를 차용해서 쓰고 있는 것 같습니다. mocking 이란? 먼저 mocking이 생소하신 분들을 위해서 mocking 대한 기본 개념부터 잡고 들어가는 게 좋을 것 같습니다. mocking은 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜(mock)로 대체하는 기법을 말하
리액트 앱을 개발하다보면 모든 컴포넌트에 어떤 값을 props으로 넘기고 싶은 데이터가 필요할 때가 있습니다. 다시 말해, 어떤 컴포넌트 트리 내에서 최상위 컴포넌트 부터 최말단 컴포넌트에 걸쳐 전역(global)으로 관리해야 할 데이터가 필요한 상황이 되겠네요. 이번 포스팅에서는 React Context를 활용하여 리액트 앱에서 전역 데이터를 관리하는 방법에 대해서 알아보도록 하겠습니다. React Context 없이 개발하기 먼저 React Context 없이 props만을 이용해서 어떻게 전역 데이터를 여러 컴포넌트에 걸쳐서
파이썬의 내장 자료구조인 사전(dictionary)를 사용하다 보면 어떤 키(key)에 대한 값(value)이 없는 경우에 대한 처리를 해야 할 때가 많죠? 이번 포스팅에서는 이러한 경우 일반적으로 어떻게 처리하는지 살펴보고, 관련해서 파이썬에서 제공하는 몇 가지 접근법에 대해서 알아보도록 하겠습니다. 일반적인 사전 기본값 처리 그럼 파이썬에서 사전을 다룰 때 어떤 경우에 기본값 처리가 필요한지 간단한 실습을 통해 알아보겠습니다. 단어가 주어졌을 때 각 알파벳에 대한 글자의 수를 세어서 사전에 저장해주는 함수를 작성해볼께요. 그럼
이번 포스팅에서는 Apollo Server를 이용하여 매우 간단하게 GraphQL 서버를 개발해보도록 하겠습니다. 기존에 GraphQL 서버를 한 번도 개발해보신 적인 없으신 분들께 도움이 되었으면 합니다. 프로젝트 생성 원하는 디렉터리(ex. my-server)에 index.js 파일을 생성합니다. 그리고 NPN 초기화 명령어를 실행하면 package.json 파일이 생성됩니다. 패키지 설치 Apollo Server를 사용하기 위해서 패키지 두개를 설치합니다. 참고로 apollo-server는 Apollo에서 제공하는 패키지이며,
테스트를 작성하다보면 모든 테스트 함수에서 공통적으로 필요한 공통 로직이 필요할 때가 있습니다. 이번 포스팅에서는 Jest를 이용해서 이렇게 테스트 전이나 후에 항상 실행되야 하는 코드를 작성하는 방법에 대해서 알아보겠습니다. 테스트 대상 코드 데이터베이스에 접근하는 코드에 대한 테스트를 작성한다는 가정 하에, 다음과 같이 간단한 예제 코드를 작성해보겠습니다. 임의의 데이터베이스 역할을 하는 모듈로서 사용자 데이터를 저장하기 위한 users 배열을 가지고 있습니다. data 모듈에 저장되어 있는 users 배열에 사용자 데이터를 조
지난 포스팅에서 Jest로 기본적인 테스트 코드 작성하는 방법에 대해서 알아보았습니다. 자바스크립트 언어 특상 상 실제 프로젝트에서는 비동기(Asynchronous)로 돌아가는 코드를 테스트해야 할 일이 많은데요. Jest Runner가 비동기 코드에 대한 테스트라는 사실을 인지할 수 있도록 테스트를 작성해주지 않으면 예상치 못했던 테스트 결과에 당황할 수가 있습니다. 이번 포스팅에서는 이러한 비동기 코드에 대한 테스트를 작성할 때 흔히 하는 실수들과 적절한 대응 방법에 대해서 알아보겠습니다. 콜백 함수 테스트 먼저 콜백 함수를 이
Node.js로 웹 서버를 만들어야 한다면 가장 먼저 떠오르는 이름이 바로 Express일 겁니다. 2010년에 처음 등장한 이후로 지금까지 Node.js 생태계에서 압도적인 점유율을 자랑하고 있는 웹 프레임워크인데요. Express는 "최소한의 기능만 제공하되, 필요한 것은 직접 골라 쓰자"라는 철학을 바탕으로 설계되어서, 가벼우면서도 유연한 서버를 구축할 수 있습니다. 이번 포스팅에서는 Express를 처음 접하는 분들을 위해 프로젝트 셋업부터 라우팅, 미들웨어, 요청/응답 처리까지 핵심적인 사용법을 차근차근 알아보겠습니다. E
Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들에게 사랑받고 있는 테스팅 라이브러리입니다. 출시 초기에는 프론트엔드에서 주로 쓰였지만 최근에는 백엔드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있습니다. Jest: All-in-one 테스팅 라이브러리 페이스북에서는 Jest를 단순한 테스팅 라이브러리가 아닌 "테스팅 프레임워크"라고 부르는 만큼 기존 자바스크립트 테스팅 라이브러리와는 차별점이 있습니다. Jest 이전에는 자바스크립트 코드를 테스트하라면 여러 가지 테스팅 라이브러리를 조합해서
파이썬에서 힙(heap)이나 우선순위 큐(PriorityQueue)를 사용하다 보면 다음과 같은 에러를 만날 수 있습니다. 이번 포스팅에서는 위 에러를 해결하는 방법에 대해서 알아보록 하겠습니다. 객체 정렬 기준 힙과 우선순위 내부적으로 이진 트리를 이용해서 데이터를 정렫된 상태로 유지하고 있습니다. 그런데 이 정렬이라는 게 가능하려면 원소 간의 대소 비교가 가능해야합니다. 예를 들어, 숫자나 문자와 같은 기본형 데이터는 대소 비교가 간단합니다. 1보다 2가 크고, a보다 b가 크다는 것은 일반적으로 알려진 사실이기 때문에 자료구조
반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em과 rem라고 불리는 CSS 단위를 이용해서 스타일링이 되고 있습니다. 이번 포스팅에서는 em과 rem 단위가 실제로 브라우저에서 어떻게 동작하는지 정확히 알고 좀 더 적재적소에 사용하는 방법에 대해서 알아보도록 하겠습니다. 상대 단위란? 상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. 본 포스팅에서 다룰 em과 rem을 포함해 %, vw, vh 등이 대표적인 CSS의 상대 단위입니다. 반면 절대(absolu
데이터를 정렬된 상태로 저장하기 위해서 사용하는 파이썬의 PriorityQueue(우선순위 큐)에 대해서 알아보겠습니다. 우선순위 큐 자료구조 우선순위 큐는 데이터를 추가한 순서대로 제거하는 선입선출(FIFO) 특성을 가진 일반적인 큐의 자료구조와 달리, 데이터 추가는 어떤 순서로 해도 상관이 없지만, 제거될 때는 가장 작은 값을 제거하는 독특한 특성을 지닌 자료구조입니다. 이 말은 내부적으로 데이터를 정렬된 상태로 보관하는 메커니즘이 있다는 뜻이고, 좀 더 구체적으로 얘기하면 heapq 모듈을 통해 구현되어 있습니다. 파이썬의 h
데이터를 정렬된 상태로 저장하기 위해서 사용하는 파이썬의 heapq(힙큐) 내장 모듈에 대해서 알아보겠습니다. 힙 자료구조 heapq 모듈은 이진 트리(binary tree) 기반의 최소 힙(min heap) 자료구조를 제공합니다. 자바에 익숙하신 분이라면 PriorityQueue 클래스를 생각하시면 이해가 쉬우실 것 같습니다. min heap을 사용하면 원소들이 항상 정렬된 상태로 추가되고 삭제되며, min heap에서 가장 작은값은 언제나 인덱스 0, 즉, 이진 트리의 루트에 위치합니다. 내부적으로 min heap 내의 모든 원
이전 두 개의 포스팅를 통해서 기존에 자바스크립트로 어떻게 비동기 처리 코드를 작성해왔는지에 대해서 살펴보았습니다. 이번 포스팅에서는 좀 더 개선된 방식으로 비동기 처리를 할 수있도록 도와주는 async/await에 대해서 알아보도록 하겠습니다. async/await를 제대로 시용하려면 Callback과 Promise에 대한 이해가 무엇보다 중요하오니 아래 포스팅도 참고 바라겠습니다. [자바스크립트] 비동기 처리 1부 - Callback [자바스크립트] 비동기 처리 2부 - Promise Promise를 통한 비동기 코딩 먼저 Pr
많은 분들이 자바스크립트 공부를 하시다가 프라미스(Promise)에 때문에 그만 두시곤 합니다. 이번 포스팅에서는 자바스크립트에서 비동기 처리를 위해 굉범위하게 사용되는 Promise에 대해서 알아보겠습니다. 콜백 함수를 통한 비동기 처리의 문제점 ES6에서 Promise가 도입되어 지금처럼 널리 사용되기 이전에는 주로 콜백 함수를 다른 함수의 인자로 넘겨서 비동기 처리를 코딩을 했었습니다. 예를 들어, 다음 코드를 보시면 findUserAndCallBack() 함수를 호출할 때, 두번째 인자로 콜백 함수가 넘어갑니다. 그리고 fi
자바스크립트의 콜백 함수와 비동기 함수애 대해서 혼란스러워 하시는 분들이 주변에 많은 것 같아서 개념 정리를 해보고자 합니다. 이번 포스팅에서는 실제 프로젝트에서 자주 접할 수 있는 유저 데이터 조회 시나리오를 통해 콜백 함수를 이용한 비동기 처리에 대해서 알아보겠습니다. 콜백 함수 유저 ID를 인자로 받아 DB나 API 연동 없이 임의의 유저 객체를 리턴하는 findUser()라는 함수를 작성해보겠습니다. 결과 위와 같이 우리가 흔히 생각하는 일반적인 함수란 입력(파라미터)이 있고 출력(리턴값)이 있습니다. 하지만 자바스크립트에서
자바와 같이 객체 지향 언어를 사용하여 프로그래밍을 하다보면 객체들을 정렬해야하는 경우가 생깁니다. 예를 들면, 온라인 게임 서비스에서 게이머들을 높은 점수 순으로 보여주는 게이머 랭킹 페이지를 생각해볼 수 있겠습니다. 정렬 대상 클래스 먼저, 각 게이머의 정보를 표현하기 위해 다음과 같은 간단한 클래스를 생각해보겠습니다. 그리고 5 명의 게이머가 담고 있는 리스트를 생성하였습니다. 자, 이제 이 게이머 리스트를 점수 기준으로 어떻게 정렬할 수 있을까요? Chloe 가 일등이기 때문에 리스트의 맨 앞으로 나와야하고, Alice 는
자바에서 최소나 최대 원소를 찾을 흔히 사용되는 3가지 코딩 스타일에 대해서 알아보겠습니다. Loop 제일 먼저 반복문을 통해 각 원소에 하나씩 접근해서 최대값을 구하는 다음과 같은 고전적인 코드를 생각해볼 수 있습니다. 반복문(for)을 이용해서 지속적으로 변수(max)에 새로운 값을 할당하는 방식이 전형적인 명령형 프로그래밍(Imperative programming) 스타일을 따르고 있습니다. 많은 프로그래머들에게 가장 익숙한 방법이지만, 고수준의 비지니스 로직 중간에 이러한 저수준의 코드가 들어가게 되면 가독성에 나쁜 영향을
웹페이지 상의 모든 엘리먼트는 하나의 박스의 개념으로 모델링 할 수 있습니다. 이 박스 모델이라고 불리는 컨셉은 CSS의 근간이 되기 때문에 반드시 이해하고 있어야 합니다. Box Model 이란? 우리가 웹페이지에 배치하는 모든 HTML 엘리먼트는 3개의 층을 가진 사각형 구조의 형태를 띠고 있습니다. 가장 외곽의 층을 margin 영역이라고 부르는데, 보통 주변에 위치한 다른 엘리먼트와의 상하좌우 간격을 두기 위해서 쓰입니다. 그 바로 아래 층을 border 영역이라고 부르는데, 경계선을 그리기 위해서 쓰이며, margin과 p
CSS의 display 속성에서 inline과 block의 차이를 정확히 알고 사용하고 계신가요? 😄 이 둘을 합쳐놓은 inline-block이라는 녀석은 또 뭘까요? 😅 이번 포스팅에서는 display 속성에서 가장 근간이되지만 은근히 많은 분들이 헷갈려하시는 inline과 block 그리고 inline-block에 대해서 알아보도록 하겠습니다. inline display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 <span>이나 <