[TIL] 221226-30

• [프로그래머스] Lv.1 크기가 작은 부분 문자열 1문제 완료
• [백준] 문자열 3문제(단어 공부, 상수, 다이얼) 완료
• vite 플젝 생성해보기
• 221226 24:00~02:30 플젝 회의
  • eslint, prettier 설정, 디자인 회의
• 221227 21:00~24:00 코딩테스트
• React, typeScript 기반 사전과제

🚨 Error Handling

💫 Module '".svg"' has no exported member 'ReactComponent'.

🔗 TypeScript - Module '"*.svg"' has no exported member 'ReactComponent

아래와 같이 types 폴더에 image.d.ts 파일을 설정해주니까 이 에러는 해결이 되었는데 다른 에러가 등장..

// image.d.ts

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

💫 Uncaught SyntaxError: The requested module '~' does not provide an export named 'ReactComponent'.

vite 환경에서 svg 이미지 파일을 사용하려면 vite-plugin-svgr 설치하고 vite.config.ts - plugins에 svgr()를 추가해주면 에러 해결~!

🔗 Unable to import SVG with Vite as ReactComponent

yarn add -D vite-plugin-svgr

// vite.config.ts
import svgr from 'vite-plugin-svgr';

plugins: [react(), svgr()]

🧚 새롭게 알게 된 내용

💫 vite

🔗 Vite 공식 문서

# npm 7+ verson -> '--' 붙여주기
npm create vite@latest [project_name] -- --template react-ts
npm i
npm run dev

💫 box-sizing

/* padding, margin size도 width, height에 포함되도록 설정 */
box-sizing: border-box; 

💫 박스 내 내용 넘칠 때 내용 생략하기

🔗 [HTML/CSS] 텍스트가 넘칠 때 생략하는 방법 (... 말줄임 표시)

overflow: hidden; // 박스를 벗어나는 텍스트 숨기기
text-overflow: ellipsis; // 텍스트가 박스를 벗어날 때 말줄임(...) 적용
display: -webkit-box;
-webkit-line-clamp: 2; // 표시할 텍스트 최대 라인 수
-webkit-box-orient: vertical;