profile
https://github.com/nyanji00
post-thumbnail

[react] 이미지 프리로딩 (Next.js + Typescript)

아코디언이나 모달 등 어떤 트리거를 통해 이미지를 마운트하는 경우, 이미지를 로딩할 수 있는 충분한 시간이 있음에도 마운트 후 이미지가 로딩되는 과정을 사용자가 볼 수밖에 없다. 이는 사용자 경험을 해치는 요인이 된다.어떤 이미지가 마운트 될 것이라고 예상될 때 이미지

2021년 12월 10일
·
0개의 댓글
post-thumbnail

[react] 쓰로틀링과 useSWR을 이용해 검색 구현하기 (Next.js + Typescript)

검색 API는 다음과 같다. GET /search/?name={keyword}사용자가 검색어를 입력하는 도중 500ms에 한 번씩 검색을 시킬 것이다.조건부 가져오기를 이용했다. search 가 undefined | "" 일 때는 요청을 날리지 않는다.useSWR은 k

2021년 12월 10일
·
0개의 댓글
post-thumbnail

[react] iOS에서 100vh에 스크롤이 생기는 문제

개발자도구를 이용해 모바일 화면을 확인하며 작업을 해도, 모바일 기기로 직접 확인하면 기획과 다르게 구현된 문제가 많이 발생한다.대표적으로 화면의 height 를 100vh 로 설정해도, iOS 등의 기기에서 확인하면 스크롤이 생긴다.이유는 100vh 가 쓸 수 없는

2021년 12월 10일
·
0개의 댓글
post-thumbnail

[react] 디바운스를 이용해 스낵바 구현하기 (Next.js + Typescript)

쿠팡이츠의 스낵바는 스크롤을 내리면 사라지고, 스크롤을 중단하면 다시 나타난다.이와 똑같이 동작하는 스낵바를 만들어볼 것이다.스크롤이 바뀌는 순간 스낵바가 사라지고, 스크롤이 500ms간 멈춤이 지속되면 스낵바를 띄우는 형태로 디바운스를 사용해야 한다.디자인은 자유롭게

2021년 12월 10일
·
0개의 댓글
post-thumbnail

[react] 카카오맵 API 이용해 지도 띄우기 (Next.js + Typescript)

https://velog.io/@nyanji00/react-카카오맵-API-이용해-지도-띄우기-typescript-Next.js위 글에 포스팅했던 방법은 React에서 카카오맵을 이용하는 방법으로 가장 잘 알려져 있지만,Next.js에서 위 방법을 이용할 경우

2021년 12월 10일
·
0개의 댓글
post-thumbnail

[react] 카카오맵 API 이용해 지도 띄우기

https://apis.map.kakao.com/ 를 방문한다.해당 사이트에 설명이 아주 자세하게 되어 있어 그대로 따라하기만 하면 키를 발급받을 수 있다.카카오맵에서 제공해준 설명에 따르면,먼저 지도를 담을 영역 div 를 선언한 후 id 를 map 으로 지

2021년 10월 28일
·
0개의 댓글
post-thumbnail

[react] chakra-ui를 이용해 모달 만들기 (Typescript + Next.js)

만들어 볼 결과물은 gif와 같은 모달이다.아직 디자인이 완전히 나온 상태가 아니어서 모달의 타입을 정확히 구분지을 수 없었다.따라서 헤더(타이틀)와 푸터(버튼)의 디자인에 따라 타입을 나누고, 바디는 children 을 이용해 받을 것이다.chakra-ui로 모달을

2021년 10월 28일
·
2개의 댓글
post-thumbnail

[nvm] clang: error: no such file or directory: 'CXX=c++'

위 커맨드를 실행해 nvm을 설치하고, nvm --version 으로 잘 작동하는지 확인한다.M1칩을 쓰는 기기에서 15 미만의 버전을 설치하려 하면 다음과 같은 에러를 포함하며 설치가 실패한다.위 커맨드를 실행한 후 다시 nvm install v14.16.0 을 이용

2021년 10월 20일
·
0개의 댓글