타입스크립트(TS)6 [turbo, tailwind] TurboRepo에 HeadlessUI를 사용해보기(기록용) 목차 서론여러 프로젝트를 개발하다보면 여러 디자인들이 필요한 경우가 많다. MUI나 Antd, BootStrap 등 그 디자인을 이쁘게 맞춰주는 프레임워크, 라이브러리 들이 있지만 한계치는 존재한다. 그래서 그 부분을 해결할 라이브러리를 찾던중 tailwindlabs에서 만든 headlessui라는 라이브러리를 찾게 되었다. HeadlessUI?https://github.com/tailwindlabs/headlessui GitHub - tailwindlabs/headlessui: Completely unstyled, fully accessible UI components, designed to integrate beautifully with TaCompletely unstyled, fully acce.. 2024. 12. 1. [TS]@types 목차 @types란타입스크립트 프로젝트에서 외부 라이브러리의 타입 정보를 제공하기 위해 사용되는 타입 정의 패키지의 표준 네임스페이스.타입스크립트는 타입 정보를 포함하지 않는 일반 자바스크립트 라이브러리로도 사용할 수 있는데, 이 때 타입 정보를 @types 패키지로 별도로 제공하여 타입 안정성을 유지할 수 있게 해준다. @types의 역할과 사용 방식 1. 타입 정의 제공@types 패키지는 DefinitelyTyped라는 오픈 소스 프로젝트를 통해 관리되며, 타입스크립트 커뮤니티가 유지 보수한다.@types 네임스페이스 하위에는 유명한 자바스크립트 라이브러리들의 타입 정의 파일들이 들어 있으며, 라이브러리명과 동일한 이름을 가진다.예를 들어, lodash라는 자바스크립트 라이브러리를 타입스크립트에서.. 2024. 11. 2. 엠비언트 타입(Ambient Type)(.d.ts) 목차 엠비언트 타입이란?코드 외부에서 정의된 객체, 라이브러리, 전역 변수 등의 타입을 명시하기 위해 사용주로 타입 정의 파일(.d.ts)로 제공되며, 외부 모듈이나 브라우저 API 같은 것을 사용할 때 타입을 명확히 하기 위해 사용함. 이 방식으로 타입스크립트 코드가 특정 환경의 정의를 알 수 있도록 돕고, 타입 안정성을 유지할 수 있게 한다..d.ts 확장자를 가진 파일에서는 타입 선언만 할 수 있으며 값을 표현할 수는 없다. 엠비언트 타입의 주요 사용 사례외부 라이브러리 정의 : @types 패키지를 통해 사용되는 외부 라이브러리의 타입을 정의한다.전역 객체 정의 : 프로젝트에서 정의한 전역 변수, 함수, 객체의 타입을 명시할 때 활용 한다.모듈 보강 : 외부 모듈에 새로 추가된 API나 보강할 .. 2024. 11. 2. [TS,라이브러리] Effect-TS 알아보기 목차 서론https://www.youtube.com/shorts/2W1fQH0wEe4https://www.youtube.com/shorts/MzFCHctD0lMhttps://www.youtube.com/shorts/MzFCHctD0lM 제로초 선생님의 유튜브를 보는 도중 effect라는 라이브러리의 존재를 알게 되었다. 제로초 선생님의 말을 빌리자면 타입스크립트의 새로운 표준이 될 수 있는 라이브러리라고 한다. Effect 라이브러리란?Effect는 개발자들에게 복잡하고, 동기,비동기 한 프로그램에 도움을주고자 한 강력한 TS라이브러리라고한다. Docshttps://effect.website/https://effect.website/docs/introductionhttps://github.com.. 2024. 7. 28. [TS] 커스텀 유틸리티 타입 활용하기 목차 커스텀 유틸리티 타입?타입스크립트로 프로젝트를 진행하다 보면 표현하기 힘든 타입을 마주할 때가 있다. 원하는 타입을 정확하게 설정해야만 해당 컴포넌트, 함수의 안전성과 사용성을 높일 수 있지만 타입스크립트에서 제공하는 유틸리티 타입만으로는 표현하는데 한계가 있다.이럴때 유틸리티 타입을 활용한 커스텀 유틸리티 타입을 제작해서 사용하면 된다. 커스텀 유틸리티 타입 종류유틸리티 함수를 활용해 styled-components의 중복 타입 선언 피하기리액트 컴포넌트를 구현할 때 여러 옵션을 props로 받아 유연한 컴포넌트로 만들 수 있다.ex) background-color, size 등등이와 같은 props는 styled-components에 전달되며 styled-components에도 해당 타입을.. 2024. 7. 28. [TS] index.d.ts 알아보기 목차 index.d.ts는 무엇인가?'index.d.ts'는 TypeScript 에서 타입 정의 파일(Type Definition File)로, 주로 JavaScript 라이브러리나 모듈의 타입 정보를 정의하는데 사용된다. 이 파일은 TypeScript 코드가 해당 라이브러리나 모듈과 상호작용할 때 타입 안전성을 유지하도록 도와준다.'index.d.ts'파일의 주요 목적은 타입정보를 제공하여 코드 작성 중에 자동 완성 기능과 컴파일 타임 오류 검사를 가능하게 하는 것이다. 주요 내용 타입 선언index.d.ts 파일은 변수, 함수, 클래스, 인터페이스 등의 타입을 선언한다.// Example: jQuery type definitionsdeclare var $: (selector: string) =>.. 2024. 6. 16. 이전 1 다음
