빵 입니다.

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() 훅을 사용하여 함수를 메모이제이션 할 수 있다. 컴포넌트가 실행되는 동안 함수를 메모이제이션하고, 해당 함수를 불필요하게 재생성하지 않도록 도와준다. 함수가 불필요하게 재생성되지 않기 때문에 불필요한 렌더링을 방지하고 메모리 사용을 최적화할 수 있다. 더보기 🔥메모이제이션 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 ..

🔥함수형 컴포넌트 기반으로 정리를 했습니다! ❓불필요한 렌더링 발생 부모 컴포넌트의 상태나 프롭스가 변경되면 해당 부모 컴포넌트에 속한 자식 컴포넌트도 재평가 된다. > 자식 컴포넌트에게 내려주는 props의 값이 변경되지 않아도, 부모 컴포넌트의 상태가 변경되었기 때문에 자식 컴포넌트도 리렌더링 된다. >> 불필요한 리렌더링은 컴포넌트 계층 구조가 복잡하고 데이터가 자주 변경될 때 발생할 수 있다. 불필요한 재평가를 방지해야 한다! ❗️React.memo()를 사용하면 된다! 컴포넌트 export 할 때, React.memo()를 사용해서 컴포넌트를 감싸서 내보낸다. 함수형 컴포넌트를 메모이제이션하여 이전에 전달된 props가 변경되지 않으면, 이전 결과를 재사용하기 때문이다. 더보기 🔥메모이제이션 컴..

🔥함수형 컴포넌트 기반으로 정리를 했습니다! 하위 컴포넌트 안에 있는 요소에 직접 접근하고 싶은데 컴포넌트에 ref 속성을 추가해 조작하려 하면 null 값을 참조하려 한다는 오류가 뜬다. => 함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에서 ref 어트리뷰트를 사용할 수 없다. 그럼 ref를 통해 함수 컴포넌트를 직접 제어하려면 어떻게 해야하지? ❗️forwardRef()를 사용하면 된다. forwardRef()는 부모 컴포넌트에서 전달받은 ref를 자식 컴포넌트로 전달하는 역할을 한다. (부모 컴포넌트의 ref와 실제 사용할 자식 컴포넌트의 ref 연결) 자식 컴포넌트는 전달받은 ref를 HTML 요소의 속성으로 넘겨줌으로써 함수 컴포넌트 역시 ref를 통한 제어가 가능해진다. 🌀ref Re..