웹페이지의 레이아웃을 잡을 때 컨텐츠를 화면 중앙에 위치시키기나 격자로 배치해야 할 때가 많이 있습니다. Material UI의 <Container/>와 <Grid/> 컴포넌트를 사용하면 이러한 웹페이지 레이아웃을 매우 쉽고 간단하게 잡을 수 있습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. Container 컴포넌트 <Container/> 컴포넌트는 컨텐츠를 좌우에 적당한 간격을 두고 화면 중앙에 위치시킬 때 사용합니다. 최대 너비만을 제한하는 fluid 모드와 항상 동일한 너비를 강제하
Docker Compose는 여러 개의 컨테이너(container)로 구성된 애플리케이션을 관리하기 위한 간단한 오케스트레이션(Orchestration) 도구입니다. 이번 포스팅에서는 Compose 애플리케이션을 터미널에서 제어하기 위해 사용되는 Docker Compose 커맨드에서 대해서 알아보겠습니다. -f 옵션 Docker Compose는 기본적으로 커맨드가 실행하는 디렉토리에 있는 docker-compose.yml 또는 docker-compose.yaml를 설정 파일로 사용합니다. 다른 이름이나 경로의 파일을 Docker C
파이썬 버전 3.5에 추가된 타입 어노테이션(type annotation)이 점점 많은 파이썬 프로젝트에서 사용되고 있는 추세입니다. 정적(static) 프로그래밍 언어에서 흔히 볼 수 있는 타입 체킹(type checking)도 아니고 파이썬의 타입 힌팅(type hinting)는 도대체 무엇일까요? 이번 포스팅에서는 파이썬에서 타입 힌팅(type hinting)의 개념과 파이썬 코드에 타입 어노테이션(type annotation)을 어떻게 추가하는지 알아보겠습니다. 파이썬은 동적 프로그래밍 언어 동적(dynamic) 프로그래밍
Docker Compose를 이용하면 여러 개의 컨테이너(container)로 구성된 애플리케이션을 하나의 파일에 정의해놓고 한 번에 올리거나 내릴 수 있습니다. 이러한 편리함 때문에 Docker Compose는 특히 로컬 개발 환경이나 테스트 자동화 환경에서 간단한 컨테이너 오케스트레이션(Container Orchestration) 도구로 많이 사용되고 있는데요. 이번 포스팅에서는 Docker Compose 설정에 사용되는 docker-compose.yml을 작성하는 방법에 대해서 알아보겠습니다. 파일 위치 / 기본 구조 Dock
자바스크립트 생태계에서 모듈 시스템은 꽤 오랜 기간 혼란스러운 주제였는데요. Node.js가 처음부터 채택한 CommonJS의 require와 ES6에서 도입된 import가 공존하면서, 개발자들은 환경에 따라 두 가지 방식을 오가야 했습니다. 위 두 코드는 동일하게 ExpressJS 라이브러리를 불러와 서버 객체를 생성하고 있지만, 사용하는 모듈 시스템이 다릅니다. Node.js 초기에는 ES 모듈을 쓰려면 Babel 같은 트랜스파일러가 필수였지만, 버전 13.2부터 ES 모듈이 정식 지원되기 시작했고, 새로 시작하는 프로젝트에서
데코레이터(decorator)는 함수를 매개변수로 받아 새로운 함수를 반환하는 함수입니다. 데코레이터를 활용하면 함수의 코드를 수정하지 않고도, 부가적인 기능을 추가하거나 작동 방식을 변경할 수 있죠. 이 블로그 글에서는 파이썬에서 데코레이터를 사용하는 기본적인 방법에 대해서 실습을 통해 알아보겠습니다. 간단한 데코레이터 작성해보기 "Hi!"를 콘솔에 출력하는 say_hi()라는 함수를 작성하고 호출해보겠습니다. 다음으로 함수 호출 전/후로 "before"과 "after"라는 로그(log)를 추가해주는 매우 간단한 데코레이터 함수
객체지향 프로그래밍 언어에서 프로퍼티(property)는 객체의 속성을 제어할 때 유용하게 사용되는 기능이며 데이터 캡슐화에 도움이 됩니다. 이번 포스팅에서는 파이썬에서 프로퍼티를 구현하기 위해서 property() 함수와 @property 데코레이터를 어떻게 사용하는지 알아보겠습니다. 필드명을 통한 접근 사람의 이름, 성, 나이 데이터를 담기 위한 간단한 클래스를 하나 작성해보겠습니다. 아래 Person 클래스는 이름 first_name, last_name, age 이렇게 3개의 필드로 이루어져 있습니다. Person 클래스의 인
웹페이지의 UI를 구현하다 보면 서로 관련이 있는 여러 개의 컴포넌트를 시각적으로 하나의 그룹처럼 묶어주는 컴포넌트가 필요합니다. 이렇게 관련된 여러 컴포넌트를 보기 쉽게 도와주는 Material UI의 <Paper/>와 <Card/> 컴포넌트에 대해서 알아보겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. Paper 컴포넌트 먼저 살펴볼 <Paper/> 컴포넌트는 마치 포스팅잇처럼 화면에서 도드라져 보이는 효과를 제공합니다. elevation, outlined 이렇게 2가지 형태를 사용할
이번 포스팅에서는 collections 모듈의 OrderedDict 클래스에 대해서 알아보겠습니다. OrderedDict 파이썬 3.6 이전에서는 사전에 데이터를 삽입된 순서대로 데이터를 획득할 수가 없었습니다. 따라서 다음과 같이 무작위 순서로 데이터를 얻게 되는 일이 빈번했었는데요. 대신에 collections 모듈의 OrderedDict 클래스를 사용하면 데이터의 순서를 보장받을 수 있었습니다. 하지만 파이썬 3.6 부터는 기본 사전(dict)도 OrderedDict 클래스와 동일하게 동작하기 때문에 이러한 용도로 Ordere
최근에 많은 Django 프로젝트가 Docker를 이용해서 컨테이너(container) 기반으로 개발되고 테스트, 배포되고 있습니다. 이번 포스팅에서는 Docker Compose이용해서 PostgreSQL를 데이터베이스로 사용하는 Django 애플리케이션을 셋업해보도록 하겠습니다. Docker를 처음 접하시는 분들은 관련 포스팅를 참고하시어 먼저 본인 컴퓨터에서 Docker에 설치하시기 바랍니다. requirements.txt 파이썬에서는 보통 프로젝트에서 필요한 패키지를 requirements.txt 파일에 등록해놓고, 패키지 매
Docker 컨테이너(container)에 쓰여진 데이터는 기본적으로 컨테이너가 삭제될 때 함께 사라지게 됩니다. Docker에서 돌아가는 많은 애플리케이션이 컨테이너의 생명 주기와 관계없이 데이터를 영속적으로 저장을 해야하는데요. 뿐만 아니라 많은 경우 여러 개의 Docker 컨테이너가 하나의 저장 공간을 공유해서 데이터를 읽거나 써야합니다. 이렇게 Docker 컨테이너의 생명 주기와 관계없이 데이터를 영속적으로 저장할 수 있도록 Docker는 두가지 옵션을 제공하는데요. 첫번째는 Docker 볼륨(volume), 두번째는 바인드
마크다운(Markdown)은 경량화된 마크업 언어로 구조적인 텍스트의 편집 용도로 여러 가지 도구에서 사용되고 있습니다. 대표적인 사례인 Github의 경우, 확장된 형태의 마크다운을 지원하고 있기 때문에 이슈(issue)나 PR(pull reqeust)를 생성할 때 쉽게 접해볼 수 있습니다. 이번 포스팅에서는 Markdown 형태의 텍스트를 HTML 형태의 택스트로 변환하는 방법에 대해서 살펴보겠습니다. Unified, Remark, Rehype remark는 마크다운을 처리할 때 사용하는 라이브러리이고, rehype은 HTML을
Docker 컨테이너(container)는 격리된 환경에서 돌아가기 때문에 기본적으로 다른 컨테이너와의 통신이 불가능합니다. 하지만 여러 개의 컨테이너를 하나의 Docker 네트워크(network)에 연결시키면 서로 통신이 가능해집니다. 이번 포스팅에서는 컨테이너 간 네트워킹이 가능하도록 도와주는 Docker 네트워크에 대해서 알아보도록 하겠습니다. 네트워크 조회 Docker 네트워크의 기본은 내 컴퓨터에서 어떤 네트워크가 생성되어 있는지를 아는 것일 겁니다. docker network ls 커맨드를 사용하면 현재 생성되어 있는 D
사용자로 부터 정보를 입력 받는 양식(form) UI의 경우 <input/> 또는 <select/>, <textarea/>와 같은 HTML 엘리먼트가 많이 사용됩니다. 이러한 입력 엘리먼트는 브라우저마다 다른 스타일로 표현되고, 기본 스타일은 그대로 사용하기에는 너무 단조롭기 때문에 CSS를 이용해서 커스텀 스타일을 해주는 것이 일반적일 것입니다. Material UI는 이러한 입력 엘리먼트를 이미 예쁘게 디자인된 React 컴포넌트 형태로 제공을 해주기 때문에 우리는 그냥 편리하게 갔다 쓰기만 하면 됩니다. 이번 포스팅에서는 Ma
Docker CLI 도구는 Docker 컨테이너(container)의 효과적인 관리를 위해서 다양한 커맨드(command)를 제공합니다. 이번 포스팅에서는 자주 쓰이는 커맨드 위주로 어떻게 Docker 컨테이너를 효과적으로 제어할 수 있는지 알아보도록 하겠습니다. 컨테이너 조회 가장 먼저 살펴볼 docker ps 커맨드는 Docker 컨테이너를 조회를 위해 사용되며 기본적으로 실행 중인 컨테이너 목록이 출력됩니다. -a 옵션을 사용하면 현재 중지되어 있는 컨테이너까지 함께 출력됩니다. -s 옵션을 사용하면 각 컨테이너의 디스크 사용
우리는 파이썬으로 코딩을 하면서 데이터를 담아두기 위해서 여러 가지 방법을 사용합니다. 리스트(list), 튜플(tuple), 사전(dictoinary), 네임드 튜플(namedtuple), 세트(set), 프로즌 세트(frozen set)와 같은 내장 자료구조는 사용하기 간편하다는 장점이 있는데요. 반면에 클래스(class)를 이용해서 데이터를 담아두면 type-safe해지기 때문에 프로그램 실행 중에 오류가 발생할 확률이 적어진다는 장점이 있습니다. 파이썬 3.7에서 dataclasses라는 매우 매력적인 모듈이 표준 라이브러리
Docker를 사용하면서 가장 자주 접하는 커맨드는 단연 컨테이너를 실행하기 위해서 쓰이는 docker run일 것입니다. docker run 커맨드는 상당히 여러 가지 옵션을 통해 다양한 방식으로 컨테이너를 실행할 수 있도록 해줍니다. 이번 포스팅에서는 이중에서 자주 쓰이는 옵션 위주로 dockr run 커맨드를 어떻게 사용하는지 알아보겠습니다. 기본 포맷 docker run 커맨드의 기본 포맷은 다음과 같습니다. 여기서 이미지 식별자는 필수이며 이미지 ID나 리파지토리(repository):태그(tag)를 사용할 수 있습니다.
React 앱을 개발할 때 Material UI와 같은 컴포넌트 라이브러리를 사용하는 이유 중 하나는 버튼과 같이 너무 기본적인 컴포넌트를 직접 구현하는데 들어가는 시간과 노력을 절약하기 위함일 것입니다. 일반적으로 버튼은 UI에서 사용자의 명령을 받아드리는 창구 역할을 하고, 여러 페이지에 거쳐서 다양한 형태로 사용됩니다. 따라서 단순히 사용자 경험 뿐만 아니라 해당 서비스의 전체적인 브랜드 이미지에도 큰 영향을 줄 수 있습니다. 이번 포스팅에서는 이렇게 생각보다 상당히 중요할 수 있는 버튼을 Material UI에서 제공하는 <
지난 포스팅에서는 Material UI의 <Typography/> 컴포넌트를 사용하여 텍스트를 표현하는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 텍스트와 더불어 UI에서 감초같은 역할을 하는 아이콘을 Material UI에서 어떻게 사용할 수 있는지 알아보도록 하겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. Material Icons Material UI는 @material-ui/icons 패키지를 통해서 1,000 여종의 SVG 아이콘을 제공하고 있습니다. 그래서 아이콘을 엄청
Material UI는 현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나입니다. 많은 React UI 컴포넌트 라이브러리는 기존에 있는 CSS 라이브러리를 기반으로 만들어지는 경우가 많습니다. React Bootstrap이 대표적인 예인데요. 이러한 React 라이브러리는 근간이 되는 CSS 라이브러리에 대한 이해나 경험이 없는 경우 여러모로 사용하기 불편한 경우가 많습니다. 하지만 Material UI는 여타 React UI 컴포넌트 라이브러리와 달리 처음부터 React로 만들어졌기 때문에 많은 개발자들에