nextjs useSearchParams 오류는 왜 은근히 자주 등장할까?

nextjs 의 useSearchParams 를 사용하고, yarn build를 하게 되면

useSearchParams() should be wrapped in a suspense boundary at page "/account/find-password". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

이런 오류를 만날수 있다.

해결

next.config.js에서 experimental > missingSuspenseWithCSRBailout 의 값을 false 로 두면 된다.

const nextConfig = {
 ...
  experimental: {
    missingSuspenseWithCSRBailout: false,
  },
};
export default nextConfig;

experimental 은 nextjs의 실험적인 기능이 정의되어있고 missingSuspenseWithCSRBailout 옵션은 Suspense 을 강요 여부를 설정한다. Suspense가 누락되면 자동으로 에러를 발생시키는 기능이다.

그럼, 이게 왜 useSearchParams 와 충돌을 일으키느냐 nextjs의 server, client component 와의 관계에서 시작된다.

useSearchParams는 url 의 쿼리 파라미터에 접근하는데 사용되는데 이건 클라이언트 컴포넌트에서만 사용할 수 있다. next13 이상에서는 서버컴포넌트가 디폴트이기 때문에 생기는 충돌이다.

nextjs는 useSearchParams가 서버컴포넌트 트리에 존재할 경우, 클라이언트 사이드 렌더링으로 전환을 하는데, 그 전환과정에서 missingSuspenseWithCSRBailout 경고가 발생하는 것이다.

이걸 해결하기 위해 use client를 알맞게 선언해줌으로써 해결할수 있다.

해치우듯 책을 읽지 않기 위해 혹은 독서가 부담이 되지 않기 위해 3개월에 한권읽기 프로젝트 중입니당 💬

자본주의 게임의 법칙이 부주제 인 것 같다.

나는 투자, 경제에 대해서 관심이 없어 무지하다.

나는 돈에 욕심이 없다. 돈은 있다가도 없고 없다가도 있으며 욕심이라는 것은 내가 원하던 것을 가진다고 해소되는 것이 아닌 무한한 것이기 때문에, 항상 현재에 만족하며 살았다. 돈을 더 키워야 겠다는 마음이 없었던 것이 경제, 자본주의에 대한 무지의 시작이었다.

지금은 그렇다고 돈을 더 키워야지 하는 마음으로 책을 읽는 건 아니고,

아무것도 하고 있지 않는 나의 행동이, 적어도 뭘 거스르고 있는지는 알아야 할것 같아 이 책을 읽는다.

1부 세상을 살아가는 오른쪽 날개, 자본주의 - 1장 세상을 보는 눈을 바꿔보자.  30page

나에게는 자존감이든 뭐든 부족한 무언가가 있고 그에 방어기제로 사람을 나쁘게 보기도 한다.

"저 사람은 날 안좋게 볼거야"

성급한 판단과 겪어보지도 않고 판단해버리는 방어기제가 있다. 기대가 높으면 실망이 큰 법이니, 아예 기대가 없는 인간관계를 추구하고 있는 것일지도 (글을 작성하면서도 이건 고쳐야한다고 생각한다.)

그렇게 나는 어제보다 나아지려고 방어기제를 세우며 아등바등 살고 있다.

나는 이제 선택해야한다. 

분노한채로 하늘에 돌을 던지면서 주저앉을지

아니면 게임의 법칙을 배우고 본인을 위해 이 불합리한 게임을 끝까지 즐길지

지금 내가 이 책을 읽기 위해 처음 가졌던 마음가짐. 자본주의에 대해서 배우자 라는건 잠시 접어둬야한다.

우리에게 필요한건 주식같은 정보를 얻는게 아니고, 나를 바꾸는 일이다. 

정보를 온전히 받아들일 수 있는 올바른 가치관을 세우고, 

널려있는 지식들 중, 진짜를 가려내는 능력을 키우고, 

움직이지 않는 엉덩이를 움직이게 할 동기를 찾아야 한다.

지금 내가 만족할만한 성과가 없다면, 
네가 살면서 했던 총체적 선택의 결과값이라고 겸허히 수용하고, 해결책을 찾는데 집중할 필요가 있다.

그러기 위해선 머리가 말랑말랑 해야한다.
이것도 내 생각이랑 다르고, 저것도 내 생각이랑 다르다.
너의 상식과 잘못된 가치관이 지금의 본인을 만들었기에 제일 먼저 해야할 일은 나의 상식과 가치관을 부수는 일이다. 

난 이 문구가 너무 좋다. 지금 나에게 필요한 이야기다. 

행복이라는건 도파민이 주로 담당하는데, 계획을 세우고, 달성할 때 분비가 된다.

탐욕이 끝이 없는 이유는 도파민의 역치가 상승하면, 더 큰것을 바라게 되기 때문이다. 

올라갈곳이 없는 인생도 불쌍한 인생이다. 

도파민의 원리로 봤을때 행복의 가장 큰 요소는 잘될거라는 불확실한 희망. 그 희망을 향해 나아가는 과정 자체라고 할수 있다. 

이제 행복해지는 방법은 단순하다. 
내 눈앞에 있는 일. 내 손으로 해결할수 있는 것들을 성취하고 달성해 나가는 것이다.
이렇게 나의 뇌를 도파민의 중독으로 빠뜨리는 것이다. 성취의 행복에 중독되게 해야하는 것이다.

아무래도 나는 이점이 부족햇던거같다.

항상 큰 서비스를 마스터플랜을 바라보고 일을 했다. 목적과 목표대로 진행하는 것인가? 항상 의심해야했고, 지름길로 가기 위해선 멀리 봐야 했다. 이 점은 성취의 감동을 얻기에 힘든 환경이 었다.

오늘을 계기로 나는 조금 더 단위를 작게 보고, 눈 앞의 일을 해치우는 것을 해봐야겠다.
작은 도파민 부터, 점점 크게 중독을 시켜보는 것이다.

사람은 환경이 어마어마하게 중요하기 때문에, 환경이 좋지 않다면, 그것부터 고쳐보자.

더러운 방을 깨끗하게 치우고, 네 몸을 피곤하게 만드는 지방 덩어리를 줄이던가 음주습관을 고쳐보는 것이다.

HG x Minecraft Base 65 Keyboard - Grass Block 구매후기

https://higround.co/products/minecraft-x-hg-base-65-keyboard-grass-block

나는 몰랐다. 내가 마인크래프트 굿즈를 살줄... 근데 그게 키보드 일줄... 근데 그걸 직구를 할줄...

나는 게임을 좋아하는데 마인크래프트랑 포켓몬을 좋아하는 편이다.

하이그라운드에서는 둘다 판매를 한다. 키보드를 몇번 사봤다만, 화이트에 심플한 디자인만 사다가 애정하는 캐릭터들이 잔뜩 그려져 있는 키보드를 보니 눈이 돌아가는줄 알았다. 하이그라운드에는 그 외의 덕질하기 좋은 애니키보드도 많다.

아주.. 뭔가 잘 아는 사람들인거같다... 음...

어찌됐든 저찌됐든 7월 2일에 구매해서 7월 11일에 배송받앗다. 생각보다 빠르게 배송받았다.

구매 과정에서 주문취소가 3번이나 되기도 했으며 영어로 메일을 보내기도 했고 그 과정을 좀 공유하려 한다.

구매를 고민하는 분들 의사결정에 도움이 되길..

결제금액

패키지 보호? 저건 배송보험 인거같아서 소중히 제품을 받고 싶은 마음에 결제했다.

키보드는 145달러 20만원 정도이고, 원래 쓰던 키보드들도 그정도 해서 크게 부담이 되진않았다.

배송비는 5만원정도인데, 뭐 해외에서 오는 값 생각하면 비싸지만... 어쩔수 없다 생각...

그렇게 25만원 정도로 구매를 했다.

3번의 주문 취소

나는 해외직구는 처음인데 결제정보를 제대로 입력했음에도 불구하고, 계속해서 취소되었다고 메일을 받았다. 주문하자마자 취소를 받았기 때문에.. 내가 잘못된 정보를 작성한건가? 싶어서 메일을 보냈다.

Why cancel my payment?

I really want to buy it, but is there something I'm writing wrong? I'm curious what the problem is.

딱 이렇게 본론만 적어 6월21일 메일을 보냈고, 아래 답장을 7월 2일에 받았다.

한국의 고객센터와 같은 속도를 바라지 않았기 때문에 천천히 기다렸다. 그래도 친절하게 사유를 알려주셨고.. 자동플래그에서 나를 제외해서 결제하기에 문제가 없게 도와주셨다.

내가 또 개발자이다 보니, 저러한 의사결정과 대응에 아주 만족하고 감사함을 느끼고 바로 주문을 다시 했고

드디어.. 결제가 성공했다

7월 2일에 결제해서 7월 12일 퇴근하고 돌아오니 집앞에 택배가 와있었고, 바로 테스트 중이다.

맥북과 호환

아니 이것에 대해서는 고민조차 하지도 않았었다. 당연히 될줄 알았는데 window, alt, ctrl 키를 마주했을때는 조금 당황했을지도...

처음에는 키가 완벽하게 작동하지 않아서 뭔가 잘못됐다 생각했는데,

https://higround.co/blogs/hypegeek-update/how-to-connect-a-higround-keyboard-to-an-apple-macbook

하이그라운드의 블로그 글을 참고해서 도움을 받았다.

중간 부분에 Key Mapping 부분을 읽어보면 window는 command alt는 option의 역할을 하고 있다고 되어있어서, 두 위치를 바꿔주기만 하면 문제가 없다고 생각했다.

system setting > keyboard > keyboard shortcuts 에서 수정이 가능하다.

modifier keys > select keyboard가 higround인걸 확인하고 option 과 command 키 위치를 바꿔주면 맥 호환은 완벽하게 된다.

그래서 만족하는가?

완전 대만족이다. 내가 구매한건 잔디블록의 키보드인데

나는 식물을 좋아해서 식물의 갈색과 녹색을 좋아해서 나에게 이렇게 안성맞춤일수가 없다.

외관도 불투명 녹색? 못참지

사실 박스를 오픈하면서도 감동을 받았는데 디테일이 좀 뛰어났음..

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ마인크래프트 화면 박스에 그려져 있는거 진짜 졸귀탱... 나도 다이아 검 가지고 싶어잉... >0<

키캡 제거나 하는 거나 usb to c케이블 들어있었다.

이런 디테일이 예상치못한 감동을 만든다니까 정말..

거기다가 키보드의 조명이 장난 아니다... 하이그라운드의 기술력인거같은데 되게 다양한 스타일의 조명을 제공해주는데, 나는 그냥 불빛만 전체적으로 나오는 키보드만 써봤지.. 이렇게 스타일리쉬한 조명이 나오는건 처음 봤는데 키보드 칠 맛이 난다.

정말로 정말로 다양한 조명이 있다.

https://app.higround.co/

이곳에서는 조명 커스텀이 가능하다던데, find device에 내 기기가 뜨지 않아서 나는 안해봤다. 꼭 저걸 하지 않아도 키보드 단축키로 조명을 스위칭 할수 있기 때문에 앞으로 딱히 필요 없을듯하다.

하여튼 오타쿠들 하이드라운드로 다 모여~~~~

단점

1) 65키 괜춘?

딱봐도 키가 65개에다가 콤팩트하기 때문에 손에 익지 않을사람은 안익을거같다. 나는 원래 텐키리스도 잘쓰던 사람이라 거의 바로 적응했다.

흠... 오른쪽 쉬프트랑 방향키가 좀 킹받긴 하지만 뭐...할만하다.

2) 백틱 위치 괜춘?

물결이라던가 템플릿 리터럴 코드 쓸 때 좀 당황스럽다.

백틱은 보통 esc 아래에 있는데, 이 키보드는 제일오른쪽상단에 위치한다.

이게 당황스럽긴한데,

왼손으로는 shift를 누르고 오른손으로는 백틱버튼을 누르면 생각보다 안정적이고 편하다... 백틱의 위치는 애초부터 이곳에 있는게 모두의 행복과 가까운게 아닐까 생각이 들 정도...

결론

그 외 단점은 없다.

기계식 키보드의 스위치 종류에 빠삭하지는 못해서 자세히 평가를 내리진 못하겠지만,

저소음적축만 사용하던 나였는데 그것보다는 경쾌하고 키압이 적은 편이다.

히히 너무 만족스러운 소비였고 ~~ (이 물결 치면서도 백틱 위치 헷깔려서 삐끗함)

마인크래프트 하러 가야겠다🪴🪴🪴