이번 포스팅에서는 파이썬의 정적(static) 메서드와 클래스(class) 메서드에 대해서 알아보겠습니다. 인스턴스(instance) 메서드 정적(static) 메서드와 클래스(class) 메서드에 대해서 살펴보기 전에 가장 기본이 되는 인스턴스(instance) 메서드에 대해서 먼저 짚고 넘어가는 게 좋을 것 같습니다. 클래스에 아무 데코레이터(decorator) 없이 메서드를 선언하면 해당 메서드는 인스턴스 메서드로 취급이 되며, 첫번째 매개 변수로 클래스의 인스턴스가 넘어오게 됩니다. 이 첫번째 매개 변수의 이름은 보통 관행적
CSS로 웹사이트의 레이아웃을 잡다보면 브라우저 화면 맨 중앙에 어떤 HTML 요소를 배치해야 할 경우가 자주 생기지요? 이번 글에서는 CSS의 Flexbox나 Grid를 활용하여 얼마나 쉽게 HTML 요소를 브라우저 화면에 중앙에 위치시킬 수 있는지 알아보겠습니다. 기본 HTML/CSS 중앙에 위치시킬 컨텐츠(content) 요소와 이 요소를 감싸는 래퍼(wrapper)요소에 대한 HTML 마크업을 하겠습니다. 그 다음 각 요소를 구분하기 쉽도록 CSS로 약간의 스타일을 해주겠습니다. 여기서 주의 깊게 보실 부분이 바로 래퍼 요소
CSS를 사용하다 보면 정말 간단한 정렬이 생각처럼 되지 않아서 애를 먹는 경우가 있습니다. 특히 초보자들이 많이 겪는 문제가 HTML 요소(element)를 우측으로 정렬하는 것입니다. HTML 웹페이지의 레이아웃에서 HTML 요소를 우측으로 정렬해야 하는 대표적인 경우는 헤더 영역입니다. 예를 들어, 다음과 같이 사이트명과 네비게이션으로 이루어진 간단한 헤더를 생각해보겠습니다. <h1> 요소와 <nav> 요소가 같은 줄에 나란히 배치될 수 있도록, CSS의 display 속성값을 변경해주겠습니다. 지금부터 <nav> 요소로 마크
드롭다운(dropdown), 리스트박스(listbox), 콤보박스(combobox), 등 여러 가지 이름으로 불리우는 HTML의 <select> 엘리먼트와 CSS를 이용하여 아래와 같이 만들어보겠습니다. HTML 작성 사실 웹에서 드롭다운를 구현하는 방법은 여러 가지가 있지만, 본 포스팅에서는 가장 기본적인 HTML의 <select> 엘리먼트를 사용하도록 하겠습니다. 웹 접근성(accessibility)을 위해서 <label> 엘러먼트도 추가한 후에 <select> 엘리먼트와 연결을 해줍니다. 이렇게 해주면 <label> 영역뿐만
HTML과 CSS를 이용하여 다음과 같은 웹에서 흔히 볼 수 있는 버튼을 만들어보도록 하겠습니다. HTML 작성 먼저 4가지 종류(기본, 성공, 오류, 경고)의 버튼에 대한 HTML을 작성합니다. 디폴트 스타일 제거 대부분의 브라우저는 User Agent Style이라고 불리는 디폴트(default) 스타일을 버튼에 적용해줍니다. 아무 스타일을 적용하지 않더라도 <button/> 엘리먼트가 시각적으로 버튼처럼 보이게 하기 위함인데요. 아이러니하게도 커스텀 스타일을 적용할 때는 이러한 브라우저 별로 조금씩 상이한 이 디폴트 스타일이
이번 포스팅에서는 플렉스박스(Flexbox)와 미디어쿼리(media query)를 사용하여 반응형 네비게이션을 만들어보도록 하겠습니다. 네비게이션 1 아래 HTML 코드는 여느 웹사이트에서나 흔히 볼 수 있는 젼형적인 네비게이션입니다. 화면의 너비가 좁은 모바일 화면에서는 메뉴를 세로로 표시하고, 화면의 너비가 넓은 데스크탑에서는 메뉴가 가로로 표시하는 경우가 많은데요. 모바일 스타일 반응형 디자인을 할 때는 모바일 우선으로 스타일을 적용하는 것이 여러 가지 측면에서 좋은 관행으로 알려져있습니다. 먼저 <ul/> 엘리먼트를 Flex
양식(form)은 사용자로 부터 데이터를 입력 받기 위해 웹애플리케이션에서 필수적인 요소임에도 불구하고, 리액트(React)로 직접 구현을 해보면 생각보다 고려해야 부분이 많다는 것을 느끼게 됩니다. 이번 포스팅에서는 React Hook를 이용해서 좀 더 깔끔하게 양식 UI를 구현하는 방법에 대해서 알아보겠습니다. 상태 관리 코드 분리하기 기본적으로 하나의 <form/> 여러 개의 <input/>, <select/>, <textarea/>으로 구성됩니다. 이렇게 사용자가 입력해야 값이 많아질수록 양식은 내부적으로 많은 상태를 가지게
양식(form)은 웹 애플리케이션에서 사용자로 부터 데이터를 입력 받기 위해 필수적인 UI 요소이죠? 그런데 리액트(React)로 직접 양식 UI를 구현해보면 처음에 생각했던 것보다 고려해야 할 부분이 많다는 것을 깨닫게 되는데요. 이번 포스팅에서는 비밀번호를 변경하기 위한 전형적인 양식 UI를 React 컴포넌트로 구현하면서 어떤 부분에 신경을 써서 프로그래밍을 해야 하는지 알아보겠습니다! JSX 마크업 먼저 하나의 입력란과 제출 버튼으로 구성된 간단한 양식에 대한 마크업을 작성해보겠습니다. <form/> 부모 엘리먼트 아래에 <
optional chaining을 지원하기 위해서 ES2020에서 추가된 문법인 ?. 연산자에 대해서 알아보도록 하겠습니다. . 연산자를 통한 속성값 접근의 문제점 그동안 자바스크립트에서는 주로 . 연산자(chaining)를 사용해서 객체의 속성값에 접근했었습니다. 간단한 예로, user 객체의 name 속성의 first 속성값은 다음과 같이 접근할 수 있습니다. 하지만 이렇게 여러 단계로 이루어진 객체를 탐색할 때는 항상 TypeError가 발생할 확률이 생깁니다. 이를 방지하기 위해서 일반적으로 다음과 같은 방어 로직을 넣게 되
nullish coalescing을 지원하기 위해서 ES2020에서 추가된 문법인 ?? 연산자에 대해서 알아보도록 하겠습니다. || 연산자를 통한 기본값 처리의 문제점 그동안 자바스크립트에서는 주로 || 연산자(logical OR)를 사용해서 기본값 처리를 해왔는데, 이 방법은 한 가지 맹점이 있었습니다. 간단한 예로, options 객체를 인자로 받는 다음 isEnabled 함수를 생각해보겠습니다. 의도했던 대로 enabled 속성값이 undefined이거나 null일 때, 기본값인 true를 리턴합니다. 하지만 enabled 속
어떤 언어를 사용하든지 프로그래밍을 하면서 날짜와 시간 처리는 피하기 어려운 부분입니다. 파이썬은 내장 모듈인 datetime을 통해서 어떻게 날짜와 시간 데이터를 처리를 지원하고 있는지 알아보겠습니다. timedelta datetime 내장 모듈의 timedelta 클래스는 기간을 표현하기 위해서 사용됩니다. timedelta 클래스의 생성자는 주, 일, 시, 분, 초, 밀리 초, 마이크로 초를 인자로 받습니다. timedelta 객체는 내부적으로 일, 초, 마이크로 초 단위만 저장하기 때문에 위와 같이 해당 정보만 표시됩니다.
파이썬은 버전 3.4부터 다른 언어들 처럼 enum(enumeration, 이넘) 타입을 지원하고 있습니다. enum은 일반적으로 서로 관련이 있는 여러 개의 상수의 집합을 정의할 때 사용되는데요. enum 클래스를 사용하면 인스턴스의 종류를 제한할 수 있기 때문에 견고한 프로그램을 작성하는데 도움이 됩니다. 클래스 타입 정의 간단한 예로, 웹에서 사용되는 대표적인 3개의 기술(HTML, CSS, JS)을 나타내는 enum 클래스를 작성해보겠습니다. enum 내장 모듈로 부터 불러온 Enum 클래스를 확장하여 Skill 타입을 만들
자바스크립트 프로젝트의 규모가 커지면 디렉토리 구조도 복잡해지기 마련입니다. 혹시 다음과 같은 코드 때문에 해당 모듈을 찾으려고 상위 디렉토리를 하나씩 짚어가며 올라가다가 스트레스 받으신 적이 있으신가요? 😝 상대 경로 Node.js에서 내부 모듈을 불러올 때 가장 흔히 사용되는 방법은 상대 경로를 사용하는 것입니다. 위에서 보시는 것 처럼 상대 경로를 사용해서 모듈을 불러오면 모듈이 어느 경로에 위치하는지 파악하기가 난해해지는 경우가 생깁니다. 뿐만 아니라, 이 자바스크립트 파일을 다른 디렉토리로 옮기려면 상대 경로를 그에 따라
ES6(ES2105) 이상의 최신 자바스크립트 문법으로 작성된 코드가 노드JS(Node.js)에서 실행이 안 되서 애를 먹는 경우가 종종 있는데요. 이번 포스팅에서는 자바스크립트 트랜스파일러(Transpiler)인 Babel을 이용하여 이 문제를 깔끔하게 해결해보겠습니다. 개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 유용한 도구인 바벨(Babel)에 대해서는 별도 포스팅을 참고바랍니다. Node.js에서 ES6 코드 실행 오류 먼저 간단한 예제 프로젝트를 하나를 만들겠습니다. js
Flexbox(플렉스박스)를 이용한 반응형 웹디자인이 대중화되면서 CSS에서 Flexbox의 존재감이 점점 커지고 있습니다. 이번 포스팅에서는 Flexbox를 이해하기 위해서 꼭 필요한 핵심 개념과 자주 사용되는 속성에 대해서 살펴보겠습니다. Flexbox 구성 요소 Flexbox는 일반적으로 하나의 Flex container와 여러 개의 Flex item으로 구성됩니다. 따라서, Flexbox를 사용할 때 마크업과 스타일은 대략 다음과 같은 형태를 띠게 됩니다. 여러 개의 내부 엘리먼트를 담고 있는 외부 엘리먼트에 display:
큐(queue)는 선입선출, FIFO(First In First Out) 기반의 매우 유명한 자료구조입니다. 큐를 사용하면 데이터를 추가한 순서대로 제거할 수 있기 때문에 비동기 메세징(asynchronous messaging), 스트리밍(streaming), 너비 우선 탐색(breath first search) 등 소프트웨어 개발에서 널리 응용되고 있습니다. 이번 포스팅에서는 파이썬에서 큐 자료구조를 어떻게 사용할 수 있는지 알아보도록 하겠습니다. list 파이썬에서 큐를 사용하는 가장 간단한 방법은 범용 자료구조인 list를 사
타입 힌트(type hint)를 언어 차원에서 지원하기 위해서 파이썬 버전 3.5에서 typing 모듈이 표준 라이브러리에 추가되었습니다. 이번 포스팅에서는 typing 모듈을 사용해서 파이썬 코드에 타입 어노테이션을 추가하는 방법에 대해서 알아보겠습니다. 파이썬의 타입 어노테이션에 대한 자세한 설명은 관련 포스팅를 참고 바랍니다. List, Dict, Tuple, Set 타입 어노테이션을 사용하다 보면 리스트, 사전, 튜플, 세트와 같은 파이썬에 내장된 자료구조에 대한 타입을 명시해야 할 때가 있습니다. 이때 그냥, list, d
Material UI에서 기본적으로 제공하는 컴포넌트를 그대로 사용해도 훌륭하지만 약간씩 스타일을 변경하고 싶을 때가 있습니다. 이번 포스팅에서는 Material UI에 사용자가 정의한 스타일을 적용하는 방법에 대해서 알아보겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. CssBaseline 컴포넌트 어떤 브라우저를 돌아가느냐에 상관없이 일괄적인 스타일을 적용되려면, CSS를 전역에서 정규화(normalize)시켜주는 것이 권장됩니다. 이를 위해서 우선 <CssBaseline /> 컴포넌
파이썬 버전 3.5에 추가된 타입 어노테이션(type annotation) 덕분에 정적 타입 검사(static type checking)를 통해 좀 더 견고한 프로그램 개발이 가능해졌습니다. 이번 포스팅에서는 파이썬에서 타입 검사기(type checker)로 가장 많이 사용되는 도구인 Mypy에 대해서 간단한 실습을 통해서 알아보도록 하겠습니다. 타입 어노테이션 / 타입 체크 파이썬과 같이 동적(dynamic) 프로그래밍 언어에서 정적(static) 타입 체크가 왠 말이냐고 하시는 분들이 있으실 것 같은데요. 물론, 파이썬의 동적
Docker Compose는 여러 개의 컨테이너(container)로 구성된 애플리케이션을 관리하기 위한 간단한 오케스트레이션(Orchestration) 도구입니다. 여러 개의 컨테이너로 구성된 Docker Compose 애플리케이션 내에서 컨테이너 간의 통신은 어떻게 이루어질까요? Docker 네트워크에 대해서 생소하신 분들은 관련 포스팅를 통해 먼저 기본 개념을 파악하시기를 권장드립니다. Docker Compose 설정법이나 커맨드가 생소하신 분들은 아래 포스팅를 먼저 읽고 돌아오시기를 추천드립니다. Docker Compose