Logo

290 posts

GitHub Actions의 유용한 작업 설정

지난 포스팅에서는 GitHub Actions의 4가지 핵심적인 개념인 워크플로우(workflow), 작업(job), 단계(step), 액션(action)에 대해서 가볍게 살펴보았는데요. 이번 포스팅에서는 이 중에서도 가장 다양하게 설정할 수 있는 작업(job)에 대해서 좀 더 깊이 알아보도록 하겠습니다. GitHub Actions에서 작업(job)이란? 먼저 GitHub Actions에서 작업(job)의 역할과 위치에 대해서 간단히 복습을 하고 넘어가겠습니다. 작업(job)은 어떤 이벤트가 발생했을 때 독립된 환경에서 실행되야 하…

GitHub Actions 자바스크립트 셋업

이번 포스팅에서는 GitHub의 CI 서비스인 GitHub Actions를 사용하여 자바스크립트 프로젝트에서 CI를 구성하는 방법에 대해서 알아보겠습니다. 또한 자바스크립트 프로젝트에서 GitHub Actions 셋업이 용이하도록 GitHub에서 제공하는 Setup Node 액션에 대해서도 살펴보겠습니다. 실습 프로젝트와 코드 저장소 생성 간단한 실습을 위해서 Create React App을 통해 간단한 자바스크립트 프로젝트를 하나 생성하겠습니다. 그 다음 본인 GitHub에 계정에 새로운 코드 저장소(repository)를 하나…

MSW로 백앤드 API 모킹하기

이번 포스팅에서는 MSW(Mock Service Worker) 라이브러리를 이용하여 백앤드 API를 모킹(mocking)하는 방법에 대해서 알아보겠습니다. Mock Service Worker란? MSW(Mock Service Worker)는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리입니다. 쉽게 말해, 브라우저에 기생(?)해서 마치 백앤드 API인 척하면서 프런트앤드의 요청에 가짜 데이터를 응답해주는 녀석이라고 볼 수 있겠네요. 비교적에 최근에 도입된 웹 표…

GitHub Actions의 캐시(Cache) 액션으로 패키지 설치 최적화하기

어느 프로그래밍 언어나 프래임워크를 사용하든 요즘에 대부분의 소프트웨어 프로젝트는 수많은 다른 패키지에 의존하기 마련인데요. 로컬 환경에서 소프트웨어 개발을 할 때는 이러한 외부 패키지를 최초에 딱 한 번만 설치하면 되지만 항상 새롭게 셋업되는 CI 서버에서는 이 작업을 매번 다시 해야합니다. 이번 포스팅에서는 GitHub에서 제공하는 캐시(Cache) 액션을 사용하여 CI 서버에서 발생할 수 있는 불필요한 패키지 재설치를 예방해보겠습니다. GitHub Actions의 액션(Action)이란? 먼저 GitHub Actions에서 …

npmrc 파일과 npm config 커맨드

이번 포스팅에서는 npm 설정을 할 때 필요한 npmrc 파일과 npm config 커맨드에서 대해서 알아보겠습니다. npmrc 파일 npmrc 파일은 npm에서 설정을 저장해두는 파일로서 내장(builtin), 전역(global), 사용자(user), 프로젝트(project) 이렇게 4가지 범위의 npmrc 파일이 존재하는데요. 먼저 내장 설정은 npm이 설치된 경로에 있는 npmrc 파일에 명시되어 있으며 모든 기본 설정을 담고 있습니다. 전역 설정은 같은 컴퓨터를 사용하는 다른 사용자와 모든 프로젝트에 광범위하게 적용되기 때…

파이썬의 reversed() 함수로 거꾸로 루프 돌리기 (vs. slicing 연산자 & reverse() 함수)

이번 포스팅에서는 파이썬에서 reversed() 함수를 이용해서 거꾸로 루프를 돌리는 방법에 대해서 알아보려고합니다. 뿐만 아니라 reversed() 함수와 비슷해보이지만 오묘하게 틀린 리스트의 slicing 연산자와 reverse() 함수에 대해서 간단히 살펴보도록 하겠습니다. 거꾸로 루프 돌리기 다음과 같이 5개의 알파멧 문자를 담고 있는 리스트를 어떻게 루프 돌면서 각 문자를 출력할 수 있을까요? 아마도 다음과 같이 간단한 for 문으로 어렵지 않게 각 문자에 순서대로 접근할 수 있을 것 입니다. 그럼 역방향으로 각 문자에 …

GitHub Actions의 체크아웃(Checkout) 액션으로 코드 내려받기

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에 계정에 github-actions-first-workflow라는 이름으로 새로운 코드 저장소(repository)를 하나를 만들고 시작하겠습니다. 워크플로우 파…

GitHub Actions의 소개와 핵심 개념

GitHub가 Microsoft에 인수된 이후 야심차게 출시한 GitHub Actions는 CI/CD 시장에 자각변동을 일으키고 있는데요. 전세계에 대부분의 개발자들이 이미 GitHub 계정이 있다고 해도 과언이 아닌 유리한 상황에서, GitHub Actions의 약진은 Jenkins, Circle CI, Travis CI와 같은 기존에 유수의 서비스까지도 위협하고 있습니다. 이번 포스팅은 제 블로그에서 GitHub Actions에 대해서 처음 다루는 만큼 GitHub Actions를 처음 접하시는 분들을 위해서 아주 얇고 넓게 …

React Suspense 소개 (feat. React v18)

며칠 전에 드디어 React v18이 정식 릴리스가 되었죠? 🎉 이번 포스팅에서는 React v18에서 단연 가장 큰 주목과 기대를 받고 있는 기능일 Suspense에 대해서 알아보겠습니다. Suspense란? Suspense는 2018년에 첫 시연되어 React 커뮤니티에서 큰 반향을 일으킨 후, React v16.6에 실험적인(experimental) 기능으로 추가되어 이미 알 만한 분들은 다들 한 번씩 써보셨을텐데요. 많은 리액트 개발자들이 Suspense가 React의 정식 기능이 되기를 목이 빠지게 가다렸던 걸로 아는데 …

파이썬의 range() 내장 함수로 정수 범위 만들기 (feat. for 루프)

다른 프로그래밍 언어를 쓰시다가 파이썬으로 넘어온 분들이 for 루프 때문에 적지 않게 당황하시는 것을 자주 보게 됩니다. 다른 언어에서는 일반적으로 for 루프를 작성할 때 항상 다음 3가지를 명시를 하면서 시작하죠? 인덱스 변수의 초기 값 반복 지속 조건 인덱스 변수 갱신 방법 예를 들어, 자바의 경우 보통 다음과 같은 형태로 for 루프를 돌고요. 자바스크립트에서 for 루프를 돌리는 모습이 크게 다르지는 않습니다. 하지만 파이썬에서는 이러한 전형적인 for 문법을 제공하지 않고, 비교적 다른 언어에서는 나중에 추가된 for…

쿠키 2부: 세션은 쿠키가 필요해~

지난 포스팅에서 서버가 브라우저에 쿠키를 어떻게 저장하고 쿠키라는 기술의 한계에 대해서 알아보았습니다. 하지만 이러한 갖가지 단점에도 불구하고 쿠키는 여전히 웹에서 중요한 한 축을 담당하며 다양하게 사용되고 있는데요. 이번 포스팅에서는 쿠키를 사용할 수 밖에 없는 결정적인 이유와 세션 기반 사용자 인증에 대해서 알아보겠습니다. HTTP 프로토콜의 특징 HTTP 프로토콜은 연결이 유지시키지 않고(connectionless) 상태가 없는(stateless) 특성을 가지고 있습니다. 즉, 서버가 클라이언트의 요청에 응답을 하는 순간 H…

쿠키 1부: HTTP로 설명하는 쿠키(cookie)

“쿠키는 클라이언트에 저장되고… 음,,, 보안에 좋지 않습니다.” 😅 개발자 면접을 볼 때 쿠키에 대해서 물어보면 가장 흔하게 들을 수 있는 대답인데요. 완전히 틀린 말은 아니지만 뭔가 알맹이가 빠진 느낌이 듭니다. “그럼 보안을 위해서 쿠키는 안 쓰는 게 좋겠네요?” 라고 반문을 하면 오랫동안 웹 개발을 한 분들도 머뭇거리시는 경우가 많습니다. 아무래도 대부분의 서버 프레임워크에서 쿠키를 직접 다루지 않아도 되도록 추상화 잘 되어 있기 때문에 오히려 쿠키를 직접 다루거나 쿠키에 대해 깊이 생각해볼 기회가 많지 않아서 그런 것 같…

자바스크립트의 Intl API

이번 포스팅에서는 다국어 지원을 할 때 유용하고 쓸 수 있는 자바스크립트의 Intl API에 대해 알아보도록 하겠습니다. Intl API 소개 여러가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정을 흔히 국제화(internalization)라고 합니다. 이를 위해서는 웹페이지 상에 사용된 문구들을 단순히 번역하여 표시해주는 것만 뿐만 아니라 동일한 데이터를 언어나 지역별로 다른 형식으로 보여줘야 하는데요. 예를 들어, 12/11/21라고 표시된 날짜 데이터를 한국 사용자들은 2012년 11월 21일로 생…

파이썬의 내장 함수: all()

이번 포스팅에서는 파이썬에서 모든 것이 참인지 확인할 때 사용하는 all() 함수에 대해서 알아보겠습니다. 반복문으로 모두 참인지 확인하기 여러 개의 데이터가 모두 어떤 조건을 만족하는지 확인을 해야할 때 보통 어떻게 접근을 하시나요? 많은 분들이 자연스럽게 반복문을 떠올릴 것 같은데요. 예를 들어, 여러 숫자가 모두 양의 짝수인지 확인하는 함수를 다음과 같이 구현할 수 있을 것입니다. 이 함수에 양의 짝수로만 이루어진 리스트를 넘겨서 호출하면 True를 반환하겠죠? 반면에 인자로 넘긴 리스트에 음수가 하나라도 있다면 False가…

파이썬의 global과 nonlocal 키워드 사용법

파이썬에는 global과 nonlocal이라는 아주 많이 쓰이지는 않지만 종종 만나게 되는 재미있는 키워드가 있습니다. 이 두 키워드를 한글로 해석하면 각각 ‘전역’, ‘비지역’으로 비슷한 의미인 것 같아서 많은 분들이 햇갈려하시는데요. 이번 포스팅에서는 이 두 개의 키워드가 왜 필요하고 어떤 경우에 사용해야되는지에 대해서 알아보도록 하겠습니다. 변수의 범위(scope) global과 nonlocal 키워드에 대해서 이해하려면 먼저 변수의 범위(scope)에 대한 개념을 간단히 짚고 넘어가야할 것 같습니다. 비단 파이썬 뿐만 아니…

파이썬의 print() 함수 제대로 활용하기

아마도 파이썬에서 가장 많이 사용되는 내장 함수는 print()일 것 같은데요. 특히 아무리 디버거(debugger)가 좋아지더라도 간단한 버그를 찾을 때 print()로 출력해보는 것만큼 빠르고 간단한 방법도 없습니다. 이렇게 유용하고 많이 사용되는 print() 함수를 어떻게하면 좀 더 잘 활용할 수 있을까요? 기본 출력 제일 먼저 주변에서 print() 함수를 사용하는 가장 흔한 방법을 살펴볼까요? 매일 쓰다보니 당연히 받아드려지는 부분이지만 print() 함수는 문자열을 출력하지만 입력으로 문자열을 넘기도록 강제하지는 않습…

파이썬에서 데이터 타입 확인하기

객체 지향 프로그래밍 언어인 파이썬에서 모든 데이터는 결국 객체라고 볼 수 있습니다. 우리가 작성한 클래스의 인스턴스 뿐만 아니라, 심지어 함수, 문자열, 정수, 실수도 결국 타입을 가집니다. 이번 포스팅에서는 파이썬에서 데이터 타입을 확인할 수 있는 몇 가지 방법을 알아보도록 하겠습니다. __class__ 속성 파이썬에서 모든 객체는 __class__라는 특별한 속성을 가지는데요. 여기에는 해당 객체의 데이터 타입이 저장이 되어 있습니다. 예를 들어, 변수 a에 정수 1을 저장하고, a.__class__를 출력해보겠습니다. 정수…

파이썬에서 캐시 적용하기 (feat. @cache, @lru_cache)

하드웨어와 소프트웨어를 불문하고 Caching(캐싱)은 정말 광범위하게 다양한 형태로 활용되고 있는 성능 최적화 기법입니다. 이번 포스팅에서는 파이썬으로 프로그래밍할 때는 어떻게 캐시를 적용할 수 있는지 알아보도록 하겠습니다. 캐싱이란? 먼저 프로그래밍 입문자 분들을 위해서 캐싱에 대해서 간단히 개념은 짚고 넘어가는 게 좋을 것 같습니다. 일반적으로 캐싱은 접근하는데 시간이 오래 걸리는 데이터를 접근 속도가 빠른 저장소에 사본을 저장해두고 재사용하거나, 실행하는데 오래 걸리는 연산의 결과를 미리 계산해놓고 최초로 필요할 때 한번만…

CodePen 온라인 코드 편집기

텍스트로만은 설명하기가 부족한 부분이 있어서 별도의 시연 동영상을 유튜브에 따로 올렸으니 참고바랍니다. 요즘에는 로컬에 복잡하게 개발 환경을 구축하지 않고 대신 온라인에서 코드 편집이 가능한 도구들을 많이 사용하는 것 같습니다. 이러한 온라인 코드 편집기 중에서도 거의 원조격에 해당하면서 꾸준하게 전세계적으로 많은 개발자들에게 사랑받고 있는 CodePen에 대해서 알아보겠습니다. CodePen이란? CodePen을 한마디로 정의하면 프런트앤드(frontend) 웹 개발에 특화된 온라인 코드 편집기입니다. 프런트앤드(frontend…