개발하면서 빌드하고 실제 서버를 돌려보면 어떻게 되나? 하고 궁금할 때가 있다. 그럴 때는 보통 테스트 서버를 만들어서 체크해보는데, 이 때 env파일을 그때그때 바꾸기가 귀찮아 package.json의 명령어를 커스텀해서 상황에 따라 다르게 env파일을 사용하곤 한다

getServerSideProps의 query를 console.log로 찍어보니 저런 괴랄한 return이 나오고 계속 반복해서 찍힌다...발생 이유는 결국 못찾았다. port를 3000에서 30001로 바꿔보니 안 나는데...하.. 일단 나중에라도 또 같은 에러가 발

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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