본문 바로가기
반응형

📍 Front-End/🜸 TypeScript9

자바스크립트(타입스크립트)에서 숫자 세자리(천단위)마다 콤마 찍기 자주 쓰면서 왜 자꾸 까먹는걸까 export function formatNumberWithCommas(price: number) { return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } 2023. 1. 12.
Typescript 타입스크립트 에러 Object is possibly 'null' 에러 useEffect(() => { const container = document.querySelector('.container'); container.addEventListener('scroll', listener); return () => { container.removeEventListener('scroll', listener); }; }); 대충 이런 상황에서 container 변수에 빨간 줄이 뜨면서 object is possibly 'null'이라는 에러가 출력됐다 원인 개발하는 입장에서 저 container에 dom이 들어간다고 확신하지만, 타입 스크립트 입장에서는 아닌가 보다,,ㅎ null값이 들어갈 수도 있다고 판단이 되어 뜨는 오류! 해결 옵셔널 체인징을 이용하자! useEffect.. 2022. 11. 22.
[Typescript] 타입스크립트에서 json 파일 import 안될 때 문제 다국어 지원을 위해 react-i18n을 쓰는데 설정을 해주는 과정에서 json 형태의 언어팩을 불러오지 못하는 이슈가 있었다 역시나 친절하게 해결방법을 알려준다 원인 tsconfig 파일에서 resolveJsonModule이 설정되어 있지 않았다 해결 tsconfig 파일로 가보자! esModuleInterop과 moduleResolution은 잘 설정되어 있었는데 resolveJsonModule 설정이 없어서 추가했다 참고로 resolveJsonModule 옵션을 사용하기 위해서 esModuleInterop과 moduleResolution 설정은 필수다! { "compilerOptions": { // code "esModuleInterop": true, // ES6 모듈 사양을 준수하여 Comm.. 2022. 6. 12.
[React/Typescript] styled-components로 global style 적용하기 1. 패키지 설치 타입스크립트 이용 시 @types/styled-components도 설치해주세요 yarn add styled-components yarn add -D @types/styled-components 2. global style 파일 생성 저는 루트(/src)디렉토리 하위에 style이라는 폴더를 생성하고 globalStyle.ts라는 파일에 아래 코드를 작성했습니다 import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` // 초기화 코드 `; export default GlobalStyle; 3. global style 적용 index.ts 파일로 돌아와서 global style.. 2022. 6. 10.
반응형