시작하는 중

프론트엔드로써 프로젝트에 참여하다보면 고민이 점점 늘어난다.. 3번의 프로젝트를 react로 진행하면서 느낀 점은 다음과 같다. 1. eslint와 prettier로 코딩 컨벤션을 어느정도는 강제해야한다. 2. 폴더 구조를 어떻게 잡을 것인가가 중요하다. 3. 컴포넌트를 어디까지 쪼갤 것인가를 정해야한다. 1번과 2번은 지금 프로젝트에서는 적용했는데, 3번은 감이 안잡히다가 요새 잡히기 시작했다. 그래서 3번에 대해서 글을 써보려고 한다.지금 진행 중인 프로젝트에서 생긴 문제이다.두 개의 카드 컴포넌트가 있다. 좌측의 카드는 내가 보유하고 있는 쿠폰을 나타내주는 컴포넌트이고, 우측의 카드는 상점의 살 수 있는 쿠폰을 나타내주는 컴포넌트이다. 좌측은 내가 맡았고, 우측은 팀원이 맡았다. 충분히 재사용가능한..

요새 타입스크립트를 배우고 있고 정말 신기한 기능들을 많이 만나고 있어서 왜 이걸 안썼을까~~하는 생각이 자주 든다🙂 그런데 타입스크립트는 타입에 대한 강력한 지원을 함에도 불구하고 왜 타입으로 무언가를 할 수 없을까? 하는 생각이 들었다. 예를 들어, function add(a: T, b: T): T { if (typeof a === 'number' && typeof b === 'number') { return (a + b) as T; } if (typeof a === 'string' && typeof b === 'string') { return (a + b) as T; } throw new Error('number나 string으로 해야해요.'); } console.log(add(1, 2)); // ..

이 글은 왜 쓰냐면 .. interface Props { tag: '포인트' | '참여설문' | '제작설문'; quantity: number; modalOpenFunc?: React.Dispatch; } export default function MyPageCard({ tag, quantity, modalOpenFunc }: Props) { ... modalOpenFunc(tag)}> ... 이게 안된다.. 우선 modalOpenFunc?에서 eslint가 화낸다.. propType "modalOpenFunc" is not required, but has no corresponding defaultProps declaration. (eslintreact/require-default-props) modal..

타입스크립트를 배우면서 리액트에 적용해가며 프로젝트를 진행하고 있는데, 구글링하다보니까 Object 타입을 선언하는데 있어서 두 개가 모두 나오길래 뭐가 다른지 궁금해서 정리해두려고 한다. 예시 type TypeA = { name: string; age: number; } interface InterfaceA { name: string; age: number; } type와 interface는 동일하게 작동하는 것처럼 보인다. 하지만 다른 점은 interface는 Object 객체에만 적용된다는 것이다. 그렇다는 것은 interface는 적어도, 특별한 기능이 있어야한다고 생각한다. 둘의 차이점 고맙게도 공식문서에 어느정도 정리되어 있다. 타입스크립트 공식문서 #interface interface는 선언..