JSX 문법으로 코드를 작성하다보면 리액트(React)가 어디까지나 자바스크립트 라이브러리는 사실을 잊어버리기 쉬운 것 같습니다. 이번 포스팅에서는 리액트 API를 JSX 없이 날 것 그대로 자바스크립트로 사용하면서 리액트가 어떻게 작동하는지 알아보겠습니다. JavaScript Library 리액트(React)를 비롯하여 최근에 많이 사용되는 프론트엔드(frontend) 라이브러리들은 기본적으로 자바스크립트로 HTML 엘리먼트를 동적으로 생성하여 DOM에 추가하는 방식을 취합니다. 따라서, 이러한 모던(modern)한 라이브러리로
사전(dictionary)은 파이썬에서 리스트(list)와 더불어 가장 널리 사용되는 내장 자료형입니다. 하지만 너무 기본적인 기능이다 보니 오히려 이 중요한 자료형의 사용법을 제대로 익히지 않고 넘어가기 쉬운 것 같아요. 이번 포스팅에서는 파이썬에서 사전을 어떻게 사용하는지에 대해서 차근차근 알아보도록 하겠습니다. 참고로 리스트(list)에 대해서는 별도의 포스팅에서 아주 자세히 다루고 있습니다! 사전의 특징 해시 테이블(hash table)이라는 자료구조를 기반으로 하는 사전은 키(key)와 값(value)으로 이루어진 여러 쌍
git add는 작업 디렉토리(working directory) 상의 변경 내용을 스테이징 영역(staging area)에 추가하기 위해서 사용하는 Git 명령어입니다. git commit vs. git add git add 명령어는 다음 변경(commit)을 기록할 때까지 변경분을 모아놓기 위해서 사용합니다. 따라서, git commit 명령어를 통해 명시적으로 기록을 남기기 전까지는 아무리 git add 명령어를 많이 실행해도 Git 저장소의 변경 이력에는 어떤 영향도 주지 않습니다. git status git add 명령어를
새로운 프로젝트에 투입되거나 오픈소스에 기여하려면 먼저 원격 저장소의 코드를 내 컴퓨터에 가져와야 합니다. 이때 사용하는 명령어가 바로 git clone인데요. 원격 저장소의 모든 파일과 변경 이력을 통째로 복제해서 로컬에 동일한 저장소를 만들어줍니다. git init vs. git clone git init은 빈 Git 저장소를 새로 생성하는 명령어이고, git clone은 이미 존재하는 원격 저장소를 복사해오는 명령어입니다. 새 프로젝트를 처음부터 시작할 때는 git init을, 이미 존재하는 프로젝트에 참여할 때는 git cl
CSS 트랜지션(transition)은 어떤 엘리먼트에 스타일의 변화가 일정 시간에 걸쳐서 부드럽게 나타나도록 할 때 사용합니다. 기본 사용법 CSS에서 트랜지션과 관련된 속성은 다음과 같은데 처음에는 좀 복잡하게 느껴질 수도 있습니다. transition: 아래 4가지 속성을 한 번에 지정 가능 transition-property: 트랜지션을 적용할 속성 이름 transition-duration: 스타일 변화가 일어나는 기간 (s: 초, ms: 밀리초) transition-timing-function: 스타일 변화을 일으키는 방식
이번 포스팅에서는 Git 설정을 위해 사용하는 git config 명령어에 대해서 알아보겠습니다. 설정 범위와 설정 파일 git config 명령어에 대해서 배우기 전에 먼저 간단하게 설정 범위에 대해서 짚고 넘어가겠습니다. Git은 지역(local), 전역(global), 시스템(system) 이렇게 크게 3가지 범위로 설정이 가능한데요. 지역 범위로 설정하면 특정 저장소(repository)로 한정되고, 전역 범위는 현재 사용자(user)의 모든 저장소를 포함시킵니다. 자주 사용되지는 않지만 시스템 범위로 설정하면 해당 컴퓨터의
많은 프로그래밍 언어에서 주어진 여러 값 중에서 최소값 또는 최대값을 반환하는 기능을 제공합니다. 예를 들어 파이썬(Python)은 min(), max() 내장 함수를 제공하고, 자바(Java)는 Math 클래스에서 min(), max() 정적 메서드를 제공합니다. 자바스크립트(JavaScript)에서도 마찬가지로 Math.min(), Math.max() 함수를 통해 같은 기능을 사용할 수 있습니다. 흥미롭게도 CSS에서도 동일한 기능을 하는 min()과 max() 함수가 존재하는데요. 이번 포스팅에서는 반응형 웹디자인을 할 때 유
git init는 새로운 Git 저장소(repository)를 생성할 때 사용하는 Git 명령어 입니다. Git 사용할 때 보통 다른 사람이 이미 생성해 놓은 Git 원격 저장소를 git clone 명령어를 통해 내려받는 경우가 많고, 직접 Git 저장소를 생성하더라도 프로젝트 초기에 딱 한 번만 사용하기 때문에 생소하게 느껴질 수도 있는 명령어입니다. 하지만 저처럼 모든 개인 프로젝트를 항상 Git으로 버전 관리를 하는 분들에게는 의외로 자주 사용하게 되는 명령어 입니다. 실습 디렉토리 준비 일단 Git으로 버전 관리를 하고 싶은
웹 접근성(accessibility)을 준수하는 드롭다운(dropdown)를 구현하는 것은 생각보다 쉽지 않은 일입니다. 사실 가장 쉬운 방법은 지난 포스팅에서 소개했던 것처럼 HTML의 <select> 엘리먼트를 사용하는 것인데요. <select> 엘리먼트를 사용하면 내부에 있는 <option> 엘리먼트에 커스텀 스타일을 적용할 방법이 없기 때문에 스타일링에 한계가 있습니다. 그래서 여러 가지 엘리먼트를 이용해서 직접 드롭다운를 만드는 경우가 많은데요. 이 때, 시각적으로는 원하는 모습의 UI를 얻을지 몰라도, 웹 접근성 측면에서
![[자바스크립트] 키보드 이벤트 (keydown/keyup)](https://img.youtube.com/vi/y_wAsalPDTM/maxresdefault.jpg)
자바스크립트를 이용하여 웹페이지 상에서 사용자의 키보드 입력을 감지하여 처리하는 방법에 대해서 알아보겠습니다. 키보드 이벤트 타입 키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생합니다. 키를 누를 때는 keydown 타입의 이벤트가 발생하고, 키를 놓을 때는 keyup 타입의 이벤트가 발생합니다. (예전에는 keypress라는 이벤트 타입도 사용되었으나, 현재는 deprecated되어 권장되지 않으므로 다루지 않겠습니다.) 키보드 이벤트는 DOM 상에서 창(window)이나 문서(documen
![[파이썬] 정적(static) 메서드와 클래스(class) 메서드](/_astro/python.CShaAvH4_wtjcd.webp)
이번 포스팅에서는 파이썬의 정적(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 속