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에서 스켈레톤 컴포넌트 만들기 스켈레톤 컴포넌트가 무엇인지 알고 있는가? 스켈레톤 컴포넌트는 데이터를 가져오는 동안 콘텐츠를 표시하는 컴포넌트이다. 사용자는 콘텐츠를 기다리다가 ..

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

내가 보려고 정리하는 리액트 애플리케이션에 카카오톡 공유 기능 추가하는 법 ! KaKao Developers 애플리케이션 추가등록 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 사용자에게 보여질 앱 아이콘과 앱 이름, 사업자명을 작성하고나면, 앱 아이디와 앱 키들을 확인할 수 있다. 플랫폼 등록하기 나는 React로 개발했으므로, 좌측 메뉴 플랫폼 > Web 플랫폼 등록에 들어간다. 본인이 배포한 도메인을 넣어주면 되고, 개발 모드에서 로컬에서 테스트 가능해야 하기 때문에 로컬 주소도 넣어준..

React에서 페이지네이션과 sorting(최신순 / 별점높은순) 을 구현하고자 한다. 현재 리뷰리스트를 뿌려주는 페이지를 구현 중이다. 백엔드에서 sortType과 pageNum에 따라 데이터를 뿌려주며, 전체 데이터 수도 전달받는 다는 가정 하에 진행한다. URL 주소의 파라미터 http://localhost:3000/review?sort=latest&page=1 위와 같은 방식으로 sort 방식과 page를 파라미터로부터 받아와서 맞는 데이터를 뿌려줄 것이다. // src/pages/ReviewListPage/ReviewListPage.jsx /* 리뷰페이지 url로부터 params 값 가져오기 */ const location = useLocation(); const sort = new URLSea..

결과물 미리보기 모바일 버전에서는 모든 메뉴를 나열하기에 너비가 부족하므로 메뉴 버튼을 클릭했을 때만 메뉴가 보이고, 닫을 수 있도록 반응형으로 구현하고자 한다. 반응형 너비 기준 반응형 너비 나누는 기준은 아래와 같이 적용했다. 테블릿 버전일경우 달라지는 것은 폰트 사이즈 변경뿐이기에 자세한 설명들은 생략하고 모바일 버전일 때를 주로 다루겠다. /* 노트북 & PC (해상도 1024px)*/ @media screen and (min-width:1024px) { 스타일 입력 } /* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ @media screen and (min-width:768px) and (max-width:1023px) { 스타일 입력 } /* 모바일 가로, 모바일 세로..

Scale & Ship Faster with a Composable Web Architecture | Netlify Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now! www.netlify.com 회원가입 및 로그인, 팀 생성 과정은 생략 Add new site - Import an existing project 연동 원하는 깃 레포지토리 선택 빌드 설정해주기 레포지토리 안에 프론트/백을 나누어 관리중이라면 프론트 폴더(client)를 Base directry에 입력한다. build command 는 CI=..