이번 포스팅에서는 Git 설정을 위해 사용하는 git config 명령어에 대해서 알아보겠습니다. 설정 범위와 설정 파일 git config 명령어에 대해서 배우기 전에 먼저 간단하게 설정 범위에 대해서 짚고 넘어가겠습니다. Git은 지역(local), 전역(global), 시스템(system) 이렇게 크게 3가지 범위로 설정이 가능한데요. 지역 범위로 설정하면 특정 저장소(repository)로 한정되고, 전역 범위는 현재 사용자(user)의 모든 저장소를 포함시킵니다. 자주 사용되지는 않지만 시스템 범위로 설정하면 해당 컴퓨터의
어느 프로그래밍 언어로 코딩을 하든 우리는 수시로 데이터를 정렬해야 되는데요. 이번 포스팅에서는 파이썬에서 데이터를 어떻게 정렬하는지 알아보도록 하겠습니다. sorted() 내장 함수 파이썬에서 정렬을 할 때 가장 부담없이 사용할 수 있는 방법은 내장된 sorted() 함수를 이용하는 것입니다. sorted() 내장 함수는 파이썬에서 순회가 가능한(iterable) 객체를 인자로 받아 데이터를 정렬해줄 수 있습니다. sorted() 내장 함수는 인자로 넘어온 객체의 원래 순서를 건드리지 않고 정렬된 원소들을 새로운 객체에 담아서 반
지난 포스팅에서는 GitHub Actions의 4가지 핵심적인 개념인 워크플로우(workflow), 작업(job), 단계(step), 액션(action)에 대해서 가볍게 살펴보았는데요. 이번 포스팅에서는 이 중에서도 가장 다양하게 설정할 수 있는 작업(job)에 대해서 좀 더 깊이 알아보도록 하겠습니다. GitHub Actions에서 작업(job)이란? 먼저 GitHub Actions에서 작업(job)의 역할과 위치에 대해서 간단히 복습을 하고 넘어가겠습니다. 작업(job)은 어떤 이벤트가 발생했을 때 독립된 환경에서 실행되야 하는
이번 포스팅에서는 깃허브의 CI 서비스인 GitHub Actions를 사용하여 자바스크립트 프로젝트의 지속 통합(Continuous Integration)을 위한 워크플로우를 구성하는 방법에 대해서 알아보겠습니다. 또한 자바스크립트 프로젝트에서 GitHub Actions 셋업이 용이하도록 깃허브에서 제공하는 Setup Node 액션에 대해서도 살펴보겠습니다. 실습 프로젝트와 코드 저장소 생성 실습을 위해서 Create React App을 통해 간단한 자바스크립트 프로젝트를 하나 생성하겠습니다. 그 다음 본인 깃허브 계정에 새로운 코
이번 포스팅에서는 MSW(Mock Service Worker) 라이브러리를 이용하여 백엔드 API를 모킹(mocking)하는 방법에 대해서 알아보겠습니다. Mock Service Worker란? MSW(Mock Service Worker)는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리입니다. 쉽게 말해, 브라우저에 기생(?)해서 마치 백엔드 API인 척하면서 프론트엔드의 요청에 가짜 데이터를 응답해주는 녀석이라고 볼 수 있겠네요. 비교적에 최근에 도입된 웹 표준
어느 프로그래밍 언어를 사용하든 요즘 대부분의 소프트웨어 프로젝트는 수많은 다른 패키지에 의존하기 마련인데요. 로컬 환경에서 소프트웨어 개발을 할 때는 이러한 외부 패키지를 최초에 딱 한 번만 설치하면 되지만 항상 새롭게 셋업되는 CI 서버에서는 이 작업을 매번 다시 해야합니다. 이번 포스팅에서는 깃허브에서 제공하는 캐시(Cache) 액션을 사용하여 CI 서버에서 발생할 수 있는 불필요한 패키지 재설치를 예방해보겠습니다. GitHub Actions의 액션(Action)이란? 먼저 GitHub Actions에서 액션(Action)이
이번 포스팅에서는 npm 설정을 할 때 필요한 npmrc 파일과 npm config 커맨드에서 대해서 알아보겠습니다. npmrc 파일 npmrc 파일은 npm에서 설정을 저장해두는 파일로서 내장(builtin), 전역(global), 사용자(user), 프로젝트(project) 이렇게 4가지 범위의 npmrc 파일이 존재하는데요. 먼저 내장 설정은 npm이 설치된 경로에 있는 npmrc 파일에 명시되어 있으며 모든 기본 설정을 담고 있습니다. 전역 설정은 같은 컴퓨터를 사용하는 다른 사용자와 모든 프로젝트에 광범위하게 적용되기 때문
이번 포스팅에서는 파이썬에서 reversed() 함수를 이용해서 거꾸로 루프를 돌리는 방법에 대해서 알아보려고합니다. 뿐만 아니라 reversed() 함수와 비슷해보이지만 오묘하게 틀린 리스트의 slicing 연산자와 reverse() 함수에 대해서 간단히 살펴보도록 하겠습니다. 거꾸로 루프 돌리기 다음과 같이 5개의 알파멧 문자를 담고 있는 리스트를 어떻게 루프 돌면서 각 문자를 출력할 수 있을까요? 아마도 다음과 같이 간단한 for 문으로 어렵지 않게 각 문자에 순서대로 접근할 수 있을 것입니다. 그럼 역방향으로 각 문자에 접근
GitHub Actions에서 가장 많이 사용되는 액션(Action)은 무엇일까요? 바로 저장소로 부터 코드를 내려받기 위한 체크아웃(Checkout) 액션인데요. 이번 포스팅에서는 GitHub Actions를 사용할 때 거의 필수적으로 사용하게 되는 체크아웃 액션에 대해서 알아보겠습니다. GitHub Actions의 액션(Action)이란? 먼저 GitHub Actions에서 액션(Action)이 무엇을 의미하는지 간단하게 짚고 넘어가겠습니다. GitHub Actions는 일반적으로 CI(Continuous Integration,
지난 포스팅에서는 GitHub Actions를 이해하기 위해서 필요한 핵심 개념에 대해서 알아보았습니다. 이번 포스팅에서는 GitHub Actions 입문자를 위해서 정말 기초적인 워크플로우를 하나 생성해보려고 함께 테스트를 해보겠습니다. GitHub 저장소 생성 GitHub 계정이 있으시다면 누구나 무료로 GitHub 워크플로우를 사용해볼 수 있습니다 🤗 실습을 위해서 본인 GitHub에 계정에 github-actions-first-workflow라는 이름으로 새로운 코드 저장소(repository)를 하나를 만들고 시작하겠습니
GitHub가 Microsoft에 인수된 이후 야심차게 출시한 GitHub Actions는 CI/CD 시장에 지각변동을 일으키고 있는데요. 전 세계에 대부분의 개발자들이 이미 깃허브 계정이 있다고 해도 과언이 아닌 유리한 상황에서, GitHub Actions의 약진은 Jenkins, Circle CI, Travis CI와 같은 기존에 유수의 서비스까지도 위협하고 있습니다. 이번 포스팅은 제 블로그에서 GitHub Actions에 대해서 처음 다루는 만큼 GitHub Actions를 처음 접하시는 분들을 위해서 아주 얇고 넓게 Git
며칠 전에 드디어 React v18이 정식 릴리스가 되었죠? 🎉 이번 포스팅에서는 React v18에서 단연 가장 큰 주목과 기대를 받고 있는 기능일 Suspense에 대해서 알아보겠습니다. Suspense란? Suspense는 2018년에 첫 시연되어 React 커뮤니티에서 큰 반향을 일으킨 후, React v16.6에 실험적인(experimental) 기능으로 추가되어 이미 알 만한 분들은 다들 한 번씩 써보셨을텐데요. 많은 리액트 개발자들이 Suspense가 React의 정식 기능이 되기를 목이 빠지게 기다렸던 걸로 아는데
다른 프로그래밍 언어를 쓰시다가 파이썬으로 넘어온 분들이 for 루프 때문에 적지 않게 당황하시는 것을 자주 보게 됩니다. 다른 언어에서는 일반적으로 for 루프를 작성할 때 항상 다음 3가지를 명시를 하면서 시작하죠? 인덱스 변수의 초기 값 반복 지속 조건 인덱스 변수 갱신 방법 예를 들어, 자바의 경우 보통 다음과 같은 형태로 for 루프를 돌고요. 자바스크립트에서 for 루프를 돌리는 모습도 크게 다르지는 않습니다. 하지만 파이썬에서는 이러한 전형적인 for 문법을 제공하지 않고, 비교적 다른 언어에서는 나중에 추가된 for-
“사용자 인증을 할 때 쿠키를 사용하면 위험하고요 서버에 데이터를 저장하는 세션을 사용하는 것이 안전해요.” 사용자 인증에 대해서 논할 때 자주 듣게 되는 얘기인데요. 과연 이 말이 맞는 말일까요? 저한테는 굉장히 모순된 얘기로 들리는 것 같습니다. 많은 분들이 쿠키(cookie)와 세션(session)을 서로 대립하거나 세션이 쿠키를 대체하는 기술로 오해하는 것 같은데요. 사실 쿠키와 세션은 상호 보완을 하는 기술이라고 보는 것이 더 맞을 것입니다. 지난 포스팅에서는 서버가 브라우저에 쿠키를 어떻게 저장하고 쿠키라는 기술의 한계에
"쿠키는 클라이언트에 저장되고... 음,,, 보안에 좋지 않습니다." 😅 개발자 면접을 볼 때 쿠키에 대해서 물어보면 가장 흔하게 들을 수 있는 대답인데요. 완전히 틀린 말은 아니지만 뭔가 알맹이가 빠진 느낌이 듭니다. "그럼 보안을 위해서 쿠키는 안 쓰는 게 좋겠네요?" 라고 반문을 하면 오랫동안 웹 개발을 한 분들도 머뭇거리시는 경우가 많은데요. 아무래도 대부분의 서버 프레임워크에서 쿠키를 직접 다루지 않아도 되도록 추상화 잘 되어 있기 때문에 오히려 쿠키를 직접 다루거나 쿠키에 대해 깊이 생각해볼 기회가 많지 않아서 그런 것
이번 포스팅에서는 다국어 지원을 할 때 정말 유용하게 쓸 수 있는 자바스크립트의 Intl API에 대해 알아보도록 하겠습니다. Intl API 소개 여러 가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정을 흔히 국제화(internalization, i18n)라고 합니다. 이를 위해서는 웹페이지 상에 사용된 문구들을 단순히 번역하여 표시해주는 것만 뿐만 아니라 동일한 데이터를 언어나 지역별로 다른 형식으로 보여줘야 하는데요. 예를 들어, 12/11/21로 표시된 날짜 데이터를 한국 사용자들은 2012년 11
이번 포스팅에서는 파이썬에서 모든 것이 참인지 확인할 때 사용하는 all() 내장 함수에 대해서 알아보겠습니다. 반복문으로 모두 참인지 확인하기 여러 개의 데이터가 모두 어떤 조건을 만족하는지 확인을 해야 할 때 보통 어떻게 접근을 하시나요? 많은 분들이 자연스럽게 반복문을 떠올릴 것 같은데요. 예를 들어, 여러 숫자가 모두 양의 짝수인지 확인하는 함수를 다음과 같이 구현할 수 있을 것입니다. 이 함수에 양의 짝수로만 이루어진 리스트를 넘겨서 호출하면 True를 반환하겠죠? 반면에 인자로 넘긴 리스트에 음수가 하나라도 있다면 Fal
파이썬에는 global과 nonlocal이라는 아주 많이 쓰이지는 않지만 종종 만나게 되는 재미있는 키워드가 있습니다. 이 두 키워드를 한글로 해석하면 각각 '전역', '비지역'으로 비슷한 의미인 것 같아서 많은 분들이 햇갈려하시는데요. 이번 포스팅에서는 이 두 개의 키워드가 왜 필요하고 어떤 경우에 사용해야되는지에 대해서 알아보도록 하겠습니다. 변수의 범위(scope) global과 nonlocal 키워드에 대해서 이해하려면 먼저 변수의 범위(scope)에 대한 개념을 간단히 짚고 넘어가야할 것 같습니다. 비단 파이썬 뿐만 아니라
웹사이트에 연결하고 싶은 커스텀(custom) 도메인 네임을 구매해놓고 DNS 설정이 생각처럼 잘 안되서 당혹스러우셨던 경험이 있으신가요? 아무래도 DNS 레코드에 대한 아무런 사전 지식이 없이 호스팅 서비스에서 시키는데로 따라하기가 쉽지 않은 것 같습니다. 그래서 이번 포스팅에서는 커스텀(custom) 도메인을 웹사이트에 연결할 때 알아두면 큰 도움이 되는 DNS 레코드의 기초적인 부분에 대해서 다뤄보려고 합니다. DNS 레코드란? 커스텀 도메인 추가하려고 웹사이트 호스팅 서비스가 제공하는 문서 페이지를 열어 보면 대게 A 레코드
PostgreSQL를 사용하실 때 일반적으로 데이터베이스를 보기 좋게 시각화하여 보여주는 GUI(그래픽 사용자 인터페이스) 기반 클라이언트를 이용하실텐데요. 하지만 간혹 어떤 제약 사항 때문에 이렇게 무거운 프로그램을 설치하기 어려운 상황도 생기기 마련이죠? 이런 경우 PostgreSQL에서 제공하는 CLI(명령 줄 인터페이스) 기반 클라이언트인 psql을 사용하면 매우 간편하게 터미널에서 데이터베이스에 접속할 수 있습니다. psql 명령어 설치 psql는 PostgreSQL 데이터베이스만 설치하면 기본적으로 딸려오는 CLI 도구입