React에서는 컴포넌트 스타일링을 위해서 CSS-in-JS 라이브러리가 매우 많이 사용되고 있는데요. 이번 포스팅에서는 Styled Components와 함께 CSS-in-JS 라이브러리의 양대산맥으로 손꼽히는 손꼽히는 이모션(Emotion)을 사용해서 React 컴포넌트를 스타일하는 방법에 대해서 살펴보겠습니다. 외부 라이브러리 없이 React 컴포넌트를 스타일링하는 방법은 React 컴포넌트 CSS 스타일링 기본을 참고 바랍니다. 패키지 설치 자바스크립트 패키지 매니저인 npm을 이용하면 React 프로젝트에 Emotion을
구글 지도(Google Maps)는 구글에서 제공하는 글로벌 지도 서비스입니다. 네이버나 카카오에서 제공하는 지도 서비스와 달리 국내 지도 뿐만 아니라 해외 지도까지 제공하기 때문에 전 세계 사용자를 대상으로 하는 애플리케이션을 개발할 때 특히 유용하게 사용할 수 있는데요. 이번 포스팅에서는 구글 지도를 웹페이지 상에서 띄우고 제어할 때 사용하는 구글 Maps API에 대해서 알아보려고 합니다. 차근차근 따라오시다보면 위와 같은 구글 지도를 웹페이지에 나오게 수 있으실 것입니다. 😁 API 키 발급 받기 구글 Maps API를 사
C, C++, C#, Objective-C, Swift, Java, Kotlin, Scala, Go, Rust, Python, PHP, Ruby, JavaScript, HTML, CSS, SQL... 프로그래밍 언어의 과잉의 시대에서 여러분은 어떤 프로그래밍 언어로 소프트웨어 개발을 하고 계신가요? 이번 포스팅에서는 코딩 입문자를 위해서 이렇게 수많은 프로그래밍 언어를 분류하는 몇 가지 기준에 대해서 얘기해보겠습니다. 레벨(level)에 따른 분류 프로그래밍 언어에 대해서 얘기할 때 흔히 얼마나 레벨 또는 수준(level)이 높으냐
달레줄레 첫 번째 에피소드에서는 프로그래밍 관련 국내외 팟캐스트 현황과 달레와 줄레가 프로그래밍 팟케스트를 시작한 계기에 대해서 이야기 나누어 보았습니다 😄 달레줄레 팟케스트는 다음 플랫폼에서 들으실 수 있습니다. Apple Podcast YouTube 팟빵 오디오클립
새 프로젝트에 합류했는데 개발 환경 설정에만 하루 이상 걸린 적 있으신가요? Node.js 버전이 안 맞고, Python 패키지가 충돌하고, 데이터베이스 설치가 안 되고… 😅 이런 문제는 개발자라면 누구나 한 번쯤 겪어봤을 텐데요. Dev Container는 이런 골치 아픈 개발 환경 설정을 컨테이너 안에 통째로 담아서 해결합니다. 설정 파일 하나만 프로젝트에 넣어두면 팀원 누구나 동일한 환경에서 바로 작업을 시작할 수 있죠. 이번 글에서는 Dev Container가 뭔지, 어떻게 쓰는지 처음부터 차근차근 알아보겠습니다. Dev
React 프로젝트에서 대부분의 외부 스크립트는 npm 패키지로 설치해서 불러올 수 있지만 간혹 npm 패키지가 제공되지 않는 경우도 있습니다. 이럴 경우 어쩔 수 없이 웹에서 전통적으로 외부 스크립트를 불러오는 방법인 HTML 문서의 <script> 태그를 사용할 수 밖에 없는데요. 이번 포스팅에서는 React 컴포넌트에서는 어떻게 <script> 태그로 외부 자바스크립트 불러울 수 있는지에 대해서 알아보도록 하겠습니다. index.html 파일 안에 script 태그 추가하기 일반적으로 React 프로젝트에는 public 폴더나
이번 포스팅에서는 Glob Patterns, 흔히 줄여서 Globs라고 불리는 패턴 매칭에 대해서 알아보도록 하겠습니다. Globs(Glob Patterns)란? Globs은 오래전부터 리눅스 운영체제에서 한 번에 여러 개의 파일을 찾을 때 사용해온 패턴 매칭 기법인데요. 많은 리눅스 명령어가 인자로 Glob 패턴을 받기 때문에 알게 모르게 많이 사용하고 있으실 거에요. 예를 들어, 터미널에서 ls src/*.java와 유사한 커맨드를 날려보신 적이 있으시면 이미 어느 정도 Globs 문법을 자연스럽게 체득하셨다고 볼 수 있을 것
지난 포스팅에서는 커스텀(custom) React Hook을 사용하여 양식(form) UI를 구현해보았는데요. 이번 포스팅에서는 이와 유사한 방식으로 React Hook 기반의 API를 제공하는 React Hook Form 라이브러리에 대해서 알아보려고 합니다. 새로운 라이브러리를 배우는 가장 효과적인 방법은 그 라이브러리를 이용해서 무언가를 만들어보는 것이 겠죠? 본 포스팅을 끝까지 따라오시면 아래와 같은 로그인 폼(form)을 만드실 수 있으실 거 에요 😁 패키지 설치 React Hook Form 라이브러리는 자바스크립트 패키
GitHub Actions을 사용하다 보면 시간이 지남에 따라 워크플로우가 점점 복잡해지고, 그에 따라 중복되는 부분이 생기며 결국 워크플로우의 유지보수가 어려워지게 되는데요. 이번 포스팅에서는 GitHub Actions에서 워크플로우를 재사용하여 이러한 중복 설정 문제를 해결해보도록 하겠습니다. 실습 워크플로우 생성 실습을 위해서 자바스크립트 프로젝트의 전형적인 워크플로우 파일을 하나 작성해보았습니다. main 브랜치로 새로운 커밋(commit)이 유입되면 애플리케이션을 빌드하여 배포하는 작업을 수행되도록 하겠습니다. 6개의 단계
많은 분들이 GitHub Actions을 사용하실 때 GitHub Marketplace에 공개된 액션을 사용하실텐데요. 만약에 필요한 액션을 찾지 못했거나 회사에 보안 상의 이유로 승인되지 않은 외부 액션을 사용할 수 없다면 어떻게 해야 할까요? 이번 글에서는 GitHub Actions에서 직접 액션을 만들어보고 워크플로우에서 사용하거나 GitHub Marketplace를 통해 공유하는 방법에 대해서 알아보겠습니다. 액션의 종류 GitHub Actions에서는 도커(Docker) 컨테이너 액션, 자바스크립트 액션, 복합(compos
이번 포스팅에서는 타입스크립트 코드를 자바스크립트로 코드로 컴파일하는 기본적인 방법에 대해서 알아보겠습니다. 타입스크립트 컴파일러 우선 타입스크립트 컴파일러(TypeScript compiler)가 무엇을 해주는 도구인지 간단히 짚고 넘어갈까요? 일반적으로 컴파일(compile)은 소스 코드를 특정 플렛폼에서 실행 가능한 형태로 변환하는 과정을 의미하는데요. 기존에는 C++나 Java와 같이 자체 타입 시스템을 가진 프로그래밍 언어에서 주로 다뤄지던 개념이었으나, 타입스크립트의 등장 이후로는 자바스크립트에서도 컴파일이라는 용어를 심심
GitHub Actions 워크플로우를 작성하다 보면 GitHub Pages에 배포하거나, PR에 댓글을 달거나, 이슈에 라벨을 붙이는 등 단순히 코드를 빌드하고 테스트하는 것 이상의 작업을 하게 되는 경우가 많죠? 이때 워크플로우가 GitHub API에 접근하려면 적절한 권한이 필요한데요. 이번 포스팅에서는 GitHub Actions에서 워크플로우의 권한을 제어하는 permissions 키워드에 대해 자세히 알아보겠습니다. GITHUB_TOKEN이란? GitHub Actions에서 워크플로우가 실행될 때마다 GitHub은 자동으로
많은 자바스크립트 프로젝트에서 ESLint를 사용하여 코드에 문제가 없는지 검사를 하고 있습니다. 이번 포스팅에서는 ESLint를 어떻게 설정하는지에 대해서 각 옵션 별로 좀 자세히 알아보겠습니다. ESLint에 대한 기본적인 사용법은 관련 포스팅를 참고 바랍니다. 설정 파일 형식 ESLint는 JSON, YAML, JavaScript와 같이 다양한 형식의 설정 파일을 지원하는데요. 설정 파일의 이름은 항상 .eslintrc가 되야하며, 원하는 포맷에 따른 파일 확장자를 사용해야 합니다. 예를 들어, JSON 파일 포맷을 사용하고
소프트웨어 개발에서 아티팩트(Artifact)라는 용어는 보통 프로젝트에서 소스 코드를 빌드(build)한 결과물로 생성된 파일을 가리키는데요. 이번 포스팅에서는 GitHub Actions의 아티팩트 기능을 활용하여 깃허브의 CI 서버에 파일을 올리거나 내려받는 방법에 대해서 알아보겠습니다. 실습 프로젝트와 코드 저장소 생성 간단한 실습을 위해서 Create React App을 통해 자바스크립트 프로젝트를 하나 생성하겠습니다. 그 다음 본인 깃허브 계정에 새로운 코드 저장소(repository)를 하나를 만들고 위에서 생성한 프로젝
어느 프로그래밍 언어를 사용하든 요즘 대부분의 소프트웨어 프로젝트는 수많은 다른 패키지에 의존하기 마련인데요. 로컬 환경에서 소프트웨어 개발을 할 때는 이러한 외부 패키지를 최초에 딱 한 번만 설치하면 되지만 항상 새롭게 셋업되는 CI 서버에서는 이 작업을 매번 다시 해야합니다. 이번 포스팅에서는 깃허브에서 제공하는 캐시(Cache) 액션을 사용하여 CI 서버에서 발생할 수 있는 불필요한 패키지 재설치를 예방해보겠습니다. GitHub Actions의 액션(Action)이란? 먼저 GitHub Actions에서 액션(Action)이
어느 프로그래밍 언어로 코딩을 하든 우리는 수시로 데이터를 정렬해야 되는데요. 이번 포스팅에서는 파이썬에서 데이터를 어떻게 정렬하는지 알아보도록 하겠습니다. sorted() 내장 함수 파이썬에서 정렬을 할 때 가장 부담없이 사용할 수 있는 방법은 내장된 sorted() 함수를 이용하는 것입니다. sorted() 내장 함수는 파이썬에서 순회가 가능한(iterable) 객체를 인자로 받아 데이터를 정렬해줄 수 있습니다. sorted() 내장 함수는 인자로 넘어온 객체의 원래 순서를 건드리지 않고 정렬된 원소들을 새로운 객체에 담아서 반
이번 포스팅에서는 깃허브의 CI 서비스인 GitHub Actions를 사용하여 자바스크립트 프로젝트의 지속 통합(Continuous Integration)을 위한 워크플로우를 구성하는 방법에 대해서 알아보겠습니다. 또한 자바스크립트 프로젝트에서 GitHub Actions 셋업이 용이하도록 깃허브에서 제공하는 Setup Node 액션에 대해서도 살펴보겠습니다. 실습 프로젝트와 코드 저장소 생성 실습을 위해서 Create React App을 통해 간단한 자바스크립트 프로젝트를 하나 생성하겠습니다. 그 다음 본인 깃허브 계정에 새로운 코
GitHub Actions에서 가장 많이 사용되는 액션(Action)은 무엇일까요? 바로 저장소로 부터 코드를 내려받기 위한 체크아웃(Checkout) 액션인데요. 이번 포스팅에서는 GitHub Actions를 사용할 때 거의 필수적으로 사용하게 되는 체크아웃 액션에 대해서 알아보겠습니다. GitHub Actions의 액션(Action)이란? 먼저 GitHub Actions에서 액션(Action)이 무엇을 의미하는지 간단하게 짚고 넘어가겠습니다. GitHub Actions는 일반적으로 CI(Continuous Integration,
지난 포스팅에서는 GitHub Actions의 4가지 핵심적인 개념인 워크플로우(workflow), 작업(job), 단계(step), 액션(action)에 대해서 가볍게 살펴보았는데요. 이번 포스팅에서는 작업(Job)의 근간이 되는 단계(step)에 대해서 좀 더 깊이 다뤄보도록 하겠습니다. GitHub Actions에서 단계(step)란? GitHub Actions에서 하나의 작업(job)은 순차적으로 실행되는 여러 단계(step)로 모델링이 되는데요. 이 단계는 단순한 커맨드(command)나 스크립트(script)가 될 수도
이번 포스팅에서는 MSW(Mock Service Worker) 라이브러리를 이용하여 백엔드 API를 모킹(mocking)하는 방법에 대해서 알아보겠습니다. Mock Service Worker란? MSW(Mock Service Worker)는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리입니다. 쉽게 말해, 브라우저에 기생(?)해서 마치 백엔드 API인 척하면서 프론트엔드의 요청에 가짜 데이터를 응답해주는 녀석이라고 볼 수 있겠네요. 비교적에 최근에 도입된 웹 표준