본문 바로가기

분류 전체보기49

[error]Styled-component typescript에서 Props 쓰기 js로 개발할 때는 에러가 안떴는데 ts로 개발하니 못보던 에러가 떴다. Property 'props이름' does not exist on type. 형식에 'props이름' 속성이 없습니다. 해결법 단일 props 인 경우에는 styled.div export const LoginButton = styled.div` background-color: ${(props) => (props.disabled ? "#b2ddff" : "#2E90FA")}; cursor: ${(props) => (props.disabled ? "default" : "pointer")}; ` props가 여러개인 경우에는 interface를 사용한다. interface IBtn { submit: boolean; pay: string;.. 2024. 3. 11.
[error]Typescript image import 안되는 현상 타입스크립트로 처음 프로젝트 생성 후 진행 중에 이런 에러가 떳다. 경로입력시에 이미지 파일 이름이 자동완성되지도 않고 아예 인식이 안되는것 처럼 보였다. 처음 겪는 에러라 좀 당황했다... Cannot find module '../../assets/파일이름' or its corresponding type declarations. '../../assets/파일이름'모듈 또는 해당 형식 선언을 찾을 수 없습니다 해결법 1. src폴더 안에 custom.d.ts를 만든다. 2. 아래 처럼 작성한다. declare module "*.jpg"; declare module "*.png"; declare module "*.jpeg"; declare module "*.gif"; 이러면 작성한 확장자에서 에러가 사라진.. 2024. 3. 10.
TypeScript 정리 TypeScript란? 2012년 마이크로소프트가 개발한 JavaScript 기반의 정적 타입 문법을 추가한 ‘프로그래밍 언어 TypeScript는 JavaScript의 슈퍼 셋, 즉 상위 확장자로 JavaScript 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 JavaScript로 컴파일되어 실행할 수 있다. TypeScript를 사용하는 이유 강력한 타입 시스템 TypeScript를 사용하는 가장 큰 이유는 ‘타입’ 때문입니다. 타입을 사용함으로써 코드 퀄리티와 가독성을 높일 수 있다 여기서 ‘타입’이란, 어떠한 변수가 숫자인지, 문자인지, true/false 인지에 관한 추상 형태입니다. JavaScript는 이미 string, number, object, undefine.. 2024. 3. 9.
Recoil을 이용해서 쉽게 상태관리를 해보자 Recoil 이란? 리코일은 2020년 Facebook에서 발표한 상태관리 라이브러리다. React만으로는 복잡한 상태관리가 어렵기 때문에 별도의 라이브러리를 사용 ex) Redux, Recoil, Zustand, Mobx ...등 Recoil과 다른 상태관리 방법 비교 1. React useState 부모 컴포넌트에서 prop drilling > 불편 공통 prop가 변경될 때마다 계속 re-rendering이 일어남 2. React useContext 상태 마다 Context Provider를 선언해야함 상태 변경될때마다 캐싱 없이 매번 re-rendering이 일어남 3.Redux 전역상태를 수정하기 위해 반드시 액션을 선언해서 수행해야해 데이터의 흐름 예측이 쉬움 좋은 개발자 도구가 있어서 문제 .. 2024. 3. 8.