profile
더 나은 서비스를 고민하는 프론트엔드 개발자.

[Next] router previous url 가져오기

next의 router에는 back()이라는 함수가 있어서 이전 페이지로 이동시킬 수 있다.문제는 유저가 만약 해당 페이지를 처음으로 접근하게 되면 이전 페이지가 없어서 돌아갈 수가 없다는 것..next에서 간단한 custom hook으로 previous url을 접근

2022년 6월 15일
·
0개의 댓글
post-thumbnail

[Next] Next + react-query prefetchInfiniteQuery에서 계속 같은 page가 반복되고 새로 fetching 안 되는 에러

Next js와 react-query를 함께 사용하여 Infinite Query의 첫 부분을 prefetch 시동중이었다. 어디서 에러가 났는지 제대로 알려주지 않아서 일일히 콘솔을 찍어가면 찾아낸 결과..중간에 로딩이 길지만, 서버에서는 제대로 prefetch를 하나

2022년 6월 13일
·
0개의 댓글

Next CSR vs SSR vs SSG vs ISR

Next js를 사용한다! 라고 하면 자연스레 SSR을 통한 SEO 최적화를 생각하기 마련이다. 하지만 Next는 SSR만 제공하지 않는다. 오히려 Link 를 이용하면 CSR처럼 작동하기도 한다. Next를 사용한 다는 것은 미리 생성된 html (pre-render

2022년 6월 10일
·
0개의 댓글
post-thumbnail

[Next] styled components가 적용되기 전에 rendering 되는 경우

이틀 동안 끔찍한 에러에 시달렸다... 에러 메시지가 안 나오는 에러 ㅋㅋㅋㅋ분명 아래 사진 처럼 styled className은 적용이 되는데 막상 그 안에 css는 안 담겨있는 상황. 검색을 해도 나 같은 상황은 안 나왔고, 또 찾아도 \_document.js와 b

2022년 6월 9일
·
0개의 댓글

[React] 몇 초 이상 hover 시에 popover 띄우기

element 위에 mouse hover했을 때, 몇 초가 유지하면 popover를 띄워보자onMouseEnter에 다가 setTimeout을 걸어두니깐 잠까 들어갔다가 나왔는데 몇 초후에 뒷북으로 popover가 생겼다가 사라짐간단하게 clearTimeout을 걸어두

2022년 5월 21일
·
0개의 댓글

[React] 복잡한 함수 속에서 state 변화 즉각 반영하기

오늘은 간단하게 본문부터!복잡한 동작을 하는 함수가 실행되는 동안 유저에게 loading state 표기button click -> handleClick 함수 -> loading State = true -> 유저에게 표기위 처럼 코드를 짜면 handleClick을 눌렀

2022년 5월 14일
·
0개의 댓글
post-thumbnail

[fabric.js] 내 사진에 직접 인스타 필터를 적용해보자!

인스타그램 필터(인스타그램 필터

2022년 4월 30일
·
0개의 댓글

[fabric.js] fabric js에서 canvas putImageData 적용 안됨 (custom filter 넣기)

fabric.js를 기반으로 구현한 nhn의 tui.image-editor를 사용해서 이미지 편집기를 만들던 중, 라이브러리에서 제공중인 필터가 마음에 들지 않아서 커스텀 필터를 몇 개 넣기로 했다.위 라이브러리의 applyFilter를 보니 fabric.js의 app

2022년 4월 25일
·
0개의 댓글
post-thumbnail

[React] drag leave가 반복적으로 발생할 때

input에다가 이미지를 drop시켜서 uploading하는 기능을 구현하던 중에 drag over, drag leaver가 반복적으로 발생하는 이슈 발견위와 같이 nested된 간단한 구조의 컴포넌트가 있다.여기에 사진을 drop시켜서 upload하는 기능을 구현해보

2022년 4월 11일
·
0개의 댓글
post-thumbnail

[React] custom hook에서 useState를 사용할 때 주의할 점 (No rerender)

목표 : 사이트 소개 툴팁 구현하기 dor.gg 사이트의 유저들에게 사이트 사용 방법을 설명하는 툴팁을 만드는 작업이었다. 기본적으로는 useState를 사용하되, 다음번에 유저가 들어왔을 때에는 툴팁이 뜨지 않도록 localStorage에 저장하는 방법으로 구현 중이

2022년 3월 10일
·
0개의 댓글

[React] Hide Header when scroll down (ft.throttle)

scroll을 아래로 내릴 때, header가 안보이게 되어야 한다. scroll을 위로 하면, header가 다시 보여야 한다. go down, go up에서 state true, false를 정해주어서 header의 표시를 정해주면 된다. https://w

2022년 2월 23일
·
0개의 댓글
post-thumbnail

[Javascript] PeerJS 개념 이해하기

dor.gg 개발을 한지 어언 6개월정도 지났다. 이제 사이트의 기본적인 틀은 (매칭 시스템) 잡힌 것 같아서 '베타 버전'이라는 꼬리표를 떼기 위해 두 개의 큰 산이 남은 상황이다. 그 중 하나가 바로 음성채팅이었는데.peerJS의 사용법을 적기 앞서 그 기반이 되는

2022년 2월 21일
·
0개의 댓글
post-thumbnail

[react] bottom sheet modal 구현

지난 여름부터 진행하고 있는 Dor.gg 프로젝트는 web 뷰를 기반으로 모바일 화면에서도 원활하게 사용할 수 있도록 반응형으로 제작하고 있다. 프로젝트 초기에는 모바일 앱을 react native나 flutter를 사용해서 만들려고 했으나 인력 부족으로 (...😥)

2022년 2월 8일
·
0개의 댓글
post-thumbnail

[javascript] 화면 상에서의 위치

모바일 화면에서 아래쪽에 모달 처럼 뜨는 (bottom sheet라고 하더이다.)를 구현해보고 싶어서 서칭을 하던 중. 콴다 기술 블로그에서 구현 방법을 자세하게 적어둔 글을 보게 되었다. 따라해보는데, 내가 그동안 화면 내에서의 높이, 길이, 너비 등등을 제대로 이해

2022년 2월 6일
·
0개의 댓글
post-thumbnail

[번역, 정리] Making Google Fonts Faster

해당 포스트는 다음 페이지의 번역, 정리본입니다. 원문을 읽고 싶으면 다음 페이지를 방문해주세요.This article is translation of this article. If it's a problem, I will delete this article. Plea

2022년 1월 25일
·
0개의 댓글

[Next] svg import 하기

여러가지 방법이 있는데, 그 중 내가 사용했던 방법은 두가지였다.첫번째 방법은 next/Image에서 바로 svg를 불러와서 사용하는 방법이다. 이렇게 하면 손 쉽게 사용할 수 있지만, svg의 color 등을 조절하기 힘들다. 따라서 두 번째 방법을 사용하는 것을 추

2022년 1월 25일
·
0개의 댓글

[React] useEffect 작동 순서

글을 쓴 이유 방금 우연하게 useEffect에 대해서 체크해보고 싶은 것들이 있어서 검색을 하던 중에 useEffect의 작동 순서에 대해 검색을 해보던 중에 충격적인 사실을 알게 되서 이렇게 글을 쓰게 된다. 지금까지 나는 useEffect가 top-botton

2022년 1월 24일
·
0개의 댓글

[React] React-helmet과 그 한계. (next로 migrate하려는 이유)

React는 기본적으로 SPA를 서비스해주기 때문에 SEO관리가 어렵다는 한계를 지니고 있다. 그래서 public폴더의 index.html에 직접 meta tag를 적어서 관리해주고 있는데, 이를 react-helmet이라는 라이브러리를 통해 js를 사용해서 관리할 수

2022년 1월 15일
·
0개의 댓글
post-thumbnail

[React] infinite loop error

회원가입 직 후에 자꾸 해당 에러가 발생. 해당 에러가 useEffect 밖에서 setState가 이뤄져서라고 발견문제는 이런 코드를 찾는데에 별로 힌트를 안 줬다는 건데..App에서 찾아서이 부분을 찾아냄. setState와 유사한 작업을 하는 dispatch가 us

2022년 1월 12일
·
0개의 댓글

[Next] 개념 잡기

이 글은 Next JS의 공식 문서를 읽고 개념을 요약해놓은 글입니다. 자세한 내용은 Next JS 공식홈페이지 참고page-based routingprerendering (SSG, SSR)code splittingCSS-in-JSCRA처럼 비슷한 템플릿을 제공next

2021년 12월 28일
·
0개의 댓글