본문 바로가기

Frontend/Typescript

(4)
[Typescript] .d.ts file 기존에 존재하는 라이브러리를 이용하여 추가 기능을 붙이는 작업을 진행하였다. 관련 작업을 이어가던 중 발견했던 .d.ts 파일에 대해서 글을 쓰고자 한다. .d.ts 파일은 타입을 정의하는 역할이다. Typescript 는 정적 타입 검사를 수행하므로 변수, 함수 및 클래스 등의 요소에 명시적인 타입을 지정해야 한다. 외부 JavaScript 라이브러리를 TypeScript 프로젝트에서 사용할 때 .d.ts 파일을 작성하면 타입의 안정성을 확보할 수 있다. import React, { HTMLProps } from 'react'; import { Editor } from './Editor'; import { ReactRenderer } from './ReactRenderer'; export interfa..
useEffect csv로 멤버 정보를 받아서 서버에 추가하는 과정을 구현하였다. 크게 두가지로 구분할 수 있다. 1. 멤버 정보를 받는다. (handleOnSubmit) 2. 서버에 보낸다. (sendToServer) { await handleOnSubmit(e); sendToServer(); }}> 멤버 정보는 memberArray 상태 변수에 저장하였다. 즉 handleOnsubmit 내에서 setMemberArray를 통해 변경해 주었고, sendToServer에서 변수를 사용하였다. 그런데 도통 해당 상태 변수 값이 변하지 않는 것을 확인하였다. handleOnSubmit과 sendToServer 가 비동기적으로 처리되는 것 아닐까 생각했지만 그렇지 않았다. await handleOnSubmit함수가 종료되고 s..
SWR 오늘 프론트엔드 유지보수를 하면서 막혔던 부분에 대한 개념이다. 확실히 프론트 쪽 지식이 약하다보니까 버그를 찾고 수정하는 데 오래 걸리는 것 같다. chat gpt 를 잘 활용하고 있지만 내가 뭘 모르는 상태에서 올바른 대답을 끌어내기가 힘들다. 일단 오늘 막혔던 개념부터 좀 알아야 겠다. SWR Stale-While-Revalidate"의 약자로, 웹 애플리케이션에서 데이터를 캐싱하고 업데이트하는 방법을 관리하기 위한 패턴 및 라이브러리이다. UI의 많은 곳에서 데이터를 재사용할 수 있게 만들어준다. 캐시의 역할을 한다. https://velog.io/@gadian88/SWR-React-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%B0%8F-%EC%BA%90%EC%8B%..
Effective Typescript What Typescript is: Typescript is Javascript with Type. It is a superset of Javascript, which means All Javascipt program is Typescript program. All Typescript transform into Javascript. How to set Typescript: TypeScript compiler behaves differently through configuration settings(tsconfig.json). Here are main. noImplictAny: prohibits implicit any (considering a variable as any type when no type ..