본문으로 건너뛰기

GitHub Actions에서 환경 변수 이해하기

· 약 12분
MinjiKim
MinjiKim
FrontEnd Engineer

들어가며

GitHub Actions에서 E2E 테스트 워크플로우를 작성하면서, 여러 레벨에서 환경 변수를 생성하고 접근할 수 있다는 점이 혼란을 유발할 수 있다는 생각이 들었습니다. GitHub이 워크플로우 실행 시 자동으로 생성하는 기본 환경 변수도 있지만, 사용자가 직접 워크플로우, job, step 레벨에서 커스텀 변수를 정의할 수도 있습니다.

이 글에서는 GitHub Actions 공식 문서를 바탕으로 환경 변수를 설정하고 활용하는 방법을 정리합니다.

curl으로 HTTP 요청 이해하기

· 약 12분
MinjiKim
MinjiKim
FrontEnd Engineer

들어가며

E2E 테스트 자동화를 도입하면서 테스트가 완료된 후 Slack 알림을 전송하는 작업을 진행했습니다. 이 과정에서 curl을 활용한 HTTP 요청이 필요했고, 익숙하지 않은 curl 요청 방식을 학습할 수 있는 좋은 기회가 되었습니다.

제 컴퓨터에서는 되는데요? #1.빌드 과정 중 특정 모듈을 찾을 수 없음

· 약 5분
MinjiKim
MinjiKim
FrontEnd Engineer

들어가며

로컬에서 문제없이 동작하던 코드가 리모트 환경에서는 예기치 않게 실패하여 당황하신 적이 있으신가요? 최근 GitHub Actions에서 로컬 빌드와 배포 환경 간의 차이로 발생한 문제를 해결하며 배운 내용을 공유합니다.

SVG가 화면에 렌더링 되지 않는 이유

· 약 18분
MinjiKim
MinjiKim
FrontEnd Engineer

들어가며

프론트 개발자라면 한두 번쯤 프로젝트를 하며 로고를 넣거나 라이브러리 아이콘을 사용하며 SVG 파일을 마주한 적이 있을 것입니다. 예를 들어, MUI 아이콘을 추가하고 개발자 도구를 열어 아이콘을 클릭해 보면 아래와 같은 코드를 볼 수 있습니다.

자바스크립트로 자연스러운 애니메이션하기: requestAnimationFrame

· 약 11분
MinjiKim
MinjiKim
FrontEnd Engineer

들어가며

레이싱 게임을 하다 갑자기 타고 있던 카트가 이상한 방향으로 움직이는 것을 경험해 본 적이 있으신가요? 이는 프레임 속도가 떨어지거나 애니메이션 타이밍이 맞지 않을 때 발생합니다. 이런 문제를 해결하기 위해 자바스크립트에서는 requestAnimationFrame을 제공합니다. 이 글에서는 화면 주사율에 맞춰 애니메이션을 업데이트할 수 있는 requestAnimationFrame에 대해 알아보겠습니다.

JavaScript에서 이진 데이터 이해하기 : ArrayBuffer, TypedArray, Blob, File

· 약 25분
MinjiKim
MinjiKim
FrontEnd Engineer

Intro

업무에서 이미지를 다루기 시작하면서 이진 데이터를 표현하고 처리하는 방법에 대해 알아보는 시간을 가졌습니다. 이진 데이터는 보통 파일을 생성, 업로드, 다운로드, 전송할 때 사용됩니다.

JavaScript에는 이런 데이터를 표현하고 다루기 위한 다양한 타입이 제공됩니다. File, Blob, ArrayBuffer, TypedArray와 같은 타입이 그 예로, 각각의 방식은 조금씩 다른 특성과 용도로 사용 되고 있습니다. 이 글에서는 각 타입이 어떤 상황에서 가장 잘 맞는지, 또 어떤 차이점이 있는지 알아보려고 합니다.

나를 '프론트 개발자'로 소개하기까지

· 약 23분
MinjiKim
MinjiKim
FrontEnd Engineer

프론트엔드 개발자로서 일을 시작한 지 어느덧 4개월이 지났습니다. 이번 글에서는 글또 9기 활동을 포함해 프론트엔드 개발자로 성장해 온 시간과 지난 4개월간의 회사 생활을 되돌아보고, 앞으로 글또 10기에서 목표한 계획을 공유하고자 합니다.