Study7 TypeScript - 유틸리티 타입(Utility types) 사용 타입스크립트에서는 Type Transformation을 유연하게 도와 주는 여러 유틸리티 타입을 제공하고 있습니다. (TypeScript Utility Types) 그 중에 실무에서 유용한 몇가지 타입을 알아보겠습니다. 타입스크립트에서는 조건부 형식으로 타입을 정의 할 수 있습니다. T extends U ? X : Y 위와 같은 형태를 취하는데 조건식 결과에 따라 X가 될 수도 Y 가 될 수도 있습니다. 타입스크립트는 용도에 맞게 조건부 타입을 활용한 새로운 타입들을 미리 정의해두고 이것을 "Predefined conditional types" 라고 하며 그 중 하나가 Exculude 입니다. Exclude Exclude 타입은 2개의 제네릭 타입을 받을 수 있으며, 첫번재 제네릭 타입 T 중 두번째 제.. 2023. 1. 30. Next.js 기초부터 알아보기 Next.js 는 React 라이브러리의 프레임워크 입니다. 장점 서버사이드 렌더링 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주면서, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO의 장점을 가질수 있습니다. pre-reloading은 SSR 뿐만 아니라 SSG(Static Site Generate - 정적 사이트 생성)도 가능하게 해줍니다. 또한 SSR 과 CSR도 혼합하여 사용 할 수 있습니다. SEO 문제 - 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보가 보이지 않습니다. 구글의 검색엔진의 경우 자바스트립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않.. 2023. 1. 10. 스토리북으로 개발하기 스토리북? 스토리북은 독자적인 UI 컴포넌트 개발을 위한 업계표준 컴포넌트 탐색기 입니다. 내부 개발자들을 위한 문서화(Documentations)에 사용할 수도 있고, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로도 사용할 수 있습니다. 장점 복잡한 로직 없이 독립적인 환경에서 컴포넌트를 개발을 할 수 있습니다. 재사용을 위한 컴포넌트 들을 Story 에서 조합해 테스트 할 수 있습니다. 컴포넌트들을 문서화 할 수도 있고 디자인 시스템에 적용해 피그마의 컴포넌트들과 동기화할 수 있습니다. 초기세팅 # Storybook 설치 npx storybook init # Storybook 실행 yarn storybook 폴더구조 크게 .storybook 폴더와 stories.. 2022. 12. 20. Jest로 테스트코드 작성하기 테스트의 종류 단위테스트 단위 테스트는 응용 프로그램에서 테스트 가능한 가장 작은 소프트웨어를 실행하여 예상대로 동작하는지 확인 하는 테스트 단위테스트에서 테스트 대상 단위의 크기는 엄격하게 정해져 있지 않습니다. 하지만 일반적으로 클래스 또는 메소드 수준으로 정하여 테스트합니다. 단위의 크기가 작을 수록 복잡성이 낮아집니다. 따라서 단위 테스트를 활용하여 동작을 표현하기 더 쉬워집니다. 즉, 테스트 대상 단위의 크기를 작게 설정해서 단위 테스트를 최대한 간단하고 디버깅하기 쉽게 작성해야 합니다. 소프트웨어를 개발할 때, 소프트웨어 내부 구조나 구현 방법을 고려하여 개발자 관점에서 테스트합니다. 그러므로 단위 테스트는 소프트웨어 내부 코드에 관련한 지식을 반드시 알고 있어야 하는 화이트박스 테스트입니다... 2022. 12. 12. Emotion의 배경지식 / 사용법 (CSS in JS) Emotion? Emotion은 JavaScript로 css 스타일을 작성하도록 설계된 라이브러리입니다. 본격적으로 Emotion에 대해 알아보기 이전에 간단히 다양한 웹 스타일링 기술을 알아보겠습니다. 다양한 웹 스타일링 기술 CSS CSS(Cascading Style Sheets)는 HTML 이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정합니다. CSS의 문제점 - Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 한다. - Dependencies: CSS간의 의존 관계를 관리 하기 힘들다 - Dead Code Elimi.. 2022. 12. 6. React Query React Query는 React 어플리케이션에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화 하고 업데이트 하는 작업을 도와 주는 라이브러리 입니다. 장점 * 캐싱 * Boilerplate 코드의 감소 * get 한 데이터에 update 가 발생하면 자동으로 get을 다시 수행한다. * 동일 데이터 여러번 요청시 한번만 요청한다 (옵션에 따라 중복호출 허용 시간 조절 가능) * 데이터가 오래되었다고 판단하면 다시 get (invalidateQueries) * API 요청 수행을 위한 규격화된 방식 제공 사용 npx create-react-app my-app cd my-app yarn add react-query yarn && yarn start 세팅 // src/index.js import R.. 2022. 11. 28. React 상태관리 라이브러리 1탄 (Redux) React 에는 많은 상태관리 라이브러리들이 있습니다. 그중에 가장 많이 사용하는 Redux를 먼저 정리해 보았습니다. Redux의 역사 MVC 패턴 Redux의 역사는 MVC 패턴에서 시작합니다. MVC 패턴에서 Cotroller는 Model에 정의된 데이터를 조회하거나 업데이트하는 역할을 하고, 변경된 Model의 데이터를 View에 반영해 줍니다. 또한 사용자는 View를 통해 데이터를 입력하고 Model에 반영되며, View 와 Model은 데이터를 양방향으로 주고받는 형태입니다. 프로젝트의 규모가 커질수록 수많은 View와 Model들이 생겨났기 때문에 데이터가 어디로 흐르는지 파악하기 어렵다는 문제점이 있었습니다. 새 기능을 추가할때 마다 크고 작은 문제가 생겼고, 예상 할 수 없는 결과(Si.. 2022. 11. 21. 이전 1 다음 반응형
