분류 전체보기56 Day9_Effective Typescript 스터디 2022년 12월 12일 글입니다. Item 27. 함수형 기법과 라이브러리로 타입 흐름 유지하기 요약 : 타입스크립트의 타입정보가 그대로 유지되는 타입흐름(flow)을 계속 전달되로록 하는 라이브러리들과 함수형 기법을 적극 사용하자. > 로대시(Lodash)나 람다(Ramda)같은 함수형 프로그래밍 개념이 자바 스크립트에도 도입되고 있다. lodash 관련자료 기본적인 lodash의 사용방법을 적어놓겠다. 지금 익히기엔 너무 과한 것 같고, 나중에 개발할때 사용해야 겠다. 함수 내부적으로는 문자열 리터럴 타입과 인덱스 타입의 조합으로만 이루어져 있기 때문에, 타입이 자연스럽게 도출된다고 한다. 내장된 함수형 기법들과 로대시 같은 라이브러리에 타입 정보가 잘 유지되는데, 이는 함수 호출 시, 전달된 매개.. 2023. 6. 16. Day8_Effective Typescript 스터디 (item 25~ 26) 2022년 12월 9일 글입니다. 요약 1 . 콜백보다 프로미스를 사용하는 게 코드 작성과 타입 추론 면에서 유리하다. 요약 2. 이왕이면 프로미스 생성보단 async, await을 사용하는게 좋고 오류를 제거 할 수 있다. 요약 3. 어떤 함수가 프로미스를 반환한다면 async 로 선언하는 것이 좋다. Item 25. 비동기 함수에는 콜백대신 async 함수 사용하기 콜백보다 프로미스나 async/await을 사용해야 하는 이유 1. 콜백보다 프로미스가 코드짜기 더 쉽다. 2. 콜백보다 프로미스가 타입추론하기 더 쉽다. 1은 그렇다 치고, 2는 왜일까 ? function timeout(millis: number): Promise { return new Promise((resolve, reject) =>.. 2023. 6. 16. Day7_Typescript Effective 스터디 (item 22~24) 2022년 12월 9일 글입니다. Item 22. 타입 좁히기 ✔ 요약 1. 타입 좁히기를 이해하자 ✔ 요약 2. 분기문, 태그된/구별된 유니온, 사용자 정의 타입가드등 스킬을 익히자 가장 기본적인 null 체크 const el = document.getElementById('foo'); // HTMLElement | null if(el){ //HTMLElement el el.innerHTML = "party".blink(); }else{ //null el alert("no element #foo") } 위 코드는 HTMLElement | null 인 el 의 타입을 if 분기문을 통해서 HTMLElement로 좁힌다. instanceof를 이용한 타입좁히기(narrowing) function conta.. 2023. 6. 16. Day6_Effective Typescript 스터디 2022년 12월 6일 글입니다. CHAPTER3. 타입추론 ts의 핵심기능인 타입추론에 대해 배운다. 타입추론은 수동으로 작성해야하는 타입의 코드를 엄청나게 줄여준다. 따라서 적절히 타입추론을 사용해야 타입스크립트를 잘 사용한다고 할 수 있으며 코드 가독성이 높아진다. Item 19. 추론 가능한 타입을 사용해 장황한 코드 방지하기. 요약 1 : 타입스크립트가 타입을 추론할 수 있다면 타입구문은 작성 하지 않는게 좋다. 요약 2 : 이상적인 타입스크립트 = 함수/메서드의 시그니처에는 타입구문이 있지만, 함수내의 지역변수에는 타입구문이 없다. 요약 3: 추론될 수 있는 경우라도 객체리터럴과 함수 반환에는 타입 명시를 해주자. 이는 내부 구현오류가 사용자 콛에서 나타나는것을 방지해 준다. 1. 타입스크립트.. 2023. 6. 16. day5_EffectiveTypescript 스터디 2022년 11월 30일 글입니다. Item18. 매핑된 타입을 사용하여 값을 동기화하기 요약 1: 매핑된 타입을 사용해서 관련된 값과 타입을 동기화 하도록 한다. 값을 그대로 때려박는것 보다, 매핑된 타입을 사용하면 함수가 변경되었을 때 참조하고 있던 다른코드에서 알아서 오류를 발생시키기 때문에 유지보수에 용이하다. 프로젝트를 유지보수 할 때 우리는 함수를 변경해야 할 때가 많다. 이럴 때 변경된 값을 바로바로 찾을 수 있도록 매핑된 타입을 이용하여 값을 동기화 하자. 그러면 함수가 변경되었을 경우 타입체커가 알아서 오류를 발생시켜줘서 유지보수에 용이하다. 예를 들어 산점도를 그리는 인터페이스가 있고 필요할 때만 데이터를 그리기 위해 핸드러를 정의했다고 하자. interface ScatterProps .. 2023. 6. 16. Day4_EffectiveTypescript 스터디 2022년 11월 29일 글입니다. Item16. number 인덱스 시그니처 보다는 Array, 튜플, ArrayLike 를 사용하기 요약 1. 배열은 객체이므로 키는 숫자가 아니라 문자열이다. 인덱스 시그니처로 사용된 number 타입은 버그를 잡기위한 순수 타입스크립트 코드다. 요약 2: 인덱스 시그니처에 number을 쓰기보다는 Array나 튜플, ArrayLike 타입을 이용하는게 좋다. 자바스크립트는 혼란스러운 언어다. 그 예로 자바스크립트에서는 객체의 키로 문자열만 사용할 수 있다. 만약 숫자를 사용하면 자바스크립트 런타임이 문자열로 변환한다. 하지만 배열은 객체인데 숫자인덱스를 사용하는게 당연하다. 하지만 object.keys(x)를 하면 문자열로 출력된다. => 타입스크립트는 이러한 혼란.. 2023. 6. 16. day3_Effective TypeScript 스터디 2022년 11월 29일 글입니다. Item11. 잉여 속성 체크의 한계 인지하기 잉여속성체크 : 변수에 객체 리터럴을 할당할때, 해당 타입의 속성이 있는지, 있어선 안되는 ' 그외의 속성이 없는지' 체크하는 행위 구조적 타입 시스템에서 발생할 수 있는 중요한 종류의 오류를 잡아줌 그러나 잉여 속성 체크는 조건에 따라 동작하지 않음. 오로지 객체 리터럴을 할당할 때 만 발동 * 잉여 속성 체크와 할당 가능 검사(구조적 타이핑)은 별도의 과정임 구조적 타입체커로만 사용했을 땐, 구조적 타이핑에 부합한다는 이유로 이상한 변수를 할당할 수도 있다. 그런 걸 막아주는게 잉여속성 체크, 타입에 정확하게 들어맞는지 검사해준다. 잉여 속성 체크의 한계 객체 리터럴이 아닌 변수 할당 같은 경우엔 적용 안됨 as T 같.. 2023. 6. 16. day2_effectfive-typescript스터디 2022년 11월 26일글입니다. 2장 타입스크립트의 타입시스템 item6. 편집기를 사용하여 타입시스템 탐색하기 요약 : 타입스크립트 서버가 제공하는 코드 자동완성, 명세검사, 검색, 리팩터링 등의 언어서비스를 누려라 타입스크립트 서버덕분에 편집기에 마우스를 올려 어떤 타입인지 알 수 있다. ctrl+클릭 같은 Go To Definition 기능 을 이용해서 타입이 어떻게 정의 되어있는지 알 수 있다. 타입스크립트의 자동완성기능을 누릴 수 있다. item7. 타입이 값들의 집합이라고 생각하기 요약 1 : 타입을 할당 가능한 값의 집합 이라고 생각해라 요약 2 : 한 객체의 추가적인 속성이 타입 선업에 언급되지 않더라도, 그 타입에 속할 수 있다.(구조적 타이핑) 요약 3 : 타입 연산은 집합의 범위에 .. 2023. 6. 16. day1_Effective Typescript 스터디 2022년 11월 24일 글입니다. Item 1. 타입스크립트와 자바스크립트의 관계 요약 1: 자바스크립트 코드는 타입스크립트 코드의 부분집합(subset)이다. == 타입스크립트는 자바스크립트의 상위집합(superset)이다. 타입스크립트로 만든 코드는 자바스크립트 런타임 동작을 모델링하는 것이 타입스크립트의 기본 원칙이다. 그래서 타입스크립트로 작성한 코드는 자바스크립트 프로그램에서도 문제없이 돌아간다. 그러나 반대로 자바스크립트 문법을 따른 프로그램은 타입스크립트에서 돌아가지 않을 수 있다. 자바스크립트의 확장자는 .js(.jsx) 타입스크립트의 확장자는 .ts(.tsx)이다. 요약 2: 타입스크립트는 자바스크립트 런타임 오류를 발생시키는 코드를 찾는다. 하지만 타입체커를 통과해도 런타임 오류를 발.. 2023. 6. 16. React 중첩라우팅 https://ostarblog.tistory.com/9 React Router v6 정리 React Router v6 React Router는 현재 리액트의 라우팅 기능을 지원하는 가장 인기있는 라이브러리입니다. 이 React Router가 지난 2021년 11월에 정식 6.0 버전이 릴리즈되었습니다. 5.0 버전에서 큰 변경사항 ostarblog.tistory.com React-dom-router 의 대한 정보를 찾다가 v5랑 v6랑 섞인 정보가 많아 혼란스러웠다. 내가 원한건 페이지에서 -> 링크를 눌러서 하위 페이지로 이동할 경우에 따른 페이지를 보여주는걸 구현하고 싶었다. 이 페이지에서 nav 바를 누름에 따라 오른쪽 공간에 다른 정보가 보이게 하고 싶었는데. 이 블로그의 글을 읽고 중첩라우팅을.. 2022. 7. 10. 이전 1 2 3 4 5 6 다음
