Vite 사용 이유Vite 란 무엇일까? Vite빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정을 제공[출처] Vite 공식 문서 ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev Create-React-App 단점우리가 기본적으로 React 프로젝트를 만들 때, Create-React-App(일명 CRA)를 사용한다.CRA에는 다음과 같은 단점들이 있다. 1. node_modules 용량 큼CRA로 만든 프로젝트에는 node_modul..

예쁜 폰트를 다운로드 받아서 내 React 프로젝트에 적용하는 방법을 알아 볼 것이다. 폰트 다운로드 받기폰트를 다운로드 받을 수 있는 사이트에서 폰트를 다운로드 받는다.나는 예쁜 한글 폰트가 많은 눈누 라는 사이트를 이용하였고, 원하는 폰트를 찾아 다운로드한다. 폰트 설정하기다운로드 받은 폰트를 내 프로젝트에 src/fonts 에 넣어준다.이 폰트들을 적용시키기 위해 @font-face 를 사용한다.@font-face웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있게 함index.css 에서 폰트를 사용할 폰트의 이름을 정의하고, 해당 폰트의 위치를 설정해준다.@font-face { font-family: 'PyeongChang'; /* 사용할 폰트의 이름을 정의 */ src:..

시작하기 앞서...React 에서 CSS 를 사용하여 움직이는 물결 애니메이션을 만들 것이다. 컴포넌트 만들기물결 3개를 만들기 위해 3개의 요소를 만들고,wave 라는 class 를 공통으로 가지면서 서로 다른 스타일링을 위해 각각 -one, -two, -three 를 가진다.import '../App.css'function WaveComponent() { return ( );}export default WaveComponent; CSS 설정물결 애니메이션을 만드는 원리는 아래처럼 생긴 요소를 애니메이션을 적용시키고 일부만 화면에 보여주어 물결이 움직이는 것 처럼 보여준다. wave 스타일요소들이 겹쳐 있기 때문에 postion 을 absolute 로 ..

지난 게시물에서 Firebase 를 사용하여 회원가입하는 것을 구현하였다. 그러면 로그인은 어떻게 하면 될까? Firebase 세팅 방법은 아래에 있는 게시물을 확인하면 된다. [React] 리액트 Firebase Authentication 회원가입 프론트엔드 구현으로만 회원가입, 로그인 기능을 구현하기 어렵다. 그러나 Firebase 의 Authentication 을 사용하여 손쉽게 회원 정보를 저장하고 관리할 수 있게 도와준다. 파이어베이스 세팅 파이어 jjang-j.tistory.com 로그인 하기 모듈 가져오기 Firebase의 Authentication 모듈에서 현재 Firebase 앱의 인증 객체를 가져오는 getAuth 이메일과 비밀번호로 로그인하는 signInWithEmailAndPassw..

프론트엔드 구현으로만 회원가입, 로그인 기능을 구현하기 어렵다.그러나 Firebase 의 Authentication 을 사용하여 손쉽게 회원 정보를 저장하고 관리할 수 있게 도와준다. 파이어베이스 세팅파이어베이스를 리액트 프로젝트에 적용시키기 위해 세팅을 해야 한다. 프로젝트 만들기아래 링크를 클릭하여 Firebase 에 들어가 회원가입과 로그인을 한다. Firebase | Google’s Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.com그리고 프로젝트 추가 버튼을 클릭하여 원하는 이름의 프로젝트를 생성한다...

React 에서 회원가입 기능을 구현하기 위해서입력받은 내용이 필수적으로 입력해야 되고, 글자 수는 몇 자 이상&몇 자 이하, 입력 패턴 등을 고려해야 한다. React 에서 회원가입이나 로그인 등 입력해야 되는 form 을 구현할 때,React Hook Form 을 사용하면 이를 간편하게 구현할 수 있다. React-Hook-Form 세팅설치하기React Hook Form 을 설치하기 위해 터미널 창에 명령어를 입력해 준다. npm install react-hook-form  useFormReact Hook Form 을 사용하기 위해Form 기능을 관리하고 제어하는 hook 인 useForm 을 사용한다. useForm 의 반환 값들은 다음과 같이 register, handleSubmit, watch..

React-Router-Dom 페이지 이동React 프로젝트를 만들면 기본적으로 App.js 파일이 생기고해당 파일에서 원하는 코드를 입력하여 화면을 그려내고 작동시킨다. 그런데 웹 사이트를 보면 페이지가 한 개만 있는 것이 아니라 여러 페이지가 있다.그래서 여러 페이지를 만들고, 해당 페이지로 이동하기 위해서React-Router-Dom 을 사용한다.이는 a 태그와 달리 새로고침 없이 페이지를 전환시켜 준다. Routing 이란?사용자가 요청한 링크 주소에 맞게 페이지를 찾아서 보여주는 것 React-Router-Dom 세팅설치하기react-router-dom 을 설치하기 위해 터미널 창에 본인이 사용하는 패키지 매니저에 따라 명령어를 입력해 준다.npmnpm install react-router-do..