문제 출처 : 프로그래머스 코딩테스트 연습 고득점 kit 해시 4번 ( https://programmers.co.kr/learn/courses/30/parts/12077 ) 문제 설명 스트리밍 사이트에서 장르 별로 가장 만힝 재생된 노래들 두 개씩 모아 베스트 앨범을 출시하려 한다. 노래는 고유번호(index로 구분)로 구분한다. 속한 노래가 많이 재생된 장르를 먼저 수록합니다. 장르 내에서 많이 재생된 노래를 먼저 수록합니다. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다. 노래의 장르를 나타내는 문자열 배열 genres와 노래별 재생 횟수를 나타내는 정수 배열 plays가 주어질 때, 베스트 앨범에 들어갈 노래의 고유 번호를 순서대로 return 하도록 solu..
FE개발자
문제 출처 : 프로그래머스 코딩테스트 연습 고득점 kit 해시 3번 ( https://programmers.co.kr/learn/courses/30/parts/12077 ) 문제 설명 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장한다. 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성하시오. 제한 사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. clothes의 모든 원소는 문자열로 이루어져 있습니다. 모든 문자열의 길이는 1 이상 20 이하인 자연수이고 알파벳 소문자 또..
문제 출처 : 프로그래머스 코딩테스트 연습 고득점 kit 해시 2번 ( https://programmers.co.kr/learn/courses/30/parts/12077 ) 문제 설명 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 한다. 전화번호를 담은 배열을 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우 false를 그렇지 않다면 true를 return하도록 solution 함수 작성 제한 사항 phone_book의 길이는 1 이상 1,000,000 이하입니다. 각 전화번호의 길이는 1 이상 20 이하입니다. 같은 전화번호가 중복해서 들어있지 않습니다. 문제 풀이 방법 java.util의 HashMap과 Map을 가져와 해..
문제 출처 : 프로그래머스 코딩테스트 연습 고득점 kit 해시 1번 ( https://programmers.co.kr/learn/courses/30/parts/12077 ) 문제 설명 마라톤 참가자 명단과 완주자 명단을 배열 형태로 받아 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해 주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 문제 풀이 방법 참가자들의 이름을 key로 갖고, 완주 여부를 확인할 수 있는 정수를 value로 갖는 Ha..
현제 SSR의 문제점? API를 사용하면 HTML 로 렌더링할 때 서버의 컴포넌트에 대해 모든 데이터가 준비 되어있어야 한다. 이 말은, HTML을 클라이언트에게 보내기 전에 서버의 모든 데이터를 수집해야 한다는 것이다. 그렇다면, 게시물을 렌더링한다고 했을 때 게시물의 데이터가 큰 경우 서버에서 생성하는 HTML의 생성이 게시물의 데이터를 받아와 렌더링하여 클라이언트에 전송하기까지 지연될 수 있다. 이로 인하여 게시물 외 페이지의 다른 영역의 렌더링 또한 지연되게 된다. 또한, Javascript 코드가 로드된 후 HTML을 hydration하고 상호작용할 수 있도록 React에 전달하는데, React는 컴포넌트를 렌더링하는 동안 서버에서 생성한 HTML에 이벤트 핸들러를 첨부한다. 이때 React에서..
리액트에서 공식적으로 제공하는 코드 스플리팅 기능인 React.lazy와 Suspense는 SSR을 지원하지 않는다. React 18 부터는 지원한다고 한다. 이번 정리가 끝나면 바로 알아보고 정리해보자. 지금은 Loadable Components를 사용해서 코드 스플리팅을 해보자. Loadable Components는 SSR을 할 때 필요한 서버 유틸 함수와 웹팩 플러그인, babel 플러그인을 제공한다. npm add @loadable/components @loadable/server @loadable/webpack-plugin @loadable/babel-plugin 1) 라우트 컴포넌트 스플리팅하기 우선 BluePage, RedPage, UserPage를 스플리팅 해주자 App.js import ..
