Tech/Javascript & Typescript 5

[Typescript] 이펙티브타입스크립트 (#41 ~ #47)

아이템 41 any의 진화를 이해하기요약일반적인 타입들은 정제되기만 하는 반면 (ex. 타입 좁히기), 암시적 any와 any[] 타입은 진화할 수 있습니다. 이러한 동작이 발생하는 코드를 인지하고 이해할 수 있어야합니다.any를 진화시키는 방식보다 명시적 타입 구문을 사용하는 것이 안전한 타입을 유지하는 방법 입니다. 1. 일반적인 타입들은 정제되기만 하는 반면, 암시적 any와 any[] 타입은 진화할 수 있습니다.❗️타입의 진화는 값을 할당하거나 배열의 요소를 넣은 ‘후’에만 일어나기 때문에, 편집기에서는 할당 다음 줄을 봐야 진화된 타입이 잡힌다.//1. 배열의 any 타입 진화(evolve)const result = [];  //any[]result.push('a');  result   //st..

[Typescript] 이펙티브타입스크립트 (#34 ~ #40)

아이템 34 ~ 40 정리본 목차아이템 34아이템 35아이템 36아이템 37아이템 38아이템 39아이템 40 아이템 34 부정확한 타입보다는 미완성 타입을 사용하기타입이 구체적일수록 버그를 더 많이 잡고 타입스크립트가 제공하는 도구를 활용할 수 있게 된다.하지만 부정확한 타입 설계는 없는 것보다 못하다그리고 타입정보를 구체적으로 만들 수록 오류 메시지와 자동 완성 기능에 주의를 기울여야 한다. 예시 1. 타입을 구체적으로 개선한 코드interface Point { type: 'Point'; coordinates: number[];}interface Linestring { type: 'LineString'; coordinates: number[][];}interface Polygon ..

[Typescript] 이펙티브타입스크립트 (#1 ~ #5)

아이템 1 ~ 5 정리본아이템 1: 타입스크립트와 자바스크립트의 관계 이해하기모든 자바스크립트는 타입스크립트지만, 모든 타입스크립트는 자바스크립트가 아니다.let city = 'new york city';console.log (city.toUppercase());// 'toUppercase* 속성이 'string* 형식에 없습니다.// 'toUpperCase1 을(를) 사용하시겠습니까?city 변수가 문자열이라는 것을 알려주지 않아도 타입스크립트는 초깃값으로부터 타입을 추론한다.타입 추론은 ts에서 중요한 부분 !! 타입 시스템의 목표런타임에 오류를 발생시킬 코드를 미리 찾아내는 것하지만, 타입 체커가 모든 오류를 찾아내지는 않음const states = [ {name: 'Alabama'f capi..

next 14 프로젝트 설치 및 App 라우팅

next.js 프로젝트를 설치하고, App 라우팅에 대해 알아보겠습니다.새로 프로젝트를 만들면서, 어떤 구조로 짤지 고민을 많이 했는데,,,,오늘은 app 라우팅에 배우고, component나 style에 관한 것은 다음에 포스팅 하겠습니다 😀 Next.js 14 프로젝트 설치npx create-next-app 프로젝트명 App 라우터와 Page 라우터의 차이점Next.js에는 앱 라우터와 페이지 라우터라는 두 가지 라우터가 있습니다. App 라우터는 서버 구성 요소 및 스트리밍 같은 React의 최신 기능을 사용할 수 있는 최신 라우터입니다.Pages 라우터는 서버에서 렌더링된 React 애플리케이션을 구축할 수 있게 해줍니다. App 라우팅Next.js가 새롭게 도입한 App router 방식은..

[Javascript] forEach, map, filter, reduce 메서드 작동원리

4가지 모두 공통적으로 고차함수이다. *고차 함수: 자신의 매개변수에 함수를 전달 받는 것 1. forEachfunction forEach(predicate, thisArg) { for(let i=0; i 2. map원본 배열을 하나하나 탐색하면서 새로운 배열을 생성한다.function map(predicate, thisArg) { // 새로운 배열 생성 let list=[]; for(let i=0; i새로운 배열을 넘겨받을 수 있고, 중요한 것은 새로운 배열과 원본 배열의 길이는 같다. let answer = a.map(function(v, i){ if (v%2 == 0) return v; // [10, undefined, 12, undefined, 14, undefined]};만약 위와 같이 1..