dev-hpk 님의 블로그

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제입력 형식 입력으로 영문 대문자로만 이뤄진 문자열 msg가 주어진다. msg의 길이는 1 글자 이상, 1000 글자 이하이다. 입출력 예msganswerKAKAO [11, 1, 27, 15] TOBEORNOTTOBEORTOBEORNOT [20, 15, 2, 5, 15, 18, 14, 15, 20, 27, 29, 31, 36, 30, 32, 34] ABABABABABABABAB [1, 2, 27, 29, 28, 31, 30]  2. 오답function solution(msg) { const answer = [] const dict =..

Next.js는 사용자 경험과 개발자 생산성을 극대화하기 위해 설계된 React 프레임워크입니다. 그중에서도 Image 컴포넌트는 최적화된 이미지 관리를 위한 강력한 도구로, 성능 개선과 효율적인 이미지 처리를 제공합니다. 목차 1. Image 컴포넌트란? 2. Image 컴포넌트 사용법 3. Image 컴포넌트 장점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Image 컴포넌트란?next/image에서 제공하는 Image 컴포넌트는 브라우저와 디바이스에 따라 이미지를 최적화하고, 개발자가 별도의 설정 없이 성능을 향상할 수 있도록 설계된 컴포넌트입니다.  전통적인 HTML의 태그를 사용하는 것과 달리, Image 컴포넌트는 서버 사이드에서 자동으로 이미지 크기를 조정하고, 최적의 포..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제사전에 알파벳 모음 'A', 'E', 'I', 'O', 'U'만을 사용하여 만들 수 있는, 길이 5 이하의 모든 단어가 수록되어 있습니다. 사전에서 첫 번째 단어는 "A"이고, 그다음은 "AA"이며, 마지막 단어는 "UUUUU"입니다. 단어 하나 word가 매개변수로 주어질 때, 이 단어가 사전에서 몇 번째 단어인지 return 하도록 solution 함수를 완성해주세요. 제한사항 word의 길이는 1 이상 5 이하입니다.word는 알파벳 대문자 'A', 'E', 'I', 'O', 'U'로만 이루어져 있습니다.입출력 예wordresult"AAAAE"..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제제한사항 1 ≤ topping의 길이 ≤ 1,000,000 1 ≤ topping의 원소 ≤ 10,000입출력 예toppingresult [1, 2, 1, 3, 1, 4, 1, 2] 2 [1, 2, 3, 1, 4] 0 입출력 예 설명입출력 예 #1 롤케이크를 [1, 2, 1, 3], [1, 4, 1, 2] 또는 [1, 2, 1, 3, 1], [4, 1, 2]와 같이 자르면 철수와 동생은 각각 세 가지 토핑을 맛볼 수 있습니다. 이 경우 공평하게 롤케이크를 나누는 방법은 위의 두 가지만 존재합니다.입출력 예 #2 롤케이크를 공평하게 나눌 수 없습니다. ..

React를 사용하다 보면 RSC와 RCC라는 약어를 접할 때가 있습니다. 각각은 React의 주요 기능이나 개념을 지칭하며, 이 둘을 올바르게 이해하면 React 개발에 더 큰 도움이 됩니다. 목차   1. RSC (React Server Component) 2. RSC (React Server Component)와 RCC (React Client Component) 3. RSC의 동작 원리 4. RSC의 이점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. RSC (React Server Component) RSC는 React Server Components의 약자로, React 18에서 도입된 새로운 개념입니다. 클라이언트 대신 서버에서 React 컴포넌트를 렌더링 하는 방식으로, 초기..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제제한사항 maps는 n x m 크기의 게임 맵의 상태가 들어있는 2차원 배열로, n과 m은 각각 1 이상 100 이하의 자연수입니다. n과 m은 서로 같을 수도, 다를 수도 있지만, n과 m이 모두 1인 경우는 입력으로 주어지지 않습니다. maps는 0과 1로만 이루어져 있으며, 0은 벽이 있는 자리, 1은 벽이 없는 자리를 나타냅니다. 처음에 캐릭터는 게임 맵의 좌측 상단인 (1, 1) 위치에 있으며, 상대방 진영은 게임 맵의 우측 하단인 (n, m) 위치에 있습니다.입출력 예 maps answer [[1,0,1,1,1],[1,0,1,0,1],..

타입스크립트를 사용하다 보면 종종 변수나 객체가 null 또는 undefined일 가능성을 처리해야 하는 상황을 마주하게 됩니다. 이때 non-null assertion (!) 연산자를 활용하면 코드의 가독성을 유지하면서 특정 값이 반드시 null 또는 undefined가 아님을 컴파일러에게 확신시킬 수 있습니다. 목차 1. Non-Null Assertion(!)이란? 2. Non-Null Assertion(!) 적용 3. Non-Null Assertion(!) 주의점 4. Non-Null Assertion을 대체할 방법 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. non-null assertion이란?Non-Null Assertion(!)은 TypeScript에서 사용되는 특별한 연산..

next.config.js는 Next.js 프로젝트의 설정 파일로, 다양한 옵션을 통해 애플리케이션의 동작을 조정할 수 있습니다. redirects 옵션을 사용하면 특정 URL 요청을 다른 URL로 리다이렉트 하도록 설정할 수 있습니다. 목차   1. Redirect란? 2. Redirect 설정 방법 3. Redirect 예시 4. Redirect 주의사항추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Redirect란?redirects는 사용자가 특정 URL에 접근했을 때, 다른 URL로 요청을 자동으로 전환하는 기능입니다. 예를 들어, 페이지 경로가  /list에서 /products라고 바뀐 경우 list로 들어오는 요청을 /products로 보낼 때 사용합니다.Next.js의 리다이..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제 제한사항 입출력 예입출력 예 설명 2. 정답 풀이풀이 전략모든 연산자의 케이스를 담는 연산자 배열을 만든다.연산자 배열을 순회하며 연산을 수행한다.연산의 결과가 target과 같으면 answer를 증가시킨다.function solution(numbers, target) { let answer = 0; const len = numbers.length; for (let i = 0; i + 리턴 operators.push((i & (1 { num = operator === '+' ? num + ..

Next.js에서 라우팅은 주로 파일 기반 라우팅 시스템을 통해 이루어지며, 이는 다른 프레임워크들과 비교해 매우 직관적이고 효율적입니다. 목차   1. 파일 기반 라우팅 2. 동적 라우팅 3. 동적 경로 라우팅 4. Link 컴포넌트를 통한 라우팅5. useRouter 훅을 사용한 프로그래밍 방식 라우팅위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 파일 기반 라우팅Next.js의 가장 큰 특징 중 하나는 파일 기반 라우팅입니다. 페이지를 라우팅 하려면 단순히 pages 폴더 안에 파일을 생성하는 것만으로 새로운 경로가 자동으로 생성됩니다.위와 같은 방식으로, pages 폴더에 파일을 추가하면 Next.js가 자동으로 해당 파일을 라우트로 매핑해 줍니다.라우터는 중첩 파일을 지원합니다. 중첩 ..