nika-blog

개발하다보면, 옵션널 체이닝을 사용할 일이 종종 생깁니다. 어느날, 함께 일하는 시니어 개발자분이 아래와 같은 질문을 했습니다.아래 코드 line 10 에서 왜 lint 에러가 안 생기나요? type Price = { localizedPrice: number;};type Subscription = { data: Price;};const targetPlan: Subscription | null = { data: { localizedPrice: 100 } };const price = targetPlan?.data.localizedPrice; // 100 저는 자연스럽게 필수값 뒤에 옵션널 체인닝을 사용하지 않고 있었는데, 이 질문을 통해 누군가에게는 이 부분이 물음표일 수 있겠다고 생각했습니다. 대표적으..

타입스크립트는 정적이면서도 동적인 특성을 동시에 가지기 때문에, 프로그램의 일부분에만 타입 시스템을 적용할 수 있습니다. 38. any 타입은 가능한 한 좁은 범위에서만 사용하기 인수 안에서 as any 를 사용하는 것이 인수를 const 변수로 선언할 때 any로 타입 선언하는 것도 좋습니다. 함수의 매개변수에서만 사용된 표현식은 다른 코드에는 영향을 미치지 않기 때문입니다. ex. function f1() { const x : any = expressionReturnigFoo(); processBar(x); } function f2() { const x = expressionReturningFoo(); processBar(x as any); } * 타입스크립트가 함수의 반환 타입을 추론할 수 있는 경..

28. 유효한 상태만 표현하는 타입을 지향하기 네트워크 요청 과정 각각의 상태를 명시적으로 모델링하는 태그된 유니온을 사용하는 것이 좋다. -> 유효한 상태와 무효한 상태를 둘 다 표한하는 타입을 사용한 적이 있는 반성.. ex. interface RequestPending { state: 'pending'; } interface RequestError { state: 'error'; error: string; } interface RequestPending { state: 'ok'; pageText: string; } type RequestState = RequestPending | RequestError | RequestSuccess; interface State { currentPage: strin..

19. 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입 추론의 장점 리팩토링에 용이하다. 타입 추론을 잘 이용하는 법 새로운 변수 선언대신 비구조화 할당문 사용 -> 모든 지역 변수의 타입 추론 타입스크립트가 스스로 타입을 판단하기 어려운 경우 매개변수 타입스크립트에서 변수의 타입은 처음 등장할 때 결정. 최종 사용처까지 고려되지 않기 때문이다. 생략하는 경우 기본값이 있는 경우 함수의 반환 타입 추론이 가능할지라도 구현상의 오류가 함수를 호출한 곳까지 영향을 미치지 않도록 하기 위해서 구현상의 오류가 사용자 코드의 오류로 표시되지 않음 객체 리터널 정의 추론 가능하지만, 타입 구문을 명시하면 실제로 실수가 발생한 부분에 오류 표시 Linter eslint 규칙 중 no-inferrable-type..

6. 편집기를 사용하여 타입 시스템 탐색하기 기능 코드 자동 완성 명세 검사 검색 리팩토링 + js 에서 typeof null 은 “object” 이므로 아래 코드는 오류가 발생한다. function getElement(elOrId: string | HTMLElement | null): HTMLElement { if (typeof elOrId === 'object') { return elOrId; // ~~~ 'HTMLElement | null' 형식은 HTMLElement' 형식에 할당할 수 없습니다. } else if (elOrId === null) { return document.body; } else { const el = document.getElementById(elOrId); return e..

13. 타입과 인터페이스의 차이점 알기 유니온 | 유니온 타입은 있지만, 유니온 인터페이스는 없다. 튜플은 type 으로 인터페이스로 튜플과 비슷하게 구현하면, 튜플에서 사용가능한 concat 같은 메서드를 사용 불가하다. 보강(augment)가능 인터페이스는 선언 병합이 가능하다. 단, 프로젝트 내부적으로 사용되는 타입에 선언 병합이 발생하는 것은 잘못된 설계이다. ex. interface IState { name: string; capital: string; } interface IState { population: number; } const wyoming: IState = { name: 'Wyoming', capital: 'Cheyenne', population: 500000 } 타입을 사용하면 ..

타입스크립트와 자바스크립트의 관계 이해하기 타입스크립트 > 자바스크립트 but, 타입체커를 통과한 자바스크립트 극히 일부분 타입스크립트 설정 이해하기 tsconfig.json 사용 권장 >> 커멘트 라인 noImplicitAny 변수들이 미리 정의된 타입을 써야하는지 strictNullChecks number type 에 null 또는 undefined 사용 불가 | 사용하거나 null 이나 undefiend 체크해주는 분기처리 해주거나 noEmitOnError 오류가 있을 때 컴파일 하지 않음 ex. if(el) { el.textContent = 'Ready'; // null 제외 } el!.textContent = 'Ready; // null 제외 코드 생성과 타입이 관계없음을 이해하기 ts → js..

디자인 시스템, 형태를 넘어서 일백개 패키지 모노레포 - 우아하게 운영하기 UX 개발자, 대형 서비스 빠르게 프로토타입하기 내 import 문이 그렇게 이상했나요? 회사에서 지원을 받아서 Frontend Conference를 다녀왔다. 새로운 지식과, 열정을 느낄 수 있는 시간이었다. 디자인 시스템, 형태를 넘어서 이소영flex "기능이 형태에 결합되지 않는 디자인 시스템은 어떻게 만들어야 할까?" flex의 세 번째 디자인 시스템 "linear"이야기를 통해 이 물음에 답을 찾아가는 과정을 공유합니다." 주의할 점 디자인 시스템은 병목 또는 제약으로 작용하면 안된다. 관리 주체가 명확해야 한다. 설계 아이디어 하위 아이템을 커스텀 가능한 아이템과 기본 아이템 중 택 1 을 선택하여 개발하도록 설계하는 ..

이번 포스팅에서는 리액트 라이프 사이클에 대해서 공부하고, 함수형 프로그래밍과 클래스형 프로그래밍에서 각각 어떻게 사용하는지 익혀보겠습니다. 리액트 라이프사이클 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프사이클의 분류 생성될 때 = 마운트 업데이트할 때 = 업데이트 1. props 가 바뀔 때 2. state 가 바뀔 때 3. 부모 컴포넌트가 리랜더링 될 때 4. this.forceUpdate로 강제로 랜더링을 트리거 할 때 제거할 때 = 언마운트 함수형 라이프 사이클 구현 useEffect ..

개념 React는 UI를 구축하기 위한 JavaScript 프론트엔드 라이브러리. 주로 SPA 만들 때 사용 장점 virtual DOM을 사용해서 어플리케이션의 성능을 향상 시킵니다. 서버, 클라이언트 사이드 렌더링 지원이 가능합니다. 컴포넌트의 가독성이 높고 간단하여 유지보수가 쉽습니다. 다른 프레임워크와 혼용도 가능합니다. 컴포넌트란? 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발하는 방법입니다. 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다. **컴포넌트 이름은 항상 대문자로 시작하도록 한다. (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이..