뉴히의 개발 로그

웹서비스를 만들때 종종 gif와 같은 움직이는 애니메이션을 넣고싶을때가 많다! 이때 간단한 애니메이션인데 전부 gif로 넣게되면 용량도 크고 퍼포먼스도 저하시키는 문제들이 생긴다. lottie는 이러한문제를 해결하면서 웹서비스를 예쁘게 꾸며줄수 있는 애니메이션을 사용할수있게 해준다!! Lottie란?Lottie는 After Effects 애니메이션을 JSON 파일로 변환해 웹/앱에서 가볍게 사용할 수 있도록 해주는 라이브러리이다.React에서도 쉽게 사용할 수 있다!! Lottie의 장점🎥 고퀄리티 애니메이션을 가벼운 JSON 파일로 제공해서 퍼포먼스에 부담이 적음🛠️ 코드로 세밀한 제어가 가능 (루프, 속도 조절, 특정 타이밍 이벤트 등)📱 반응형, 모바일 최적화도 편리하게 적용 가능🎨 Afte..

1. CRAnpx create-reat-app [프로젝트명]npx create-react-app [프로젝트명] --template typescript2. Vitenpm create vite@latest [프로젝트 명] npm create vite@latest [프로젝트 명] --template react-ts프로젝트 주요 파일과 폴더 구조public/: 정적 파일(HTML, 이미지 등)을 저장하는 폴더.src/: React 컴포넌트와 JavaScript 파일을 저장하는 폴더.package.json: 프로젝트의 메타데이터와 의존성을 관리하는 파일.├── public├── src│ ├── @types # 전역타입 정의│ ├── assets # 정적 자..

React-router-dom -> React Router v7React 프로젝트에서 라우팅을 쓸 때, react-router-dom을 당연하게 깔고 시작했었다., , 등 DOM 전용 라우팅 컴포넌트가 이미 준비되어 있다.뒤로가기 버튼이나 페이지 전환 시 전체 리프레시가 없으니 SPA스럽게 딱 좋다.위 두개의 이유만으로도 리액트로 SPA 웹사이트를 만드려면 React-Router-Dom 을 냅다 설치해왔던 것이다.💪 강해진 코어 의존성기존에는 아래와 같이 Link 태그를 불러와서 SPA 라우팅을 시켜주려면 당연히 너무나도 당연히 react-router-dom 에서 불러왔을 것이다.하지만 이제는 세상이 바뀌었다. 이제는 Link 태그를 포함 그동안 react-router-dom 에서 제공해주던 태그 및..

공식 문서 : https://chocolatey.org/install Installing ChocolateyChocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates w/SCCM, Puppet, Chef, etc. Chocolatey is trusted by businesses to manage software deployments.chocolatey.org 0. Chocolatey란?Chocolatey (약칭 Choco) : 윈도우에서 사용할 수 있는 커맨드 라인 패키지 매니저Lin..

https://wednesday1304.tistory.com/entry/Windows-%ED%8C%8C%EC%9D%BC-%EA%B2%BD%EB%A1%9C-%EA%B8%B8%EC%9D%B4-%EC%A0%9C%ED%95%9C-%ED%92%80%EA%B8%B0-260%EC%9E%90-%EC%9D%B4%EC%83%81-%EA%B2%BD%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0 [Windows] 파일 경로 길이 제한 풀기, 260자 이상 경로 만들기1. 경로 길이 제한을 푸는 이유 2. 경로 길이 제한 푸는 방법 2-1. 그룹 정책으로 경로 길이 제한 푸는 방법 2-2. 레지스트리 변경으로 경로 길이 제한 푸는 방법 2-3. PowerShell로 경로 길이 제한 푸는wednesday130..

amendgit commit --amend최근의 커밋메세지가 뜨면 수정 후esc > :wq 하고 종료 하면 수정완료또는git commit --amend -m "바꿀 커밋 메시지 내용"  rebasegit rebase -i HEAD~1최근 한개의 커밋볼땐 HEAD~1두개는 HEAD~2이런식 한개의 커밋 수정시1. i 를 눌러 입력모드로 전환2. 수정할 커밋에 있는 pick -> reword 로 변경3. esc 눌러 입력모드에 빠져나옴4. :wq 입력하여 엔터를 눌러 저장하고 종료 수정해야 할 커밋 내용이 나오며 똑같이 i -> 커밋메시지 수정 -> esc -> :wq -> enter 순으로 진행하면 정상적으로 커밋 메시지가 수정된다. git push --force origin [브랜치 이름]하면 끝 두개이..

Jest란?Jest는 페이스북에서 만든 JavaScript testing framework이다. config를 따로 설정하지 않아도 빠르게 테스팅 환경을 만들 수 있다는 것이 큰 장점이다. 2 장에서의 기본 개념과 코드는 코딩앙마님의 Jest 강의와 유데미의 JS 강의중 테스팅 모듈 파트를 참고하여 작성하였다.  1. Install Jestnpm install --save-dev jest개발자 도구이므로 개발환경에서만 사용할거기 때문에 --save-dev를 붙여 설치한다. 2. Test 실행package.json "scripts": { "test": "jest" },스크립트 test 부분을 'jest'로 변경해준다 3. 테스트 코드 작성 (파일 생성)파일명.test.js또는 __tests__ t..

1. Github에 리포지토리를 만들고 레포지토리에 넣을 여러 프로젝트중 하나의 프로젝트를 하나 올린다.부모 리포지토리에 들어갈 자식 리포지토리이다.git initgit add .git commit -m "커밋 메시지"git remote add origin "리포지토리 주소"git branch -M maingit push origin main2. 깃허브 새로운 레포지토리 생성여러 프로젝트를 담을 부모 리포지토리의 역할을 함.처음 한 번만 해주면 됨.3. 부모 레포지토리 clonegit clone [부모 리포지토리 주소] 이때 빈 리포지토리 를 clone 했기때문에빈 저장소를 복제한 것 처럼 보입니다 라고 경고가 뜰 수 있습니다. 무시 또는git commit --allow-empty -n -m "커밋메시지..