전체 글31 Next.js와 Hono 통합 환경에서 Authorization 헤더가 사라지는 이슈 해결기 Next.js app routerlayout.tsx(서버 컴포넌트)에서 데이터를 fetch를 해야 할 일이 생겼습니다.서버는 Hono API 로 구성되어 있었는데 이 과정에서 Authorization 헤더가 사라지는 현상을 겪었습니다. 해당 문제를 분석하고 해결한 과정을 정리합니다.문제 상황프론트엔드: Next.js (App Router 기반)백엔드: Hono (TypeScript 기반 API 서버)인증은 accessToken을 쿠키에서 읽어서 Authorization 헤더로 전달하는 방식입니다.API 호출은 hono/client의 hc()로 만든 clientApi를 통해 이루어졌습니다.// clientApi 정의export const clientApi = hc(env.NEXT_PUBLIC_BASE_UR.. 2025. 6. 25. 슬랙에 GCP run 배포 성공 여부 알림 보내기 깃헙 액션으로 gcp run에 배포를 하고 있었고 성공여부를 슬랙 메세지로 받고 싶었습니다. 전체 코드는 게시글 마지막에 첨부되어 있습니다. 우선 단계별로 진행 과정을 확인해시면 이해하는데 도움이 되리라 생각합니다.1. 슬랙 앱 기본 셋팅우선 배포시작 알림 메세지를 슬랙에 보내봅시다. 배포가 완료되고 나면 이 메세지에 o , x 이모지로 성공 여부를 표시하려고 합니다. 배포시작 메세지를 보내는것은 curl명령어를 통해 슬랙 앱 api를 호출하면 되는데요. 우선 슬랙 앱을 만들어야겠죠?- https://api.slack.com/apps 이곳에서 슬랙 api 앱을 생성할 수 있습니다. 앱이 생성되면 토큰을 설정하고 권한을 부여합니다. 아래 이미지에서 토큰생성과 권한을 참고해주세요.OAuth 토큰 확인권한 설.. 2025. 1. 30. 개발자 원칙을 읽고 "개발자 원칙"은 테크리더 9명이 더 나은 개발자로 살아가기 위한 원칙과 철학을 9챕터로 나누어 담은 책이다. 덕업일치를 넘어서 - 박성철 챕터에서 기억하고 싶은 내용 동기 벡터에서 기대되는 성과와 내가 일하는 동기 그래프가 가장 기억에 남는다. 결국 내가 일하는 동기를 기준으로 나의 성과를 만들어낼 수 있다면, 지금 내가 옳은 방향으로 잘 일하고 있다는 측정 도구로 사용해볼 수 있을 것 같았다. 소감 나는 어떤 일을 하고 어떻게 살 것인가에 대해 나온 많은 책이 있지만 개발자로서의 고민이 담긴 글은 처음이었다. 같은 개발자여서 더 당연히 더 흥미가 갔다. 무슨 일을 하면 행복할지 그리고 개발자가 되면 정말 행복할까에 대해 취준생 때 많이 고민 했지만 직장인 개발자가 되고나서는 이러한 고민들에 대해서 소.. 2023. 5. 7. 공통컴포넌트 any 대신 제네릭을 사용해볼까? 아래와 같이 공통 컴포넌트에서 onSelect의 param을 any로 정의하는 것에 대한 문제를 해결하고 싶었다. // SelectField.tsx (공통 컴포넌트) interface Props { ... onSelect?: (param: any) => void; } const SelectField = (props: Props) => { return( ) } 첫번째 방법 (Not OK) onSelect의 제네릭 타입을 param에 넘겨주는 방법을 시도 했다. 에러는 없으나 Form.tsx에서 제네릭이 any로 추론되어 적용되었기 때문에 올바른 방법이 아니다. 또한 onSelectSettlementPeriodType라는 함수를 실행할때에는 타입을 넣어주어서 의미가 있겠지만 props로 넘겨만 주고 실행은 .. 2023. 4. 2. react-hook-form onBlur 안될때 onBlur가 왜 안먹히나 보았더니 react-hook-form 에서 register를 등록할때 이미 onBlur가 props로 내려가고 있었다. 그레서 {…rest}의 위치를 맨 앞으로 옮겨주고 내가 만든 onBlur를 뒤로 빼주었더니 우선순위가 내가 만든 onBlur로 가게 되어서 작동하였다. {label} 2022. 9. 28. Rendered more hooks than during the previous render 에러 메세지에서 알 수 있듯이 이전 렌더링에서 호출된 hooks 보다 현재 렌더링에서 hooks가 더 많이 호출된 결과로 에러가 발생한다.hooks는 매 렌더링마다 동일한 호출을 보장받아야 한다.그렇기에 hooks를 조건 문안에서 쓰는 게 금지되어 있고 컴포넌트 최상위에서 사용하라고 권장되는 이유이다.hooks라는 게 함수의 상태를 기억해야 하는 것이기 때문에 호출 순서를 이용하여 함수의 상태를 기억했다가 이전의 상태를 가져올 수 있는 것이다.https://ko.reactjs.org/docs/hooks-rules.html#explanation 2022. 3. 15. 이전 1 2 3 4 ··· 6 다음
