전체 글 (21) 썸네일형 리스트형 [Next.js] redirects() 사용 시 페이지가 작동하지 않습니다. 이슈 해결하기 프로젝트를 진행하면서 /my-meeting/comments 라는 url에 접근하면, /my-meeting/comments/type=writable url로 접근하도록 하고 싶어, next.config.ts 파일에 다음과 같이 redirects() 옵션을 설정해주었다. async redirects() { return [ { source: '/my-meeting/comments', destination: '/my-meeting/comments?type=writable', permanent: true, }, ]; },이전에도 redirects()를 잘써왔었기 때문에 당연히 잘 작동할 줄 알았는데, 다음 화면을 마주했다.왜 이런 문제가 발생한.. [Tanstack-Query] 구체적인 쿼리키 설정으로 캐싱 최적화하기 Tanstack-query를 사용하는 큰 이유중에 하나는 캐싱 관리이다.나는 기존에 진행하던 사이드 프로젝트에서 쿼리키를 다음과 같이 관리하고 있었다.const MEETING_QUERY_KEYS = { topMeetings: (category: string) => ['topMeetings', category] as const, meetings: (category: string) => ['meetings', category] as const,}; staleTime을 1분으로 설정해두었는데, 1분 이내에 페이지를 이동해도 추천 모임은 캐싱된 데이터를 사용하기 때문에 API 호출이 안되는데,모임 목록쪽은 계속 API가 호출되는것으로 보아 모임 목록 캐싱이 잘 되지 않는걸 알 수 있었다. 그 이유는 추천 .. [Next 14] Next.js 프로젝트에 테스트 환경 구축하기 (jest, react-testing-library) Next.js 프로젝트에 jest와 react-testing-library를 설치해서 테스트 환경을 구축해보려고 한다.내 프로젝트 관련 버전 정보는 다음과 같다.Next: 14.1.0React: 18.2.01. 필요한 라이브러리 설치npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node 패키지역할설치 이유jest테스트 러너테스트 실행을 담당 (Test Runner)jest-environment-jsdom브라우저 환경을 흉내내는 테스트 환경Next.js는 브라우저에서 동작하므로 JSDOM이 필요@testing-library/reactReact 컴포.. [Study] Tanstack Query v5 알아보기 개발자를 위한 SNS 웹페이지를 개발하면서 Tanstack Query를 사용해서 상태관리를 하기로 정해졌다. Tanstack Query를 선택하게 된 이유와 Tanstack Query가 무엇인지 알아본 내용에 대해 포스팅 하려한다!React-Query가 react가 아닌 다른 프레임워크도 지원하기 시작하면서 Tanstack Query로 명칭을 바꾸었다.공식문서에 위와같이 Tanstack query를 소개하고 있다.또, 기존 상태 관리 라이브러리들 (ex. redux, recoli 등)은 비동기 및 서버 상태관리에 적합하지 않다고 소개하고 있다.그렇다면 서버 상태가 무엇일까?공식 홈페이지에서 서버 상태를 다음과 같이 얘기하고 있다.서버 상태클라이언트에서 제어나 소유하지 않은 공간인 서버에 저장되고 관리되는.. [Refactoring] Typescript Partial 활용해서 코드량 줄이기 typescript로 사이드 프로젝트를 진행하면서 코드 리팩토링을 하던 중 partial을 활용하면 코드량을 줄일 수 있을거라는 피드백을 받았다.타스 공부할 때 partial에 대해서 공부하긴 했었지만, 실제 코드에 적용해본적은 없어서 얼마나 많이 코드량이 줄어들지 기대가 됐다. 먼저, partial에 대해서 다시 한번 알아보자!Partial 특정 타입에 부분집합의 만족하는 타입을 정의할 수 있다.type Person { name: string; birth: string; age: number;}type Friend = Partial;const hans: Friend = {}; // 가능const harry: Friend = { name: "harry" }; // 가능const amy: MyEmai.. [React] Eslint 오류 해결하기 (no-else-return, jsx-a11y) 1. error Unnecessary 'else' after 'return' no-else-return{combinedMenus.map((menu) => { if (menu.type === 'page') { const pageMenu = menu as MenuType; // 페이지 메뉴일 경우 Menu 컴포넌트로 출력 return ; } else if (menu.type === 'modal') { // 모달 메뉴일 경우 ModalMenu 컴포넌트로 출력 const modalMenu = menu as ModalMenuType; return ; } else { return null; } })} 위처럼 작성되어 있던 기존 코드.. [React + TS] useRef 사용시 The expected type comes from property 'ref' which is declared here on type 에러 (+ useRef 3가지 정의) 프로젝트에서 useRef를 사용해서 input 컴포넌트에 focus를 주려고 했는데 다음과 같은 에러가 발생했다.useRef에 타입을 지정해주지 않아 에러가 나는 듯 해서 useRef() 이렇게 타입을 지정해주었는데도 다음과 같은 에러가 발생했다.에러를 해결하기 위해서 useRef의 타입이 어떻게 정의되어 있고 사용되는 목적에 따라 어떤 타입과 초깃값을 넣어주는게 좋을지 알아보았다. 먼저, useRef의 반환 타입은interface MutableRefObject { current: T;}interface RefObject { readonly current: T | null;} 위처럼 MutableRefObject 타입인 current와 RefObject 타입인 current가 있다.RefObj.. [Javascript] 구동 환경과 동작 원리 이해하기 with 이벤트루프, 호출스택, 콜백 큐 자바스크립트는 한번에 한가지 일만 실행하는 싱글 쓰레드 언어이다.한번에 한가지 일만 실행하는 것은 오래걸리는 작업을 실행할 때 비효율적일 수 있다.예를 들어, 빨래를 하는동안 다른 집안일을 하지 못하고 세탁기 돌아가는 것만 바라보고 있어야 한다고 생각하면 이건 굉장한 시간 낭비이다.개발에서도 마찬가지로 시간이 많이 소요되는 일은 병렬 처리가 필요한데, 이때 싱글 스레드 언어인 자바스크립트는 이러한 처리를 비동기 콜백을 사용해 해결한다.자바스크립트의 비동기 콜백의 이해를 위해서는 브라우저의 동작 원리를 이해해야 한다.비동기 콜백의 이해를 위해서는 JS Engine과 Web API, Event Loop에 대한 이해가 필요하다.Javascript EngineJS Engine은 자바스크립트 코드를 이해하고 실행.. 이전 1 2 3 다음
