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..

Vuex global state를 관리하는 라이브러리 local state는 하나의 컴포넌트에만 영향을 미치지만 global state는 어플리케이션 전체에 영향을 미칠 수 있다. why global state를 관리하는 것은 어려울 수 있다. 하나의 컴포넌트에 너무 많은 로직과 데이터를 포함하게 된다. 데이터의 변화를 예측할 수 없다. 에러를 일으킬 수 있고 추적이 어렵다. Using store main.js에 createStore를 통해 store를 생성한 후 app에 연결한다. import { createApp } from 'vue'; import { createStore } from 'vuex'; import App from './App.vue'; con..