🤔 기존에 알고 있던 Duck typing과 Typescript 구조적 타이핑의 차이를 인지하고 한계를 파악합니다. Duck typing이란 “만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다.” 라는 말에서 탄생하였으며, 객체의 타입을 미리 정하는 것이 아니라 런타임 시 객체의 행위에 기반하여 타입 수용성을 체크하도록 하는 프로그래밍 개념입니다. type Person = { name: string, age: number, }; const personA = { name: '희은', age: 27, }; const duckA = { name: '오리', age: 2, }; const person: Person = duckA; // it's okay 타입..

만일 Typescript로 개발하던 중에 아주 잘 작성된 JS 모듈을 가져와서 쓰고자 한다면, 해당 모듈 내의 함수는 typescript로 정의되어있지 않기 때문에 컴파일 과정에서 오류가 뜬다. 모듈이 해당 속성을 가지고 있음에도 type이 정해져있지 않아서 가지고 있지 않다고 해석하는 것이다. 다음과 같이 declare 키워드를 써서 정의해두면 type이 인식되어 typescript compiler가 해석할 수 있게 된다. declare let module: any 간단히 말해서 컴파일러에게 "이건 이미 존재하고 다른 코드에서 참조할 수 있다."라고 설명하는 것이다.

문제 상황 React context 사용 시 기존 코드 구성이 context 내부 요소가 늘어날 수록 복잡해져서 리팩토링하려 한다. 기존 구현 // 구성 const UserContext = createContext({}); const SignInContext = createContextvoid>(()=>{}); export const UserContextProvider = ({ children }) => { const [user, setUser] = useState(); const signIn = () => {}; return ( {children} ); } export function useUserState() { const context = useContext(UserContext); return c..

module.exports = { 'parser': '@typescript-eslint/parser', 'plugins': ['@typescript-eslint'], 'env': { 'commonjs': true, 'browser': true, 'es2021': true, 'node' : true }, 'extends': [ 'airbnb', 'airbnb/hooks', 'plugin:@typescript-eslint/recommended' ], 'parserOptions': { 'project': './tsconfig.json', 'ecmaFeatures': { 'jsx': true, }, 'ecmaVersion': 12, 'sourceType': 'module', }, 'rules': { 'inden..

Typescript 참고 : https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html (Typescript 공식 사이트) 배우는 이유 JS에서는 Type이 계속 체크되지 않는다. 1. 이는 암묵적 형변환, hoisting, 복잡성 문제를 일으킬 수 있다. 이러한 코드 상의 예상치 못한 버그를 없애기 위해 typescript를 주로 사용한다. hoisting : 끌어올린다는 뜻. javascript에서 선언문을 끌어올려 코드에서 사용할 때 순서에 상관없이 사용 가능하도록 하는 기술. typescript는 복잡한 예외처리 코드 없이 이를 수행한다. 2. 협업 시에나 추후에 본인이 짠 코드를 보았을 때 타입이 정의되어 있지 않다면 하나..