nika-blog

회사다니면서 대학교 졸업을 하려고 보니, 정보처리기사를 따면 20학점 (정보통신공학과 기준)을 준다고 해서 시험을 봤다. 자격요건: 대학교 4학년 재학/휴학 (증명서 떼면 4학년이라고 표기되어야 함) 기출문제집 사서 틈틈히 핸드폰으로 풀었고, 가채점 결과 합격했다. 시험장 준비물: 펜 1개, (종이 준다) 신분증, 수험표 필요없음시험 유의사항 30분 정도 설명한다. 미리 갈 필요는 없을 것 같고, 10분정도 전에 가면 마음의 안정을 찾을 것 같다.  시험장은 선착순 접수이니, 미리 준비하고 있다가 접수하면 좋을 것 같다. 서울/경기 지역은 접수 당일날 2시부터 접수를 받아서 기다렸다가 10 거리 접수에 성공했다. (동료가 알려줘서 다행이었는데, 충청도 가서 시험보는 경우도 있다고 한다. )접수하기http..

타입스크립트는 정적이면서도 동적인 특성을 동시에 가지기 때문에, 프로그램의 일부분에만 타입 시스템을 적용할 수 있습니다. 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..

거대한 서비스 쪼개서 마이크로 프런트엔드 만들기 대상- 프런트엔드가 거대해져 어떻게 해야 할까 고민하는 모든 직군- 마이크로 프런트엔드 도입을 고민하는 분 이웅재 - 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 을 선택하여 개발하도록 설계하는 ..