글쓰는 개발자

React 공식문서의 학습하기 탭(https://ko.react.dev/learn)에는 리액트의 각종 엣지 케이스와 생명주기등 리액트를 사용하기위해 필수적으로 알아야 하는 지식들이 튜토리얼 / 예시코드 / 연습문제와 함께 잘 정리되어있습니다.공식 문서 스터디를 하면서 기존의 알고 있던 리액트의 관한 기초를 더욱 공고히 하고 새로운 몇가지 개념을 익힐수 있었습니다.학습한 내용을 바탕으로 이해한 내용을 정리해볼 예정입니다. 컴포넌트 생성 및 중첩하기React의 강점의 하나는 기존의 html 태그 이외에도 커스텀 컴포넌트를 생성해 사용할수 있다는 것입니다. 이는 자바스크립트 코드의 정리와 재활용을 가능하게 합니다.function MyButton() { return ( I'm a button );}이렇..

JWT의 refreshToken을 사용해서 refreshToken 만료기간내에 재접속한 사용자에게 자동로그인 기능을 제공할수 있습니다.이를 위해 서버사이드와 클라이언트 사이드에 refreshToken을 이용한 accessToken 및 refreshToken 재발급 과정이 필요합니다.백엔드(NestJS) API 추가NestJS에 user controller에 refresh API 를 추가합니다. @Post("refresh") async refresh( @Req() req: Request ) { const { refreshToken: oldRefreshToken } = req.body; if(oldRefreshToken) { return await this.service.che..

zustand 개념과 예시react는 useState 같은 hook을 통해 컴포넌트의 상태값을 관리할수 있습니다.하지만 상태값을 자식에게 내려주거나 부모에게 올려야 할 경우 그 깊이가 깊어질수록 상태값을 전달하는게 매우 어렵기 때문에 redux같은 전역 상태관리 라이브러리를 사용해야 합니다. zustand는 그런 상태 관리 툴 중에서도 간단히 사용이 가능합니다. 가장 간단한 사용예시가 count의 증감입니다. 다음과 같이 useStore라는 함수를 zustand의 create 함수를 이용해 생성합니다.import { create } from 'zustand';const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({..

[React] 구글 OAuth 소셜로그인 / JWT 사용 프론트엔드[NestJS] 구글 소셜 로그인 OAuth2로 JWT 발급구글 로그인 OAuth 인증 등록1. 프로젝트 생성구글 클라우드 콘솔(https://console.cloud.google.com)에 접속합니다.현재 프로젝트 버튼을 클릭해서 새프로젝트를 생gran007.tistory.com React Query API 함수React Query 에서는 서버 데이터의 조회를 위한 useQuery와 서버 데이터 업데이트하고 데이터를 다시 조회하기 위한 useMutate 함수를 제공합니다.CRUD용 react query의 API 함수들을 하나의 파일에 정의해두고 불러내서 사용한다면 API의 활용도가 좋아지고 관리가 편해집니다.03.query/01.proj..

[NestJS] 구글 소셜 로그인 OAuth2로 JWT 발급구글 로그인 OAuth 인증 등록1. 프로젝트 생성구글 클라우드 콘솔(https://console.cloud.google.com)에 접속합니다.현재 프로젝트 버튼을 클릭해서 새프로젝트를 생성합니다.2. Google 인증 플랫폼 구성탐색gran007.tistory.com 프로젝트 생성NestJS로 구글 OAuth 백엔드를 구현했다면 이제 React로 프론트엔드를 구현해 봅시다.React typescript로 이루어진 프로젝트를 생성합니다.npm create vite@latest 프로젝트명 백엔드와 통신과 React 라우팅, 상태관리등을 위해 필요한 패키지를 설치합니다.npm i axios react-router-dom react-loading-in..

스크롤을 내리면 애니메이션이 동작하면서 보이지 않았던 컴포넌트들이 나타나는 웹 페이지들이 있다.transition 속성을 사용한 웹페이지인데 transition은 속성의 변화를 감지하는 기술이기 때문에 스크롤의 위치를 감지해서 애니메이션 효과를 주고 싶은 컴포넌트에 클래스를 할당해야 한다.예를들어 스크롤이 지나간 자리는 새로운 클래스가 하나 추가되어야 하는 식으로 말이다.// 스크롤이 지나가기 전...// 스크롤이 지나간 후...하지만 다양한 컴포넌트가 존재하고 모든 컴포넌트 별로 scroll을 감지하여 state를 할당하고 코드가 난잡해 지고 만다.따라서 엘리먼트를 감싸는 커스텀 컴포넌트를 만들어 엘리먼트의 위아래로 감싸준다면 자동으로 스크롤이 지나갈때 클래스를 할당해주는 역할을 수행하도록 할수 있다...

[css] transitiontransition웹페이지에서 애니메이션 효과를 구현하는데는 두가지 방법이 존재한다. tansition과 animation이다.이 중 transition 속성은 transition에 지정된 속성의 변화를 감지하여 각 속성간의 변화를 천천gran007.tistory.com animationanimation 속성은 transition과 함께 웹페이지의 애니메이션을 동작할수 있게한다.animation은 transition과 다르게 keyframe이라는 속성을 사용하여 조금 더 세분화된 동작의 사용이 가능하며 상태값의 전후를 억지로 변경하지 않아도 되며 동작의 반복등도 가능하다.키프레임은 다음과 같은 하위 속성으로 구성된다.@keyframes animationName { /* fro..

transition웹페이지에서 애니메이션 효과를 구현하는데는 두가지 방법이 존재한다. tansition과 animation이다.이 중 transition 속성은 transition에 지정된 속성의 변화를 감지하여 각 속성간의 변화를 천천히 보여주는 애니메이션 효과를 만들어낸다.transition은 4개의 파라미터를 가진다.1. 어떤 속성을 transition 할지 (ex. transform, opacity, margin, padding 등등)2. 몇초간 애니메이션 효과를 보여줄지3. 어떤 애니메이션 효과를 적용할지애니메이션 효과로는 ease, ease-in, ease-out, ease-in-out 등이 있고 cuibc-bezier() 함수로 커스텀된 애니메이션 효과를 사용할수 있다.4. 딜레이사용시 아래..