짧은코딩

개발 일기 카테고리를 굉장히 오랜만에 작성한다. 사실 그동안 놀기도 했고 취업 준비도 했다.그리고 취업도 성공! 취업에 성공했다고 안주하지 않고 더 열심히 해야겠다는 것을 깨달았다. 아직도 많이 부족하지만 일을 할 수 있어서 참 감사한 거 같다. 그래서 작년에 했던 UpLog 리팩터링을 해보려 한다. 혼자서 프론트, 백, 아키텍처까지 모두 구현해 보는 것이 목표이다. 물론 나는 프론트 개발자니까 프론트엔드 부분에 집중하겠지만, 그래도 백엔드와 아키텍처 모두 내가 직접 만들어보고 싶다. 계획을 적어보려 한다.FrontendReact -> Next 14 App Router로 MigrationRecoil -> Zustand전반적인 코드 정리중요한 부분에 대한 테스크 코드 작성 가능하다면 로드 밸런싱 구축 + ..

상황{ name: "", list: [],}보이는 데이터가 많은 모달에서 input을 받아서 state에 저장하는 기능을 구현하고 있었다.사용자 리스트가 나오고, 체크를 하면 list 배열에 저장되는 방식이었다.사용자 리스트가 많은 경우, name을 input으로 입력받아 업데이트하는 방식에서 input delay가 발생해결법1. 컴포넌트 분리 //사용자 체크 기능(데이터가 많음) ...이렇게 name과 list 배열을 입력하는 것이 같은 컴포넌트에 있으면 컴포넌트가 계속 렌더링 되어 delay가 발생한다.  //사용자 체크 기능(데이터가 많음) ...따라서 이렇게 컴포넌트를 분리하고 setValue를..

회사에서 협업을 하는데 git에 대한 개념이 좀 부족하다고 느껴서 몰랐던 개념들에 정리하고자 이 글을 작성한다.git worktree와 stashgit worktree한 레포지토리에서 여러 개의 작업트리를 관리하기 위해 사용하는 명령어일반적으로 레포지토리 안에 있는 여러 브랜치를 각각 하나의 worktree라고 생각하면 된다.git stash자신이 한 브랜치에서 작업을 완료하지 않는 상태에서 다른 작업이 생기면, 완료되지 않은 코드를 commit 하는 것은 좋지 않다.따라서 stash를 활용해 마무리하지 않은 작업을 스택에 잠시 저장할 수 있다.git fetch와 pull우선 fetch와 pull의 가장 큰 차이는 병합(merge) 처리 여부이다.git fetchfetch는 원격 레포지토리에서 최신 co..

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 ..