짧은코딩

React Query에서 데이터를 불러오는 올 때 isLoading을 중앙화할 수 있다. Loading 컴포넌트를 만든다. App.tsx에 Loading 컴포넌트를 넣어준다. Loading import { Spinner } from '@chakra-ui/react'; import { useIsFetching, useIsMutating } from 'react-query'; interface Props { isLoading?: boolean; } export default function Loading({ isLoading }: Props) { // useIsFetching은 현재 가져오고 있는 쿼리 호출의 정수 값을 리턴한다. const isFetching = useIsFetching(); // for ..

UpLog의 로그인 이후의 방식 설계 로그인을 한다. 세션 스토리지에 userInfo가 암호화되어 저장된다. 제품(products) 목록을 가져온다. 제품이 있는 경우 제품 리스트의 맨 처음 제품 ReleaseNote 페이지로 이동한다. 제품이 없는 경우 메인 페이지로 이동한다. 로그인 이후의 방식 구현 로그인 후 세션 스토리지에 유저 정보 저장 -로그인 로직 const { mutate } = useMutation(loginAPI, { onSuccess: (data: GetUserInfo | FailResponse) => { if ('message' in data) { setMessageInfo({ type: 'error', content: '아이디 또는 비밀번호를 잘못 입력하셨습니다.' }); retu..

JWT 관리 방식 이 프로젝트에서는 권한 문제가 많기 때문에 JWT 관리를 어떻게 할지 더 고민했다. https://hshine1226.medium.com/localstorage-vs-cookies-jwt-%ED%86%A0%ED%81%B0%EC%9D%84-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%B4-%EC%95%8C%EC%95%84%EC%95%BC%ED%95%A0-%EB%AA%A8%EB%93%A0%EA%B2%83-4fb7fb41327c LocalStorage vs. Cookies: JWT 토큰을 안전하게 저장하기 위해 알아야할 모든것 안녕하세요 백엔드 개발자 최준혁입니다. hshine..

Jest를 사용하지 않기로 한 이유 처음 프로젝트를 세팅할 땐 Jest, Cypress 모두 설정을 했다. https://jestjs.io/docs/getting-started#using-vite Getting Started · Jest Install Jest using your favorite package manager: jestjs.io 하지만 위 사진에서도 나오듯이 Jest는 Vite를 완벽하게 지원하지는 않는다. 그렇기에 Jest로 테스트 코드를 짠 부분이 좀 있지만 과감하게 다 날리기로 했다. Vite는 Vitest라는 것이 있지만, 자료가 부족하다고 들었다. 그렇기에 Cypress로만 테스트 코드를 진행하기로 했다. UpLog 프로젝트에는 Cypress로 테스트 코드를 작성하고, WAYC 프..

https://shortcoding.tistory.com/535 MSW1 사용 중 Warning: captured a request without a matching request handler MSW를 사용하여 개발하는데, 콘솔에 이런 경고 메시지가 엄청 많이 떴다. 콘솔 로그를 보면서 테스트를 진행해야 하는데 불편함이 생겨서 저 경고 메시지를 없애보려고 한다. 왜 저런 경고가 뜨 shortcoding.tistory.com WAYC 프로젝트에서도 같은 경고를 만난적이 있다. 하지만 WAYC는 MSW 버전 1이고, UpLog에서는 MSW 버전 2를 사용했다. 해결 방법이 달라서 기록으로 남긴다. 해결 방법은 생각보다 쉽지만 까먹지 않기 위해 남긴다..! MSW2에서 해결 방법(아님) 해결법은 정말 간단한..

이번 글은 CI/CD 마지막 글이다! URL 카톡 공유 카톡에 URL을 공유하면 대부분 사이트 이름, 설명, 사진이 같이 나온다. 우리 사이트에도 한 번 적용해 보겠다. 우선 리액트 폴더에서 index.html을 찾아야 한다. -index.html -카톡 공유 이렇게 등록하면 된다! 카톡에 공유했을 때, 잘 적용된 것을 볼 수 있다. AWS 과금 알람 Route53으로 도메인을 설정했을 때, 과금이 조금 나왔다. 지금은 모두 무료 서비스로 바꿨지만 혹시 모르니 AWS 과금 알람 서비스를 등록했다. AWS Billing -> 예산 -> 예산 생성에 들어갔다. 그리고 1달러가 넘어가면 이메일에 알람이 오도록 설정했다. 이렇게 하면 설정이 완료된다!! CI/CD 적용 후기 프로젝트 기간 중에 Kakao I C..

우선 도메인 연결을 위해 가비아에서 도메인을 구입했다. 그리고 처음엔 AWS의 Route53을 활용하여 DNS 연결을 했다. 하지만 Route53은 과금이 나왔다. 그렇기에 나중에 가비아에서 DNS 연결하는 것으로 바꿨다. 2가지 방식을 다 기록했기 때문에 모두 기록하겠다. 탄력적 IP 연결하기 도메인을 연결하려면 고정된 IP가 필요하다. 하지만 AWS는 인스턴스를 종료했다가 시작하면 IP가 지속적으로 바뀐다. 그렇기에 탄력적 IP를 발급받아야 한다. 주의할 점으로는 탄력적 IP는 인스턴스와 연결되어야지만 무료이다! 만약 인스턴스를 중지하거나 삭제하면 과금이 발생한다!!! 인스턴스에 가서 탄력적 IP를 할당받았다. 그리고 프론트엔드 인스턴스와 할당받은 탄력적 IP를 연결했다. 도메인 설정하기(Route5..

이번 글은 AWS CodeDeploy와 EC2에 코드를 올리는 법에 대해 다루겠다. 전반적인 흐름 git에서 main 브랜치에 push -> S3에 파일이 올라감 -> CodeDeploy를 통해 EC2에 파일 업로드 즉, S3 -> CodeDeploy -> EC2 이렇게 코드가 올라가는데, Github Actions를 통해 바로 EC2에 접근할 수 없고, CodeDeploy는 저장 공간이 없기 때문에 저런 단계를 거쳐야 한다. EC2에 CodeDeploy agent 설치 EC2에 CodeDeploy가 접근하여 파일을 업로드 할수 있도록 code deploy agent를 설치해야한다. sudo apt-get update sudo apt-get install ruby sudo apt-get install w..

이제 Kakao I Cloud를 이용하지 못하기 때문에 AWS EC2 프리티어로 UpLog 프론트엔드 CI/CD를 구현해 보겠다. 아키텍처 설계도 우선 설계도는 이러하다. -개발자 먼저 개발자가 코드를 수정하고 main 브랜치에 push를 한다 -> Github Actions에서 이를 감지하고 S3에 React 코드를 Build 하여 올린다 -> S3에 올라간 코드를 CodeDeploy를 통해 EC2로 전달한다 -클라이언트 사용자는 uplog.store에 접속한다 -> https가 적용되어서 80 포트로 접근하면 443 포트로 리다이렉팅 시킨다 -> Nginx를 리버스 프록시로 활용하여 EC2 public Ip에서 받고 이를 리액트가 실행 중인 3070 포트로 리다이렉팅 시킨다 전체적인 흐름은 이러하다...

다크 모드가 실행되는 에디터 컴포넌트 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css'; import colorSyntax from '@toast-ui/editor-plugin-color-syntax'; import 'tui-color-picker/dist/tui-color-picker.css'; import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-synta..