본문 바로가기

👩‍💻 개발 공부

(23)

[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 웹 ..

[Git] 깃허브 빌드 X 표시 / 빌드 실패 / All checks have failed 프로젝트 배포 후 git action을 추가한 뒤, 계속 github상에서 빌드가 잘 되다가 갑자기 연동이 안될때가 있었다. 일단 깃허브 레포지토리 메인에서 저 commits 버튼을 눌러서 커밋 리스트로 들어가자. 저 X표시를 누르면 이런 팝업이 뜬다. Details를 눌러서 자세히 보도록 하자. 그러면 아래와 같이 Build 실패 요인이 비교적 자세하게 나온다. 이걸 꼼꼼히!!! 읽어보고 원인을 찾아야 한다. 나의 경우에는 Swiper 경로 문제였다. 수정해주고 push하니 바로 체크 표시가 뜸 npm start 시 아무 문제가 없었다고 하더라도 이처럼 빌드 실패 가능성이 있으니 배포된 페이지가 연동이 되지 않는다면 깃허브를 확인할 것!

[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] 검색 시 자동 렌더링 안될때/ 자동 새로고침/ 강제 렌더링/ location reload 문제 원래는 Header에 있는 검색창에 검색을 위한 input 데이터(키워드) 입력 후 엔터 or 검색 버튼을 누르면 -> Search Page로 넘어가서 api url의 검색 결과 리스트를 보여줌. 근데 Search Page에서 재검색을 하면 url은 바뀌는데 자동으로 검색 결과가 바뀌진 않음! 내가 직접 새로고침을 해줘야 바뀐 결과가 나왔다. 해결 자동으로 새로고침하는 방법 페이지 이동 이벤트 함수 내에 window.location.reload()를 추가한다! 그럼 검색어를 입력하고 엔터 or 검색버튼을 누르는 행위를 할 때, 바로 새로고침이 되면서 새로운 검색결과가 반영된 페이지가 나오게 된다. 끝

[Git] github 자주 쓰는 명령어 모음 : status, add, commit, push, checkout, restore, pull, remote, vi, reset ... 변경 상태 확인하기 $ git status 모든 변경사항 스테이징 (원격저장소에 업로드) $ git add . 스테이징 취소 (add 취소) $ git reset HEAD 파일명.js 커밋 (스테이징된 변경사항을 로컬저장소에 업로드) $ git commit -m "my commit" 가장 최근 커밋을 취소하기 $ git reset HEAD^ 커밋 메시지 수정 $ git commit --amend -m "메시지 수정" 푸시 (로컬저장소 내용을 깃허브에 업로드) $ git push origin main(or master or branch name...) 풀 (깃허브 내용 다운로드 받기) $ git pull origin main(or master or branch name...) (git add 전) 수정한..

[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 컴..

이전 1 2 3 다음

728x90

티스토리툴바