문제 설명 휴대폰의 자판은 컴퓨터 키보드 자판과는 다르게 하나의 키에 여러 개의 문자가 할당될 수 있습니다. 키 하나에 여러 문자가 할당된 경우, 동일한 키를 연속해서 빠르게 누르면 할당된 순서대로 문자가 바뀝니다. 예를 들어, 1번 키에 "A", "B", "C" 순서대로 문자가 할당되어 있다면 1번 키를 한 번 누르면 "A", 두 번 누르면 "B", 세 번 누르면 "C"가 되는 식입니다. 같은 규칙을 적용해 아무렇게나 만든 휴대폰 자판이 있습니다. 이 휴대폰 자판은 키의 개수가 1개부터 최대 100개까지 있을 수 있으며, 특정 키를 눌렀을 때 입력되는 문자들도 무작위로 배열되어 있습니다. 또, 같은 문자가 자판 전체에 여러 번 할당된 경우도 있고, 키 하나에 같은 문자가 여러 번 할당된 경우도 있습니다..

문제 설명 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한사항 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 입출력 예 arr1 arr2 return [[1,2],[2,3]] [[3,4],[5,6]] [[4,6],[7,9]] [[1],[2]] [[3],[4]] [[4],[6]] 나의 풀이 function solution(arr1, arr2) { var answer = []; for(let i =0; i< arr1.length; i++) { const a1 = arr1[i]; const a2 = arr2[i]; c..

문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인 경우에는 0을, 작업을 500번 반복할 때까지 1이 되지 않는다면 –1을 반환해 주세요. 제한사항 입력된..

무한 스크롤은 프론트엔드 개발자가 만나게 되는 몇가지 귀찮은 작업일 것이다. 그리고 나는 이번에 만나게 되었다. 환경은 Next.js & React-Query이다. 그렇다 React-Query를 사용하고 있다. 이 전부터 React-Query는 무한 스크롤을 쉽게 구현할 수 있게 제공해주는 것이 있는 걸로 알고있다. 그래서 이번에 해당 기능을 사용하려고 한다. useInfiniteQuery 무한 스크롤을 구현할 수 있게 도와주는 아주 강력한 Hook이다. const { data, fetchNextPage, hasNextPage, status, } = useInfiniteQuery( "list" , getList , { getNextPageParam: ({pagination:{ paginationCount..

form 형식의 페이지에 상태를 관리하는 것은 생각보다 귀찮은 작업이다. form에 개수에 맞춰서 state를 만들어주고, reset이 필요한 경우 state의 개수만큼 값을 초기화해야 한다. 불편한 점은 이것만이 아니다. 값의 검증, 또는 onChange 이벤트 시에도 상태의 수만큼 만들어줘야한다. 결국 유사한 코드가 반복되는 상황이 발생하는 것이다. 이것을 비교적 간단하게 처리해주는 커스텀 훅이 useForm이다. useForm? 앞서 말한 것처럼 쉽게 form을 관리할 수 있는 커스텀 훅이다. npm install react-hook-form 다음과 같은 방법으로 설치할 수 있다. 굳이 useForm을 사용해야 하는 이유를 먼저 설명하자면, 값의 변경, submit, 조회, 오류 검출 등의 기능을 ..

문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 제한사항 num은 int 범위의 정수입니다. 0은 짝수입니다. 입출력 예 num return 4 "Even" 3 "Odd" 나의 풀이 function solution(num) { return num % 2 === 0 ? "Even" : "Odd"; }

문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한사항 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 입출력 예 arr return [1,2,3,4] 2.5 [5,5] 5 나의 풀이 function solution(arr) { var answer = arr.reduce((acc,cur) => acc+cur, 0); return answer / arr.length; }

Next.js에서 styled-components를 같이 사용할 때 오류가 발생했다. 찾아보니 styled-components를 사용했을 때의 className과 실제 적용되었을 때의 className이 달라서 발생하는 문제였다. 최초 실행 시에는 css가 제대로 적용이 되었는데, 페이지 이동 & 새로고침이 발생했을 때 위와 같은 오류가 나오면서 css가 적용이 되지 않았다. 찾아보니 next.js에서 초기 렌더링은 ssr로 적용되고, 이후 페이지 이동 등은 csr로 렌더링이 된다. 초기 렌더링 시에는 ssr로 적용되기 때문에 문제가 없었지만 이후 csr로 적용되기 때문에 클래스 명이 맞지 않아서 발생한 것 같다. 해결 방법 구글에 검색 했을 때 기본적으로 해결하는 방법이 있었다. .babelrc에서 설..