현재 진행중인 Next.js 프로젝트에서 데이터 패칭 연결 중 문제가 발생했다.각 페이지에서 공통적으로 사용해야 하는 데이터가 존재한다는 것!!!!지저분한 코드를 작성하다 상태 관리 라이브러리를 사용하기로 결정했고 이번 기회에 배워보고 싶었던 "zustand"를 선택했다. 🐾 설치하기# NPMnpm install zustand 🐾 스토어 생성하기create 함수를 사용해 스토어를 생성한다.// 공식 문서 예제import { create } from 'zustand'const useStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBea..
기존 자바스크립트로 작성된 코드를 타입스크립트로 마이그레이션을 진행했다. typescript 환경 eslint를 추가하기 위해 명령어를 입력하자 오류가 발생했다.[eslint] Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Class extends value undefined is not a constructor or nullERROR in [eslint] Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Class extends value undefined is not a constructor or null @typescript-eslint..
🐻 ZustandZustand는 React를 위한 상태 관리 라이브러리이다.Zustand는 상태 관리를 위해 React의 Context API와 함께 사용되며, Redux보다 훨씬 간단하고 직관적이다.Zustand는 상태를 관리하기 위해 React 컴포넌트 트리 내에서 사용되는 상태 컨테이너를 제공하며,useState와 useReducer를 사용하거나 더 간단한 API를 제공해 상태를 업데이트하고 구독하는 방법을 단순화한다. Zustand의 특징1. 간결함과 유연성상태 관리를 위한 간단한 API를 제공하여 복잡한 설정이나 보일러플레이트 코드 없이 쉽게 통합할 수 있다. 2. React Hooks와의 통합React Hooks를 기반으로 한 상태 관리를 제공하여, 상태를 정의하고 사용하는 것이 매우 직..
프로젝트 4개를 하면서 ESLint와 Prettier는 항상 학원에서 하라는 대로만 사용해왔다.별 생각 없이 사용하던 나날이 계속되고 면접을 준비하면서도 이에 대한 내용은 미처 생각하지 못했다. 그래서 반성을 담아 작성하는ESLint와 Prettier에 대해 알아보기!!!!! 🌊 ESLint코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구 -> 코드 퀄리티를 보장하도록 도와준다! ESLint를 사용하면 프로젝트에서 코드를 작성하는 방식을 일관성이 있는 방식으로 구현할 수 있도록 도와준다.ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드를 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수 있다. { "parser": "@typescript-eslint/parser..
🌴 React Query (현 TanStack Query)서버의 데이터 가져오기/업데이트, 캐싱, 에러 처리 등을 쉽게 할 수 있도록 돕는 라이브러리서버에서 가져온 값을 담는 객체, 에러가 발생했을 때 에러 정보를 담는 객체, 데이터 가져오기/업데이트 중임을 나타내는 등 각종 유틸 기능을 제공한다.동일한 요청을 동시에 여러번 해도 한번만 요청을 보내 최적화하기 때문에 비동기 작업을 좀 더 효율적이고 간단하게 처리할 수 있게 한다. cursor에 따라 postId 변경하기http.get("/api/postRecommends", ({ request }) => { const url = new URL(request.url); // cursor의 기본값은 0 const cursor = par..
백엔드에서 API를 아직 만들지 않았다면 MSW를 사용하자! - 회원가입
MSWMock Service Worker서비스 워커를 사용해 네트워크 호출을 가로채는 API 모킹(mocking)라이브러리백엔드 API인 척하면서 프론트엔드의 요청에 가짜 데이터를 응답한다. 요청에 대한 응답을 직접 MSW로 만들어 백엔드에서 API를 주기 전에 어떤 형식의 데이터가 들어올 것인지 미리 코드를 작성할 수 있다.따라서 백엔드 개발자와 미리 회의를 통해 데이터의 정확한 형식을 맞춰 놓는 것이 좋은 방법이다. - MSW 세팅하기MSW 초기 세팅npx msw init public/ --savepublic폴더에 msw를 세팅한다. 강의에서는 위 코드로 실행하는데 나는 오류가 발생해서 뒤의 --save를 제외하고 입력했다. MSW 설치npm install msw@latest --save-dev ..
[Remix]Remix 공식문서 파헤치기 7탄 - 튜토리얼 진행하기
⇩ 완성본 미리보기 지난 스터디에서 진행했던 튜토리얼을 다시 파헤쳐 보자! 1. Setup👉 기본 템플릿 생성하기npx create-remix@latest --template remix-run/remix/templates/remix-tutorial아주 기본적인 템플릿을 사용하지만 CSS와 데이터 모델을 포함하므로 Remix에 집중할 수 있다. 명령어를 입력하면 프로젝트 이름과 git, npm에 대한 설정을 묻는다. 실제 프로젝트에서는 pnpm을 사용하지만 여기서는 npm을 사용했다. 설치가 완료되면 폴더가 생성된다! 여기서 app 폴더 안에 있는 root.tsx가 "루트 경로"가 된다.렌더링되는 UI의 첫 번째 구성요소로 일반적으로 페이지의 전역 레이아웃이 포함된다. ..
상위 경로와 일치하는 하위 경로를 렌더링한다.import { Outlet } from "@remix-run/react";export default function SomeParent() { return ( Parent Content );} Propscontextoutlet 아래의 엘리먼트 트리에 컨텍스트 값을 전달한다. 상위 경로가 하위 경로에 값을 제공해야 할 때 사용한다. 하위 컴포넌트에서 전달받은 컨텍스트를 가져올 때는 useOutletContext를 사용한다. useLoaderData에서 액세스한 지연된 로더 promise를 해결하는 역할을 한다.import { Await } from "@remix-run/react";Loading...}> {(..
💛 .client modules 흔하지는 않지만 브라우저에서 모듈 부작용을 사용하는 파일이나 종속성이 있을 수 있다. 서버 번들에서 강제로 제외하기 위해 파일 이름에 *.client.ts를 사용하거나 .client 디렉토리 내에 파일을 중첩할 수 있다. // feature-check.client.ts export const supportsVibrationAPI = "vibrate" in window.navigator; 이 모듈에서 내보낸 값은 서버에 있으므로 모두 undefined가 될 것이기 때문에 이를 사용할 수 있는 유일한 장소는 useEffect와 클릭 핸들러와 같은 유저 이벤트이다. import { supportsVibrationAPI } from "./feature-check.client.ts..