웹
-
[이펙티브 타입스크립트] 1장 타입 스크립트 알아보기 심화 (Feat. ZOD)웹/TypeScript 2023. 6. 7. 15:55
타입스크립트는 런타임에서의 에러를 잡아줄 수 없음 타입스크립트는 런타임에서의 에러를 잡아줄 수 없음 EXAMPLE const test = (value: string) => { console.log(value); }; // test 함수의 매개변수는 string인데 number를 넣어서 타입 에러이다 test(1); test 함수의 매개변수는 string인데 number를 넣어서 타입 에러이다. 하지만, 위와 같은 코드가 자바스크립트로 변환되면 const test = (value) => { console.log(value); }; test(1); 이렇게 되기 때문에 코드는 정상적으로 동작한다. 그래서 타입 체커는 에러를 화면에 띄워주지만 트랜스파일된 자바스크립트 파일은 아무런 문제가 없기 때문에 정상적으로..
-
[이펙티브 타입스크립트] 2장. 타입스크립트의 타입 시스템 (2)웹/TypeScript 2023. 6. 1. 09:48
12. 함수 표현식에 타입 적용하기 타입 스크립트에서는 함수 표현식을 사용하는 것이 좋다. 반복되는 함수 시그니처를 하나의 함수 타입으로 통합할 수 있다. ex) type ArithmeticFunction = (num1: number, num2: number) => number; const add: ArithmeticFunction = (num1, num2) => { return num1 + num2; }; const subtract: ArithmeticFunction = (num1, num2) => { return num1 - num2; }; const multiply: ArithmeticFunction = (num1, num2) => { return num1 * num2; }; const divide..
-
[이펙티브 타입스크립트] 2장. 타입스크립트의 타입 시스템웹/TypeScript 2023. 5. 30. 10:02
6. 편집기를 사용하여 타입 시스템 탐색하기 TS 설치시 실행 되는 것 1. 타입 스크립트 컴파일러 (tsc) 2. 타입 스크립트 서버 (tsserver) 편집기를 통해 타입 추론을 확인 할 수 있는데, 아래와 같이 적혀 있다. item 19 (108p)를 보면 타입 추론이 된다면 명시적 타입 구문은 필요하지 않다. 오히려 모든 변수에 타입을 지정하는 것은 비생산적이고 방해가 된다. 조건문의 분기, 객체 개별 속성을 확인 할 것 ex ) bannerType은 WebView 와 Screen 둘 중 하나이지만, if 문 안의 bannerType은 WebView이다 . ex) 탐색기에서 오류 1 // 오류를 일으키는 타입스크립트 코드 예제 type User = { name: string; age: number..
-
[회사] 5.11 Tech talk웹/tech talk 2023. 5. 12. 17:01
1. 닮고 싶은 사람이 있나요? 컴퓨터가 이해하는 코드는 바보도 작성할 수 있다. 사람이 이해하도록 작성하는 프로그래머가 진정한 실력자다. [Refactoring - Martin Fowler] 2. 디미터 법칙이란? 디미터 법칙(Law of Demeter)은 데메테르 법칙이라고도 불리며 줄여서 LoD라고도 불립니다. 이 법칙은 "최소한의 지식 원칙(The Principle of Least Knowledge)으로 알려져 있으며, 모듈은 자신이 조작하는 객체의 속사정을 몰라야 한다는 것을 의미합니다. 실제로 Demeter라는 프로젝트를 진행하던 개발자들은 어떤 객체가 다른 객체에 대해 지나치게 많은 정보를 알고 있다 보니, 서ㄱ 즉, 간단하게 말하면 여러개의 .(dot)을 최대한 사용하지 말라는 법칙으로 말..
-
[이펙티브 타입스크립트] 1장. 타입 스크립트 알아보기웹/TypeScript 2023. 5. 12. 15:56
Typescrit 타입스크립트란? 성숙하고 효율적으로 변모한 자바스크립트의 완성도를 채워줄 마지막 퍼즐 아이템 1 . 타입 스크립트와 자바스크립트의 관계 이해하기 타입 스크립트는 자바스크립트의 상위집합(superset)이다 타입 체커를 통과하면서도 런타임 오류를 발생시키는 코드는 충분히 존재할 수 있다. 즉, 타입 검사는 런타임에서 발생하는 동적인 문제들을 모두 해결해주지는 않습니다. 예시) const name = ['aaaa', 'bbbb']; // 런타임에러 console.log(name[1].toUppercase()); // 메소드 오타 console.log(name[2].toUpperCase()); // name[2] undefined // 정상작동 console.log(name[1].toUppe..
-
[점핏 프론트 강연] JUMPIT TO FRONTEND 강연 후기 (2)웹/tech talk 2023. 5. 1. 11:04
section 1. 센스있게 일하는 FE 개발자 되기 협업?! 이렇게 한번 해봐 - FE 개발자가 타 직군과 대화를 잘 해야하는 이유 Speaker: 유동균(프론트엔드 성능 최적화 가이드) 기획자, 디자이너, 개발자를 이어주는 번역기가 되자! 프론트엔드에서 소통의 중요성 프론트엔드의 소통 = 중간 다리 프론트엔드가 소통을 잘하면 팀의 퍼포먼스를 증가할 수 있다. How to communication 1. 맥락 이 사람이 무엇을 모르는가? - 현재 상황과 상대방이 모를 수 있는 것들을 설명하는 것 2. 의도 무엇을 원하는가 ? - 원하는 바를 구체적으로 말하고 이유를 덧붙여라 목적지향적 태도 / 광범위한 이해도 좀더 깊이 들어가서 맥락과 의도를 잘 파악하고 챙기려면 어떻게 해야할까? 1. 목적지향적인 태도..
-
[점핏 프론트 강연] JUMPIT TO FRONTEND 강연 후기 (1)웹/tech talk 2023. 5. 1. 10:45
회사에서 점핏 프론트엔드 강의가 있다고 해서 신청했다. 책도 받고 물, 칫솔 세트, 노트 등 여러 선물도 받았다 강연 신청자가 2000명이 넘었다고 한다.. 무려 10분의 1??? section 1. 센스있게 일하는 FE 개발자 되기 FE 개발자의 소프트 스킬과 하드 스킬 Speaker: 김태곤 능력 = Hard Skills + Soft Skills. 프로그래밍에 필요한 기술을 하드스킬, 개발 외적으로 필요한 기술을 소프트스킬 기술을 사용해서 문제를 해결하지만, 완전한 해결은 없다. 리팩토링을 해야한다. 테스트가 용이할 것 테스트 가능 영역을 늘려라. 테스트가 어렵다면 기능을 작게 쪼개서 테스트를 할 것 가독성 변수, 함수명 길어도 괜찮다. 명확하게 쓰자. 회사, 팀원간의 협의가 있다면 한국어도 좋다. ..
-
[TypeScript] useStrict을 사용해야 하나요? + readonly, 추론 가능한 타입, as const 단언문웹/TypeScript 2023. 3. 22. 12:34
TypeScript useStrict을 사용해야 하나요? 결론을 먼저 말씀드리면 "아니요" 입니다. 그 이유는 Ts의 안전성 검사가 usestrict 보다 훨씬 엄격한 체크를 하기 때문입니다. useStrict "엄격한 사용" 또는 "엄격한 모드"는 ECMAScript 5(ES5)의 JavaScript에 도입된 기능으로 개발자가 더 엄격하고 안전한 언어 버전을 선택할 수 있습니다. JavaScript 파일 또는 함수의 맨 위에 "use strict"가 추가되면 이전 버전의 JavaScript에서 허용되었던 특정 작업을 제한하는 일련의 규칙이 활성화됩니다. 이러한 제한 사항은 다음과 같습니다. 철자 오류를 포착하고 글로벌 네임스페이스 오염을 방지하는 데 도움이 되는 선언되지 않은 변수의 사용을 허용하지 않..