커스텀 훅으로 toast message를 추가하는 방법은 아래 포스팅 참고 ! https://cjy00n.tistory.com/210 [ React + Recoil ] ToastMessage 커스텀 훅 제작 (토스트메시지, useToastMessage) Recoil으로 전역으로 상태를 관리하며 위처럼 토스트 메시지 띄우는 작업을 커스텀 훅을 만들어 구현해보고자 한다. 타임아웃을 기본값으로 3초를 설정하여, 생성 3초 후 자동으로 없어지도록 하 cjy00n.tistory.com 위 gif처럼 메시지가 생성될 때 fade-in, 메시지가 사라질 때 fade-out이 되도록 tailwind css에서 애니메이션을 정의하고 추가해줄 것이다. 메시지가 생성될 때 fade-in 효과를 주고, 삭제하기 0.5초 전 ..

Recoil으로 전역으로 상태를 관리하며 위처럼 토스트 메시지 띄우는 작업을 커스텀 훅을 만들어 구현해보고자 한다. 타임아웃을 기본값으로 3초를 설정하여, 생성 3초 후 자동으로 없어지도록 하고, 이 타임아웃 값은 메시지 별로 설정 가능하다. Recoil + 커스텀 훅으로 토스트 메시지를 구현한 이유는 토스트 컴포넌트를 사용할 때마다 직접 추가하지 않아도 된다. (App 파일 에서만 추가 ) 모든 페이지에서 사용가능성이 있다. (중복 최소화) 페이지가 이동되어도 메시지들이 유지되어야 한다. (Recoil 로 전역관리 ) 구현할 것들은 토스트 메시지 타입 선언 (ToastMessage.ts) 토스트 메시지 전역 상태 관리 변수 (ToastMessageState.ts) 토스트 메시지 아이템 컴포넌트 (Toa..

어드민 페이지를 구현하고 있다. 디자인 적인 요소는 거의 없고, 내용 위주라서 UI 구현 단계에서 큰 어려움이 없이 진행 중이다. 그리고, 이번 어드민 페이지에서 가장 많이 사용되는 컴포넌트는 모달(컨펌창)이다. 그동안 모달을 구현하면서, 라이브러리 없이 구현한 적이 거의 없었던 것 같아서 이번 기회에 라이브러리 없이 모달(컨펌창)을 구현하고자 한다. 사실 css 프레임워크를 antd를 쓸까 bootstarap을 쓸까 MUI를 쓸까... 고민을 했는데, 어차피 디자인이 따로 있는 경우에서 라이브러리를 써봤자, 거의 다 다시 구현하는 기분이 들어서, 그냥 내가 구현해보기로 했다 ! 구현하고자 하는 것 어드민 페이지의 디자인은 간단하다! 회원 삭제 같은 데이터 삭제 버튼을 눌렀을 때, 왼쪽 사진처럼 경고 창..

구현하고자 하는 것 위 gif처럼, 피드 아래 상태표시줄 같은 progressbar가 존재하고, 특정 시간이 지나면, 랜덤으로 다음 피드로 이동한다. 먼저, 백엔드에서 랜덤으로 피드를 넘겨줄 수 있는 getRandomDiary가 있다고 가정할 경우에 해보겠다. 프로그레스바 생성 https://ant.design/components/progress Progress - Ant Design An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises ant.design ant design의 progress..

삼각달팽이 #68645 더보기 문제 설명 정수 n이 매개변수로 주어집니다. 다음 그림과 같이 밑변의 길이와 높이가 n인 삼각형에서 맨 위 꼭짓점부터 반시계 방향으로 달팽이 채우기를 진행한 후, 첫 행부터 마지막 행까지 모두 순서대로 합친 새로운 배열을 return 하도록 solution 함수를 완성해주세요. 제한사항 n은 1 이상 1,000 이하입니다. 입출력 예nresult 4 [1,2,9,3,10,8,4,5,6,7] 5 [1,2,12,3,13,11,4,14,15,10,5,6,7,8,9] 6 [1,2,15,3,16,14,4,17,21,13,5,18,19,20,12,6,7,8,9,10,11] 나의 풀이 배열을 이용해서 풀 것이고, 예시에 나와있는 것들을 배열로 표현한다면 아래와 같이 숫자가 배치될 것이다..

베스트앨범 #42579 더보기 문제 설명 스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 많이 재생된 장르를 먼저 수록합니다. 장르 내에서 많이 재생된 노래를 먼저 수록합니다. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다. 노래의 장르를 나타내는 문자열 배열 genres와 노래별 재생 횟수를 나타내는 정수 배열 plays가 주어질 때, 베스트 앨범에 들어갈 노래의 고유 번호를 순서대로 return 하도록 solution 함수를 완성하세요. 제한사항 genres[i]는 고유번호가 i인 노래의 장르입니다. plays[i]는 고유번호..

@vercel/analytics 라이브러리 다운로드 yarn add @vercel/analytics 공식문서 https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app Vercel Web Analytics Quickstart Vercel Web Analytics provides you detailed insights into your website's visitors. This quickstart guide will help you get started with using Analytics on Vercel. vercel.com Analytics 태그 추가하기 공식문서에는 아래와같이 추가하라고 나와있다. 나는 m..

달리기 경주 #178871 더보기 문제 설명 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어질 때, 경주가 끝났을 때 선수들의 이름을 1등부터 등수 순서대로 배열에 담아 return 하는 solution 함..