짧은코딩

loading.tsx와 error.tsx loading.tsx, error.tsx 파일을 만들어두면 로딩 중에는 loading.tsx가 보이고, 에러가 발생하면 error.tsx가 보이게 할 수 있다. React의 Suspense와 error boundary를 이용하여 구현할 수 있다. Next의 Loading UI and Streaming 공식 문서 https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming Routing: Loading UI and Streaming | Next.js Built on top of Suspense, Loading UI allows you to create a fallback ..

next-auth(Auth.js) https://authjs.dev/ Auth.js Authentication for the Web. authjs.dev next-auth는 사실 이전 이름이고, 현재는 Auth.js로 바뀌었지만 이 글에선 next-auth라고 부르겠다. next-auth는 next와 호환이 되는 로그인 라이브러리이다. 또한 여러 sns 로그인도 지원해 준다. -간단한 사용법 공식 문서를 보고 next-auth 설치 app 폴더와 같은 위치에 auth.ts, middleware.ts 파일 생성 및 설정 middleware.ts next에서 middleware 기능을 제공해 줘서 로그인해야지만 접근 가능한 페이지를 쉽게 설정할 수 있음 이것은 페이지 렌더링보다 middleware.ts에 있..

useFormState와 useFormStatus 로그인이나 회원가입 같은 부분에서 Form을 통해 처리를 하곤 한다. 이때 아이디나 비밀번호가 비어있으면 에러 메시지를 알려줘야 한다. 그럴 때 useFormState, useFormStatus를 사용하면 편하다. 하지만 이 기능은 아직 실험적인 기능이긴 하다. useFormState https://react.dev/reference/react-dom/hooks/useFormState useFormState – React The library for web and native user interfaces react.dev -예시 코드 import { useFormState } from "react-dom"; async function increment(p..

useSelectedLayoutSegment useSelectedLayoutSegment는 ActiveLink를 만들 때 유용한 hooks이다. next에 내장되어 있는 기능이다. -useSelectedLayoutSegment import {useSelectedLayoutSegment} from "next/navigation"; export default function NavMenu() { const segment = useSelectedLayoutSegment(); console.log(segment); return ; } 만약 "compose/tweet" 주소에 있으면, segment는 "compose"가 나온다. 즉, useSelectedLayoutSegment는 최상위 부모 경로만 나온다. -u..

만들려는 기능 모달을 띄웠는데, 이전 페이지가 유지되고 주소가 바뀐다. 로그인 버튼을 누르면 "/login"으로 갔다가 "/i/flow/login"으로 리다이렉팅 된다. 패러렐 라우트와 인터셉터 라우트를 이용해서 구현한다. 패러렐 라우트 Parellel은 병렬이라는 의미를 가지고 있다. 즉, Parallel Route는 병렬 라우트로 해석할 수 있고, 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있다. 패러렐 라우트는 뒤에 화면이 남아있으면서 모달을 띄우고 주소를 변경할 수 있는 기능이다. 폴더 구조 app/(beforeLogin)/layout.tsx import {ReactNode} from "react"; import styles from '@/..

app router app router는 기존에 있던 page router의 문제점들을 해결한 새로운 폴더 구조이다. 아직 Next에서 page router를 지원하긴 하지만 신규 기능은 app router에만 적용될 것이다. 그렇기에 장기적으로 보면 app router에 대해 잘 이해할 필요가 있다. 파일 생성 npx create-next-app@lastst 폴더 구조 public public 폴더에는 주로 누구나 접근 가능한 사진들을 저장한다. 만약 특정한 조건을 가진 사람만 접근이 가능해야 하면 다른 곳에 저장해야 한다. src/app app 폴더 안에는 페이지를 설정하는 파일들이 들어간다. 페이지 외에 파일이 필요하면 다른 폴더를 만들어서 작성하면 된다. -layout.tsx layout.tsx는..

React Query에서 데이터를 불러오는 올 때 isLoading을 중앙화할 수 있다. Loading 컴포넌트를 만든다. App.tsx에 Loading 컴포넌트를 넣어준다. Loading import { Spinner } from '@chakra-ui/react'; import { useIsFetching, useIsMutating } from 'react-query'; interface Props { isLoading?: boolean; } export default function Loading({ isLoading }: Props) { // useIsFetching은 현재 가져오고 있는 쿼리 호출의 정수 값을 리턴한다. const isFetching = useIsFetching(); // for ..

UpLog의 로그인 이후의 방식 설계 로그인을 한다. 세션 스토리지에 userInfo가 암호화되어 저장된다. 제품(products) 목록을 가져온다. 제품이 있는 경우 제품 리스트의 맨 처음 제품 ReleaseNote 페이지로 이동한다. 제품이 없는 경우 메인 페이지로 이동한다. 로그인 이후의 방식 구현 로그인 후 세션 스토리지에 유저 정보 저장 -로그인 로직 const { mutate } = useMutation(loginAPI, { onSuccess: (data: GetUserInfo | FailResponse) => { if ('message' in data) { setMessageInfo({ type: 'error', content: '아이디 또는 비밀번호를 잘못 입력하셨습니다.' }); retu..

App Router app 폴더 하위에 모든 파일 추가 폴더명으로 경로를 정의하며, page.js 또는 route.js로 작성된 파일만 경로로 활용 가능 layout.tsx 이 파일은 최상위 레이아웃으로 모든 페이지에 공유됨 pages router의 _app.js를 대체한다. page.tsx 웹 애플리케이션의 시작점이자, 루트 / 경로 페이지 Server Component 무엇이 서버 컴포넌트인가? 컴포넌트가 서버에서 렌더링이 되고 클라이언트에 html로 전송되는 것 특징 리렌더링이 되지 않는다. 서버 리소스에 접근 가능하다(서버 시스템, db) js 번들에 포함되지 않는다.(제로 번들 사이즈) 자동 코드 스플릿팅 → lazy로 명시할 필요 x 유저 인터랙티비티(useState, useEffect 등) ..

JWT 관리 방식 이 프로젝트에서는 권한 문제가 많기 때문에 JWT 관리를 어떻게 할지 더 고민했다. https://hshine1226.medium.com/localstorage-vs-cookies-jwt-%ED%86%A0%ED%81%B0%EC%9D%84-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%B4-%EC%95%8C%EC%95%84%EC%95%BC%ED%95%A0-%EB%AA%A8%EB%93%A0%EA%B2%83-4fb7fb41327c LocalStorage vs. Cookies: JWT 토큰을 안전하게 저장하기 위해 알아야할 모든것 안녕하세요 백엔드 개발자 최준혁입니다. hshine..