본문 바로가기

분류 전체보기

 (265)
[TypeScript] 'Window & typeof globalThis' 형식에 'Kakao' 속성이 없습니다. 'Window & typeof globalThis' 형식에 'Kakao' 속성이 없습니다. TypeScript로 카카오 공유를 구현시 다음과 같은 오류가 발생하였다. 기존 window에 없는 객체 값에 접근 할 경우, Typescript로 인해 window에 Kakao를 받을 속성 type이 정의되어 있지 않아 발생하는 에러이다. 해결 방법 Kakao Type을 설정해준다. src> react-app-env.d.ts 파일 생성 interface Window { Kakao: any } 오류 해결😀 [ React ] React, Typescript를 통해 카카오톡 메시지 플랫폼 API 이용해보기 카카오톡 메시지 플랫폼 API 이용해보기 💬 들어가며 사이드 프로젝트를 진행하면서 사용자 초대 링크를 카카오톡 공..
[TypeScript] 이미지 절대 경로 import 오류 TypeScript 에서 import naver from '@assets/images/naver.png';이렇게 했더니 찾을 수 없다는 에러가 났다. 이미 tsconfig.json에서 paths 로 절대경로 설정은 해둔 상황이다. JSX 에서는 되었는데 TSX로 바꾸니 오류가 났다. .png 확장자 허용이 되지 않아 타입스크립트에서 적용되지 않은 것이다. 해결방법 1. @types/global/index.d.ts 파일 생성 최상위 위치에서 @tpyes 폴더 생성 후 안에 global 폴더를 생성하고 그 안에 index.d.ts파일을 생성한다. 2. index.d.ts 파일 내용 작성 declare module '*.png'; declare module '*.gif'; 필요한 확장자를 모두 추가한다. 3...
typescript tsconfig.json 참고 사이트 https://www.typescriptlang.org/ko/docs/handbook/compiler-options.html Documentation - tsc CLI Options A very high-level overview of the CLI compiler options for tsc www.typescriptlang.org https://darrengwon.tistory.com/109 Typescript 사용 환경 설정, tsconfig의 속성들 Typescript는 js의 슈퍼셋이며 js로 transpile합니다. 동적 타입 언어인 js를 정적 타입 언어로 사용할 수 있게 됩니다. 물론 동적 언어로 발생할 수 있는 에러를 테스트 코드의 커버리지를 높이는 방식 darrengwon.tistory..
[React] 카카오 채널 추가 버튼 구현하기 (feat.TypeScript) kakao 채널추가 방법 2가지 1: 카카오에서 버튼 생성해주는 방법(알아서 이미지를 넣어주고 onClick안하고 처음 호출되어 작동됨) /kakao.Channel.createAddChannelButton 2: 직접 버튼 만들어서 onClick으로 적용 /kakao.Channel.addChannel *SDK는 불러온 상태 import { useEffect } from 'react'; export default function KakaoChannelBtn() { /* kakao 채널추가 방법 2가지 1: 카카오에서 버튼 생성해주는 방법(알아서 이미지를 넣어주고 onClick안하고 처음 호출되어 작동됨) /kakao.Channel.createAddChannelButton 2: 직접 버튼 만들어서 onClic..
[React] 자바스크립트 <script> 태그를 동적으로 불러오기 public폴더 의 index.html 파일의 바디태그 안의 하단에 를 추가해주면 해당 라이브러리를 적용할 수 있다. 하지만 이 방법을 사용할 경우, 자바스크립트를 항상 불러오기 때문에 필요한 컴포넌트에서만 선택적으로 불러올 수 없어 비효율이 발생한다. 따라서 React에서는 useEffect를 사용하여 동적으로 불러오는 방법을 사용할 수 있다. 아래 블로그 내용 중 전체코드 import { useEffect, useState } from "react"; function useScript(src) { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { let scrip..
[React] SNS 공유하기 구현 (feat.TypeScript) 링크를 상대방에게 SNS로 공유하는 기능을 구현하고 싶었다. 페이스북, 카카오, 네이버 공유하기 기능을 구현하려 한다. * 참고로 카카오톡은 개발자에서 허용한 도메인만 링크연결이 가능하며, 페이스북과 네이버는 localhost로 접근이 안돼서 (실제사이트가 아니기때문) naver링크로 연결해두었다. 페이스북 공유하기 예시로 작성한 링크는 아래와 같다. const link = 'https://www.naver.com/'; { window.open( `https://www.facebook.com/sharer/sharer.php?u=${link}`, '페이스북 공유하기', 'width=600,height=800,location=no,status=no,scrollbars=yes' //새창 뜨는 것 조절 (없어도..
[React] StoryBook 배포하는 방법 제작한 컴포넌트를 팀원들과 공유하기 위해 배포는 필수 https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community. storybook.js.org 준비해야 할 것 미리 작성한 컴포넌트 스토리 GitHub 연동 (로컬파일 깃허브와 연동해놓았는지) 배포 Tool Chromatic 1. 크로마틱(Chro..
[React] Story Book 사용법 파일구조 Button.tsx export interface ButtonProps { label?: string; size?: 'sm' | 'md' | 'lg'; backgroundColor?: string; color?: string; handleClick?: () => void; } export default function Button({ label, backgroundColor, size, color, handleClick, }: ButtonProps) { let scale = 1; if (size === 'sm') scale = 0.75; if (size === 'lg') scale = 1.5; const style = { backgroundColor, padding: `${scale * 0.5}..

티스토리툴바