typeScript

회사에서 유용하게 사용하던 bottom-sheet가 있어 이를 다른 사람들과도 공유하고 싶어 라이브러리로 만들게 되었다! 또한 npm에 올려 다른 사람들에게 소스 리뷰, 버그 등을 공유받고 싶은 마음도 있었다. 글로벌하게 사용되었으면 해서 영어로 문서화해 두었다..! + 문제점이나 개선 사항은 issue로 남겨주시면 수정해 보겠습니다 💪 bottom-sheet 관련 소스는 기존 포스팅에서 수정과 함께 typescript를 적용시켰다! @solb/bottom-sheet 순수 자바스크립트로 만든 bottom-sheet로, 모바일 웹이나 앱에서는 bottom-sheet 형태로 나타나고 웹에서는 모달 형태로 나타난다. 자세한 Demo는 여기서 확인할 수 있다 (👉 Demo) 이 컴포넌트는 web componen..

우리만의 디자인 시스템을 만들고 싶다 새롭게 입점사 프로젝트에 들어가며 디자인시스템대로 컴포넌트를 만들어 회사 내 다른 프로젝트에서도 사용하고 싶었다! 지금까지는 디자인 시스템이 정해져 있는 것이 아니라 그때그때 시안에 맞춰서 작업해서 소스가 더러웠다 이번 기회에 우리만의 디자인 시스템을 만들고자 했다 위처럼 버튼에 대한 디자인 시스템이 정의되어 있다면 색상, 사이즈에 따라 버튼 컴포넌트를 만들면 된다! Button Component 만들기 어떻게 만들면 좋을까에 대해서 고민하며 찾아보다가 velog의 오픈소스를 봤는데 size, color를 따로 정의하고 props로 받는 부분이 너무 깔끔하게 잘되어 있어 이를 참고하여 만들었다 사이즈 스타일링 피그마에 정의된 대로 사이즈를 나누어 각각의 사이즈를 상..

확장 interface -extends를 사용 type - &를 사용 interface Student { major: string studentId: number } const mike: Student = { major: 'computer', studentId: 202212011 } type Student = { major: string studentId: number } const mike: Student = { major: 'computer', studentId: 202212011 } 선언적 확장 interface에서는 새로운 속성을 추가하기 위해 같은 이름을 선언할 수 있지만, type은 선언적 확장이 불가능하다. interface Student { major: string studentId: nu..

일단 기본적으로 타입을 추가해줘야 한다! 이건 당연하다! 1. import 할 때 이미지 파일 관련 에러 Cannot find modules '../..' or its corresponding type declarations. ts(2307) 라고 수많은 에러가 발생했다. 그럼 해결해 보자! src파일 아래에 images.d.ts파일을 생성한다. (index.d.ts로 파일명을 하면 index.ts파일로 인식하기 때문에 다른 이름으로 해주기) 필요한 확장자를 아래와 같이 추가해준다. declare module "*.png"; declare module "*.jpg"; tsconfig.json에 compilerOptions:{} 안에 추가해준다. "typeRoots": ["./src/@types"] 저장을..

새로운 타입 스크립트를 이용한 리액트 프로젝트를 시작했다. 타입 스크립트를 복습할 겸 기존의 JavaScript로 만들었던 프로젝트를 TypeScript로 변경해보기로 했다. TypeScript를 설치한다. yarn add typescript @types/node @types/react @types/react-dom @types/jest // 또는 npm install typescript @types/node @types/react @types/react-dom @types/jest 그다음 yarn install // 또는 npm install tsconfig.json파일이 생성된다. (혹은 생성되지 않았다면 tsconfig.json을 최상단에 추가해준다.) 아래 소스를 tsconfig.json에 추가해..

장점 - children, propTypes, contextTypes, defaultProps, displayName이 기본적으로 있다. 단점 - children이 필요하지 않는 경우에도 들어가 있으므로 타입이 명확하지 않다! type FC = FunctionComponent; interface FunctionComponent { (props: PropsWithChildren, context?: any): ReactElement | null; propTypes?: WeakValidationMap | undefined; contextTypes?: ValidationMap | undefined; defaultProps?: Partial | undefined; displayName?: string | unde..