spoit

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..

아래와 같이 공통 컴포넌트에서 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로 넘겨만 주고 실행은 ..

onBlur가 왜 안먹히나 보았더니 react-hook-form 에서 register를 등록할때 이미 onBlur가 props로 내려가고 있었다. 그레서 {…rest}의 위치를 맨 앞으로 옮겨주고 내가 만든 onBlur를 뒤로 빼주었더니 우선순위가 내가 만든 onBlur로 가게 되어서 작동하였다. {label}

에러 메세지에서 알 수 있듯이 이전 렌더링에서 호출된 hooks 보다 현재 렌더링에서 hooks가 더 많이 호출된 결과로 에러가 발생한다.hooks는 매 렌더링마다 동일한 호출을 보장받아야 한다.그렇기에 hooks를 조건 문안에서 쓰는 게 금지되어 있고 컴포넌트 최상위에서 사용하라고 권장되는 이유이다.hooks라는 게 함수의 상태를 기억해야 하는 것이기 때문에 호출 순서를 이용하여 함수의 상태를 기억했다가 이전의 상태를 가져올 수 있는 것이다.https://ko.reactjs.org/docs/hooks-rules.html#explanation

주로 next.js 프레임워크를 사용하다가 만나게 되는 에러이다. ssr의 특성상 초기 렌더링은 서버측에서 하게 되는데 그때, styled-components에서 만들어주는 className과 클라이언트 측에서 만들어주는 className과 다르기 때문에 나타나는 이슈이다. 해결방법 1. babe-plugin-styled-components를 설치한다. npm i babel-plugin-styled-components 2. 프로젝트의 루트에 .babelrc 파일을 만들고 설치한 플러그인을 설정한다. { "plugins": ["babel-plugin-styled-components"] } 3. 클라이언트 서버를 재실행한다. 아래 코드는 babe-plugin-styled-components의 소스코드이다. ..

얼마 전 회사의 새로운 프로젝트에서 코드이그니이터와 리엑트를 연결하는 경험을 하였다. 코드이그나이터는 php로 작성된 웹 프레임워크이며, 언어와 프레임웍 모두 비교적 레거시라고 평가받고 있다. 반면 리엑트는 비교적 새로운 프론트 프레임워크인 상황이었다. 이 상황에서 둘 사이의 연결을 설명해놓은 자료를 찾기는 쉽지 않았다. 레거시에 새로운 프레임 웍을 연결하는 작업은 개발팀이 더 효율적으로 개발을 할 수 있는 첫 시발점을 만드는 것이었기에 흥미가 많이 갔던 작업이었다. 코드이그나이터에 리엑트를 도입해보고자 하는 누군가에게 도움이 되고자 경험을 공유해본다. 코드이그나이터와 리엑트 라우터 연결 구성 코드이그나이터는 서버사이드 렌더링을 하며, 폴더 경로가 라우터가 되는 특징이 있다. 하지만 index.html ..

리엑트 class 컴포넌트 내에서 componentWilUnmount의 경우 주로 이벤트 리스너를 지울때 사용한다. 예를들어 setInterval같은 경우, 컴포넌트가 없어졌을 때 계속 실행되고 있으면 안되기 때문에 componentWillUnmount라이프 사이클에 맞춰 clean up 해준다. 그렇다면 훅스에서는 어떻게 이를 처리할까? useEffect를 사용해서 componentWillUnmount의 효과를 낼 수 있다. 아래 리엑트 공식문서에 나오는 방법을 참고하자. useEffect내에서 함수를 return하며 그 함수 안에 로직을 작성해주면 된다. import React, { useState, useEffect } from 'react'; function FriendStatus(props) {..

우아한 형제들 김민태님의 강의를 듣고 알기 쉽게 정리한 콘텐츠 입니다. 이전 포스팅을 통해 vdom이 어떻게 만들어지는지 확인했다. 이번 포스팅에서는 만들어진 vdom을 어떻게 화면에 렌더링하는지에 대하여 살펴볼 것이다. src/index.js import { createElement, render } from './react.js'; function Title (props) { return ( depth1_1 depth1_2 depth1_3 depth2_1 depth2_2 depth2_3 depth3_1 depth3_2 depth3_3 ) } // 사용자의 컴포넌트는 함수자체를 넘겨준다. render(, document.querySelector('#root')); 우선 사용자 컴포넌트는 위와 같다. 직..

우아한 형제들 김민태님의 강의를 듣고 직접 정리한 콘텐츠 입니다. 가상돔을 만들기 위해 먼저 리액트의 jsx 문법을 파싱할 수 있는 babel환경을 구축해야 한다. npm install @babel/cli @babel/core @babel/preset-react package.json { "name": "tiny-react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "babel src -d build -w", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "..

리덕스의 비동기 처리 라이브러리 중 하나인 redux-thunk에 대해서 알아보겠습니다. 비동기 라이브러리는 주로 action이 dispatch 되어 reducer에서 state수정이 일어나기 전 무언가 다른 처리를 해주기 위해 사용합니다. 대표적으로 ajax요청이 있습니다. redux-thunk는 이를 위한 방법으로 액션 생성자가 함수를 리턴하였을 경우 함수 내에 dispatch를 인자로 전달해주는 방법을 사용합니다. 액션 생성자가 리턴한 함수 내에 비동기 요청이나 로직을 저장해 두고 이를 원하는 조건이나 시기에 비동기적으로 활용할 수 있게 되는 것입니다. 기존에는 액션 생성자가 액션 객체를 리턴하면 바로 dispatch 되어 리듀서에서 스테이트 수정이 일어났습니다. 하지만, 액션 생성자가 함수를 리턴..