dev-hpk 님의 블로그

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가 자동으로 해당 파일을 라우트로 매핑해 줍니다.라우터는 중첩 파일을 지원합니다. 중첩 ..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제제한사항 입출력 예출력 형식 2. 오답function solution(str1, str2) { const arr1 = new Map(); // str1을 두 글자씩 끊어서 만든 다중집합의 원소 const arr2 = new Map(); // str2를 두 글자씩 끊어서 만든 다중집합의 원소 let cntUnion = 0; // 합집합 카운트 let cntIntersection = 0; // 교집합 카운트 // 비교를 위해 소문자로 통일 str1 = str1.toLowerCase(); str2 = str2.toLo..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제 제한사항 입출력 예입출력 예 설명2. 오답function solution(phone_book) { phone_book.sort((a,b) => a.length - b.length); for (let i=0; i idx !== i && p.startsWith(phone_book[i])).length > 0) { return false; }; } return true;}테스트 케이스는 모두 통과했지만, 효율성 테스트에서 탈락이다...😂😂반복 횟수 줄일 수 있는 방법을 생각해 보자. ..

Next.js는 React 기반의 오픈소스 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원하며, 현대적인 웹 애플리케이션을 쉽고 빠르게 개발할 수 있도록 설계되었습니다. 목차 1. Next.js 특징 2. Next.js 설치 및 프로젝트 생성 3. Next.js 실행 4. Next.js 폴더 구조추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Next.js 특징1. 서버 사이드 렌더링 (SSR)Next.js는 서버에서 HTML을 렌더링 하여 클라이언트로 보내는 SSR을 지원합니다. 이를 통해 SEO(검색 엔진 최적화)에 유리하며, 초기 로딩 속도가 향상됩니다.2. 정적 사이트 생성 (SSG)정적 사..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제제한사항 입출력 예입출력 예 설명 2. 정답 풀이풀이 전략큐 활용.정답을 위한 인덱스 배열 idx 선언우선순위가 가장 높은 프로세스인 경우 큐와 인덱스 배열에서 삭제한다.우선순위가 더 높은 프로세스가 큐에 있는 경우 큐와 인덱스 배열에서 삭제 후 마지막에 추가한다.우선순위가 가장 높은 프로세스면서 index가 location인 경우 순회를 종료하고 정답 리턴function solution(priorities, location) { let answer = 0; // 실행 대기 큐의 인덱스 배열 let idx = Array.from({l..