전체 글

이펙티브 타입스크립트 스터디 - 7주차 발표 정리

이펙티브 타입스크립트 스터디 - 7주차 발표 정리     아이템 56. 정보를 감추는 목적으로 private 사용하지 않기 const diary = new Diary()diary.secret// ~~~~~~ Property 'secret' is private and only// accessible within class 'Diary' 타입스크립트에는 public, protected, private 접근 제어자를 사용하여 접근을 제한할 수 있다. 하지만, 이러한 접근 제어자들은 타입스크립트 키워드이기 때문에 컴파일 이후에는 제거된다 자바스크립트에서는 접근 제어자가 없기때문이다. 자바스크립트 코드로 변환되면 일반적인 속성으로 취급되어 접근이 가능해진다.   onst diary = new Diar..

이펙티브 타입스크립트 스터디 - 6주차 발표 정리

이펙티브 타입스크립트 스터디 - 6주차 발표 정리     아이템 49. 콜백에서 this에 대한 타입 제공하기let, const는 렉시컬 스코프인 반면에, this는 다이나믹 스코프이다. 이는 '정의된' 방식이 아니라 '호출된' 방식에 따라 달라지는 것을 말한다.  const c = new C()const method = c.logSquaresmethod() 이 코드는 this를 찾지못해 런타임에 오류를 발생시킨다. method.call(c) 이럴때는 call을 사용해서 명시적으로 this를 바인딩 하여 문제를 해결할 수 있다.  this는 반드시 인스턴스에 바인딩 되어야하는 것이 아니며 어떤 것이든 바인딩 할 수 있다.  class ResetButton { constructor() { this...

이펙티브 타입스크립트 스터디 - 5주차 발표 정리

이펙티브 타입스크립트 스터디 - 5주차 발표 정리   주제: 5장 any 다루기 (아이템 42 ~ 44) 아이템 42. 모르는 타입의 값에는 any 대신 unknown을 사용하기 함수의 반환값과 관련된 형태function parseYAML(yaml: string): any { // ...}interface Book { name: string author: string}const book: Book = parseYAML(` name: Wuthering Heights author: Emily Brontë`) 만약, 함수의 반환 타입을 any로 설정했다면 사용하는 쪽에서 함수의 반환 타입을 따로 설정을 해줘야한다. const book = parseYAML(` name: Wuthering Height..

이펙티브 타입스크립트 스터디 - 4주차 발표 정리

이펙티브 타입스크립트 스터디 - 4주차 발표 정리    주제: 4장 (타입 설계, 아이템 28~32) 아이템 28. 유효한 상태만 표현하는 타입을 지향하기 효과적으로 타입을 설계하려면, 유효한 상태만 표현할 수 있는 타입을 만들어내는 것이 가장 중요하다. interface State { pageText: string isLoading: boolean error?: string}function renderPage(state: State) { if (state.error) { return `Error! Unable to load ${currentPage}: ${state.error}` } else if (state.isLoading) { return `Loading ${currentPag..

이펙티브 타입스크립트 스터디 - 3주차 발표 정리

이펙티브 타입스크립트 스터디 - 3주차 발표 정리     주제: 3장 (타입 추론, 아이템 24~27)  아이템 24. 일관성 있는 별칭 사용하기  const target = { name: "target", location: [1, 1] };const loc = target.location;loc[0] = 2;console.log(target.location); // [2, 1] - 별칭의 값을 변경하면 원본 값의 속성도 변경 된다. 이 별칭을 남발하면 제어의 흐름을 추적하기가 힘들어진다.  interface Coordinate { x: number; y: number;}interface BoundingBox { x: [number, number]; y: [number, number];}inter..

이펙티브 타입스크립트 스터디 - 1주차 발표 정리

이펙티브 타입스크립트 스터디 - 1주차 발표 정리     주제 : 1장 (타입스크립트 알아보기)  1. 타입스크립트 알아보기  아이템 1. 타입스크립트와 자바스크립트의 관계 이해하기 "타입스크립트는 타입이 정의된 자바스크립트의 상위집합이다" 라는 말을 들어봤을 것이다. 이 말을 좀 더 자세히 풀어보면 자바스크립트는 타입스크립트라는 명제는 맞지만,  타입스크립트는 자바스크립트라는 명제는 틀리다.  타입스크립트는 타입을 명시하는 추가적인 문법을 가지기 때문이다.  const word = 'hello'console.log(word.toUppercase()) // c가 대문자 C여야 한다. js 내의 파일에 위 코드를 작성하면 코드 작성시에 에러를 뱉지 않는다   하지만, 파일 확장자를 ts로 바꾸게 되면 이..

모던 리액트 deep dive 스터디 - 8주차 발표 정리

모던 리액트 deep dive 스터디 - 8주차 발표 정리     주제: 15장. 마치며   리액트 프로젝트를 시작할 때 고려해야 할 사항  1. 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자. 리액트 17 버전은 새로운 기능 출시 및 호환성이 깨지는 변경 사항을 최소한으로 맞춘 업데이트라 가능하면 업데이트 해두는 것이 좋다. 그렇다고, 클래스형으로 작성한 컴포넌트를 함수형으로까지 바꿀 필요는 없음. 클래스형 컴포넌트는 사라질 계획이 없기 때문에 둘 다 능숙하게 다룰줄 알아야한다.   2. 인터넷 익스플로러 11지원을 목표로 했다면 각별히 더 주의를 기하기. 인터넷 익스플로러에 대해 지원을 공식적으로 하지 않기때문에 버전 업데이트시 주의하기  3. 서버 사이드 ..

모던 리액트 deep dive 스터디 - 7주차 발표 정리

모던 리액트 deep dive 스터디 - 7주차 발표 정리 주제: 13장. 웹페이지의 성능을 측정하는 다양한 방법 📌 create-react-app crate-react-app을 통해 프로젝트를 생성하면, reportWebVitals라는 함수를 볼 수 있을 것이다. - 누적 레이아웃 이동 (CLS) - 최초 입력 지연 (FID) - 최초 콘텐츠풀 페인트(FCP) - 최대 콘텐츠 페인팅 (LCP) - 첫 바이트까지의 시간 (TTFB) 이 함수는 위의 것들을 측정하는 용도로 사용된다. 이러한 지표는 web-vitals 라이브러리를 통해 웹페이지 성능을 측정하는데, 이는 PerformanceObserver라는 API를 사용하기 때문이다. ❓PerformanceObserver 브라우저에서 웹페이지의 성능을 측정..