일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 코드공유
- jQuery
- 렛츠기릿자바스크립트
- hooks
- 정보처리기사
- 웹디실기
- 슬라이드전환
- 세로메뉴바
- JS
- 웹디자인기능사
- git
- 깃
- CSS
- 코딩독학
- github
- 비전공자
- HTML
- 리액트
- 타입스크립트
- react
- 생활코딩
- JavaScript
- 웹퍼블리셔
- 연산자
- 프론트엔드
- web
- 자바스크립트
- 웹디자인기능사실기
- PROJECT
- 실기
- Today
- Total
목록2024/05 (3)
코딩하는라민
Vite import.meta TS Error : ImportMeta 형식에 env 속성이 없습니다. supabase 의 KEY 를 사용하던 중 env 타입 에러가 발생했다.ImportMeta 형식에 env 속성이 없다는 에러였다.찾아보니 이 문제를 해결하는 다양한 방법이 있었다. 하지만 내 프로젝트에서의 문제는 단순한 파일 경로 문제였다. 다양한 해결 방법들vite-env.d.ts`vite-env.d.ts` 파일에 ImportMeta 인터페이스를 정의한다./// interface ImportMetaEnv { readonly VITE_SUPABASE_KEY: string; readonly VITE_API_KEY: string;}interface ImportMeta { readonly env: I..
[React] 컴포넌트 최적화를 위한 React.memoReact.memo 란?`React.memo` 는 고차컴포넌트(HOC)로 컴포넌트 자체를 `메모이제이션`한다.컴포넌트의 props 가 바뀌지 않은 경우, 리렌더링을 방지해 컴포넌트의 성능을 향상시킬 수 있다. 컴포넌트의 props 가 변한다면 다시 리렌더링된다. 사용방법사용 방법은 간단하다. 리렌더링을 막고자 하는 컴포넌트를 `memo` 로 감싸주면 된다.props 가 없는 컴포넌트도 사용이 가능하다.import { memo } from 'react'function MyComponent(props) { return ( {props.title} {props.content} )}export default memo(My..
[React] useModal Hook 여러 개의 모달 관리하기 useModal Hook 이란?`useModal` hook 은 React 에서 모달을 간편하게 관리하기 위한 방법이다.useModal hook 을 통해 열기, 닫기 상태와 같은 모달과 관련된 로직을 모듈화해서 재사용할 수 있다. 왜 커스텀 훅을 만들어서 사용할까?모달을 사용할 때 모달을 열고 닫기 위해 `isOpen` 라는 state 를 사용한다.하지만 여러 페이지에서 모달을 사용할 경우 각 컴포넌트마다 isOpen 을 매번 선언해줘야한다.import { useState } from "react"import LoginModal from "@/components/modalsLoginModal"const Home = () => { const ..