choijming21 님의 블로그

현대의 웹 애플리케이션은 복잡해지고 다양한 환경에서 실행됩니다. 이러한 환경에서 사용자 경험을 보장하기 위해 효과적인 에러 모니터링은 필수적입니다. 이번 포스트에서는  Sentry를 활용한 프론트엔드 모니터링의 중요성과 구현 방법과 vercel 배포에 대하여 정리해보겠습니다!  Q. 왜 프론트엔드 에러 모니터링이 중요하나요?1. 실시간 문제 감지개발자는 모든 환경과 상황을 완벽히 테스트할 수 없습니다. Sentry와 같은 도구를 통해 실제 사용자 환경에서 발생하는 에러를 실시간으로 파악할 수 있습니다.2. 사용자 경험 개선에러가 발생해도 즉각적으로 대응할 수 있어, 사용자가 불편을 겪는 시간을 최소화할 수 있습니다.3. 디버깅 효율성 증대Sentry는 에러 발생 시 상세한 컨텍스트(스택 트레이스, 브라우..

1. 유닛 테스트란 ?유닛 테스트는 소프트웨어의 개별적인 단위(컴포넌트, 함수 등)가 의도한 대로 작동하는지 확인하는 테스트입니다.   2. 유닛테스트가 필요한 이유? 1. 버그 예방코드 변경 시 기존 기능이 망가지지 않았는지 확인에러를 초기에 발견하여 수정 비용 절감 2. 코드 품질 향상테스트를 작성하며 코드의 문제점을 발견더 나은 코드 구조와 설계를 유도 3. 리팩토링 용이성안전한 코드 수정 가능기능이 올바르게 동작하는지 즉시 확인 4. 문서화 효과테스트 코드가 컴포넌트의 사용법을 보여주는 예시 역할새로운 팀원의 코드 이해도 향상   3. 주요 테스트 라이브러리1. Jestfacebook에서 만든 JavaScrip 테스팅 프레임 워크쉬운 설정과 사용법스냅샷 테스팅 지원풍부한 matcher 함수 제공2..

// 저장sessionStorage.setItem('token', accessToken);// 조회sessionStorage.getItem('token');인증 방식의 종류에는 '세션/쿠키 방식'과 'JWT(JSON Web Token)' 방식이 있습니다.  세션/쿠키 방식: 서버가 세션 정보를 보관하고 관리(서버 부하)사용자 로그인서버가 세션 생성 및 세션 ID 발급세션 ID를 쿠키에 저장해서 클라이언트에 요청마다 쿠키 전달 JWT(JSON Web Token)방식: 서버가 상태를 저장하지 않음(Stateless)사용자 로그인서버가 JWT 토큰 발급(토큰 자체에 필요한 정보가 담겨 있음)클라이언트가 토큰 저장서버는 토큰이 유효한지만 확인      Q. 쿠키, 세션, 토큰은 각각 무엇을 말하는 것인가요? 쿠..

오늘은 제가 최근에 완성한 리그 오브 레전드 정보 앱 프로젝트에 대해 소개해드리려고 합니다. Riot 개발자 사이트에서 제공하는 API를 활용하여 만든 이 앱은 Next.js와 TypeScript를 기반으로 하고 있습니다. 프로젝트를 진행하면서 겪은 경험과 구현 과정을 공유하고자 합니다.     # 시연 영상 📹︎리그 오브 레전드 정보 앱         1.  프로젝트 셋업 및 기본 구조 🌿프로젝트를 시작하기 위해 Next.js와 TypeScript를 사용하여 기본 구조를 잡았습니다. 여기에 Tailwind CSS를 추가하여 스타일링을 손쉽게 할 수 있도록 설정했습니다.       2.  데이터 Fetching 💿먼저 types/ 폴더를 만들어 그안에 디렉토리에 필요한 타입들을 정의했습니다. // ..

1. 문제 발생❓"use client";import ChampionCard from "@/components/championCard";import { Champion } from "@/types/Champion";import { ChampionRotation } from "@/types/ChampionRotation";import { getChampionRotation } from "@/utils/rioApi";import { getChampionList, getVersion } from "@/utils/serverApi";import { useEffect, useState } from "react";function RotationPage() { const [version, setVersion] = u..

1. 문제 발생❓"use client";import { Champion } from "@/types/Champion";import { ChampionRotation } from "@/types/ChampionRotation";import { getChampionRotation } from "@/utils/rioApi";import { getChampionList } from "@/utils/serverApi";import { useEffect, useState } from "react";function RotationPage() { const [rotation, setRotation] = useState(null); const [champions, setChampions] = useState([]);..

드디어 MBTI 과제를 마무리 하였다!트러블 슈팅은 다른 게시물에서 상세하게 다뤄놨으니 오늘은 만든 과제를 자랑해보겠다 ㅎㅎ                    시연 영상이다.     ...     처음 배우는 인증인가 덕분에 일주일 내내 힘들게(?) 보냈던 것 같다. 하지만 실습과 복습을 꾸준히 하면서 어느정도 개념을 익힌 것 같다! 그리고 일주일만에  tanstack query에 대해서 빠삭하게 마스터한 것 같아 뿌듯하다. 아쉽게 MBTI 테스트 사이트 만드는 과제에는 tanstack query가 들어가지 않았지만, 과제를 만들면서 틈틈히 수준별 분반 수업에서 tanstack query를 실습하고 복습했기 때문이다! tanstack query는 서버 상태를 관리하기 위한 강력한 라이브러리로, 데이터를 ..

1. 문제 발생❓페이지 새로고침 시 로그인 상태가 유지되어 있음에도 불구하고, 로그인 페이지로 리다이렉트 되는 문제점!!    2. 원인 추론 🔎상태 초기화: 페이지 새로고침 시 React 상태('user')가 'null'로 초기화 되는 문제가 있는 것 같다.비동기 처리 타이밍: 'useEffect'에서 'fetchUserProfile' 함수가 완료되기 전에 라우팅 결정이 이루어지는 것 같다.에러 처리: 모든 에러 상황에서 자동으로 로그아웃 처리 제일 큰 문제는 비동기 처리 타이밍 문제인 것 같다.페이지를 새로고침 하면 React 상태가 초기화 되어 user 상태가 null이 된다. 그리고 useEffect에서 fetchUserProfile을 비동기적으로 호출하지만, 이 함수가 완료되기 전에 라우팅 결..

1. 문제 발생❓로그인 후 토큰을 제대로 받아오지 못하는 문제 2. 원인 추론 🔎API 응답 구조를 잘못 이해하여 토큰을 잘못된 키로 접근하고 있었다. 3. 해결 과정 📋'handleLogin' 함수에서 'console.log(response)'를 통해 API 응답을 확인했다.API 공식 문서를 참조하여 올바를 응답 구조를 파악했다.'response.token' 대신 'response.accessToken'으로 수정했다. const handleLogin = async (userData) => { try { const response = await login(userData); localStorage.setItem("authToken", response.accessToken); awa..

심화 주차에서는 json-server, axios, 인증인가, Tanstack query, Zustand, Tailwind 등 많은 것을 배워서 좀 어려웠던 것 같다. 최대한 배운 내용을 과제할 때 활용해봐야겠다고 생각했다. 배운 내용을 활용해 보기 위한 React 심화 주차 개인과제 주제는 무료 MBTI test 사이트를 만드는 것이였다. 흥미로운 주제였던 만큼 흥미로운 오류들도 많이 발생하였다 ㅜㅜ 그래서 오늘은 React 심화 주차 개인과제에 대해서 트러블 슈팅을 작성해보겠다!      1. 문제 발생❓로그인 및 회원가입 기능 구현 중 API 호출 시 다음과 같은 오류가 발생했다Error: Request failed with status code 400Response data: { "error": ..