morethan-log

morethanmin

몰댄민입니다

Overview Collections 6 Articles 32 Stars 30

Troubleshootingvscodemacreact-hook-formnodewindowreact-queryReactNext.jschrome extensionCSSgitSEOwebviewreact-routerfirebaseHTMLJavaScriptTypescriptnextjssafaridebuggingxcodesimulatoruntilhooks개념emailreact-emailiosline-clmapellipsis

⚛️ React

2 days ago

5 min read

iOS 저전력 모드에서 safari 비디오 자동재생 되지 않는 이슈 대응하기 iOS 저전력모드에서 비디오가 자동재생 되지 않는 경우에 대한 생각과 여러 해결방안을 공유합니다.

📱 Webview

23 days ago

6 min read

Published

üntil

통계 기능이 추가되었어요. 📈24.11.23 업데이트 내역

a month ago

4 min read

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

⚛️ React

a month ago

7 min read

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

⚛️ React

2 months ago

5 min read

Published

üntil

에디터 기능이 고도화 되었어요. 😎24.10.28 Changelog

2 months ago

4 min read

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

⚛️ React

2 months ago

7 min read

맥북에서 모바일 사파리 디버깅하기 (XCode Simulator)프론트엔드 개발을 하다보면 다양한 크로스 브라우징 이슈가 발생한다.대부분의 이슈는 맥북의 사파리로도 해결이 디버깅이 가능하지만 간혹 실제 기기에서 테스트 해보거나 디버깅이 필요한 경우들이 존재한다. (키보드 관련이슈... 등)이럴 때 XCode의 Simulator 를 사용하면 디버깅도 할 수 있고, 아이폰에서 어떻게 표시되는지도 기기별로 그리고 버전별로 확

🍎 Mac

2 months ago

3 min read

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

⚛️ React

2 months ago

3 min read

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

⚛️ React

3 months ago

2 min read

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

⚛️ React

3 months ago

4 min read

Published

üntil

24.09.07 업데이트 내역 피드 UI 개선, 리액션 기능, 컬렉션 추가 등이 추가되었어요.

4 months ago

3 min read

mobile safari에서 video poster가 깜빡이는 이슈 Problem웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -> video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.background-image 추가하기아래와 같이 video

📱 Webview

4 months ago

2 min read

firebase로 react 배포하고 *.web.app 도메인 무료로 사용하기 배포한 결과물은 https://keeeep.web.app 에 접속하면 확인해볼 수 있어요.react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도

🧑‍💻 Develop

5 months ago

4 min read

nvm 으로 node 버전 관리하기 (+ 자동화)해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 이 아티클을 참고해주세요.node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 .nvmrc 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.이럴 때 사용할 수 있는 것이 바로 nvm(node versi

🍎 Mac

5 months ago

6 min read

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

⚛️ React

5 months ago

1 min read

Published

üntil

컬렉션 기능이 추가되었어요 24.07.04 업데이트 내역

6 months ago

2 min read

fixed 요소만큼 높이 차지하는 CTA 버튼 구현하기 웹뷰에서 마주하는 여러 팁을 공유합니다.웹뷰를 구현하다보면 아래와 같은 화면을 자주 마주하게 됩니다.아래 사진은 토스에서 가져왔습니다.이때 하단에 항상 위치하고 있는 버튼을 보통 CTA(Click-To-Action) 버튼이라고 부르는데요. 이러한 버튼은 일반적으로 컨텐츠 위에 위치하고 있어야하기에 position:fixed로 구현하면 됩니다.간단한 것 같지

📱 Webview

6 months ago

4 min read

VSCode 멀티 커서로 생산성 높이기 개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.마우스를 활용한 멀티 커서

🧑‍💻 Develop

6 months ago

5 min read

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

⚛️ React

6 months ago

8 min read