1. Vue 프로젝트 생성npm create vue 이 명령어를 입력하면 Vue CLI가 실행되고 프로젝트 생성을 위한 옵션을 설정합니다. 2. 옵션 선택아래와 같은 화면이 뜨게 되는데, 여기서 프로젝트 이름과 각 옵션을 스페이스바로 누르고 엔터를 누르면 된다!> npx> create-vue┌ Vue.js - The Progressive JavaScript Framework│◇ Project name (target directory):│ itzeep-frontend│◆ Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)│ ◻ TypeScript..

1. 배열 관련 함수1-1. 배열 생성 & 복사Array(n).fill(x)길이가 n이고 모든 값이 x인 배열 생성const arr = Array(5).fill(0); // [0, 0, 0, 0, 0] [...arr]배열 얕은 복사 (spread 연산자)const copy = [...arr]; Array.from(iterable)이터러블을 배열로 변환const result = Array.from("abc"); // ['a','b','c']1-2. 배열 탐색arr.includes(x) → 배열에 x가 포함돼 있는지 확인const arr = [1, 2, 3];console.log(arr.includes(2)); // true arr.indexOf(x) → x의 인덱스 반환 (없으면 -1)const ar..

프로젝트에서 결제 로직을 구현하면서 상품 정보 페이지와 결제 페이지에서 같은 api를 중복 호출하는 문제점이 생겼다.상품 정보 페이지의 다음 로직인 결제 페이지에서는 dropdown에 표시하기 위해서였다..😭 localStorage로 관리하자니 타입 안정성이 좋지 않아서, 기존 로그인 정보를 관리하던 Context API를 사용할까 생각해보았는데판매 상품 정보는 다른 페이지에서도 필요하고 일시적인 상태이기 때문에, Zustand 라이브러리를 사용해보기로 했다. Zustand란?Zustand는 React에서 사용할 수 있는 가벼운 상태 관리 라이브러리로, Redux-Toolkit보다 간편하게 상태를 관리할 수 있다.별도의 Provider 설정이 필요하지 않고, 간단한 API로 전역 상태를 다룰 수 있다는..

이번에 새로운 프로젝트를 진행하면서,개발 환경 구축을 맡게 되었다. 앞서 진행한 프로젝트들에서도 초기 세팅을 맡았긴 했지만TypeScript와 TailwindCSS로 개발하는 것은 처음이기 때문에이번 기회에 차근차근 정리해보고자 한다.  1. Vite로 프로젝트 생성yarn create vite√ Project name: ... (프로젝트 명)√ Select a framework: » React√ Select a variant: » TypeScript + SWC 2. 프로젝트 폴더 터미널에서 installyarn 3. eslint 설정yarn add -D eslint 개발 의존성을 위해 -D를 붙여 설치한다. 이후 eslint를 typeScript에 적용하기 위해 추가적인 플러그인을 설치해준다.yarn ..