시작하며...내 블로그에 [React] 리액트 쿼리(React-Query) 사용 방법 이런 게시물이 있다.그리고 당시 했던 프로젝트를 보니깐 React Query 의 버전이 3이었다. 그러나 현재 V5 까지 있으며, React 이 외에도 Vue 등에서도 사용이 가능해지면서 TanStack Query 로 이름을 바꿨다고 한다. 그래서 더 자세히 공부할 겸 새로운 내용들을 알기 위해 글을 작성하기로 했다. TanStack Query V5정의TanStack Query 란 무엇일까? TanStack Queryit makes fetching, caching, synchronizing and updating server state in your web applications a breeze.웹 애플리케이션에서 서버..

지난 게시물에서 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 } ..