📖 (157) 썸네일형 리스트형 타입스크립트의 Enums(열거형) 타입에 대해 간단하고 빠르게 알아보자 Enum은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 이름이 있는 상수들의 집합을 정의할 수 있다. TypeScript에서는 숫자와 문자열 기반 열거형을 제공한다. 열거형은 enum 키워드를 사용해 정의한다. → enum은 특정값만 입력되도록 하고 싶을때, 그 값들이 공통점이 있을때 사용한다. enum Color { Red, Orange, Blue, } 참고로 열거형은 기술적으로는 숫자와 문자를 섞어서 사용할 수 있지만 (이종 열거형: Heterogeneous enums) 굳이 그렇게 할 이유가 없다면 권장하지 않는다. 👾 숫자형 열거형(Enum) 열거형의 디폴트 값으로 숫자형을 사용한다. 각 값은 자동으로 0부터 시작하여 1씩 증가하며, 수동으로 값을 지정할 수도 있다. enum Col.. 타입스크립트 유니온/교차 타입과 리터럴 타입 TypeScript의 타입은 연산자를 이용해 조합해서 사용할 수 있다. 다소 복잡한 타입을 표현하고 싶을 때, 지정한 여러 타입의 합집합을 의미하는 Union 타입과 교집합을 의미하는 Intersection 타입을 사용할 수 있다. Union 타입은 | 연산자를, Intersection 타입은 & 연산자를 사용한다. 👾 Union Types 유니온 타입은 여러 타입 중 하나가 될 수 있는 값으로, 서로 다른 두 개 이상의 타입을 세로 막대 | 로 구분하여 만든다. let value: string | number | boolean; 👩🏻💻 Union type 기본 예시 function printValue(value: number | string): void { if (typeof value === 'nu.. VSCode에서 TypeScript 환경 설정하기 👾 VSCode에서 TypeScript 환경 설정하는 방법 본격적으로 TypeScript 학습을 하기 위해 VSCode에서 환경 설정을 했다. 과정이 마냥 단순한건 아닌것 같아서 정리를 해두기로 했다. 혹시나 다음에 다시 보게될 나를 위해, 혹은 나처럼 처음 타입스크립트를 공부하거나 사용하기 위한 환경 세팅을 하는 누군가를 위해 :) 1. 새로운 프로젝트 생성 (📁 learn-typescript) # learn-typescript 폴더에서 새로운 프로젝트 초기화 npm init -y ✨ OPTION. scripts 명령어로 build와 start 실행하기 위한 package.json 설정 { "name": "learn-typescript", "version": "1.0.0", "description": .. Section4 Unit5 [TypeScript] 기초 - 타입스크립트 시작 Section4 Unit5 [TypeScript] 기초 - 타입스크립트 시작 📌 Chapter1. TypeScript • TypeScript는 JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었다. VSCode에서 TypeScript 환경 설정하기 👾 VSCode에서 TypeScript 환경 설정하는 방법 본격적으로 TypeScript 학습을 하기 위해 VSCode에서 환경 설정을 했다. 과정이 마냥 단순한건 아닌것 같아서 정리를 해두기로 했다. 혹시나 다음에 다시 보 fay-story.com 타입스크립트 학습을 위한 VSCode 환경설정 하는 방법을 따로 기록해두었다 :) .. Section4 Unit4 [UX/UI] Design System - 디자인 시스템 구축하기 Section4 Unit4 [UX/UI] Design System - 디자인 시스템 구축하기 📌 Chapter3. 디자인 시스템 구축하기 • 디자인 시스템을 도입하기 좋은 시기 : 제품군 및 기능이 확장될 때, 관련된 인원이 늘어날 때, 채널이 확장될 때 ⭐️ 과제. 디자인 시스템 구축하기 지난 과제였던 Component Library는 겨우 어떻게 해서 제출을 했는데, 이번 과제인 디자인 시스템 구축하기는 할 엄두가 안나서 포기했다. 어떤 부분이 할 엄두가 나지 않았냐하면, 스토리북을 사용하는데서 막혔다. 라이브 세션 강의를 보고 스토리북을 세팅하고, 컴포넌트 하나를 만들기는 했는데 글쎄... 지난 Section3 에서도 스토리북을 제대로 보지 않아서 이번 Section에서 다시 해보려니 빈 스케치북에.. Section4 Unit4 [UX/UI] Design System Section4 Unit4 [UX/UI] Design System 📌 Chapter1. Design System • 디자인 시스템(Design System)은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미한다. 이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와준다. • 디자인 시스템을 사용하면, 1. 디자이너와 개발자는 문서 혹은 툴킷 형태를 기반으로 디자인 시스템을 공유해 이를 참고하며 서로의 작업에 대한 이해를 높일 수 있고, 따라서 프로젝트의 진행 속도가 빨라지며, 팀원 간의 소통과 협업이 원활해지는 등 팀 간의 원활한 협업을 촉진할 수 있다. 2. 디자인 시스템에 따라 제품이 만들어지면, 사용자들은 시간이 지남에 따라 서비스의 일관된 디자.. Section4 Unit3 [React] 심화 - React Hooks 적용하기 Section4 Unit3 [React] 심화 - React Hooks 적용하기 ⭐️ 과제. React Hooks 적용하기 ✅ Bare Minimum Requirement ✔️ json-server 설치 ✔️ 상세 컴포넌트 구현하기 - App.js react.lazy()와 suspense 사용 - BlogDetail.js createBlog.js CRUD 구현 - useFetch.js custom hook 만들기 ✅ Advanced ✔️ 블로그 글 클릭해서 들어갔을 때 스크롤 맨 위로 적용되는 기능 구현하기 ✔️ custom hook과 custom component 만들기 나름 재미있었던 이번 과제. 내가 한 방법이 맞는건지, 더 좋은 방법이 있는지 잘 모르겠는데 (특히 custom hook을 만드는 부.. Section4 Unit3 [React] 심화 - 코드분할과 React.lazy() & Suspense Section4 Unit3 [React] 심화 - Code Spliting, React.lazy() & Suspense 📌 Chapter3. React의 주목해야 할 기능 주목해야 할 기능인가? 오늘 QnA 세션에서 외부 강사님이 Suspense는 잘 사용하지 않는다고 하시긴 했다만...😐 여튼, 무거워진 리액트 앱의 성능을 최적화하는 것은 중요한 일임은 틀림없다. 이 부분은 좀 더 공부를 해봐야 할 것 같지만, 우선 배운 내용들만 간단히 정리해보자면 아래와 같다. • React는 SPA(Single-Page-Application)이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있다. React.lazy 함수를 사용해 컴포넌트를 동적으로 import를 할 수 있고, 이를 사용하면 초기 렌더링 .. 이전 1 ··· 3 4 5 6 7 8 9 ··· 20 다음
