개발/React

Nextjs 모노레포 구성 (turborepo)모노레포로 구성하면 좋은점들이 많다.나는 코드를 다른 프로젝트와 공유할수 있다는 점이 가장 매력적으로 느낀다.turborepo로 모노레포를 구성해 보겠다.난 npm 10.9.0 환경으로 진행한다.npx create-turbo@latest프로젝트 이름 입력후 패키지매니저 선택후 끝!나는 설치하다가 실패 어쩌구 권한 어쩌구 떠서 아래 명령어 실행함sudo chown -R 501:20 [npm 경로]실행 후 apps 폴더에 docs 와 web 프로젝트가 보인다.아래 packages 폴더에는 공통으로 쓰는 코드들로 보인다.docs 프로젝트로 들어가 page.tsx 에서 Button을 import 해온 경로를 보면 알 수 있다.import { Button } from..

Nextjs15 에러핸들링모든 코드는 github에 있습니다.서론에러 핸들링은 따지자면 에러 핸들링과 예외 핸들링이 존재한다고 한다.구분하자면 에러 핸들링은 컴퓨터가, 예외 핸들링은 개발자가 의도적으로 발생시킨다.Nextjs 프레임워크를 쓴지 얼마 안된 뉴비 입장에서 이런 핸들링이 문득 궁금했다.내가 생각하는 이상적인 에러 핸들링은 에러 발생 후 얼마만큼 자연스럽게 처리되는가 이다.모든 경우를 세분화하여 예외처리하면 좋겠지만 하다보면 예상치 못한 에러들이 발생할 수 있고 이를 얼마만큼 매끄럽게 처리하냐가 관건이라고 생각한다.그래서 예상치 못한 에러도 잡고 내가 정의한 예외들을 어떻게 nextjs 에서 녹여낼수 있을까 하는 생각으로 찾아봤다.에러와 관련하여 react 측에는 ErrorBoundary 라는 ..

React Modal 어디까지 만들어봤니?모든 코드는 github에 있습니다.서론나는 개인적으로 모달창을 좋아한다.페이지 이동없이 내가 의도한대로 데이터를 전달받을수 있고 다른 화면을 클릭하면 모달이 꺼지는등 키고 끄는 동작을 간편하게 설정할 수 있기 때문이다.backdrop-filter에 blur를 설정하여 위와 같이 모달에 집중하게 할 수 도있고 아닐수도 있다.지금까지 간단히 모달을 띄우는 작업을 하다가 복잡한 모달의 요청을 받아서 하나의 리액트 훅으로 처리했던 코드를 공유하려고 한다.요구 사항모달이 아닌 부분 클릭하면 '작성 중이던 글을 취소하시겠습니까?' 라는 새로운 모달 띄우고 닫기 or 유지하기모달 step 만들기 - 1단계 -> 2단계 -> 3단계 (완료)단일 모달만 만들어본 나에게는 모달지..

모든 코드는 깃허브에 있습니다. 개발환경 설정 0. LICENSE 파일 생성 (MIT) MIT License Copyright (c) 2024 TeTedo Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copie..

sytled-components에서 Pseudo selector로 사용되는 &을 생략한 코드들의 css가 적용되지 않는 오류를 발견했다. "styled-components": "^6.0.4" 버전은 다음과 같이 사용하고 있었다. 일단 아래에 있는 코드들을 찾아서 급한대로 모든 코드에 &을 붙여 임시적으로 해결한 상태이다. :nth-child :first-child :last-child ::before ::after :focus styled-components github issues 첫 이슈 - v5 에서 v6 으로 마이그레이션 문제 Migration problems from v5 to v6 · Issue #4096 · styled-components/styled-components Hi! Found a..

React 최적화 - React.memo 모든 코드는 github에 있습니다. React는 부모가 렌더링 될때마다 자식들도 렌더링 되는 특징을 가지고 있다. 이러한 렌더링을 최적화하는 방법은 여러가지가 있다. 그 중 React.memo, useMemo, useCallback등이 있지만 React.memo를 소개하려고 한다. React.memo React.memo는 props가 변하지 않으면 리렌더링을 스킵한다. memo로 감싼 컴포넌트는 메모이제이션으로 이전 props와 새로운 props를 비교하여 같은 값이라면 리렌더링을 하지 않고 기존 컴포넌트를 반환한다. 여기서 props를 비교하는 함수로는 Object.is 를 사용하기 때문에 Object를 props로 넘기는거 보단 primitive 타입을 넘기..