dev-hpk 님의 블로그

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제휴대폰의 자판은 컴퓨터 키보드 자판과는 다르게 하나의 키에 여러 개의 문자가 할당될 수 있습니다. 키 하나에 여러 문자가 할당된 경우, 동일한 키를 연속해서 빠르게 누르면 할당된 순서대로 문자가 바뀝니다.예를 들어, 1번 키에 "A", "B", "C" 순서대로 문자가 할당되어 있다면 1번 키를 한 번 누르면 "A", 두 번 누르면 "B", 세 번 누르면 "C"가 되는 식입니다. 같은 규칙을 적용해 아무렇게나 만든 휴대폰 자판이 있습니다. 이 휴대폰 자판은 키의 개수가 1개부터 최대 100개까지 있을 수 ..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다.문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다.index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다.skip에 있는 알파벳은 제외하고 건너뜁니다.예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 ..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다.먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다.이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수가 같아지는 순간 멈추고, 지금까지 읽은 문자열을 분리합니다.s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다.만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽..

React는 컴포넌트 기반의 UI 라이브러리로, 데이터를 기반으로 동적으로 UI를 렌더링 하는 경우가 많습니다. 특히, 배열 데이터를 기반으로 여러 컴포넌트를 반복해서 렌더링 할 때 배열의 각 항목을 고유하게 식별할 필요가 있습니다. 이때 key prop을 사용하여 React가 각 항목을 효율적으로 처리하고 성능을 최적화할 수 있도록 도와줍니다.  목차 1. key Prop이란? 2. key Prop의 필요성 3. key Prop 사용 방법 4. key의 중요성추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. key Prop이란?key는 React가 리스트를 렌더링할 때 각 항목을 구분할 수 있도록 도와주는 고유한 값입니다. React는 DOM 업데이트 과정에서 변경된 부분만 효율적으로..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다.  순위당첨 내용16개 번호가 일치25개 번호가 일치34개 번호가 일치43개 번호가 일치52개 번호가 일치6(낙첨)그 외  로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최..

React Router는 클라이언트 측 라우팅을 쉽게 구현할 수 있는 도구로, URL을 기반으로 경로를 관리하면서 다양한 데이터(파라미터, 쿼리 등)를 전달하고 처리하는데 매우 유용합니다. 특히, URL을 통해 데이터를 전달할 수 있는 동적 파라미터와 쿼리 스트링은 페이지 간 데이터 전달과 필터링 기능을 구현하는데 필수적입니다.   목차   1. useParams - 동적 URL 파라미터 사용하기 2. useSearchParams - 쿼리 스트링 사용하기 3. 파라미터와 쿼리 스트링을 함께 사용하기 4. navigate - 쿼리 스트링 동적으로 변경하기 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useParams - 동적 URL 파라미터 사용하기URL 파라미터는 경로의 일부로 특..

React Router는 SPA(Single Page Application)에서 클라이언트 측 라우팅을 구현하기 위한 표준 라이브러리입니다. React Router를 사용하면 페이지 간 전환을 빠르고 부드럽게 처리할 수 있어 사용자 경험이 향상됩니다.   목차 1. Router 설치 2. Router 기본 개념 3. 중첩 라우팅 (Nested Routing)마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Router 설치 React Router를 사용하려면 다음 명령어로 react-router-dom 패키지를 설치해야 합니다npm install react-router-dom 2. Router 기본 개념2.1. BrowserRouter BrowserRouter는 History API를..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1. 문제카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의 합계로 실력을 겨루는 게임으로, 모두가 간단히 즐길 수 있다.갓 입사한 무지는 코딩 실력을 인정받아 게임의 핵심 부분인 점수 계산 로직을 맡게 되었다. 다트 게임의 점수 계산 로직은 아래와 같다. 다트 게임은 총 3번의 기회로 구성된다.각 기회마다 얻을 수 있는 점수는 0점에서 10점까지이다.점수와 함께 Single(S), Double(D), Triple(T) 영역이 존재하고 각 영역..

React에서 useContext Hook은 컴포넌트 트리의 깊은 곳에 있는 컴포넌트에 데이터를 직접 전달할 수 있게 해 줍니다. React에서 context를 사용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있어 편리합니다.   Context - 컴포넌트 간 데이터 공유의 효율적인 방법 목차 1. Context란? 2. useContext 사용법 3. useContext로 불필요한 Props 드릴링 제거 4. useContext로 글로벌 상태 관리 5. Context Api를 언제 사용할까?마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Context란?Context는 React 애플리케이션에서 전역 데이터를 관리하고 공유할 수 있는 ..

React에서 useCallback은 성능 최적화를 위한 훅입니다. 특히 컴포넌트가 재렌더링될 때 불필요하게 함수를 다시 생성하는 문제를 해결해 줍니다. 컴포넌트가 리렌더링 될 때마다 함수는 새로 생성되지만, useCallback은 이전에 생성된 함수를 메모이제이션하여 동일한 의존성 배열을 가지면 재사용합니다.  목차 1. useCallback 사용법 2. useCallback 사용 예시 3. 의존성 관리의 중요성 마무리 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다.1. useCallback 사용법React 컴포넌트가 리렌더링 될 때마다 모든 함수는 기본적으로 새로 생성됩니다. 이는 불필요한 자원 낭비를 초래할 수 있습니다. useCallback은 함수와 의존성 배열을 인자로 받아, 의존성 배..