[WIL] 내배캠4기 React 12주차

잘가요 소중한 연휴....

d.ts

타입스크립트 공부를 시작하며 모르고 넘어가기만 했던 d.ts 파일에 대해 알게 되었다.

• d.ts 선언 파일
  https://joshua1988.github.io/ts/usage/declaration.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%84%A0%EC%96%B8-%ED%8C%8C%EC%9D%BC

색상 팔레트에 적용하기

팀장님이 만든 보일러플레이트로 예시를 들어보자.

//styled.d.ts
import 'styled-components';
declare module 'styled-components' {
  export interface DefaultTheme {
    colors: {
      brandRed: string;
      brandYellow: string;
      brand100: string;
      brand50: string;
      brand0: string;
      black100: string;
      ...

styled.d.ts에서 선언한 interface를 import 해온다.

//theme.ts
import { DefaultTheme } from 'styled-components';
enum Colors {
  'BRAND-RED' = '#ED707C',
  'BRAND-YELLOW' = '#FFEB3B',
  'BRAND100' = '#673AB7',
  'BRAND50' = '#8B71FF',
  'BRAND0' = '#ABA4E9',
  'BLACK100' = '#212529',
  ...

👉🏻 색상팔레트를 변수로 할당하여 써줄거기 때문에 객체로 만들어준다.

const theme: DefaultTheme = {
  colors: {
    brandRed: Colors['BRAND-RED'],
    brandYellow: Colors['BRAND-YELLOW'],
    brand100: Colors.BRAND100,
    brand50: Colors.BRAND50,
    brand0: Colors.BRAND0,
    black100: Colors.BLACK100,
   ...

👉🏻 d.ts 파일의 DefaultTheme을 type으로 선언해주고 그대로 써주면된다.

export { theme };

👉🏻 export 해준다.

//App.tsx
 <ThemeProvider theme={theme}>
 ...
</ThemeProvider>

👉🏻 ThemeProvider에 props로 넘겨주면 완료.

color: ${(props) => props.theme.colors.brand0};

👉🏻 자동완성과 휴먼에러, 유지보수가 쉬워진다!!

카카오 맵 API

프로젝트에서 메인페이지에 카카오맵을 깔고, 마커를 찍는 등의 파트를 맡았다.
카카오 맵은 리액트보다 바닐라 자바스크립트에 특화된 api 인 것 같다.
마커 정보가 뜨는 인포윈도우나, 커스텀 오버레이에 기존에 만들어둔 ui 컴포넌트를 쓰고 싶었는데,

카카오 API 샘플

// 커스텀 오버레이에 표시할 내용입니다     
// HTML 문자열 또는 Dom Element 입니다 
var content = '<div class ="label"><span class="left"></span><span class="center">카카오!</span><span class="right"></span></div>';

이렇게 HTML 문자열 또는 Dom Element로만 가능하다고 한다.. 코딩 만렙이 아닌 나는 식은땀이 나기 시작한다..

react-kakao-maps-sdk

찾아보니 나와 같은 경우로 골머리를 앓는 사람이 꽤 있었다.
컴포넌트, ts활용 등 리액트 개발환경에 찰떡으로 만들어진 라이브러리도 찾았다. 오피셜이 아니라 여러 이슈가 발생할 수 있다고 카카오 qa 커뮤에는 써있었지만,, 셋업이 편리하고 무엇보다 컴포넌트 활용면에서 굿이었다.🥹
https://react-kakao-maps-sdk.jaeseokim.dev/

카카오 맵 API 참고블로그들

https://gingerkang.tistory.com/68 : 기본 셋업이 친절하게 정리되어 있음

https://notlonely.tistory.com/105 : 추후 프로젝트 디벨롭시 필요한 내용일 것 같음

https://velog.io/@support/React-카카오-지도-API-주소-검색 : 생각보다 라이브러리 관련 예시가 없었는데 오아시스를 만난 기분이었음..

타입스크립트 as 키워드

에러
String | number 형식은 'number' 형식에 할당할 수 없습니다.
👉🏻 as unknown as number로 해결

참고블로그 : https://velog.io/@win/타입스크립트-에러-string-undefined-형식의-인수는-number-형식의-매개-변수에-할당될-수-없습니다