어제보다 더 나은 오늘

GitHub - labs42io/clean-code-typescript: Clean Code concepts adapted for TypeScript Clean Code concepts adapted for TypeScript. Contribute to labs42io/clean-code-typescript development by creating an account on GitHub. github.com 이렇게 하지 마라(Bad) vs. 이렇게 해라(Good) 버전의 쉬운 예제들로 정리된 클린 코드 예제이다. 예제들을 쭉 보면서 내가 자주 하는 실수만 따로 모아서 정리해 본다. 1. 변수 단락 평가(short circuiting)나 조건부 대신 default arguments 사용 Bad : func..

타입스크립트에서 type alias와 interface는 여러 차이가 있지만 코드 에디터에서 미리보기로 타입의 형태를 표기하는 방식에 있어 차이가 있다. type과 interface 각각을 살펴보자. 이때 VS Code에서 User 타입에 마우스를 올리면 다음과 같이 User 객체의 모든 프로퍼티를 볼 수 있다. 그렇다면 이번에는 똑같은 형태의 객체를 interface로 정의해 보자. interface로 정의한 객체에 마우스를 올리면 데이터의 형태를 보여주지 않고 interface의 명칭만 보여준다. 한 파일 안에 타입이 정의되어 있지 않은 경우에는 데이터의 구체적인 형태를 파악하기 위해 해당 파일로 이동해야 하는 경우가 많다. 따라서 변수에 연결된 타입이 구체적으로 어떤 모양인지 파악할 때는 타입 별칭..

📍 문제가 발생한 상황 ant design 라이브러리를 사용한 프로젝트에서 Modal 컴포넌트의 modal open 관련 로직을 별도의 ui 컴포넌트로 작성해 사용하는 쪽에서는 관련 로직에 대한 상태 없이도 사용할 수 있게 설계하고자 했다. 처음에 생각한 코드는 다음과 같다. import { Modal as AntdModal } from 'antd'; function Modal({ title, children, ...rest }) { const [isOpen, setIsOpen] = useState(false); return ( setIsOpen(false)} {...rest}> {children} ); } 이렇게 선언한 컴포넌트를 사용부에서는 다음과 같이 호출한다. centered나 width 같은 스..

1. (TS 2345) Argument of type '...' is not assignable to parameter of type '...' 문제 상황: 광역시/도를 선택하면 해당 시/도에 대한 시/군/구를 select box에 보여줄 수 있게 하는 코드를 작성하려고 했다. 예를 들어 서울을 선택하면 서울의 코드 11000 중 앞의 두 자리 11을 divisionSelectValue라는 상태에 담고, 해당 상태를 useEffect의 종속성 배열에 넣어서 사용자가 시/도 단위의 지역을 선택해서 상태 변경이 일어날 때마다 districtList에 해당 시/도에 대한 시/군/구 데이터를 담으려는 게 목적이었다. // divisions.ts 파일 예시 export const DIVISIONS_DATA = [..