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

@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글자가 더 입력이되어, 아..

AI가 그려주는 그림일기 서비스 [여름방학]의 프론트엔드를 개발 중이다. 특별한 이슈가 없다면 3월 초에는 서비스가 출시될 예정이다. React로 개발했으며, 타겟 환경은 모바일이다. 개발 중에는 테스트를 크롬 브라우저에서 하다보니, 모바일에서 실제로 일어나는 이슈 등을 확인하기 어려운데, 배포 후 모바일에서 확인 시에 하나의 문제점까지는 아니지만, 사용자 입장에서 불편할 수도 있는 사소한 이슈를 발견하였다. 지금까지 내가 진행했던 프로젝트 중에서 모바일을 주 타겟으로 잡은 경우가 거의 없어서 지금까지는 아마 발견을 못했던 것 같다. 이슈 🔨 이슈는 input 또는 textarea 태그에서 사용자가 입력하려고 클릭하여 액티브가 되었을 때, 화면이 확대되는 이슈 이다. 이 이슈의 문제는 모두 작성하고 나서..

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

리엑트 네이티브 껍데기에 알맹이는 리엑트 웹사이트인 웹뷰를 제작한다. Expo 프로젝트 시작하기 npx create-expo-app app-name Ok to proceed? (y) y EAS CLI 설치 npm install -g eas-cli react-native-webview 라이브러리 설치 npx expo install react-native-webview WebView 컴포넌트 불러오기 import * as React from "react"; import { WebView } from "react-native-webview"; import { StyleSheet } from "react-native"; import Constants from "expo-constants"; export defa..

도서 리액트를 다루는 기술 | 김민준 을 읽고 작성한 게시글입니다. 리액트를 다루는 기술(개정판) 개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요 books.google.co.kr 리액트 프로젝트에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 한다. 요청이 성공하면 서버에서 받아온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 한다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동..

도서 리액트를 다루는 기술 | 김민준 을 읽고 작성한 게시글입니다. 리액트를 다루는 기술(개정판) 개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요 books.google.co.kr 리덕스를 사용하는 이유 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만, 프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있다. 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며,..

도서 리액트를 다루는 기술 | 김민준 을 읽고 작성한 게시글입니다. 리액트를 다루는 기술(개정판) 개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요 books.google.co.kr 리덕스는 사용할 때마다 헷갈리고 어려운 것 같다. 이번에 개념적으로 제대로 익히고, 사용하는 방법까지 제대로 알고자 게시글을 작성하게 되었다. 리덕스란? 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌..