Sign in

dev

it dev nextjs jotai zustand

[React🌀] 차세대 상태관리 라이브러리, Jotai VS Zustand ⭐ (Feat. Recoil)

들어가며 프론트엔드 분야는 변화가 정말 빠르고 쉴새없이 발전하고 있는 것 같습니다. 하던 것만 열심히하면 어느새 뒤쳐지고 있는 자신을 발견할 수 있습니다… 😭 그 중에서도 가장 우리를 까다롭게 만드는 분야가 있죠, 바로 상태관리 (state management) 입니다. 리액트와 Next JS 등 프레임워크들이 여러 문제상황들을 해결해주었다고 하지만 상태관리에 대해서는 여전히 의문입니다. 코드가 길어지고, 무언가 모를 불편함이 항상 존재해왔죠. Redux 나 Mobx, 거기에 더 나아가서는 Redux 사용을 간소화시킨 Redux toolkit 또한 등장하지만 아직도 이 부분은 발전할 길이 많이 남았다고 생각됩니다. 그 중에 최근들어 점점 주목받고있는 2가지 라이브러리를 소개하고자 합니다! 바로 Jotai..
wono | discuss |
it dev nextjs context

Next.js - 서버 컴포넌트에서 useContext() 사용하기

넥스트js는 서버컴포넌트와 클라이언트 컴포넌트로 나뉘어진다 그렇기 때문에 React 기반의 훅들을 사용할 때는 한번더 생각해보아야 한다 오늘은 useContext() 를 어떻게 사용하는 지 알아볼 것이다 Next.js - 서버 컴포넌트에서 useContext() 사용하기 리액트에서 전역 변수를 전달하기 위해 redux / useContext 를 사용하였다 Next.js에서 useContext 를 사용하려고 하니 한가지 제약이 있었다 You are using createContext in a Server Component but it only works in Client Components → 바로 클라이언트 컴포넌트에서만 사용이 가능하다는 것이다 createContext in a Server Compo..
wono | discuss |
it dev nextjs jwt jose

[Next.js@13] jwt 라이브러리, jsonwebtoken 대신 jose

[Next.js@13] jsonwebtoken 대신 jose Next.js에서 jwt를 생성할 때 늘 쓰던 jsonwebtoken 모듈을 시도했다. 결과는 오류! 공식 문서에 따르면 Edge 런타임은 모든 Node.js API를 지원하진 않는다고 알려준다. error - Error: The edge runtime does not support Node.js 'buffer' module. jose 그래서 대체 모듈을 찾다가 jose 라는 모듈을 찾았다. 해당 모듈은 종속성없이 작동한다. 내부에 각 모듈들은 독립적이기에 트리쉐이킹도 가능하다고한다. 지원 목록을 보면 맨 아래에 당당하게 Vercel이 있다. 현재 jwt 생성과 복호화를 jose를 통해 모듈화시켜서 사용하고있다. import { JWTPaylo..
wono | discuss |
it dev nextjs build eslint

eslint 적용시 이슈(rules 무시, 우선순위)

👍 이번시간에는 eslint적용시 만날 수 있는 이슈와 해결방법을 알아보았다! 1. 일부 rules 무시하는 법 특정 코드에서 eslint의 rules을 무시해야할 때가 있다. 이때 우리는 파일 자체를 무시하거나, 다음 라인, 특정 범위의 코드를 무시할 수 있다. 만약 index.js의 test함수에서 no-unused-vars를 무시하고 싶다면 어떻게 해야할까? (1) 특정 파일 무시 만약 파일 차원에서 무시하려면 .eslintignore에 파일명을 추가하면 된다. 하지만 이 경우, index.js에 대해 전체 eslint를 적용하지 않는 단점이 있다. // .**eslintignore** index.js (2) 다음 라인만 무시 두 번째 방법으로 주석을 이용할 수 있다. 만약 다음 라인만 무시하고 싶..
wono | discuss |