Zustand에서 미들웨어의 역할Zustand에서 미들웨어(middleware)는 상태(store)를 확장하고, 상태 변경을 감지하거나 조작할 수 있도록 도와주는 기능을 한다. Redux의 미들웨어처럼 특정 로직(로깅, 비동기 처리, 상태 지속화 등)을 중앙에서 제어할 수 있다. 주요 미들웨어 기능1. logger – 상태 변경 로그 출력상태가 변경될 때마다 이전 상태와 다음 상태를 콘솔에 출력하여 디버깅에 도움을 줌.import { create } from "zustand";import { devtools, logger } from "zustand/middleware";const useStore = create( logger( (set) => ({ count: 0, increa..

3장 타입 추론-1 타입스크립트는 타입 추론을 적극적으로 수행합니다. 타입 추론은 수동으로 명시해야하는 타입 구문의 수를 엄청나게 줄여주기 때문에, 코드의 전체적인 안정성이 향상됩니다. item 19 : 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입스크립트가 타입을 추론할 수 있다면 명시적 타입 구문을 작성하지 않는 게 좋습니다. let x: number = 12; // 비생산적이며 형편없는 스타일 let x = 12; // 이렇게만 해도 충분 편집기에서 x에 마우스를 올려보면 타입이 number로 이미 추론되어 있음을 확인할 수 있습니다. 만약 타입을 확신하지 못한다면 편집기를 통해 체크하면 됩니다. 더 복잡한 객체도 가능합니다. // 거추장스러움 const person: { number: st..

There is a programming language with only four operations and one variable X: ++X and X++ increments the value of the variable X by 1. --X and X-- decrements the value of the variable X by 1. Initially, the value of X is 0. /** * @param {string[]} operations * @return {number} */ var finalValueAfterOperations = function(operations) { return operations.reduce(((acc, cur) => cur[1] === '+'? ++acc:..

function dayOfTheWeek(day: number, month: number, year: number): string { const dayOfTheWeekArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] return dayOfTheWeekArray[new Date(year, month-1, day).getDay()] }; date 객체: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

자바스크립트에는 replaceAll이 없다. 따라서 정규식을 활용한다. function defangIPaddr(address: string): string { return address.replace(/\./gi, '[.]') }; g : 발생하는 모든 패턴에 대한 전역 검색 i : 대/소문자 구분 안함 배열로 변환해 처리할 수도 있다. map 함수는 원본 객체 배열을 변경하는 것이 아니라 새로운 객체 배열을 리턴해준다. function defangIPaddr(address: string): string { let addressArray = address.split('') addressArray = addressArray.map((c) => { if (c === '.') { return '[.]' } r..

Options API => Composition API: Lifecycle Options API | Composition API beforeCreate, create | Not Needed | (setup replaces thes hooks) beforeMount, mounted | onBeforeMount, onMounted beforeUpdate, update | onBeforeUpdate, onUpdated beforeUnmount, unmounted | onBeforeUnMount, onUnmounted

Options API => Composition API Options API | Composition API data() {...} | ref(), reactive() methods: {doSmth() {...}} | function doSmth() {...} computed: {val() {...}} | const val = computed() watch: {...} | watch(dep, (val, oldV) => {}) provide: {...} / inject: [] | provide(key, val), inject(key)

Router SPA 하나의 HTML 파일에서 자바스크립트로 어떤 것이 보일지를 컨트롤한다. 페이지 이동이 일어날 때에도 URL이 변경되는 것이 아니라 화면만 바뀌게 되는데 이 경우 현재 페이지의 정보를 알아낼 수 없으므로 문제가 된다. 따라서 URL이 변경될 때 하나의 SPA에서 해당 URL이 나타내는 페이지를 라우팅시켜줘야하고, 이 때문에 라우팅이 필요하다. vue-router npm 설치 후 라우터를 설정한다. //main.js import { createApp } from 'vue'; import {createRouter, createWebHistory} from 'vue-router'; import App from './App.vue'; import Te..