커스텀 훅으로 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..

@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..

개발 중인 여름방학 프로젝트의 사용자 경험을 증가시키기 위해 스켈레톤 UI 추가해볼 것이다. 현재 상황 먼저, 현재 나의 상황이다. 네트워크를 느리게 설정하여 확인해보겠다. 그림을 보여줘야 하는 부분에서, api를 호출 중일 때 로딩 스피너가 보이고, (임의로 둠) 사진이 뜰 때 흰색 그림이 보인 후 그림이 다 보여지는 경우 있음 스켈레톤 UI란? 실제 콘텐츠가 들어갈 자리를 잠시 대신하게 되는 빈 껍데기이다. 출처 : https://ui.toast.com/weekly-pick/ko_20201110 더 나은 UX를 위한 React에서 스켈레톤 컴포넌트 만들기 스켈레톤 컴포넌트가 무엇인지 알고 있는가? 스켈레톤 컴포넌트는 데이터를 가져오는 동안 콘텐츠를 표시하는 컴포넌트이다. 사용자는 콘텐츠를 기다리다가 ..

14버전이 되면서 라우팅 방식이 바뀐 Next.js 14 의 페이지 라우팅와 동적 라우팅, 404페이지 변경방법을 알아보고자 한다. 라우팅의 경로에 해당하는 파일들은 page.* 가 파일이름이 되어야 한다. 루트경로( / ) 가장 루트 경로는 src/app/page.tsx 폴더이름경로 ( /about ) /about 경로에 해당하는 페이지를 만들고 싶다면, src/app/about/page.tsx 동적라우팅 (/about/:id) about/ 뒤에 아이디가 오는 페이지를 만들고 싶다면, src/app/about/[id]/page.tsx 타입스크립트에서는 params의 타입을 지정해주지 않으면 에러가 난다. 바인딩 요소 'params'에 암시적으로 'any' 형식이 있습니다.ts(7031) 아래처럼 타입을..

문제상황 이제 배포를 거의 앞두고 있고, 기획자 분과 디자이너 분께서 QA 리스트를 작성하고 첫 QA를 진행했다. 그 중 나온 문제 하나 .. 일기 작성의 내용 부분에서 우리가 내용의 글자 수를 80자로 제한하기로 했고, 해당 textarea에 maxLength를 80로 주어서 잘 작동되는 것을 확인했다. 그런데, 아래와 같이 작동이 안된다는 피드백이 있었다. 나 확인했는데 .. ? ? 그리고 나서 내가 해보니까 안된다... 근데 한글에서만 안된다. 아마도 개발 단계에서 워낙 이것저것 테스트해보다보니, 아무거나 입력하면서 테스트를 했는데, 그때 한글을 pc에서 안해봤던 것 같다. 모바일에서 한글이 잘 제어가 되길래 잘 되는 줄 ... 알았다. 위처럼 한글에서는 80자를 넘어도 1글자가 더 입력이되어, 아..

이 기능을 뭐라고 딱 한단어로 표현할 지 모르겠으나, 게시글 생성과 수정을 어떻게 구별 ? 에 초점을 두고 게시글을 작성하도록 하겠다. AI 그림일기 다이어리를 구현 중인데, 다이어리 작성(생성) 기능과 수정 기능이 존재한다. 두 기능 사용 시 사용자에게 보여주는 화면 틀(입력 폼)은 같으나, 생성 시에는 모든 데이터들이 기본값으로 초기화 된 상태이고, 수정 시에는 기존에 있던 데이터들이 입력 폼 안에 채워진 상태로 사용자에게 보여주게 된다. 이렇게 생성/수정 구현은 많은 페이지들에서 확인해 볼 수 있다. 이 기능이 가능하려면 같은 코드를 사용하지만, 생성/수정에 따른 구분이 가능하도록 프로그램에게 알려주어야 한다. 기존 생성 페이지 뒤에 수정하고자 하는 데이터의 아이디값을 넘겨서 해당 데이터를 받아와서..

많은 서비스에서 헤더를 고정시키는 기능을 사용한다. 아래는 인프런 사이트인데, 스크롤을 내리면, 1번 헤더 : 가장 상단에 있는 교육 / 커리어 / 기업 서비스 / 지식공유 참여 부분은 따라오지 않고, 그 아래 위치하는 , 2번 헤더 : 인프런 / 강의 / 로드맵 / 멘토링 / 커뮤니티 탭이 있는 부분만 스크롤을 따라 이동하는 것을 알 수 있다. 이 기능이 궁금해서 개발자도구의 요소 탭으로 확인해보았다. 스크롤을 해서 1번 헤더가 사라지고, 2번 헤더가 고정되는 순간에, 2번 헤더에 sticky 속성이 생기는 것을 확인할 수 있었다. position : sticky 요소를 부모 요소 내에서 스크롤될 때 상대적인 위치로 유지하다가 특정 임계값에 도달하면 고정된다. 부모 요소에 대한 상대적인 위치 지정이 있..