본문 바로가기

IT

 (34)
TypeScript 타입 단언 Type assertion 타입스크립트는 명확한 타입 표기 및 타입 추론을 통해 타입을 판단한다. 하지만 때에 따라서 명확한 타입 표기가 불가능하거나 개발자가 임의의 타입을 값에 할당하고 싶은 경우도 존재한다. 이러한 경우 Type assertion을 활용하여 타입을 단언한다. interface Something { do: number | string; } 위 코드의 경우 do는 number 혹은 string의 타입을 가질 수 있다. 경우에 따라서 do 라는 값을 사용할 때 as를 활용하여 타입을 단언할 수 있다. /** * Add month function * @param {Date} target * @param {number} value * @returns {Date | null} */ export ..
TypeScript 타입 추론 Type Inference TypeScript는 명시적인 타입의 표기가 없는 경우 타입의 정보를 제공하기 위해 사용. 즉 TypeScript가 코드를 해석해 나가는 동작 // num: number const num = 3 // isTrue: boolean const isTrue = true 타입을 여러 개 사용하는 경우 가장 근접한 타입을 Best Common Type이라고 함 // number | null const arr = [123, 4, null] Type Assertion Type Assertion은 타입을 단언하는 것을 의미. function getString(): any { return "123"; } const a = getString(); console.log((a as string).l..
Hook 규칙 Hook 규칙 Hook 은 JavaScript 함수이다. 하지만 Hook을 사용할 때는 두 가지 규칙이 있다. React의 함수 내에서만 사용되어야 한다. 즉 일반적인 JavaScript 내에서는 호출하면 안된다. React 함수의 최상단에서 호출해야 한다. useState 혹은 useEffect 의 경우 React가 순서를 지정해 놓기 때문에 rendering이 발생하는 경우 React가 지정한 순서에 따라서 hook을 호출할 수 있다. 하지만 if, for 안에서 hook을 사용할 경우 순서가 엇갈림에 따라 버그를 초래할 가능성이 있기 때문에 항상 React 함수의 최상단에서 hook을 호출하도록 규칙을 정해 놓은 것이다. 이러한 규칙은 linter plugin 참고. React 함수 내에서 Hook..
Code splitting Code splitting CRA로 만든 React App은 Webpack이 함께 설치된다. 따라서 번들링 시 Webpack에 의해 자동으로 번들링이 된다. App의 크기가 증가되면 자연스레 번들의 크기도 커지게 된다. 즉 App이 Load 되는 시간 역시 비례하여 증가하게 된다. 이러한 단점들을 보완하기 위해 코드 분할 을 활용하여 App의 성능을 개선하고 사용자에게 좋은 UX를 경험하게 한다. import 가장 단순한 방법으로 Dynamic import() 을 활용한다. // 기존의 import와 살짝 다른 모습 const AppTest = React.lazy(() => import("./AppTest")); Webpack이 위의 구문을 만난다면 Webpack이 자동으로 App의 코드를 분할한다. 즉..
axios HTTP 비동기 통신 피하고 싶어도 피할 수 없다. 이왕 이렇게 된거 좀 제대로 알고 써보자. 근데, 방법이 axios 뿐일까? Node.js를 활용하여 비동기 통신을 할 수 있는 방법이 axios 뿐인가? 그게 아니라면 왜 굳이 axios일까? fetch도 있는데... axios axios의 특징에 대해서 알아보자 기본적으로 axios는 HTTP에 대한 응답을 JSON으로 바꿔준다. axios instance를 만들 때, 공통적인 config 부분을 설정할 수 있다. ( header... ) 공통적인 response, request 에러 처리가 가능하다 위의 특징들은 axios의 특징인 것과 동시에 fetch와의 차이점 이라고 볼 수 있다. fetch를 활용한 비동기 통신에서는 이러한 것들을 요청을 보..
async / await async / await Promise보다 더욱 사용하기 편리하고 쉬운 async/await 문법에 대해서 알아 보도록 한다. async/await 는 기존의 비동기 처리 방식인 callback과 promise의 단점을 보완하고 가독성을 높여준다는 장점이 있다. JavaScript에서는 특히 비동기 처리 방식 때문에 위에서 아래로 진행되는 일반적인 코드의 흐름이 아닌 경우가 꽤 있다. async/await 는 이러한 단점을 보완하고 위에서 아래로 코드가 진행되도록 한다. async function getA() { return "A"; } function 앞에 async 키워드를 붙이는 순간 반환 값은 항상 Promise 이다. 이 값을 불러오기 위해서 then() 을 사용하곤 한다. async funct..
Promise Promise A promise is an object that may produce a single value some time in the future JavaScript는 싱글 스레드 언어이다. 싱글스레드인 만큼 한 번에 하나의 작업 밖에 수행할 수 없다는 의미이다. 즉, 처리 시간이 오래 걸리는 동작을 수행하는 동안 다른 동작을 미리 수행 시키고, 동시에 동작이 되는 듯한 느낌을 주는 것이다. 이러한 비동기적 처리를 하기 위해 JavaScript에서는 Promise 를 활용한다. Promise states Promise는 3가지의 상태를 가지고 있다. 상태 는 프로미스의 처리 과정을 의미한다. Pending(대기): 비동기 처리 로직이 아직 완료되지 않았음. Fulfilled(이행): 비동기 처리..
useCallback useCallback useCallback 은 특정 함수를 새로 만들지 않고 재사용 할 때 사용하는 hook 이다. 즉 함수 를 메모이제이션 하기 위해 사용하는 hook 이다. 컴포넌트가 re-render될 때 불필요하게 함수가 다시 생성되는 것을 방지한다. 따라서 이러한 React로 만든 앱을 최적화 하기 위해 불필요한 렌더링을 방지하여 앱의 퍼포먼스와 효율성을 높일 수 있다. useCallback(cb, deps) 사용 이유 React 에서는 컴포넌트가 다시 렌더링 될 때, 컴포넌트 안에 선언된 함수를 새로 생성한다. 즉 지속적으로 렌더링을 하며 함수도 계속 생성한다는 의미이다. const App = () => { const [name, setName] = useState("FoxMon") const..

티스토리툴바