빵 입니다.

안뇽하세요~ 넥스트 라우팅 관련하여 좋은 글들이 아주 많았는데 스스로 학습하고 머릿 속에 정리해 놓으려고 저만의 언어로 요약해 보았습니다~ 최하단에 출처를 남겨놓았으니 원본 글들도 꼭 봐주세요~ --- [목차] 1. 라우팅 - 리액트 라우팅 vs 넥스트 라우팅 - 라우팅 컨벤션 2. Index routes - Root Path - 원하는 라우팅 생성 - Layout 패턴 3. Nested Routes (중첩된 라우트) 4. Dynamic Routes (다이나믹 라우트 / 동적 라우트 매칭) - 동적 데이터에서 경로를 생성하려는 경우 - 정확한 세그먼트 이름을 모르는 경우 -- Catch-all Segments (모든 경우의 수를 캐치하기) -- Optional Catch-all Segments (모든 경..

화면별 권한이 필요할 경우, vue-router에서 제공하는 네비게이션 가드를 이용해 화면에 접근 후 발생하는 이벤트들을 관리할 수 있다. 📌네비게이션 가드 vue-router가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용한다. 🧿전역 가드 router.beforeEach를 사용하여 보호하기 이전에 전역 등록을 할 수 있다. 🧿라우트 별 가드 beforeEnter 가드를 라우트의 설정 객체에 직접 정의 할 수 있다. 나의 경우 전역 가드와 라우트 별 가드 둘 다 설정했다. 프로젝트에 JWT를 적용했는데, 토큰 유무뿐만 아니라 토큰이 있어도 유효 기간이 만료된 경우도 있어서 일괄 처리를 위해 전역 가드를 사용했고 , 사용자가 이미 로그인한 상태에서 다시 로그인 화면..

Performance.now() 메서드는 고해상도 타임스탬프를 밀리초(천 분의 1초) 단위로 반환한다. (1000 밀리초 = 1 초) Performance.timeOrigin(윈도우 컨텍스트에서 탐색이 시작된 시간 또는 Worker 및 ServiceWorker 컨텍스트에서 Worker가 실행되는 시간) 이후 경과된 시간을 나타낸다. Date.now와 달리 performance.now()로 반환되는 타임스탬프는 1밀리초 해상도로 제한되지 않는다. 대신 시간을 최대 마이크로초 정밀도로 부동 소수점 숫자로 나타낸다. 또한 Date.now()는 유닉스 에포크(1970-01-01T00:00:00Z)에 상대적이고 시스템 클럭에 의존하기 때문에 시스템 및 사용자 클럭 조정, 클럭 스큐 등의 영향을 받았을 수 있다. ..

💻서비스 환경💻 Vue3(setup 문법 사용) => ^3.3.11 vue-router => ^4.2.5 Typescript => ~5.3.0 pinia => ^2.1.7 axios => ^1.6.7 😒문제😒 axios에서 router를 불러오면 에러를 반환했다. [Vue warn]: inject() can only be used inside setup() or functional components. 😥문제 시나리오😥 JWT(JSON Web Token)을 이용하여 로그인 하고, 로그인 유지를 작업했다. 로그인 성공하면 서버에서 Access Token을 반환하고, 반환된 토큰값을 이용해 토큰 유효기간을 생성한 후 cookie에 저장하는 방식으로 작업했다. 로그인 유지를 체크하지 않으면 기본적으로 Toke..

모노리포, 멀티리포는 간단히 생각하면 리포지토리를 어떻게 나눌 것이냐에 대한 방법론 모노레포 방식 모노레포, 즉 하나의 repository 내에서 각각의 기능을(상품, 결제, 장바구니) 패키지로 구현하여 이들을 import해가는 방식으로 구현하는 것이다. 즉, 모노레포는 관심사만 분리하는 것이다. 이렇게 하면 결제가 필요한 다른 페이지에서도 결제 패키지를 import하기만 하면 바로 페이지에서 사용이 가능하다는 장점이 있다. 또한 페이지와 패키지 사이에 인터페이스를 뚫어서 패키지 다운에 대한 처리를 더욱 유연하게 대응할 수 있다. 시스템의 각 서비스를 모두 하나의 리포지토리에서 일괄 관리한다. 서비스 간의 연동이 소스 단위로 이루어진다. 최상위 폴더부터 트리 구조로 서비스 폴더가 구성된다. 멀티레포 방식..

Monolithic Frontend (Monolithic Architecture) 애플리케이션의 모든 UI 구성요소와 기능이 하나의 대규모 코드베이스로 처리되는 프론트엔드 아키텍처 프런트엔드가 백엔드와 긴밀하게 결합되어 있어 쉽게 분리할 수 없다. 전체 애플리케이션이 단일 서버에서 실행되며 프런트엔드를 업데이트하거나 변경하려면 전체 애플리케이션을 다시 배포해야 함을 의미한다. 모놀리틱은 구현 속도는 빠르지만 스파게트 코드가 되기 쉽다. 초기 스타트업에서 빠른 개발을 위해 모놀리틱을 사용하는 경우가 많다. Micro Service Architecture (MSA) 대규모 프론트엔드 애플리케이션을 더 작고 독립적이며 느슨하게 결합된 구성 요소로 분해하는 프 론 트엔드 아키텍처 각 구성 요소는 특정 기능이나 ..

Vue2가 2023년 12월 31일부로 지원이 중단됐다.(EOL) 회사에서 진행하는 프로젝트에서 Vue2를 사용하고 있었기에 Vue3로 업그레이드 시키는 작업을 시작했다. 이전에 실무 작업을 할 땐, 항상 UI 컴포넌트를 직접 작업했었는데, 이번 프로젝트에선 꼭 UI Framework 사용하기로 마음 먹었다. 우선, 기존 프로젝트에서 Vue2, Vuex, Bootstrap-vue 등 Vue2에 최적화 된 패키지들을 걷어내고 Vue3에 최적화 된 패키지들을 검토했다. Vue-router는 그대로 사용하고, 상태 관리 라이브러리는 Pinia로 변경했다. 빌드 도구는 Vite를 선택했다. UI Framework를 선택해야 하는데... UI Framework 상위 3개를 비교했다. 각 버전 1부터 현재 버전까지..

📌 useState() 훅 상태를 관리하는 훅 함수 컴포넌트에서 상태를 추가하고 관리할 수 있다. useState()는 현재 상태값과 해당 값을 갱신할 수 있는 함수를 반환한다. const [enteredDate, setEnteredDate] = useState(''); setEnteredDate를 통해 상태를 갱신하면, 우리 눈엔 즉각 적용되는 것처럼 보이지만, 실제론 상태 업데이트 스케줄링만 한 상태이다. 📌 useState() 스케줄링 React는 useState를 통해 상태를 업데이트할 때, 해당 상태 변경을 비동기로 처리하고 일괄적으로 업데이트한다. 일반적으로 useState를 호출하여 상태를 업데이트하면, React는 업데이트된 상태를 즉시 반영하지 않고, 대기열에 해당 상태 변경을 넣는다. ..

❓컴포넌트 함수가 재실행되면 useState()도 계속 재실행되는 거 아닌가? ❓그럼 매번 상태를 초기화하고 다시 렌더링 하는 건가? ❗️NO!!! React는 처음 useState가 호출될 때 해당 상태 변수를 생성하고 기본값을 사용하여 초기화를 딱 한 번 한다. (해당 변수와 연결된 값이 메모리에 저장된다.) 이때의 초기화는 컴포넌트가 처음 렌더링 될 때만 발생하며, 그 이후로는 해당 상태 변수가 이미 생성되었다면 초기화를 하지 않는다. 이후 렌더링에서는 이전에 생성된 상태 변수를 재사용하고, 값이 변경되어도 새로운 변수를 생성하는 것이 아니라 이전 변수를 업데이트하게 된다. 상태 초기화는 컴포넌트가 DOM에서 완전히 삭제되지 않는 한 (unmount 되지 않는 한) 계속 유지된다. 컴포넌트가 유지되..

🔥함수형 컴포넌트 기반으로 정리를 했습니다! React.memo()는 함수형 컴포넌트를 메모이제이션하여 컴포넌트의 props가 변경되지 않으면 리렌더링을 하지 않도록 만들 수 있었다. ❓그렇다면 컴포넌트만큼 많이 생성되는 게 함수인데, 함수를 메모이제이션하는 방법은 없을까? ❗️있다! useCallback() 훅을 사용하여 함수를 메모이제이션 할 수 있다. 컴포넌트가 실행되는 동안 함수를 메모이제이션하고, 해당 함수를 불필요하게 재생성하지 않도록 도와준다. 함수가 불필요하게 재생성되지 않기 때문에 불필요한 렌더링을 방지하고 메모리 사용을 최적화할 수 있다. 더보기 🔥메모이제이션 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 ..