Code Monkey home page Code Monkey logo

vite-project's Introduction

vite를 이용한 포트폴리오 사이트 만들기

미리보기

https://lee-vite-project.netlify.app/

vite를 사용하는 이유

Vite는 JavaScript 애플리케이션을 개발하고 위한 빠르고 경량화된 도구입니다. Vite는 빠른 개발 속도, ES 모듈 사용, 다중 언어 지원, 플러그인 확장, Vue.js 및 React 지원, 테스트 환경, 코드 스플릿팅, 간단한 설정으로 인해 인기 있는 JavaScript 개발 도구입니다. vite

  1. 빠른 개발 속도: Vite는 빠른 개발 속도를 제공합니다. 개발 서버가 모듈 기반 빌드를 지원하며, 코드 변경이 발생할 때 필요한 모듈만 다시 빌드하므로 개발 환경에서 빠른 리로드를 가능하게 합니다.

  2. ES 모듈 사용: Vite는 기본적으로 ES 모듈(ESM)을 사용하며, 이는 브라우저에서 모듈을 로딩할 때 사용되는 표준 방법입니다. 이를 통해 모듈을 더 효과적으로 관리하고 코드 번들의 크기를 줄일 수 있습니다.

  3. 다중 언어 지원: Vite는 다양한 언어(JavaScript, TypeScript, CSS, JSON, HTML 등)를 지원하며, 이러한 언어들을 하나의 애플리케이션에서 함께 사용하는 것이 쉽습니다.

  4. 플러그인 생태계: Vite는 다양한 플러그인을 지원하며, 이를 통해 프로젝트에 필요한 기능을 확장할 수 있습니다. 예를 들어, CSS 전처리기 지원, 이미지 최적화, 번들 최적화 등을 플러그인으로 추가할 수 있습니다.

  5. Vue.js 및 React 지원: Vite는 Vue.js와 React와 같은 인기 있는 프론트엔드 프레임워크를 지원하며, 이러한 프레임워크와 함께 사용할 때 뛰어난 성능을 제공합니다.

  6. 테스트 환경: Vite는 테스트 환경을 지원하며, Jest, Mocha, 등 다양한 테스트 러너와 통합할 수 있습니다.

  7. 코드 스플릿팅: Vite는 코드를 자동으로 스플릿팅하여 페이지 로딩 시간을 최소화하고 초기 번들 크기를 줄일 수 있습니다.

  8. 가볍고 간단한 설정: Vite는 간단한 설정 파일을 가지고 있으며, 초기 설정을 빠르게 구성할 수 있습니다.

구현 기능

  • 구글 폰트 적용
  • smooth 효과 적용 https://lenis.studiofreight.com/
  • 자바스크립트 메뉴 클릭 이동 효과 적용
  • GSAP를 이용한 가로 효과
  • JavaScript 모듈 기능 적용
  • 웹표준 준수를 위한 스킵 메뉴 및 aria, role 적용
  • vite 빌드 작업 npm run build
  • netlify 배포 작업

트러블 슈팅

git 업로드 버그 권한으로 인한 업로드 버그 현상이 생김 > 해결
- git 업로드 설정 :
1. The requested URL returned error: 403 Pushing to ... 에러 내용
2. git remote -v
3. git remote set-url origin https://[Your-Name]@github.com/[Your-Name][repo-name].git
예제. git remote set-url origin https://[email protected]/L-jy16/vite-project.git
4. git remote -v https://[Your-Name]@github.com/[Your-Name][repo-name].git 나의 리스트가 뜨는지 확인
5. git push -u origin master
6. 패스워드 입력하라는창이 나오면 패스워드 입력
7. VS code 재시작하고 다시 push하기

vite-project's People

Contributors

l-jy16 avatar jeong202 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.