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 을 선택하여 개발하도록 설계하는 ..

useEffect : side effect 처리할 때 useEffect는 모든 컴포넌트가 랜더링 후 상태변화, 구독, 타이머, 로깅 및 기타 side effect를 처리하는 데 도움이 됩니다. (라이프 사이클 매소드와 비슷하게 사용) useCallback : 함수가 재생성 되는 것 방지 deps 배열이 변경되지 않았다면 동일 주소값을 가진 함수를 재사용 가능. 메모이제이션된 콜백을 반환하므로 부모 컴포넌트가 자식 컴포넌트의 렌더링을 방지하기 위해 자식 컴포넌트에 콜백을 전달할 때 매우 유용합니다. useMemo: 함수의 연산량이 많을 때 이전 결과값을 재사용 deps 배열 변경시에만 다시 계산. 메모이제이션된 콜백이 아닌 전달받은 함수의 메모이제션된 값을 반환합니다. 비싼 계산을 해야하는 잘 바뀌지 않는..

이 포스팅은 프론트엔드 면접 파트 중 React 대비를 위한 것이며, 아래 내용에 대해 다루고 있습니다. - react 개념, 장점, 컴포넌트 - 리액트의 내부 작동 원리 - 리액트에 있는 라이프사이클 - 리액터 라우터같은 Client Side Routing이란? - setState를 사용하는 이유 - props Drilling - react Hooks 장점 - Class Component와 Function Component의 차이점 - virtual dom 개념과 장점 - JSX - 웹 성능 향상을 위해 최적화를 해 본 경험 - react에서 상태 변화가 생겼을 때, 변화를 알아채는 방법? - 여러가지 상태 관리 라이브러리 차이점 - useEffect 메소드로 componentWillUnmount 동작..