나도 공부한다/삽질19 [에러] non-interactive elements with click handlers must have at least one keyboard listener. 문제 상황해당 노트를 클릭하면 노트의 디테일한 내용을 보여주기 위해 onClick 이벤트 리스너를 등록했더니 이런 에러가 발생했다. 원인esLint 정책에 의한 에러였다.https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/click-events-have-key-events.md eslint-plugin-jsx-a11y/docs/rules/click-events-have-key-events.md at main · jsx-eslint/eslint-plugin-jsx-a11yStatic AST checker for a11y rules on JSX elements. - jsx-eslint/eslint-plugin-jsx-a11yg.. 2024. 5. 6. Three.js "Could not load /파일.gltf: Invalid typed array length: 126" 에러 문제 상황 갑자기 Could not load /파일.gltf: Invalid typed array length: 126 에러와 함께 gltf 파일 로드가 안됐다. 해결 과정 다른 gltf 파일을 사용했을 땐 잘되어서 코드의 문제는 아니었다. gltf 파일 역시 다른 프로젝트에서 잘 쓰였기 때문에 문제가 없었다. 처음엔 gltf loader 경로를 잘못 써준줄알고 상대 경로로 바꿨다가 다시 절대 경로로 바꿔보기도 했다. 혹시 이전 프로젝트와 라이브러리 버전이 다른가 체크했는데 그것도 아니었다. 결론 몇시간을 날리고, 이 파일을 가져올 때 달라진 점(저장 위치 등)이 뭐가 있을까 생각하다가 에러를 찾아냈다. gltf 파일을 읽어보면 함께 쓰이는 이미지 파일과 .bin 파일 경로가 uri로 나타나있다. 나의 .. 2024. 3. 16. [Three.js] gltf 파일 편집하기 참고할 자료가 정말 없었기 때문에 고생을 많이 했다. 누군가에게 도움이 되길 바라며... 프로젝트에서 미로 3D 모델을 쓸 일이 생겼다. 여기서 미로 틀만 마음에 들었고, 벽 텍스쳐와 시작점 끝점의 깃발(?)을 수정하고 싶었다. 내가 할 일은 두가지였다. 1. 깃발 삭제하기 2. 벽 텍스쳐 교체하기 참고로 내가 다운받은 gltf 파일의 json 데이터는 이렇다. { "accessors": [ { "bufferView": 2, "componentType": 5126, "count": 42, "max": [ 10.497600555419922, 10.497600555419922, 0.001500000013038516 ], "min": [ -10.497600555419922, -10.497600555419922.. 2024. 3. 11. Interceptor에서 navigate 사용하기 (feat. react-router 6에서 사라진 history hook 사용하는 법) ※ 이 글은 저의 삽질 과정이 그대로 담겨있는 글로, 사담이 많습니다. 결과만 알고 싶으신 분은 해결방법 - 결론을 읽어주세요 목차1. 구현 상황2. 문제 상황3. 해결 방법- 1차 시도- 2차 시도- 3차 시도- 4차 시도- 5차 시도- 결론- 참고 자료 구현 상황axiosConfig.js 파일을 따로 만들었다.axiosConfig.js에서는 요청을 보낼 때 마다 인터셉터로 요청을 가로채서 헤더의 Authorization에 토큰을 넣도록 설정했다.그리고 백엔드쪽에서 응답을 보낼때 갱신된 토큰을 보내주므로 응답을 받을 때마다 응답을 가로채서 토큰을 새걸로 갈아끼도록 설정했다. 여기까지는 일반적인 인터셉터 사용법이기 때문에 문제가 되지 않았다. 응답으로 에러 코드가 오는 경우에 에러 핸들링 해주는 코드를.. 2024. 2. 11. React axios 데이터가 제대로 담기지 않는 문제 해결 [JSON] [ { "boardInputDate": "2024-01-02", "boardContent": "별 내용입니다", "boardPicture": "이미지 링크", "boardAccess": "OPEN", "boardLike": 3, "hashContent": ["밥", "저녁"] } ] useEffect(() => { const fetchBoardData = async () => { try { const responses = await Promise.all( reportData.map((it) => { axios.get( `https://d9434a94-4844-4787-a437-ceb2559ee35c.mock.pstmn.io/board/${it.boardIndex}` ); }) ); const.. 2024. 1. 24. (React) API로 받아온 값을 상태값에 넣어주기 전에 화면이 렌더링되는 문제 여기서 followData, flowerData가 쓰이지 않아 setFollowData, setFollowerData는 불필요한 코드라고 생각했고 지웠다. 그랬더니 새로고침 했을 때 잘만 나오던 팔로우 목록이 화면에서 보이지 않았다. 버튼을 눌러야만 보였다. 상태를 업데이트하면 컴포넌트가 리렌더링 되는데 set함수를 지워버리니 리렌더링할 요소가 없어 컴포넌트가 이전 상태를 유지하는게 원인이었다. import React, { useEffect } from 'react'; import { useState } from 'react'; import axios from 'axios'; const menuArr = [ { name: '팔로우', content: [] }, { name: '팔로워', content: .. 2024. 1. 18. 이전 1 2 3 4 다음
