글쓰는 개발자

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를 전달하는..

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

동영상 합치기여러 영상을 합칠때 합칠 영상의 이름을 담은 input.txt 파일을 생성한다.input.txtfile 01.mp4file 02.mp4 아래 명령어를 이용해 합쳐진 output.mp4를 생성한다.ffmpeg -f concat -i input.txt -c copy output.mp4 동영상 자르기영상의 일부를 잘라내야 할때는 다음 명령을 사용한다.ffmpeg -ss 00:00:30 -i input.mp4 -t 00:01:00 -c copy output.mp4-ss 옵션 뒤에는 영상의 시작 위치를 -t 옵션 뒤에는 자를 영상의 길이를 시:분:초 형태로 넣어준다.해당 명령은 30초부터 1분길이로 잘린 영상을 만들어준다.

Redis Docker 설치docker-compose.yml을 사용하여 redis를 설치합니다.version: '3.8'services: redis: image: redis:latest hostname: redis container_name: redis ports: - "6379:6379" command: redis-server --appendonly yes volumes: - ~/data/redis:/data # Persist Redis data docker compose 명령으로 redis를 설치합니다.docker-compose up -d Kotlin Spring Redis 연동redis를 사용하기 위해 Spring Redis 의존성을 추가하고 Ob..