글쓰는 개발자

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

https://github.com/gran007/mock-server GitHub - gran007/mock-serverContribute to gran007/mock-server development by creating an account on GitHub.github.com 실무에서 작업을 하다보면 외부 서버를 호출해야 하는 일이 종종 생깁니다. 사용자별로 받아오는 데이터의 타입과 종류가 다르기 때문에 외부 서버를 연동해 테스트 해야 하는 경우 원하는 모든 데이터별로 화면과 API의 구현을 테스트 해보기 어려운 경우가 있습니다. 또한 앱 테스트 중 테스트 서버에 연결되어 특정 시나리오의 화면을 보고 싶을 경우도 있습니다. 이 모든 경우에 정의된 request에 대해 저장된 response를 전달하는..

사례필자가 운영하는 세미나의 학생들이 블로그를 통해 교류하기 시작하였다.그 중 한명인 이시카와씨는 세미나에 업무로 바뻐 자주 참가하지 못하는 일이 생기자, 자신이 참가하지 못한 세미나를 조금 더 알고싶어서 직접 참가한 사람들의 블로그를 찾아보거나 기사를 읽고 있었다.그러다 보니 이런 자료를 다른 사람들이 보면 좋겠다는 생각을 하게되고 세미나의 자료를 한곳에 모으는 작업을 시작했다.이렇게 세미나 관련 포스팅들이 모인 사이트는 세미나에 참가하지 못한 사람은 물론, 자신의 포스팅이 게제된 사람들도 찾아와서 감사인사를 할 정도로 호평이었다.세미나 포스팅이 모이는 공간이 생기자 사람들은 더욱 열심히 포스팅을 하였고 모인 포스팅들은 SNS에 활발히 공유되었다.이시카와 씨가 자발적으로 나선 일이 매우 높은 가치를 창..

가나자와 스시 체인점을 운영하는 판촉담당은 고객에게 제품의 가치를 제대로 전달하지 못하고 있다는 사실을 깨닫고 점포 앞에 칠판을 설치해 손글씨로 다음과 같은 문구를 노출, 매출 30프로가 상승시켰다.서두르는 분들도, 20분이면 가나자와를 만끽!여성분 혼자 오셔도 대환영!희망하시는 분들께는, 점장의 재미있는 잡지식 제공(무료)!망설이지 말고 편하게 들어오세요. 당신 안에 아무리 훌륭한 가치가 있어도, 그걸 알려주지 않으면 고객은 발견할 도리가 없다. 돈을 들이지 않고 '있음'을 제대로 드러내는 것만으로 매출을 올리고 가치를 극대화할 수 있다. - 물건 말고 당신을 팔아라 (후지무라 마사히로) -

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