⚛️ React morethan-log

/

⚛️ React

14

react에서 더보기 기능 구현하기 React와 CSS를 활용해 말줄임 처리와 더보기 기능을 구현하는 방법을 단계별로 설명하며, 애니메이션까지 적용해 사용자 경험을 향상시키는 과정을 다룹니다.

2

0

4 months ago

5 min read

article-thumbnail

React로 이메일 템플릿 쉽게 만들고 관리하기 (react-email)react-email을 사용하여 리액트 환경에서 이메일 템플릿을 편하게 관리하는 방법을 소개합니다.

0

0

5 months ago

7 min read

article-thumbnail

React에서 useEffect와 useLayoutEffect 차이점 React는 웹 프레임워크 시장에서 매우 인기 있는 라이브러리입니다. 2018년 React Conf에서 Hooks가 발표된 이후, 기존 클래스 컴포넌트 방식에서 함수형 컴포넌트 방식으로의 전환이 급격히 이루어졌습니다. 다양한 Hooks 중에서도 useEffect와 useLayoutEffect의 차이를 이해하지 못해 혼란스러워하는 경우가 많습니다. 이 글에서

1

0

5 months ago

5 min read

next.js 페이지 바깥으로 못나가게 하기 (router.events)문제상황언틸에서 아티클을 작성하다 실수로 창을 닫거나 뒤로가서 내용을 전부 날려먹었다는 피드백을 종종 들었다. (나도 몇번 있었음)물론 노션처럼 실시간으로 데이터가 저장될 수 있다면 더더욱 좋겠지만... 개인이 작성하는 블로그에서는 실시간성이 매우 중요한 요소가 아니기도 하고, 서버 비용도 고려해봤을때 간단하게 이탈을 방지해줄 수 있는 팝업을 띄우는 것이

1

0

6 months ago

7 min read

article-thumbnail

react에서 현재 os 확인하기 (useOs)until 에서는 현재 os에 따라 cmd + k 또는 ctrl + k 단축키를 통해 검색 창을 띄우는 기능을 제공하고 있어요.이 기능을 구현하기 위해서는 os 여부에 따라 단축키도 다르게 표시해주어야하고 실제 keydown eventlistener도 os에 따라 다르게 인식해야해요.userAgentnavigator.userAgent 의 정보를 활용하면 o

3

0

6 months ago

3 min read

article-thumbnail

img 태그 에러 대응하기 (이미지를 불러올 수 없을 때)언틸 서비스 초기에는 회원가입시 프로필 이미지를 oauth에서 제공하는 url을 그대로 저장해 사용했었다. (지금은 따로 s3에 저장하고 있습니다. 🥲)때문에 해당 주소가 유효하지 않게 되면 아래와 같이 엑박이 발생했다.이런 문제를 해결하기 위해서는 img 태그의 onError를 적절히 사용해주면 된다.상황에 따라 아예 display:none 을 걸어주거

1

0

7 months ago

2 min read

article-thumbnail

next.js 에서 라우트로 관리되는 모달 구현하기 (route as modal)언틸의 피드에서는 유저들이 작성한 아티클을 모달의 형태로 볼 수 있는데요.이런 모달 형태는 유저들의 글을 빠르게 전환하며 볼 수 있다는 장점을 가지고 있어요.하지만 React State로 관리되기 때문에 몇가지 단점이 존재했어요. 예를 들어 새로고침시에 보고 있던 게시글이 사라지거나, 브라우저의 history stack을 쌓지 않기 때문에 뒤로가기(hist

1

0

7 months ago

4 min read

article-thumbnail

react-router에서 useMatch로 현재 route path 확인하기 react-router v6 이후부터는 useRouterMatch 가 사라지고 useMatch로 대체되었습니다.사용법은 이전과 동일하지만, 공식문서에 example이 아직 없는 것 같아 짧게 정리해 봅니다.사용법예시는 until 에서 사용되는 route를 기준으로 작성했습니다.일치하는 path가 있는 경우에는 path 객체를 return하고, 일치하지 않는

0

0

9 months ago

1 min read

article-thumbnail

next 서비스에서 동적으로 게시글 썸네일 생성하기 (Open Graph)이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 @vercel/og 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 공식 문서를 참고해보시면 좋을 것 같습니다.오픈 그래프?오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기

0

0

10 months ago

8 min read

article-thumbnail

react-query의 fetchQuery과 prefetchQuery next.js 의 pages router 기준으로 작성되었어요.next.js서버사이드에서 데이터를 prefetch하기 위해서 리액트쿼리에서 제안하는 방식은 크게 두가지가 존재한다.데이터 패칭을 한 뒤에 serverSideProps의 props로 넘겨주는 방식서버사이드에서 queryClient에 데이터를 저장하고, queryClient자체를 dehydrate

0

0

10 months ago

3 min read

article-thumbnail

next.js 로컬 환경에서 https 개발 환경 만들기 (mkcert)개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 mkcert를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 해당 아티클을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이

0

0

a year ago

5 min read

article-thumbnail

react-query의 staleTime과 gcTime react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.staleTimeThe time in milliseconds after data is considered stale. This value only applies to the hook it is define

0

0

a year ago

6 min read

article-thumbnail

react-hook-form의 useWatch와 watch의 차이점 이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링

0

1

a year ago

5 min read

article-thumbnail

·

몰댄민입니다.

태그

react-hook-formTroubleshootingreact-queryReactNext.jsSEOreact-routerHTMLJavaScriptTypescriptnextjsuntilhooks개념emailreact-emailline-clmapellipsisCSS

최근 댓글

오 useWatch 는 이번 글을 통해서 처음 알았네요. 여태 watch 만 썼는데요.. 좋은 글 감사합니다.