hr0513 님의 블로그

문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫..

안녕하세요, hr0513입니다! 🥰 오늘은 html2canvas와 jsPDF 라이브러리를 사용하여HTML 콘텐츠를 PDF 변환하는 방법에 대해 소개해 드릴게요! ✨1. 패키지 설치html2canvas와 jsPDF 패키지를 설치해 주세요.npm install html2canvas jspdf2. HTML 콘텐츠 캡처하기html2canvas를 사용하면 특정 HTML 요소를 캡처해서 이미지로 변환할 수 있어요.이렇게 만들어진 이미지를 jsPDF로 PDF로 변환하고 저장하는 코드예요!"use client";import React from "react";import html2canvas from "html2canvas";import jsPDF from "jspdf";const Page = () => { cons..

문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다.입출력 예participantcompletionreturn["leo", "kiki", "..

안녕하세요, hr0513입니다! 🥰 제가 프론트엔드 포트폴리오를 만드느라 오늘 연속으로 블로그 글을 올리는 중인데요,그중 GSAP를 활용하여  가로/세로 스크롤 애니메이션 구현 방법을 공유하려고 합니다.gsap 설치gsap를 설치해 주세요.npm install gsap애니메이션 적용const horizontal = document.querySelector("#horizontal");const sections = gsap.utils.toArray("#horizontal > section");gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: horizontal, ..

안녕하세요, hr0513입니다! 🥰 Next.js에서 GSAP를 사용할 때 SSR(서버 사이드 렌더링) 때문에 어려움이 좀 있었는데요,구글링으로도 해결방법을 찾지 못해서 직접 해결한 방법을 공유합니다.오류 발생useEffect 밖에 gsap.registerPlugin(ScrollTrigger) 을 넣게 되면 아래와 같은 오류가 발생해요.Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used 문제의 원인Next.js는 초기 페이지를 로드할..

안녕하세요, hr0513입니다! 🥰 React에서 IntersectionObserver를 사용하여 요소가 화면에 보일 때 애니메이션을 실행하는 두 가지 방법을 소개하려고 합니다. IntersectionObserver는 특정 요소가 viewport 내에 들어왔을 때,또는 화면에서 벗어날 때 이를 감지하여 애니메이션 효과 작업을 수행할 때 사용할 수 있어요.1. 애니메이션을 한 번만 실행하는 코드import React, { useEffect, useRef, useState } from 'react';import styles from '../styles/ProjectCard.module.scss';const ProjectCard = ({ title }) => { const [isVisible, setIsV..

안녕하세요, hr0513입니다! 🥰 오늘은 Next.js 프로젝트를 설치하고, Github에 배포하는 방법에 대해 포스팅해보려고 해요.간단하게 따라 하실 수 있도록 하나하나 정리해 볼게요!1. 프로젝트 폴더 생성바탕화면에 프로젝트용 폴더를 만듭니다.2. 리액트 앱 생성Next.js 프로젝트를 생성합니다.npx create-next-app ./3. Github Pages 준비하기 3-1. gh-pages 패키지 설치배포를 위해 Github Pages용 패키지를 설치해 줍니다.yarn add -D gh-pages# ornpm i --save-dev gh-pages 3-2. package.json 수정프로젝트를 Github Pages에 배포하려면 package.json 파일에 다음과 같은 설정을 추가해줘야 ..

문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 제한사항 배열 arr의 크기 : 1,000,000 이하의 자연수 배열 arr의 원소의 크기 : 0보다 크거나 ..

문제 설명 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 조건 n과 m은 각각 1000 이하인 자연수입니다.예시 입력5 3 출력***** ***** ***** solution.jsprocess.stdin.setEncoding('utf8');process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); for (let i = 0; i

안녕하세요! 😊 hr0513입니다. VS Code에서 사용하면 유용한 단축키와 플러그인을 소개해드리려고 해요!코딩 작업을 더 빠르고 효율적으로 만들어 줄 꿀팁들이니, 한 번씩 활용해 보세요.1. 자주 사용하는 VS Code 단축키 탭 이동하기WindowsMacCtrl + TabCmd + Tab 열려 있는 탭 간에 빠르게 이동할 수 있어요. 파일을 여러 개 열어 놓고 작업할 때 시간을 절약할 수 있습니다. 현재 라인 복사WindowsMacShift + Alt + ↓Shift + Option + ↓ 현재 라인을 복사해서 아래에 바로 붙여 넣습니다. 같은 코드를 반복해서 쓸 때 유용해요. 코드 포맷팅WindowsMacShift + Alt + FShift + Option + F 코드 스타일을 일관성 있게 유지..