본문 바로가기

Typescript5

[TS] Type vs Interface 타입과 타입변수 type은 타입스크립트에서 데이터의 모양을 규정하는데 쓰는 키워드입니다. 타입스크립트에서 기본 타입으로는 아래와 같습니다: String Boolean Number Array Tuple Enum Advanced types 각각의 타입은 고유의 역할과 기능이 있고 개발자는 목적에 알맞게 사용하게 됩니다. 타입스크립트에서 타입변수는 "어떤 타입의 이름"을 의미합니다. 기존에 존재하는 타입을 위한 새로운 타입 이름을 만들어 낼 수 있도록 하죠. 타입변수가 새로운 타입을 정의하는 것은 아닙니다. 대신에 기존에 존재하던 타입 이름에 별도의 이름을 제공합니다. 타입변수는 원시 타입을 포함해 유효한 타입스크립트 타입을 type 키워드를 통해 생성할 수 있습니다. type MyNumber = number.. 2023. 11. 24.
[FE] s3 버켓으로부터 csv 파일 다운로드 받기 안녕하세요 :) 오늘은 사이드프로젝트로 만드는 웹어플에서 파일 다운로드 기능을 만들어 보았는데요, 생각보다 복잡한 것 같아 기록으로 남겨봅니다. 우선 일반적인 파일 다운로드 경로는 아래와 같습니다. 일반적 다운로드 방법 보안문제 때문에 보통은 위처럼 클라이언트와 s3 버킷사이에 서버가 위치해 파일 다운로드를 지원해 줍니다. 하지만 이번 사이드프로젝트에서는 핸들링하는 서버가 없습니다. 따라서 클라이언트에서 직접 s3의 csv파일을 다운로드해야 했는데, 이 부분에 문제가 발생했습니다. 직접 s3에 접근할 경우 아래와 같이 코드를 작성하고 이벤트를 발생시키는 순간 Download 위와 같이 access denied 에러가 발생합니다. 이유는 보안상 문제 때문입니다. 클라이언트는 보안에 취약할 수 밖에 없는 구.. 2023. 6. 9.
[UI] Chakra와 Storybook 연동하기 안녕하세요 :) 개발자 Sean입니다. 이번주 새로운 프로젝트를 시작하며 아키텍쳐와 사용할 라이브러리에 대해 고민하고, 기본 틀을 세팅하는 시간을 가져보았습니다. 이번에는 ui 라이브러리로 chakra를 이용해 약간의 커스터마이징을 하고, storybook을 통해 컴포넌트 단위로 테스팅과 유지보수를 하도록 만들려고 합니다. 회사에서 기존에 만들었던 웹어플의 경우 잦은 디자인 변경과 담당자 교체로 인해 수많은 ui 파일들이 생겨나는 문제가 발생했습니다. 문제는 어떤 ui가 사용되고 있는지 모르기 때문에 좀비처럼 폴더안에 살아있는 문제가 발생했습니다. 이를 해결하기 위해 이번 프로젝트는 처음부터 디자인을 확실히하여 위의 문제가 발생하지 않도록 하려 합니다. # 1. "@chakra-ui/storybook-a.. 2023. 4. 17.
[Firebase] Auth undefined 문제 해결방법 안녕하세요, 개발자 Sean입니다. 사이드 프로젝트로 만드는 어플에서 자꾸만 원인 모를 에러가 발생해 퇴근 후 원인을 분석하다 해결방법을 발견해 관련해서 포스팅하려고 합니다. 현재 프로젝트에서 typescript와 firebase의 auth를 활용해 프론트엔드를 만들고 있는데요, 이 둘 조합해서 사용하는게 여간 까다로운 일이 아니네요. (아마... 제 실력이 떨어져서겠죠..?ㅎㅎ;;) 우선 토큰을 가져오기 위해 auth.currentUser.getIdToken()를 호출하면 타입에러가 발생합니다. 이유는 auth.currentUser 안에 getIdToken() 메서드가 있을 수도 있고 없을 수도 있기 때문입니다. 자세히 이해하지 못했지만 auth 객체가 호출될 때 중간단계(초기화 등)를 거치기 때문이라.. 2023. 3. 15.
Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2345) 오늘 algolia 환경설정 코드를 작성하다가 아래와 같은 에러코드를 만났다. Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2345) 사실 여러 번 봐왔던 오류코드라 대충 짐작이 왔다. 타입 설정 문제였다. 문제가 생긴 코드는 아래와 같다. const algoliaClient = algolia(process.env.REACT_APP_ALGOLIA_appId, process.env.REACT_APP_ALGOLIA_apiKey); process.env에는 string 혹은 undefined의 값이 들어.. 2022. 5. 14.