Intro구름에서 알고 지내던 두리안 님이 5월 초쯤 같이 프로젝트를 해보지 않겠냐고 제안을 해주셨다. 홍삼 백엔드 분들과 여러 차례 프로젝트를 진행해봤기 때문에 다른 백엔드 분과 해보는 것도 좋은 경험이라고 생각했고 전부터 두리안 님과는 개그 코드가 잘 맞아(중요함) 감사히 진행하게 되었다. 그러나 내가 몸서리 치던 지도 API를 사용하는 프로젝트(결과적으론 아님)라서 혼자 커버하기엔 자신이 없었고, 당시 1월부터 솜 님과 프론트엔드 스터디를 진행하고 있었기 때문에 솜 님에게 많이 배울 수 있는 기회라고 생각해 솜 님도 합류하게 되었다. 이미 두리안 님이 어느 정도 각을 잡아 두신 프로젝트라 기획이나 Figma를 손 볼 필요는 없었고, 프론트엔드 역할에 충실하게 데이터 받고 화면을 그리는 일이 주된 업..
발견한 에러위도와 경도, Google Map API를 사용해 현재 유저의 위치를 반환하는 역지오코딩 함수 FetchAddress를 만들었다.const FetchAddress = () => { return new Promise((resolve, reject) => { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition( position => { const { latitude, longitude } = position.coords; const apiKey = import.meta.env.VITE_Google_API_KEY; fetch( ..
unknown 타입의 error 객체를 만나다커피빈 클론 중 로그인 폼을 제출했을 때, 실패 시 error status에 따라 적절한 alert을 띄우려고 한다.이 때 try catch문으로 erorr를 다루는데 error에서 자꾸만 빨간 줄이 떴다. error 뒤에가 보이지 않는데, 처음에는 error의 타입을 any로 줬다. 하지만 eslint에서 에러를 내기도 했고 (Unexpected any. Specify a different type 라고 off를 하지 않았다.), 되도록 any는 지양하려고 해서 하라는대로 unknown을 주었다. 그런데 error의 타입을 unknown으로 지정했는데도 자꾸만 error 타입은 unknown이야! 이런다.아니 unknown으로 했잖아 왜 그러는데! 하다가 ..
💥 문제 상황 getSlideComponent라는 함수로 screenWitdh에 따라 적절한 캐러셀을 보여주려고 한다. screenWidth가 1200 이하면 MO 버전으로, 그 이상이면 PC 버전의 캐러셀을 보여주려고 한다. const getSlideComponent = () => { if (screenWidth 1200) { return slidesPC; } }; slidesMO, slidesPC는 모두 string[] 타입을 갖고 있다. const slidesPC = [ `${import.meta.env.VITE_PUBLIC_URL}/src/assets/img/carousel/딸기_PC.jpg`, `${import.meta.env.VITE_PUBLIC_URL}/src/assets/img/carous..
들어가기 yarn + Vite + TS로 웹 개발 시 진행하는 절차를 기록하려고 한다. 최근까지 작업한 이세계 MBTI는 JS -> TS로 마이그레이션 한 거지, 처음부터 작업한 건 아니었다. 이번에 CSS 및 반응형 작업을 해보기 위해 갱규님과 작업을 새로 하게 되어 바로 TS로 진행하기로 했다. 대부분 TS 강의가 TS 문법 및 개념 설명에 그쳐서 실질적으로 웹 개발에 만날 여러 에러들이 기대된다 ^_^... 프로젝트 생성하기 Vite와 CRA에 대해서도 좀 더 스터디 해봐야겠지만, React 공식 문서에서 CRA가 빠진지 꽤 되었고 Vite가 훨씬 성능이 좋기 때문에 최근에는 Vite가 더 많이 사용되고 있다. 최근 개발 흐름이 Vite로 넘어가고 있어서 나도 공부해보고자 Vite를 써보고 있다. ..
타입 스크립트에서 외부 라이브러리 사용하기 JS를 사용할 때는 npmjs.com에서 바로 Installation 명령어에 따라 설치하기만 하면 됐지만 TS에서는 그렇게 할 수 없다. 코드 실행 전 타입 검사 기능을 시행하는데, 라이브러리 코드의 타입 검사도 수행한다. 따라서 라이브러리 코드의 타입 정보가 제공되지 않은 상황에서 타입 검사가 이뤄지지 않기에 오류가 발생한다. 단, 몇몇 라이브러리에서는 TS 아이콘(TS로 만들어짐)이 있는 것들은 원래 쓰던대로 바로 사용할 수 있다. DT 아이콘이 있는 경우 해당 아이콘을 누르면... 라이브러리 코드의 타입 정보를 갖고 있는 패키지를 추가로 설치해주면 된다. 이런 패키지를 Definitely Types라고 한다. **출처: 한 입 크기로 잘라먹는 타입스크립트..
타입스크립트 리액트 시작하기 npx create-react-app . npm i @types/node @types/react @types/react-dom @types/jest (타입스크립트 적용을 위해 타입 선언 패키지 추가) tsconfig.json 작성 target: TS 파일을 어떤 버전의 JS로 바꿔줄지 정하는 부분 module: JS 파일간 import 문법 구현 시 어떤 문법을 쓸지 정하는 부분 CommonJS는 require, ESM은 import 문법을 사용함 광범위한 호환성을 원할 때에는 ES5 & CommonJS로 설정 { "compilerOptions": { "target": "ES5", "module": "CommonJS", // react가 어디서든 잘 작동되게 ES5 & Com..
유틸리티 타입 제네릭, 맵드 타입, 조건부 타입 등 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 것 여러 가지 유틸리티 타입이 있다. (참고 링크) 맵드 타입 기반의 유틸리티 타입 1 : Partial, Required, Readonly Partial 특정 객체 타입의 모든 프로퍼티를 '선택적 프로퍼티'로 바꿔주는 타입 맵드 타입과 인덱스드 엑세스(참고 링크)를 활용해 구현할 수 있다. interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string; } // const draft: Post = { // title: '제목1', // content: '초안', // }; const dr..
조건부 타입 삼항연산자를 이용해 조건에 따라 타입을 결정한다. type A = number extends string ? string : number; // type A = number type ObjA = { a: number; }; type ObjB = { a: number; b: number; }; type B = ObjB extends ObjA ? number : string; // true (ObjA = 슈퍼) 제네릭과 조건부 타입 function removeSpaces(text: string | undefined | null) { if (typeof text === 'string') { return text.replaceAll(' ', ''); } else { return undefined; ..
