Book Review11 반응형 웹제작을 위한 핵심기술 -1 반응형 웹이란? pc,tv,내비게이션,스마트 기기등 기기마다 또는 환경마다 최적화된 웹사이트를 제공하는것을 말한다. 반응형 웹을 만들때는 모든요소를 %로 계산한다고 한다. 화면에 보이는 영역인 뷰포트, 화면의 크기와 환경을 감지하여 구조를 바꿀 미디어쿼리 ViewPort 스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 스마트기기에선 화면의 크기를 정확하게 감지하지 못한다. 그래서 미디어쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록, 뷰 포트라는 기술을 사용한다. 디바이스 기기에 따라 가로세로가 설정되도록 메타태그를 넣어준다. 미디어 쿼리가 화면의 사이즈를 감지해 스타일을 적용시킨다. 각각 320px, 768px, 960px 이상일때 배경색을 변경한다. 가변그리드 공식 (가변크.. 2023. 7. 2. Day10_Effective Typescript 29~31 2022년 12월 28일 글입니다. ITEM 29. 사용할 때는 너그럽게, 생성할 때는 엄격하게 작성하라 요약 : 매개변수는 너그럽게 받고, 반환값은 엄격하게 반환하라 interface CameraOptions { center?: LngLat; zoom?: number; bearing?: number; pitch?: number; } type LngLat = { lng: number; lat: number; } | { lon: number; lat: number; } | [number, number]; type LngLatBounds = {northeast: LngLat, southwest: LngLat} | [LngLat, LngLat] | [number, number, number, number]; .. 2023. 6. 16. 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. 이전 1 2 다음
