morethan-log
Search...
Cmd+K
morethanmin
32 팔로워
·
35 팔로잉
몰댄민의 기술블로그
팔로우
가입한 그룹
Overview
Collections
6
Articles
21
Stars
15
최신순
Troubleshooting
vscode
mac
react-hook-form
node
window
react-query
react
next.js
chrome extension
CSS
git
SEO
webview
react-router
firebase
Published
in
until
24.09.07 업데이트 내역
그동안 어떤 기능이 추가되었는지 알려드릴게요
1
0
Sep 7
3 min read
mobile safari에서 video poster가 깜빡이는 이슈
문제웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -> video로 전환되면서 깜빡거리는 현상이 발생 (아래는 예시입니다.)관련해서 이슈를 찾아보았으나 딱히 해결책을 찾지 못했음.🥲해결아래와 같이 video의 background-image로 poster를 추가해 임시로
Webview
0
0
Aug 10
1 min read
firebase로 react 배포하고 *.web.app 도메인 무료로 사용하기
배포한 결과물은 https://keeeep.web.app 에 접속하면 확인해볼 수 있어요.react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도
Develop
1
0
Jul 28
4 min read
nvm 으로 node 버전 관리하기 (+ 자동화)
해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 이 아티클을 참고해주세요.node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 .nvmrc 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.이럴 때 사용할 수 있는 것이 바로 nvm(node versi
Mac
1
0
Jul 21
6 min read
react-router에서 useMatch로 현재 route path 확인하기
react-router v6 이후부터는 useRouterMatch 가 사라지고 useMatch로 대체되었습니다.사용법은 이전과 동일하지만, 공식문서에 example이 아직 없는 것 같아 짧게 정리해 봅니다.사용법예시는 until 에서 사용되는 route를 기준으로 작성했습니다.일치하는 path가 있는 경우에는 path 객체를 return하고, 일치하지 않는
React
0
0
Jul 9
1 min read
Published
in
until
컬렉션 기능이 추가되었어요
24.07.04 업데이트 내역
1
0
Jul 4
2 min read
fixed 요소만큼 높이 차지하는 CTA 버튼 구현하기
웹뷰에서 마주하는 여러 팁을 공유합니다.웹뷰를 구현하다보면 아래와 같은 화면을 자주 마주하게 됩니다.아래 사진은 토스에서 가져왔습니다.이때 하단에 항상 위치하고 있는 버튼을 보통 CTA(Click-To-Action) 버튼이라고 부르는데요. 이러한 버튼은 일반적으로 컨텐츠 위에 위치하고 있어야하기에 position:fixed로 구현하면 됩니다.간단한 것 같지
Webview
0
0
Jun 29
4 min read
VSCode 멀티 커서로 생산성 높이기
개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.마우스를 활용한 멀티 커서
Develop
0
0
Jun 19
5 min read
next 서비스에서 동적으로 게시글 썸네일 생성하기 (Open Graph)
이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 @vercel/og 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 공식 문서를 참고해보시면 좋을 것 같습니다.오픈 그래프?오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기
React
0
0
Jun 13
8 min read
Published
in
until
임시 저장 기능이 고도화 되었어요
24.06.11 업데이트 내역
0
6
Jun 11
3 min read
git 공개키 등록하기 git@github.com: Permission denied (publickey)
git@github.com: Permission denied (publickey) 오류새로 데스크탑을 세 팅해서 clone시 위와 같은 오류가 발생했다.깃허브에 올라가있는 remote repository를 아무나 접근할 수 없도록 막아두어서 발생하는 이슈이다. 현재 유저가 권한이 있는지 확인이 필요한데, 이때 사용되는 것이 public key이다.Publi
Develop
0
0
Jun 8
2 min read
터치 디바이스에서 hover 스타일 제어하기
디자인 시스템을 구현하면서 :hover 가상 클래스를 적용했던 경험을 기록한다.:hover는 포인터가 해당 엘리먼트 위에 올라가 있는 상태를 나타내는 가상 클래스로 주로 버튼이나 인풋과 같은 컴포넌트를 구현할 때 사용한다.이러한 :hover 가상 클래스는 마우스를 올려둔다와 같은 경우가 없는 환경에서는 어떻게 동작할까? 대표적으로 터치로 동작하는 모바일 디
Webview
0
0
Jun 3
5 min read
Published
in
until
RSS 기능이 추가되었어요
24.05.26 업데이트 내역
0
0
May 26
2 min read
react-query의 fetchQuery과 prefetchQuery
next.js 의 pages router 기준으로 작성되었어요.next.js서버사이드에서 데이터를 prefetch하기 위해서 리액트쿼리에서 제안하는 방식은 크게 두가지가 존재한다.데이터 패칭을 한 뒤에 serverSideProps의 props로 넘겨주는 방식서버사이드에서 queryClient에 데이터를 저장하고, queryClient자체를 dehydrate
React
0
0
May 26
3 min read
윈도우에서 맥 단축키 적용하기(PowerToys)
나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.PowerToys?마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라
Window
0
0
May 26
3 min read
브라우저에서 컴포넌트 코드 위치를 찾아주는 extension, Locator JS
react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...본인들의 말에 의하면 리액트 개발 생산성을 8% 증가 시킬 수 있다고 한다...그것은 바로 locator js... 브라우
Develop
0
0
May 23
2 min read
next.js 로컬 환경에서 https 개발 환경 만들기 (mkcert)
개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 mkcert를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 해당 아티클을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이
React
0
0
May 22
5 min read
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
React
0
0
May 19
6 min read
윈도우에서 winget으로 fnm 설치하기 (Fast Node Manager)
항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.fnm이란?노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.winget으로 fnm 설치하기파워쉘에서 아래와 같이 입력하여 설치할 수 있다.winget install Schniz.fn
Window
0
0
May 19
2 min read
react-hook-form의 useWatch와 watch의 차이점
이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링
React
0
1
May 17
5 min read
Made with
üntil
