이번 포스팅에서는 자바스크립트에서 배열을 합치는 방법에 대해서 간단히 정리해보겠습니다. concat() 메서드 연결하다(concatenate)를 의미하는 배열의 concat() 메서드를 사용하면 하나의 배열에 다른 배열을 합칠 수 있습니다. 예를 들어, concat() 메서드로 숫자 배열에 글자 배열을 합쳐보겠습니다. concat() 메서드의 중요한 특징은 바로 원본 배열을 건드리지 않고 새로운 배열을 반환한다는 것입니다. 따라서 원본 배열을 건드리지 않는 배열의 다른 메서드와 함께 체인(chain)의 형태로 연쇄 호출이 가능합니다
웹에서 페이지 간의 이동은 일반적으로 하이퍼링크(Hyperlink)를 통해 이루어집니다. 즉, 사용자가 웹 페이지 상의 링크를 클릭하면 브라우저에서 해당 페이지가 열리게 됩니다. 웹 개발자는 이를 위해 HTML의 <a> 요소의 href 속성에 이동해야 할 URL을 명시해주죠. 하지만 웹 개발을 하다보면 부득이하게 자바스크립트로 페이지 이동을 처리해야하는 경우가 생기기 마련인데요. 대표적인 예로 미인증 사용자가 접근했을 때 바로 로그인 페이지로 강제 이동 시키는 것을 들 수 있겠습니다. 이번 글에서는 자바스크립트를 사용하여 페이지 이
지난 포스팅에서는 URL API의 URL을 사용하여 좀 더 안전하게 웹 주소 다루는 방법에 대해서 살펴보았는데요. 이번 포스팅에서는 URL API에서 제공하는 또 다른 유용한 기능인 URLSearchParams를 이용하여 웹 주소의 구성 요소 중에서도 가장 다루기 어려운 쿼리 스트링(Query String) 다루는 방법에 대해서 알아보겠습니다. URLSearchParams 객체의 필요성 자바스크립트의 URLSearchParams에 대해서 본격적으로 배우기 전에 먼저 URL의 쿼리 스트링에 대해서 짚고 넘어가는 게 좋을 것 같아요.
Prettier는 일관적인 규칙에 따라서 코드를 자동으로 포맷팅해줌으로써 특히 협업 프로젝트에서 개발 생산성을 올려주는 유용한 도구입니다. Prettier는 대부분의 경우에 별다른 설정없이 그대로 사용할 수 있으나 간혹 개발팀의 입맛에 맞게 약간의 설정이 필요한 경우도 생길 수 있는데요. 이번 글에서는 Prettier의 설정 방법을 알아보고 자주 사용되는 옵션에 대해서 살펴보겠습니다. 자바스크립트에서 가장 많이 사용되는 코드 포맷터인 Prettier 자체에 대한 내용은 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다. Prett
웹 개발에서 URL을 다루는 일은 참 빈번하게 발생하죠? 프론트엔드에서는 URL로 다른 웹페이지로 링크를 걸고, CSS와 자바스크립트 코드를 불러오며, 이미지, 오디오, 비디오와 같은 멀티미디어도 제공할 수 있습니다. 반면에 백엔드에서는 요청 URL의 경로에 따라서 DB에 저장되어 있는 데이터를 조회하고 URL의 쿼리 스트링으로 넘어온 매개변수에 따라서 다른 데이터 처리를 해줄 수 있습니다. 이번 글에서는 웹 주소를 좀 더 안전하게 다룰 수 있도록 도와주는 자바스크립트의 URL API에 대해 알아보겠습니다. URL이란? 우리는 거의
자바스크립트에서 부분 문자열이 필요하실 때 substr()을 쓰시나요 아니면 substring()을 쓰시나요? 혹시 이 두 함수가 동일하다고 생각하시고 계셨나요? 🤪 이름이 비슷한 이 두 함수는 둘 다 문자열의 일부를 잘라내는 기능을 수행하지만 사용 방법과 동작 방식에서 미묘한 차이가 있는데요. 의외로 많은 개발자들이 이 두 함수를 무분별하게 혼용해서 사용하다가 당혹스러운 상황을 겪기도 합니다. 이번 글에서는 substr()와 substring() 함수에 대해 자세히 알아보고 각각의 특징과 어떤 점이 같고 어떤 점이 다른지에 대해
CSS로 웹사이트의 레이아웃을 잡다보면 어떤 HTML 요소의 높이를 브라우저의 화면에 맞추고 싶을 때가 있죠? 웹 페이지의 풋터(footer) 영역을 화면 하단에 붙이고 싶을 때도 그렇고 모바일에서는 네비게이션 버튼을 화면 하단에 두기도 하니까요. 이번 글에서는 CSS로 화면 높이의 HTML 요소 만드는 다양한 방법에 대해서 알아보겠습니다. 흔히 범하는 실수 CSS 초보자들이 HTML 요소의 높이를 스타일할 때 하기 쉬운 실수가 있는데요. 바로 무작정 height 속성을 100%로 설정하고 해당 요소의 높이가 화면 높이만큼 커질 거
웹 개발자라면 200, 404, 500과 같은 HTTP 상태 코드에 대해 한 번쯤은 들어보셨을텐데요. 경험을 통해서 이렇게 자주 보이는 코드에 대해서 막연히 감은 있으시지만, 실제로 내가 HTTP 상태 코드에 대해서 잘 알고 있는지에 대해서 스스로 의문이 들 때가 있으실 것입니다. 특히 백엔드 개발자라면 요즘에 웹이나 Rest API 개발을 간편하게 해주는 프레임워크가 워낙 잘 나와있다보니, 어떤 상태 코드를 응답하고 있는지에 대해서 오히려 소홀해 질 수 있는 것 같아요. 이번 글에서는 웹 개발에 있어서 HTTP 상태 코드가 얼마나
최근에 웹 개발에 대해서 얘기할 때 메타 프레임워크(Meta Framework)라는 용어를 한 번쯤 써보셨거나 적어도 들어보셨을텐데요. 하지만 자주 쓰이는 용어임에도 불구하고 막상 메타 프레임워크가 뭔지 설명해보려고 하면 쉽지 않은 것 같죠? 이번 글에서는 요즘 유행하는 메타 프레임워크가 전통적인 프레임워크와 어떻게 다르며 왜 필요한지에 대해서 알아보았습니다. 그리고 현재 시장에 어떤 메타 프레임워크가 주목받고 있는지도 간단히 살펴보겠습니다. 메타 프레임워크의 특징 우리가 기존에 프레임워크를 생각할 때는 보통 어떤 프로그래밍 언어를
배열 안의 값들을 정렬하는 것은 백엔드 프론트엔드를 가리지 않고 빈번하게 필요한 작업이죠? 자바스크립트에서 배열을 정렬할 때는 예전부터 있었던 sort() 함수나 비교적 최근에 추가된 toSorted() 함수를 사용합니다. 이번 글에서는 이 두 함수를 사용하여 자바스크립트에서 배열을 정렬하는 기본적인 방법과 주의해야 할 부분에 대해서 알아보겠습니다. 배열의 sort() 함수 자바스크립트에서 배열을 정렬을 하는 가장 유명한 방법은 뭐니뭐니 해도 sort() 함수일텐데요. 배열을 상대로 sort() 함수를 호출하면 해당 배열 내의 값들
이번 글에서는 가드(Guard)를 활용하여 NestJS 앱을 위험한 요청으로 부터 효과적으로 보호하는 방법에 대해서 배워보도록 하겠습니다. 가드(Guard)란? NestJS에서 가드(guard)란 애플리케이션의 최전선에서 말그대로 애플리케이션을 보호하는 역할을 담당하는데요. NestJS로 들어오는 요청은 컨트롤러(controller) 단에 도달하기 전에 반드시 가드를 거쳐가도록 되어 있습니다. 가드를 이용하면 컨트롤러가 요청을 처리하기 전에 안전하지 않은 요청을 효과적으로 차단할 수 있습니다. 따라서 애플리케이션 보안을 위해서 필수
많은 분들이 GitHub Actions을 사용하실 때 GitHub Marketplace에 공개된 액션을 사용하실텐데요. 만약에 필요한 액션을 찾지 못했거나 회사에 보안 상의 이유로 승인되지 않은 외부 액션을 사용할 수 없다면 어떻게 해야 할까요? 이번 글에서는 GitHub Actions에서 직접 액션을 만들어보고 워크플로우에서 사용하거나 GitHub Marketplace를 통해 공유하는 방법에 대해서 알아보겠습니다. 액션의 종류 GitHub Actions에서는 도커(Docker) 컨테이너 액션, 자바스크립트 액션, 복합(compos
웹사이트 개발을 하다보면 여러가지 이유로 내가 작성하지 않은 서드파티(3rd-party) 스크립트를 불러와야 하는 경우가 있습니다. 대표적인 예로 Google Analytics와 같은 통계용 스크립트와 Google AdSense와 같은 광고용 스크립트를 들 수 있는데요. 이번 글에서는 웹 워커(Web Worker)라는 기술을 사용하여 이러한 서드파티 스크립트를 매우 빠르게 로딩해주는 혁신적인 라이브러리인 Partytown을 소개해드리겠습니다. 기존 스크립트 로딩 방식의 문제점 Partytown에 대해서 이야기하기 전에 기존에 웹에서
ChatGPT와 같은 LLM(Large Language Model, 대형 언어 모델)이 등장하면서 웹에서 텍스트를 스트리밍하는 사례가 점점 늘어나고 있는데요. 그에 따라 별다른 라이브러리없이도 웹에서 스트림을 쓰고 읽을 수 있는 자바스크립트의 Streams API가 다시 주목받고 있는 것 같습니다. 이번 포스팅에서는 자바스크립트의 Streams API을 사용하여 스트림을 생성하고 데이터를 읽는 방법에 대해서 알아보겠습니다. 읽을 수 있는 스트림 생성 자바스크립트에서 데이터를 읽을 수 있는 스트림을 만들 때는 ReadableStrea
GitHub Actions을 사용하다 보면 시간이 지남에 따라 워크플로우가 점점 복잡해지고, 그에 따라 중복되는 부분이 생기며 결국 워크플로우의 유지보수가 어려워지게 되는데요. 이번 포스팅에서는 GitHub Actions에서 워크플로우를 재사용하여 이러한 중복 설정 문제를 해결해보도록 하겠습니다. 실습 워크플로우 생성 실습을 위해서 자바스크립트 프로젝트의 전형적인 워크플로우 파일을 하나 작성해보았습니다. main 브랜치로 새로운 커밋(commit)이 유입되면 애플리케이션을 빌드하여 배포하는 작업을 수행되도록 하겠습니다. 6개의 단계
git restore는 작업 디렉토리(working directory)나 스테이징 영역(staging area)에 있는 파일을 이전 상태로 되돌릴 때 사용하는 Git 명령어입니다. Git 2.23 버전(2019년 8월)에서 처음 도입되었는데요, 기존 git checkout의 파일 복원 기능을 좀 더 명확하고 안전하게 쓸 수 있도록 만들어졌습니다. 레거시 명령어인 git checkout에 대해서는 별도의 포스팅에서 다루고 있으니 참고 바랍니다. 작업 디렉토리의 변경사항 되돌리기 코드를 수정하다 보면 변경한 내용이 마음에 들지 않아서
깃허브(GitHub)는 개발자들이 소프트웨어 프로젝트를 관리하고 협업하는 데 필요한 다양한 기능을 제공하는 매우 인기있는 플랫폼인데요. 일상적인 개발을 할 때는 깃허브의 웹사이트를 통해서 대부분의 작업을 처리할 수 있지만 개발 과정을 자동화하거나 다른 개발 도구와 통합할 때는 프로그래밍적으로 접근해야 할 때가 있습니다. 이럴 때는 깃허브에서 제공하는 REST API를 사용하면 되는데요. 이번 포스팅에서는 터미널에서 curl로 깃허브의 REST API를 실제로 같이 호출해보면서 기본적인 API 사용 방법에 대해서 알아보겠습니다. 터미
Git으로 작업하다 보면 방금 한 커밋을 취소하고 싶거나, 스테이징한 파일을 다시 내리고 싶을 때가 있죠. 이럴 때 가장 먼저 떠오르는 명령어가 바로 git reset입니다. git reset은 현재 브랜치의 HEAD 위치를 옮기면서 커밋 히스토리와 스테이징 영역, 작업 디렉토리의 상태를 조절할 수 있는 강력한 명령어인데요. 그만큼 옵션에 따라 동작이 크게 달라지기 때문에 제대로 이해하고 써야 합니다. 이번 글에서는 git reset의 세 가지 모드를 중심으로 기본 개념부터 실전 활용법까지 함께 알아보겠습니다. HEAD가 무엇인지
우리가 코드를 관리하는 GitHub의 저장소(repository)에서는 여러가지 일(event)들이 일어날 수 있죠? 개발자가 새로운 커밋(commit)을 푸시(push)할 수도 있고, 기여자(contributor)가 PR(pull request)을 제출하거나 사용자가 이슈(issue)를 보고할 수도 있습니다. GitHub Actions를 사용하면 이렇게 GitHub 저장소에서 일어나는 다양한 이벤트에 자동으로 반응하도록 워크플로우(workflow)를 구성할 수 있는데요. 이번 포스팅에서는 GitHub Actions에서 워크플로우를
소프트웨어 개발에서 아티팩트(Artifact)라는 용어는 보통 프로젝트에서 소스 코드를 빌드(build)한 결과물로 생성된 파일을 가리키는데요. 이번 포스팅에서는 GitHub Actions의 아티팩트 기능을 활용하여 깃허브의 CI 서버에 파일을 올리거나 내려받는 방법에 대해서 알아보겠습니다. 실습 프로젝트와 코드 저장소 생성 간단한 실습을 위해서 Create React App을 통해 자바스크립트 프로젝트를 하나 생성하겠습니다. 그 다음 본인 깃허브 계정에 새로운 코드 저장소(repository)를 하나를 만들고 위에서 생성한 프로젝