리액트 설치가 안 돼요 or 안 열려요 해결 방법

$ npm create vite@latest my-project> npx> create-vite my-projectnpm error code ENOENTnpm error syscall spawn C:\Program Files\nodejs\node.exenpm error path C:\Users\hyol1\Desktop\testtestnpm error errno -4058npm error enoent spawn C:\Program Files\nodejs\node.exe ENOENTnpm error enoent This is related to npm not being able to find a file.npm error enoentnpm error A complete log of this run can b..

• format_list_bulleted TIL
• · 2025. 1. 24.
• textsms

24. 08. 29 TIL

TypeScript 소개 - 정의: JavaScript의 상위집합 언어로, 정적 타입 시스템 추가 - 장점:    - 컴파일 시 타입 오류 발견 가능   - 대규모 프로젝트에 적합   - 향상된 개발 경험 (코드 완성, 타입 검사 등) TypeScript 동작 원리 - 컴파일 과정: TS 코드 분석 → JS 코드로 변환 → 타입 검사 - 주요 단계: 파일 로드, 코드 분석, 심볼 테이블 생성, JS 변환, 타입 검사 ## 요약 - TypeScript는 JavaScript에 타입 시스템을 추가한 언어 - 컴파일 시 타입 체크를 통해 안정성 향상 - React와 함께 사용 시, 컴포넌트 props에 타입 지정 가능 - Vite를 이용해 쉽게 React + TypeScript 프로젝트 설정 가능 타입 정의= ..

• format_list_bulleted TIL
• · 2024. 8. 29.
• textsms

24. 08. 19 TIL

뿅 튀어나오는 거import React from 'react';import Scroll from '../Scroll';import Card from './Card';import { SiNaver } from 'react-icons/si';import { IoLogoGithub } from 'react-icons/io';import Link from 'next/link';const member = [ { imgSrc: ' icon: ( ), }, { imgSrc: '/', name: '', tasks: ' icon: ( ), }, { imgSrc: '', name: '', tasks: '', icon: ( )..

• format_list_bulleted TIL
• · 2024. 8. 19.
• textsms

24. 08. 20 TIL

'use client';import { motion, useScroll, useSpring, useTransform, useMotionValue, useVelocity, useAnimationFrame,} from 'framer-motion';import { useRef } from 'react';import { wrap } from '@motionone/utils';interface ParallaxProps { children: string | React.ReactNode; baseVelocity: number;}function MainText({ children, baseVelocity = 100 }: ParallaxProps) { const baseX = useMotionValue..

• format_list_bulleted TIL
• · 2024. 8. 19.
• textsms

24. 08. 16 TIL

클로저클로저는 그 함수가 끝난 후에도 그 함수 안에서 사용했던 변수들을 기억하고 계속 사용할 수 있게 해주는 기능입니다. 원래는 함수가 끝나면 변수들도 같이 사라지지만, 클로저를 사용하면 함수 밖에서도 그 변수를 계속 사용할 수 있게 됩니다. 이를 통해 데이터 은닉화가 가능하지만, 잘못 사용하면 메모리 누수가 발생할 수 있습니다. 프로미스자바스크립트에서 비동기 작업을 처리할 때 사용하는 객체입니다. 작업이 성공하면  then으로 결과를 받고 실패하면 catch로 에러를 처리합니다. 프로미스는 비동기 작업이 완료될 때까지 기다렸다가 결과를 한 번만 반환하는 약속이라 할 수 있습니다. next js를 사용하면 좋은 이유next js는 서버 사이드 렌더링과 정적 사이트 생성을 지원해 빠르고 seo 친화적인 웹..

• format_list_bulleted TIL
• · 2024. 8. 16.
• textsms

24. 08. 14 TIL

우리여기까진좋앗잖아... 하지만 폼을 수정해야 했다... 체크박스 아이콘을 따로 사용해야 했기 때문,.. 그 체크박스 컴포넌트는 원래 onChange 하나만 받고체크 박스의 체크 상태를 관리하는 useState와 hover가 되었는지 여부를 관리하는 useState 2개만 있었다 그래서 사용자가 체크박스를 클릭하면 함수가 호출되어현재 체크 상태를 반전시키고 새로운 상태를 onChange 함수를 통해 부모 컴포넌트에 전달했다더보기더보기부모 컴포넌트는 자식 컴포넌트에게 프롭스를 통해 데이터 전달,자식 컴포넌트는 부모 컴포넌트에게 데이터를 전달하기 위해 부모 컴포넌트로부터 받은 함수를 호출하면데이터가 부모 컴포넌트로 전달됨이제 코드 수정... 일단 기존 코드와 비교해보자면const handleSelectAll..

• format_list_bulleted TIL
• · 2024. 8. 14.
• textsms