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

+) 팀 프로젝트에서 ESLint & Prettier 적용한 내용 https://jjang-j.tistory.com/129 프로젝트 초기 세팅 (with 템플릿, eslint, prettier, commitLint, tailwind)시작하며...이번 프로젝트에서 프로젝트 초기 세팅을 하게 되었는데 초기 세팅을 진행한 순서와 방법에 대해 글을 작성하려고 한다. 1. 템플릿 만들기가장 먼저 깃허브 이슈와 Pull Requset 템플릿jjang-j.tistory.com 시작하며...팀 프로젝트를 하다보면, 사람마다 코드 스타일이 다른 경우가 발생한다.그래서 코드의 규칙을 설정하여 일관성을 맞춰주기 위해 eslint 와 prettier 를 사용한다. 실제로 나도 팀프로젝트를 진행하면서 eslint 와 prett..

[React] TanStack Query(리액트 쿼리) V5☘️ 시작하며... 내 블로그에 [React] 리액트 쿼리(React-Query) 사용 방법 이런 게시물이 있다. 그리고 당시 했던 프로젝트를 보니깐 React Query 의 버전이 3이었다. 그러나 현재 V5 까지 있으며, React 이jjang-j.tistory.com현재 게시물보다 위에 게시물 추천  시작하며...지난 동아리 프로젝트때 React-Query + recoil 조합으로 개발을 하였다.그래서 간단하게 React-Query를 활용해서 api 데이터를 요청하고 보내는 방법에 대해 설명하기 위해 글을 작성하기로 했다.(React-Query를 사용했던 경험으로 글을 작성하는 거라서 자세한 내용은 공식 문서에) TanStack Query ..

☘️Emotion 이란? Emotion CSS 스타일을 JavaScript 코드 안에 작성하는 CSS-in-JS 방식을 사용하여 쉽게 스타일을 관리할 수 있는 라이브러리 자세한 정보를 얻고 싶으면 아래 공식 문서를 참고하면 된다. [Emotion] 공식 문서 Emotion – Introduction (Edit code to see changes) emotion.sh ☘️Emotion 사용법 React를 사용하는 사용자에게 권장되는 라이브러리인 @emotion/react 패키지를 사용할 것이다. 1. 라이브러리 설치 npm i @emotion/react 2. 문자형 css() 함수 Emotion에서 제공하는 css() 함수를 사용하는 방법에는 문자형/객체형이 있다. // 문자형 import { css } ..