본문 바로가기

react

 (10)
[Chrome Extension] ☃️"붕어빵 스테이션" 크롬 확장 프로그램 개발 기록 "북마크가 너무 많은데 쉽게 관리할 수 없을까?" 라는 아이디어로 토이 프로젝트를 시작했고,며칠 동안 개발을 진행해보았습니다.사용한 툴은 React js, Chrome bookmark API 등입니다. 이라는 크롬 브라우저 시작화면 대시보드를 개발하였고,이번주에 버전 1.0 배포가 완료되었습니다. (개발기간 약 3~5일) 아래 링크에서 다운받으실 수 있습니다. https://chromewebstore.google.com/detail/%EB%B6%95%EC%96%B4%EB%B9%B5-%EC%8A%A4%ED%85%8C%EC%9D%B4%EC%85%98-chrome-dashboard/ecpkcgdaahhpdlanhdobigdkadgmedna 붕어빵 스테이션 - Chrome Dashboard - Chrome 웹 ..
[React/Typescript] TS2307: Cannot find module 'swiper' or its corresponding type declarations. 기존 프로젝트에 슬라이더를 만드려고 시도. swiper 써야되는데 자꾸 에러가 났다 Error : TS2307: Cannot find module 'swiper' or its corresponding type declarations. 해결 방법 1. npm i @types/swiper 설치 2. tsconfig.json 파일에 types를 추가한다. { "compilerOptions": { "types": ["react-transition-group"], // 이거 추가하니 에러가 사라짐 ... } }
[React] Swiper Effect 정리 - Cards, Coverflow, Creative, Cube, Fade, Flip 알고리즘 떄문에 개발유튜브 보다가 swiper가 뜨길래 봤는데, 재미있어보이길래 포트폴리오를 만드는 중이다 사용해보다가 전환효과 (effect)의 종류별로 뭐가 다른건지 궁금했는데, 한번에 다 비교해놓은 글이 없길래 그냥 내가 하나씩 해봤다. 자세히 보고 싶은 분들은 공홈의 데모를 보셔도 된다 https://swiperjs.com/demos#effect-fade Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Effect에는 cards, coverflow, creative, cube, fade, f..
[React/Typescript] 화면 전환 효과 / 페이드인 애니메이션 / Fade 컴포넌트 종설 개발 중에 화면 전환 효과가 있으면 좋을 것 같아 넣어본 fade 효과 컴포넌트입니다. duration 변수로 fade in 시간 조절 가능하고, 전환 애니메이션 상태 속성은 아래 참고. entering: 컴포넌트가 화면에 진입하는 애니메이션을 수행 중인 상태를 나타냅니다. entered: 컴포넌트가 화면에 완전히 진입한 상태를 나타냅니다. exiting: 컴포넌트가 화면에서 사라지는 애니메이션을 수행 중인 상태를 나타냅니다. exited: 컴포넌트가 화면에서 완전히 사라진 상태를 나타냅니다. 혹시 나중에 써먹을 일 생길까봐 & 필요하신 분 있을까봐 공유! 아 참고로 react에서 transition 쓰려면 설치 먼저 해줘야한다. Javascript : npm install react-transit..
[React/Typescript] error 'TransitionStatus' 형식의 식을 ~ 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. 'TransitionStatus' 형식의 식을 '{ entering: { opacity: number; }; entered: { opacity: number; }; exiting: { opacity: number; }; exited: { opacity: number; }; }' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. '{ entering: { opacity: number; }; entered: { opacity: number; }; exiting: { opacity: number; }; exited: { opacity: number; }; }' 형식에 'unmounted' 속성이 없습니다.ts(7053) 페이지 전환 시 페이드인/페이드아웃 효과를 주는 Fade 컴..
[React] Movie App 만들기 (개인 프로젝트) - 4 John Ahn님의 인프런 강의를 따라가면서 진행중입니다. 개인 공부 용도로 기록합니다. 문제 시 삭제 https://xxilliant.tistory.com/76 [React] Movie App 만들기 (개인 프로젝트) - 3 John Ahn님의 인프런 강의를 따라가면서 진행중입니다. 개인 공부 용도로 기록합니다. 문제 시 삭제 https://xxilliant.tistory.com/75 [React] Movie App 만들기 (개인 프로젝트) - 2 John Ahn님의 인프런 강의를 따 xxilliant.tistory.com 1. 진행 사항 (현 포스팅 기준) (1) 영화 세부정보 데이터를 가져와서, 서브페이지에 띄우고 출연진 사진 보여주기 (2) 좋아요 버튼 만들기 2. 배운 내용들 (1) fetch ..
[React] error:0308010C:digital envelope routines::unsupported error:0308010C:digital envelope routines::unsupported 며칠전까지 잘 돌아가던 npm start.. 오늘 갑자기 크롬에서 Localhost 3000 ERR_CONNECTION_REFUSED 에러가 떴음 뭔일인가 하고 터미널을 봤더니 아래와 같은 에러가 떠있었다. error:0308010C:digital envelope routines::unsupported 구글링해보니 노드 버전 때문에 발생하는 에러라고 하는데, node js를 다운그레이드해줘야 했다 나는 현재 설치된 버전이 lts 18 버전인데, 16버전으로 낮추면 해결된다고 함 1. 현재 버전 확인 node -v 2. 캐시 삭제 sudo npm cache clean --force 3. n 플러그인 설치 (없으..
[React] TypeError: Cannot read properties of undefined (reading 'prototype') 리액트 프로젝트 도중 이상한 에러가 떴다. 찾아보니 vs code 자동완성으로 아래 코드가 들어가있었는데, 이 코드가 문제였음 import { response } from "express"; 이 친구를 지워주니 에러가 싹 사라졌다. 편-안
728x90

티스토리툴바