566 posts

여러 버전의 파이썬 관리하기 (pyenv)

2020년 파이썬 2 지원 종료 파이썬 2는 2020년 1월 1일부로 공식적으로 지원이 중료되었으며, 버전 2.7 이후로는 더 이상 업데이트가 되지 않습니다. (참고: https://pythonclock.org) 하지만 Mac의 경우, 아직도 파이썬 2가 기본 실행 환경(runtime/interpreter)로 사용되고 있어서, 파이썬 3를 사용하려면 추가 설치가 필요한 실정입니다. macOS에 내장된 파이썬의 정확한 버전과 바이너리 파일의 위치는 다음과 같이 확인하실 수 있습니다. Mac에서 파이썬 3 설치 Mac의 패키지 매니저인

Storybook 소개 / 기본 사용법

Storybook이란? 스토리북(Storybook)은 한 문장으로 정의가 어려울 정도로 다양한 방식으로 사용되고 있는 UI 컴포넌트 개발 도구입니다. 단순히 회사의 UI 라이브러리를 내부 개발자들을 위해 문서화(documentation)하기 위해서 사용할 수 있고, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로도 사용할 수 있습니다. 스토리북(Storybook)을 기본 구성 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 됩니다. 각 Story는 해당

파이썬의 asyncio를 통한 비동기 프로그래밍

파이썬에서도 자바스크립트처럼 비동기로 작동하는 코드를 짤 수 있을까요? 이번 글에서는 파이썬에 내장된 asyncio 모듈을 통해 비동기 프로그래밍을 어떻게 수행하는지에 대해서 알아보겠습니다. 동시 프로그래밍의 패러다임의 변화 전통적으로 동시 프로그래밍(concurrent programming)은 여러 개의 쓰레드(thread)를 활용하여 이루어졌는데요. 하지만 쓰레드를 이용해서 직접 코딩을 해보신 분이라면 겪어보셨겠지만, thread safe한 프로그램을 작성하는 것은 생각보다 쉬운 일이 아닙니다. 게다가 싱글 코어 프로세서에서 이

구글 OpenID Connect 사용법

최근에는 아이디와 비밀번호 입력없이도 구글이나 페이스북과 같은 대형 플랫폼을 통해서 로그인 할 수 있는 서비스들을 많이 볼 수 있습니다. 이번 포스팅에서는 이렇게 사용자 인증을 다른 서비스에 위임하기 위해서 사용되는 프로토콜인 OpenID Connect에 대해서 알아보겠습니다. OpenID Connect란? 예전에는 사용자 데이터를 서비스에서 직접 관리하는 경우가 많았지만, 개인 정보가 유출되는 보안 사고가 잇달아 발생함에 따라, 요즘에는 사용자 데이터를 자체적으로 보관하는 것 자체가 부담스러운 작업이 되어가고 있습니다. 이 때문에

OAuth 2.0으로 구글 API 호출하기

검색과 지메일, 연락처, 캘린더, 드라이브, 포토, 유튜브 등 우리는 거의 매일 구글의 서비스를 이용하면서 살고 있다고 해도 과언이 아니죠? 구글은 이렇게 다양한 제품에 걸쳐서 관리되고 있는 데이터를 사용자의 허락을 받고 접근할 수 있도록 Google APIs를 제공하고 있는데요. 이번 글에서는 OAuth 2.0을 통해 사용자의 동의를 구하고 구글 API를 호출하는 방법에 대해서 알아보겠습니다. OAuth 2.0이란? 먼저 OAuth 2.0이 생소하신 분을 위해서, 과연 OAuth 2.0가 무엇인지 간단하게 개념부터 짚고 가겠습니다

파이썬의 time 모듈로 시간 데이터 다루기

간단한 시간 데이터를 처리하기 위해서 사용되는 파이썬의 내장 모듈인 time에 대해서 알아보도록 하겠습니다. Epoch Time 파이썬의 time 내장 모듈은 주로 epoch time(Unix time, POSIX time)을 다룰 때 사용합니다. epoch time은 UTC(GMT+0) 기준으로 1970년 1월 1일 0시 0분 0초부터의 경과 시간을 나타내는데 흔히 timestamp라고 불리기도 합니다. 인간이 사용하는 사용하는 날짜와 시간에는 시간대(time zone), 일광절약타임(date light saving), 윤년/윤달

파이썬의 json 모듈로 JSON 데이터 다루기

JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용되는데요. 이름이 암시하듯 JSON은 원래 자바스크립트에서 파생되었지만 현재는 프로그래밍 언어와 무관하게 거의 표준으로 자리잡아 특히 이종의 시스템 간에 원격으로 데이터를 주고 받을 때 많이 사용되고 있습니다. 이번 포스팅에서는 파이썬에서 JSON 형태의 데이터를 처리하기 위해서 사용되는 내장 모듈인 json에 대해서 알아보도록 하겠습니다. loads() 함수: JSON 문자열을 Python 객체로 변환 JSON 문자열

[파이썬] open() 함수를 이용한 파일 입출력

파이썬에서는 내장 함수인 open()을 이용해서 다른 언어에 비해서 매우 간단하게 파일 입출력 처리를 할 수 있습니다. 파일에 데이터 쓰기 먼저 파일에 데이터를 쓰는 방법에 대해서 알아보겠습니다. 아래 colors 배열에 들어있는 문자열 3개를 colors.dat 파일에 쓰려고 합니다. 파일을 열 때는 기본적으로 with 문을 통해 open() 내장 함수를 호출하는 것이 권장됩니다. with 문을 사용하지 않을 경우, 파일 닫기를 스스로 해줘야 해서 불필요하게 코드가 지저분해지기 때문입니다. open() 내장 함수는 첫번째 인자로는

패키지 잠금 파일 (package-lock.json, yarn.lock)

자바스크립트 프로젝트에서 개발을 하다 보면 이름에 lock🔒이 들어있는 package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lock와 같은 파일을 자주 접하게 되죠? 그런데 간혹 신입 개발자가 이 파일의 변경 사항을 커밋하지 않아서 팀원들에게 누가 되거나, 심지어 지웠다가 낭패를 보는 경우를 종종 볼 수 있는데요. 이번 포스팅에서는 무심코 지나치게 쉽지만 사실 매우 중요한 용도를 위해서 사용되는 패키지 잠금 파일(package locks)에 대해서 알아보도록 하겠습니다. 자바스크립트 패키지 매

[파이썬] 단위 테스트의 기본 (unittest)

어느 언어로 코딩을 하든 단위 테스트는 신뢰할 수 있는 애플리케이션을 개발하기 위해서 필수적으로 습득해야하는 기술입니다. 파이썬에서는 내장 모듈인 unittest을 통해서 다른 라이브러리 없이 비교적 간단하게 단위 테스트를 작성할 수 있습니다. unittest 모듈 unittest 모듈은 Java의 JUnit, JavaScript의 Jest 또는 Mocha와 같은 단위 테스트 프레임워크입니다. 다만 다른 언어와 달리 기본적으로 언어에 내장되어 있기 때문에 파이썬만 설치가 되어 있다면 바로 모듈을 불러와서(import) 사용할 수 있

자바스크립트 패키지 발행하기 (npm publish)

대부분의 자바스크립트 개발자들은 자신의 프로젝트에 주로 다른 패키지를 설치 후 사용하기 위해서 npm(Node Package Manager)을 사용합니다. 이것이 가능한 이유는 고맙게도 다른 개발자들이 어딘가에서 우리가 사용하는 패키지를 열심히 npm에 배포해주고 있기 때문입니다. 오늘은 한번 이러한 개발자의 입장이 되어 자신이 직접 개발한 자바스크립트 패키지를 npm에 배포하는 방법에 대해서 공부해보겠습니다. npm 저장소 npm을 사용해보신 분이라면 한 번쯤 npm 사이트에 들어가보셨을 것입니다. 보통 이미 사용하고 있는 패키지

바벨(Babel 7) 기본 사용법

개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 유용한 도구인 바벨(Babel)에 대해서 알아보겠습니다. 자바스크립트 개발자의 딜레마 자바스크립트 언어의 문법은 빠르게 진화하고 있지만, 정작 자바스크립트 코드를 실행해주는 환경은 이를 받쳐주지 못하는 경우가 많습니다. 예를 들어, 브라우저의 경우 종류가 워낙 다양해서 어떤 브라우저가 어떤 스펙을 지원하는지 일일이 파악하기가 힘들 정도이고, 노드(NodeJS)의 경우에도 버젼별로 지원하는 언어 문법이 다르기 때문에 브라우저만큼은 아니지만

Jest의 jest.mock()을 이용한 모듈 모킹

지난 포스팅에서 jest.fn()과 jest.spyOn() 함수를 어떻게 사용하는지 배웠습니다. 이번 포스팅에서는 Jest에서 제공하는 또 다른 모킹 함수인 jest.mock()를 활용해서 좀 더 다양한 상황에서 모킹을 해보도록 하겠습니다. 자바스크립트 모듈 먼저 자바스크립트에서 모듈이 무엇인지에 대해서 간단하게 개념만 짚고 넘어가겠습니다. 모듈이란 어떤 코드를 다른 자바스크립트 파일에서 불러오기 편하도록 하나의 파일에 모아둔 것을 뜻하는데요. 프로젝트의 규모가 커지면 모든 자바스크립트 코드를 하나의 파일에 두기 어렵기 때문에, 자

GraphQL 서버의 사용자 인증/인가 (Apollo Server Authentication/Authorization)

서버 애플리케이션을 개발할 때 사용자 사용자 인증(authentication)과 인가(Authorization)는 데이터 보안을 위해서 매우 핵심적인 기능입니다. 따라서 GraphQL API를 설계하거나, GraphQL 서버를 개발할 때도 사용자 인증/인가 부분에 대해서 여러 가지 고려가 필요합니다. 이번 포스팅에서는 Apllo Server를 이용하여 GraphQL 서버의 사용자 인증과 인가를 구현해보도록 하겠습니다. HTTP 인증 방식 HTTP 인증 방법에는 여러 가지가 있는데, GraphQL 스팩에서는 어떤 특별한 인증 방법을

GraphQL 서버의 오류 처리 (Apollo Server Error handling)

GraphQL 서버에서 클라이언트로 부터 요청받은 쿼리(Query)나 뮤테이션(Mutation)을 실행하다가 오류가 발생할 수 있습니다. 이런 경우, GraphQL 서버에서 해당 오류에 대한 정보를 응답해줘야 클라이언트에서도 그에 상응하는 화면 처리를 할 수가 있을 것입니다. 이번 포스팅에서는 Apollo Server로 개발된 GraphQL 서버에서 어떻게 오류 처리를 해야하는지 알아보도록 하겠습니다. 오류 발생 시 응답 결과 GraphQL 서버에서 오류가 발생할 경우, Apollo Server는 HTTP 응답 바디의 errors

React Hooks: useMemo 사용법

React Hooks 중 하나인 useMemo 함수를 왜/언제/어떻게 써야하는지 알아보겠습니다. Memoization useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 짚고 넘어가겠습니다. memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수

코드 포맷팅은 그냥 Prettier에게 맡기세요

자바스크립트 개발자들 간에 선호하는 코딩 스타일이 다를 수 있죠? 예를 들어, 개발자 A는 문자열을 쌍따옴표(")로 감싸줘야 한다고 주장하는 반면에, 개발자 B는 홑따옴표(')를 사용해야 된다고 주장합니다. 이러한 두 개발자가 한 팀에서 일하면 코드 리뷰 중에 이러한 사소한 코딩 스타일 차이로 키보드 배틀이 일어나는 걸 보게 되죠... 😅 그런데 대게 이런 코딩 스타일에 대한 논쟁은 정답이 없을 분더러, 괜히 소모적인 자존심 싸움으로 번지기 쉬워서 팀워크와 생산성에 나쁜 영향을 줄 수 있습니다. 이번 글에서는 협업 프로젝트에서 이

웹팩(Webpack) DefinePlugin, EnvironmentPlugin 사용법

웹팩은 유연하게 웹팩의 기능을 확장할 수 있도록 플러그인(Plugin) 시스템을 제공하고 있습니다. 일반 개발자도 플러그인을 통해서 웹펙에 추가하고 싶은 기능을 구현할 수 있으면 npm 저장소에 올려서 커뮤니티에 공개할 수 있습니다. 보통 여러 종류의 플러그인을 조합함으로써 웹펙의 번들링 과정동안 다양한 부가 작업을 처리합니다. 이번 포스팅에서는 웹팩에서 자주 사용되는 플러그인인 DefinePlugin과 EnvironmentPlugin에 대해서 알아보도록 하겠습니다. 실습 프로젝트 셋업 먼저 실습 프로젝트를 만들겠습니다. 새로운 디

ESLint로 소스 코드에 숨어있는 문제 찾기

최근에 가장 많이 쓰이는 자바스크립트 린터(linter)인 ESLint에서 대해서 알아보겠습니다. Lint? ESLint? 프로그래밍에서 린트(lint)라는 개념이 생소한 분들을 위해서 lint가 무엇인지에 대해서 먼저 짚고 넘어가겠습니다. 린트(lint)는 소스 코드에 문제가 있는지 탐색하는 작업을 의미하며, 린터(linter)는 이 작업을 도와주는 소프트웨어 도구를 의미합니다. 자바스크립트와 같이 컴파일 과정이 없는 인터프리터 언어의 경우, 런타임 에러가 발생할 확률이 높기 때문에, 이 린트 작업을 통해 사전에 에러를 최대한 잡

React Router로 사용자 인증하기 (로그인/로그아웃)

지난 두 개의 포스팅에 걸쳐서 React Router를 이용해서 React 앱에서 라우팅을 하는 방법을 알아보았습니다. React Router로 라우팅 하기 React Router로 중첩 라우팅 하기 이번 포스팅에서는 그 동안 배운 라우팅 방법을 기반으로 React 앱에서 어떻게 React Router를 이용해서 사용자 인증을 구현할 수 있는지 살펴보도록 하겠습니다. 인증이 필요없는 컴포넌트 로그인 하기 전까지는 모든 기능을 차단하는 앱이 있지만, 더 많은 경우에는, 인증없이도 접근 가능한 영역이 있기 마련입니다. 예를 들어, 홈페

Discord