문제 설명 나만의 카카오 성격 유형 검사지를 만들려고 합니다. 성격 유형 검사는 다음과 같은 4개 지표로 성격 유형을 구분합니다. 성격은 각 지표에서 두 유형 중 하나로 결정됩니다. 지표 번호 성격 유형 1번 지표 라이언형(R), 튜브형(T) 2번 지표 콘형(C), 프로도형(F) 3번 지표 제이지형(J), 무지형(M) 4번 지표 어피치형(A), 네오형(N) 4개의 지표가 있으므로 성격 유형은 총 16(=2 x 2 x 2 x 2)가지가 나올 수 있습니다. 예를 들어, "RFMN"이나 "TCMA"와 같은 성격 유형이 있습니다. 검사지에는 총 n개의 질문이 있고, 각 질문에는 아래와 같은 7개의 선택지가 있습니다. 매우 비동의 비동의 약간 비동의 모르겠음 약간 동의 동의 매우 동의 각 질문은 1가지 지표로 성..

문제 설명 머쓱이는 태어난 지 11개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음과 네 가지 발음을 조합해서 만들 수 있는 발음밖에 하지 못하고 연속해서 같은 발음을 하는 것을 어려워합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ babbling의 길이 ≤ 100 1 ≤ babbling[i]의 길이 ≤ 30 문자열은 알파벳 소문자로만 이루어져 있습니다. 입출력 예 babbling result ["aya", "yee", "u", "maa"] 1 ["ayaye", "uuu", "yeye", "yemawoo", "ayaay..

React에서 Form 태그를 사용하는 경우가 있다. 일반적으로 input, textarea 등 value를 통해 무언가 작업을 한다. 이때, useState를 사용하면 값이 변경될 때 마다 컴포넌트가 리렌더링이 발생하게 된다. 실제 값이 변경됨을 감지해서 무언가 작업을 해야한다면 사용할 수 있지만 그게 아니라면 굳이 필요없는 리렌더링이 발생하게 된다. 이것을 useRef도 아닌 Form 태그 자체 기능을 사용해서 해결할 수 있다. const Component = () => { const handleSubmit = (e: React.FormEvent) => { event.preventDefault(); const target = event.target as HTMLFormElement; const tit..

문제 설명 햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일이 힘들어지는 경우는 없습니다. 예를 들어, 상수의 앞에 쌓이는 재료의 순서가 [야채, 빵, 빵, 야채, 고기, 빵, 야채, 고기, 빵]일 때, 상수는 여섯 번째 재료가 쌓였을 때,..

문제 설명 문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다. 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수가 같아지는 순간 멈추고, 지금까지 읽은 문자열을 분리합니다. s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다. 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽은 문자열을 분리하고, 종료합니다. 문자열 s가 매개변수로 주어질 때, 위 과정과 같이 문자열들로 분해하고, 분해한 문자열의 개수를 return 하는 함수 solution을 완성하세요. ..

웹사이트를 개발하다보면 특정 버튼을 누르면 해당 위치까지 스크롤을 자동으로 이동시켜야 하는 경우가 있다. 이때, 해당 기능을 수행해주는 패키지도 있겠지만 CSS로 처리하는 방법이 있어서 한번 작성해본다. 아주 간단하다. scroll의주체 { scroll-behavior: smooth; } 스크롤이 발생하는 녀석에서 scroll-behavior 옵션을 주면 이쁘게 스크롤된다!

들어가며. react-query를 몇번 사용했지만 타입스크립트와 함께 사용했을 때, 또는 쿼리를 가지고 오는 부분에서 불편함을 느끼고 있어서 이번에 정리해서 작성하려고 한다. useQuery const { data } = useQuery("todo", getTodoList); 가장 기본적인 사용방법이다. 첫 번째 매개변수는 Query Key가 들어가는데, 문자 혹은 배열로 넣을 수 있다. const todoList = useQuery("todoList", getTodoList); or const todoList = useQuery(["todoList", "1"], getTodoList); Key는 고유해야 하며, 추후 해당 키를 가지고 구분할 수 있다. 두 번째 매개변수로는 Promise를 반환하는 함수..

지난번에는 React와 Nginx를 함께 사용해서 배포하는 작업을 진행했다. 이번에는 React와 Nginx를 Docker를 사용해서 이미지화 시켜서 컨테이너로 클라이언트를 배포할 계획이다. 환경 정보 Server : Naver Cloud os : Ubuntu 20 필요한 파일 설치 apt install npm // npm 설치 sudo apt-get install build-essential libssl-dev curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash source ~/.bashrc // nvm 설치 nvm install 18.12.1 // 필요한 npm 버전 설치 npm을 설치하고 defaul..