분류 전체보기

Problem&Solution

react 버그 해결

{localMessageList?.map((message: ResGetMessageListDataType) => ( {message.content[0]?.text?.value && ( {parse( handleTextMessage(message.content[0].text.value,message.attachments?.[0]?.file_id), )} )} ))}   ProblemhandleTextMessage(message.content[0].text.value,message.attachments?.[0]?.file_id) 이렇게 handleTextMessage에 메시지 값이랑 메시지 파일 아이디를 넣어서 state로 fileId를 저장하..

Frontend

moduleResolution이란

tsconfig.json을 보면 moduleResolution의 속성이 있는 것을 확인해볼 수 있다.  moduleResolution은 TypeScript 컴파일러 옵션 중 하나로, TypeScript가 모듈을 찾고 해석하는 방식을 지정한다.  moduleResolution의 옵션 1. nodenode.js의 모듈 해석 전략을 따른다. 대부분의 현대 TypeScript 프로젝트에서 사용되는 기본 모드이다.  절대 경로: node_modules 디렉터리에서 모듈을 찾는다.상대 경로: 현재 디렉터리에서부터 상위 디렉터리로 거슬러 올라가며 모듈을 찾는다.파일 확장자: .ts, .tsx, .d.ts, .js 등의 파일 확장자를 순서대로 시도하여 모듈을 찾는다.패키지 파일: 패키지의 package.json 파일에..

Problem&Solution

react hook의 호출 규칙

react-query로 서버에서 리스트를 get 해오는 로직을 짜다가 데이터를 가져오는 loading 일 때는 초반에 Loading... 를 띄워주려고 했다.   "Uncaught Error: Rendered more hooks than during the previous render." 하지만 위와 같은 에러가 발생했다. 이유를 찾아보니 if (isLoading) return Loading...;  이 부분을 hook보다 상위에 두어서 생긴 문제였다.  리액트에서는 컴포넌트의 렌더링 중 훅의 호출 순서와 횟수가 일관되어야 한다. 컴포넌트가 처음 렌더링될 때 호출된 훅의 순서와 갯수는 이후 렌더링에서 동일해야한다. = 훅의 호출 규칙 처음 코드에서 if (isLoading) 조건에 따라 로딩 상태가 변경..

Problem&Solution

객체 비교에서 한 실수

{assistantList.data.map((assistant: ResGetAssistantListDataType) => ( { setCurrentAssistant(assistant); postThread(); }}> {assistant.name} ))} currentAssistant와 assistant가 동일할 때 다른 컬러로 변경하는 효과를 주고 싶었다. 분명 같은 값을 가진 객체인데 색이 변하지 않는 문제가 발생했다. 그렇게 취준할 때 익히 배웠던 참조타입, 원시타입의 차이점이다..이렇게 실제 현업에서 실수해보니 다시금 중요성을 느끼는 1인..  객체는 값이 아닌 주소 값을 바라보기 때문에 두 객체가 같은 값을 가지고 있어도 다른 주소 값을 참조하고 있기 때문에 다른 값이라고..

*히아*
'분류 전체보기' 카테고리의 글 목록 (5 Page)