React는 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 개발하는 데 사용되는 매우 인기있는 도구입니다. React는 Facebook에서 개발되었으며, 웹 애플리케이션의 사용자 인터페이스를 구축하고 관리하기 위한 컴포넌트 기반 아키텍처를 제공합니다.
- 리액트 설치
- git에 업로드
- lenis 사이트
- firebase 사이트
- react 설치
npx create-react-app 프로젝트 이름 - gsap 설치
npm i gsap - sass 설치
npm i sass - lenis 설치
npm i @studio-freight/lenis - react-router-dom 설치
npm i react-router-dom
Firebase는 Google에서 제공하는 클라우드 기반 백엔드 서비스 및 개발 플랫폼으로, 모바일 및 웹 애플리케이션을 빠르게 개발하고 호스팅하며, 실시간 데이터베이스, 사용자 인증, 파일 스토리지, 호스팅 및 다양한 개발 도구를 제공합니다. Firebase는 개발자가 서버 관리 및 백엔드 인프라 구축에 대한 걱정 없이 애플리케이션 개발에 집중할 수 있도록 도와줍니다. firebase 사이트
- 프로젝트 생성
npm install -g firebase-toolsfirebase login(vs에서 오류나면 터미널로)firebase init(FIREBASE 문구/본인 이메일 확인)Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys(선택 : 스페이스키 / 확인 : 엔터)- Please select an option:
Use an existing project - What do you want to use as your public directory?
build - 다음 질문 연속 No 선택
firebase deploy- 호스팅 생성 완료
Hosting URL: https://react-project2023-uzin.web.app미리보기
GSAP(그린 소켓 애니메이션 플랫폼, GreenSock Animation Platform)은 웹 애니메이션을 만들고 제어하기 위한 강력한 JavaScript 라이브러리입니다. GSAP은 HTML, CSS 및 SVG와 같은 웹 기술을 사용하여 다양한 유형의 애니메이션을 만들 수 있도록 도와주며, 웹 페이지나 웹 애플리케이션의 인터랙션을 개선하는 데 사용됩니다.
lenis.js는 JavaScript에서 사용되는 오픈 소스 라이브러리입니다. 이 라이브러리는 문자열 처리와 관련된 다양한 유틸리티 기능을 제공합니다. lenis.js를 사용하면 문자열의 길이, 대소문자 변환, 문자열 분리, 검색 등 다양한 작업을 간편하게 수행할 수 있습니다.
lenis.js는 간단하고 직관적인 API를 제공하여 개발자가 빠르게 문자열 작업을 수행할 수 있도록 도와줍니다. 또한 다양한 유틸리티 함수를 제공하기 때문에, 개발자는 반복적이고 번거로운 작업을 간소화할 수 있습니다.
Whitespace 에러
유닉스 시스템에서는 한 줄의 끝이 LF(Line Feed)로 이루어지는 반면, 윈도우에서는 줄 하나가 CR(Carriage Return)와 LF(Line Feed), 즉 CRLF로 이루어지는데 Git이 이 둘 중 어느 쪽을 선택할지 혼란이 온 것이다 !해결방법
git config --global core.autocrlf true // 시스템 전체에 적용
git config core.autocrlf true // 해당 프로젝트에만 적용