nika-blog

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..

거대한 서비스 쪼개서 마이크로 프런트엔드 만들기 대상- 프런트엔드가 거대해져 어떻게 해야 할까 고민하는 모든 직군- 마이크로 프런트엔드 도입을 고민하는 분 이웅재 - NHN Dooray Dooray!의 프런트엔드는 거대한 모놀리식 SPA로 구성되어 있었습니다. 최근에 디자인을 리뉴얼하며 실험적으로 마이크로 프런트엔드를 도입하였습니다. 이와 관련해 어떤 목표를 가지고 왜 그런 결정을 했는지, 구체적으로 어떻게 진행되었는지 다룹니다. 요약: React Monolithic SPA(트랙1-3 설명) 에 Micro Frontend 도입한 이야기 두레이 메인 서비스 7개 서비스 react, ts, vite, redux-saga, redux-toolkit 기존 시스템의 문제 도메인 지식을 갖추기 어려움 서비스 담당자..

이 포스팅은 재직하던 회사 인사팀의 요청으로 작성한 회사 기술 블로그에 게재된 글의 초안입니다.  lazy-loading이 필요했던 이유구현 방법현실적인 문제해결방법배포 후 발생한 문제결과lazy-loading이란lazy-loading은 브라우저가 요구 사항에 따라 필요한 구성 요소 또는 모듈만 로드하는 기술입니다. url과 관계없이 모든 모듈이 다운로드되지 않아서 성능에 이점이 있습니다. 장점필요한 부분만 로딩하므로 초기 로딩의 부하를 분산할 수 있습니다.더 이상 부모 모듈이 자식 모듈을 호출하지 않아도 됩니다. 즉, 느슨한 연결로 구성하므로 서로 독립적으로 구성할 수 있으며 쉽게 붙이거나 뗄 수 있도록 구성됩니다.단점첫 로딩 시 한꺼번에 저장해두는 방식 보다 늦게 로딩 되므로 즉시 전환보다는 약간의 ..

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

CORS 란? 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 필요한 이유? 보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. CORS 이슈 해결 방법? - 서버의 Access-Control-Allow-Origin 헤더에는 요청의 Origin 헤더에서 전송된 값이 포함되어야 합니다. (서버에 접근가능 할 때 가능) - 동일한 출처에서 리소스 요청하기 공공 API 등 서버에 접근할 수 없는 경우 어떻게 해결? 1. 남이 만든 프록시 서버 사용하기 단점 : 서버 과부하 방지를 위해 네트워크 요청 횟수가 제한됨. 장점 : 별 생각 없이 사용가능 ex : ..

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