웹사이트 레이아웃을 구성하는 마크업 중 특정 부분을 이미지로 변환(캡처)한 뒤, 해당 이미지를 저장하거나 다른 용도로 활용해야 하는 경우가 종종 있습니다. 이번 글에서는 이러한 동작을 구현하는 방법을 알아보겠습니다.다만 우리가 다루어야 할 대상은 canvas뿐만 아니라 모든 마크업 요소이기 때문에, 처음부터 직접 구현하려면 상당히 복잡해집니다. 따라서 이 작업을 손쉽게 처리하기 위해 서드파티 라이브러리인 html2canvas를 사용하겠습니다. 이름 그대로 원하는 마크업 요소를 canvas로 변환해 주며, 이후에는 canvas 요소를

브라우저는 보안상의 이유로 input 요소를 통해 선택한 이미지 파일의 실제 경로에 접근하는 것을 허용하지 않습니다. 즉, 브라우저 환경에서 실행되는 JavaScript는 파일 시스템에 직접 접근할 수 없습니다. 따라서 사용자가 선택한 이미지 파일을 서버나 다른 곳으로 전송하기 전에 미리 확인할 수 있도록 미리보기 기능을 직접 구현해야 합니다.방법 1: URL 클래스 활용하기URL 클래스의 createObjectURL() 함수를 사용하면 input으로 선택한 이미지 파일에 대한 객체 URL을 생성할 수 있습니다. 이렇게 만든 URL

문제 상황웹 브라우저에서 현재 페이지의 출처(Origin)와 다른 원격 서버로 네트워크 요청을 보내면, 대부분 CORS(Cross-Origin Resource Sharing) 오류가 발생합니다. 대표적인 메시지가 바로 요청된 리소스에 Access-Control-Allow-Origin 헤더가 없습니다라는 오류입니다.그런데 흥미롭게도 동일한 API에 Postman 같은 도구로 요청하면 아무런 문제 없이 정상적으로 응답을 받을 수 있습니다. 왜 웹 브라우저에서는 실패하고 Postman에서는 성공하는 걸까요? 두 환경의 응답 동작 차이를

AJAX 요청을 통해 쿠키를 설정하거나, 모든 AJAX 요청이 해당 쿠키를 서버로 전송하도록 만들어야 하는 경우가 있습니다. 이번 글에서는 JavaScript로 쿠키를 설정하고, 네트워크 요청 시 자동으로 서버에 전달되는 원리와 구현 방법을 알아보겠습니다.AJAX 요청과 쿠키의 기본 동작 원리먼저 중요한 점 하나를 짚고 넘어가겠습니다. 브라우저는 원격 서버로 보내는 모든 AJAX 요청에 대해 개발자가 별도의 작업을 하지 않아도 자동으로 현재 도메인의 모든 쿠키를 해당 서버에 전송합니다.따라서 우리가 할 일은 매우 간단합니다. Jav

문제 소개 1부터 임의의 자연수 num까지 이어지는 숫자 시퀀스가 있다고 가정해 보겠습니다. 이 시퀀스에서 두 개의 수(m과 n)를 골라내야 하며, 선택된 두 수는 다음 조건을 만족해야 합니다. sum(1부터 num까지) - (m + n) = m * n 즉, 전체 합에서 선택한 두 수를 뺀 결과가 두 수의 곱과 정확히 같아야 합니다. 최종적으로는 조건을 만족하는 모든 숫자 쌍을 2차원 배열 형태로 반환하면 됩니다. 예제로 이해하기 입력값이 다음과 같다면, const num = 10; 기대하는 출력 결과는 아래와 같습니다. const

실무에서는 여러 단계로 중첩된(nested) JSON 객체를 자주 다루게 됩니다. 다음과 같이 임의의 깊이까지 중첩될 수 있는 JSON 객체가 있다고 가정해 보겠습니다.const obj = { one: 1, two: { three: 3 }, four: { five: 5, six: { seven: 7 }, eight: 8 }, nine: 9 };목표: 점 표기법으로 된 평면(flat) 객체 만들기우리

다음과 같은 숫자 배열이 있다고 가정해 보겠습니다.const arr = [1, 6, 3, 1, 3, 1, 6, 3];우리는 이러한 배열을 첫 번째이자 유일한 인수로 받는 JavaScript 함수를 작성해야 합니다. 그런 다음 함수는 배열에서 홀수 번(단, 딱 한 번 등장하는 경우는 제외) 등장하는 모든 숫자를 찾아야 합니다.예시위 배열에서 숫자 1과 3은 각각 3번(홀수) 등장합니다. 따라서 함수는 두 숫자의 세 번째 발생을 제거해야 합니다.결과 배열은 다음과 같아야 합니다.const output = [1, 6, 3, 1, 3, 6

이번 글에서는 05:00 PM처럼 오전/오후 표기가 포함된 12시간제 시간 문자열을 입력받아 17:00 형태의 24시간제 문자열로 변환하는 JavaScript 함수를 작성하는 방법을 알아보겠습니다.문제 정의변환 대상이 되는 시간 문자열은 항상 아래와 같은 형식으로 주어진다고 가정합니다.const timeStr = 05:00 PM;즉, 문자열 형식은 항상 HH:MM mm으로 고정되어 있으며, 함수는 이 문자열을 가공하여 다음과 같은 24시간제 형식(HH:MM)의 결과를 반환해야 합니다.예시위 문자열에 대한 기대 출력은 다음과 같습니다

문제 소개 문자열을 유일한 인수로 받아 처리하는 자바스크립트 함수를 작성해야 합니다. 이 함수의 목표는 동일한 두 문자 사이에 끼어 있는 가장 긴 부분 문자열을 찾아 그 길이를 반환하는 것입니다. 문제 예시 예를 들어, 입력 문자열이 다음과 같다고 가정해 보겠습니다. const str = sadtrsewak; 이 경우 기대하는 출력값은 다음과 같습니다. const output = 6; 그 이유는 두 개의 문자 a 사이에 위치한 dtrsew가 조건을 만족하는 가장 긴 부분 문자열이며, 그 길이가 정확히 6이기 때문입니다. 해결 방법

정수 배열을 유일한 인수로 받는 JavaScript 함수를 작성해야 합니다.이 함수의 역할은 주어진 배열을 두 개의 하위 배열로 나누었을 때, 각 하위 배열에 포함된 요소들의 합이 서로 같아지는 경우가 존재하는지 판단하는 것입니다. 단, 원본 배열의 요소를 분할하는 과정에서 어떤 요소도 남기지 않고 반드시 모두 사용해야 한다는 조건이 있습니다.문제 이해하기예를 들어 입력 배열이 다음과 같다고 가정해 보겠습니다.const arr = [5, 3, 7, 4, 1, 8, 2, 6];이때 함수가 반환해야 하는 결과는 다음과 같습니다.cons

문제 개요정수 배열을 유일한 인자로 받는 JavaScript 함수를 작성해야 합니다. 이 함수는 먼저 원본 배열에서 만들 수 있는 홀수 길이의 모든 하위 배열(연속 부분 배열)을 생성한 뒤, 해당 하위 배열들의 모든 요소를 합산하여 그 총합을 반환해야 합니다.예를 들어 입력 배열이 다음과 같다면,const arr = [1, 2, 3];출력은 다음과 같아야 합니다.const output = 12;그 이유는 원하는 하위 배열이 [1], [2], [3], [1, 2, 3]이며, 이들의 합이 1 + 2 + 3 + (1 + 2 + 3) =

이번 글에서는 정수 배열을 인자로 하나만 받는 JavaScript 함수를 작성해 보겠습니다.함수는 입력으로 받은 배열을 바탕으로, 다음 조건에 따라 같은 길이의 새로운 배열을 만들어 반환해야 합니다.문제 이해하기출력 배열의 각 요소는 그 시점까지 등장한 숫자 중 가장 큰 세 수의 곱이어야 합니다. 다만 아직 세 개의 요소를 만나지 못한 경우, 즉 해당 인덱스가 3보다 작다면 그 자리에는 -1을 넣습니다.곱을 계산할 때 값이 같은 숫자를 사용하는 것은 허용되지만, 반드시 서로 다른 인덱스에 있는 값이어야 한다는 점에 유의하세요.예시입

이번 글에서는 양의 정수 하나를 입력받아, 1부터 그 수(n)까지의 모든 양의 정수에 등장하는 숫자 1의 총 개수를 구하는 JavaScript 함수를 작성해 보겠습니다.여기서 n 자체에 1이 포함되어 있다면 n도 반드시 포함해야 합니다. 최종적으로 함수는 이 개수를 반환하면 됩니다.문제 이해하기예를 들어 입력값이 다음과 같다고 가정해 봅시다.const num = 31;그렇다면 출력 결과는 다음과 같아야 합니다.const output = 14;그 이유는 1부터 31 사이에서 숫자 1이 등장하는 수들이 다음과 같기 때문입니다.1, 10

해밍 거리(Hamming Distance)란?해밍 거리는 길이가 같은 두 문자열에서 서로 다른 문자가 나타나는 위치의 개수를 의미합니다.다르게 표현하면, 한 문자열을 다른 문자열로 변환하기 위해 필요한 최소한의 변경(치환) 횟수라고 할 수 있습니다. 해밍 거리는 일반적으로 길이가 동일한 문자열에 대해서만 측정됩니다.구현 목표이번 글에서는 길이가 같은 두 문자열 str1과 str2를 인자로 받아, 두 문자열 사이의 해밍 거리를 계산하여 반환하는 자바스크립트 함수를 작성해 보겠습니다.동작 방식함수의 로직은 매우 간단합니다.먼저 두 문자

아나그램이란?아나그램(Anagram)은 같은 문자들을 서로 다른 순서로 재배열하여 만들 수 있는 두 단어 또는 문구를 의미합니다. 예를 들어 rat과 tar는 동일한 알파벳 r, a, t로 구성되어 있으므로 서로의 아나그램이라고 할 수 있습니다.문제 상황아나그램 관계에 있는 문자열들이 포함될 수 있는 문자열 배열을 입력받는 JavaScript 함수를 작성해야 합니다. 이 함수는 모든 아나그램들을 별도의 하위 배열로 묶어 새로운 배열 형태로 반환해야 합니다.예를 들어, 다음과 같은 입력 배열이 주어졌다고 가정해 보겠습니다.const

문제 개요 이번 포스트에서는 양의 정수 n을 유일한 인수로 받아 다음 작업을 수행하는 JavaScript 함수를 만들어 보겠습니다. 함수는 먼저 1부터 n까지의 모든 정수를 각 자릿수의 합을 기준으로 여러 그룹으로 나눕니다. 예를 들어 10은 1 + 0 = 1이므로 1과 같은 그룹에, 13은 1 + 3 = 4이므로 4와 같은 그룹에 속하게 됩니다. 그룹화가 끝나면 가장 많은 요소를 가진 그룹의 크기를 확인하고, 그 크기를 공유하는 그룹이 총 몇 개인지 반환합니다. 예시로 이해하기 입력값이 다음과 같다고 가정해 보겠습니다. cons

```html 행운의 숫자(Lucky Number)란?행운의 숫자(Lucky Number)는 행렬(matrix)에서 자신이 속한 행(row)의 최솟값이면서 동시에 자신이 속한 열(column)의 최댓값인 원소를 뜻합니다.즉, 어떤 원소가 행에서는 가장 작고, 열에서는 가장 크다는 두 조건을 모두 충족할 때 그 원소를 행운의 숫자라고 부릅니다.문제 정의정수로 이루어진 2차원 배열을 입력받아, 배열 내부에 존재하는 모든 행운의 숫자를 찾아 새로운 배열로 만들어 반환하는 JavaScript 함수를 작성해야 합니다. 만약 행운의 숫자가 하

문제 소개이번 문제는 숫자 배열을 입력으로 받는 JavaScript 함수를 작성하는 것입니다.함수는 입력 배열을 기반으로 새로운 배열을 만들어야 하며, 새 배열의 각 요소는 원본 배열에서 해당 위치의 숫자보다 작은 값의 개수를 나타내야 합니다.예시예를 들어, 입력 배열이 다음과 같다고 가정해 보겠습니다.const arr = [2, 7, 3, 1, 56, 4, 7, 8];그렇다면 출력 배열은 아래와 같아야 합니다.const output = [1, 4, 2, 0, 7, 3, 4, 6];출력 결과를 살펴보면 각 요소가 어떤 의미인지 쉽게

정수 배열을 유일한 인자로 받는 JavaScript 함수를 작성해야 합니다.이 함수는 각 정수를 이진수 표현에서 1의 개수를 기준으로 오름차순 정렬해야 합니다. 만약 두 개 이상의 숫자가 이진수에서 1의 개수가 같다면, 그 숫자들은 실제 값(크기) 기준으로 오름차순 정렬되어야 합니다.문제 예시예를 들어, 입력 배열이 다음과 같다고 가정해 보겠습니다.const arr = [34, 37, 23, 89, 12, 31, 23, 89];각 숫자의 이진수 표현과 1의 개수는 아래와 같습니다.34 → 100010 → 1의 개수: 2개12 → 1

두 개의 문자열 str1과 str2를 인수로 받는 JavaScript 함수를 작성해야 합니다.이 함수의 역할은 str1에서 정확히 한 글자를 삭제했을 때 str2와 동일한 문자열을 만들 수 있는지 판별하는 것입니다. 가능하다면 true를, 그렇지 않다면 false를 반환하면 됩니다.문제 예시예를 들어 입력 문자열이 다음과 같다고 가정해 보겠습니다.const str1 = chemistty; const str2 = chemisty;chemistty에서 가운데의 t 하나를 제거하면 chemisty가 되므로, 기대되는 출력 결과는 다음과