choijming21 님의 블로그

오늘은 제가 최근에 완성한 리그 오브 레전드 정보 앱 프로젝트에 대해 소개해드리려고 합니다. 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": ..

오늘은 React를 사용하여 구현한 로그인 컴포넌트에 대해 살펴보겠다. 이 컴포넌트는 회원가입, 로그인, 로그아웃 기능을 모두 포함하고 있어 실제 애플리케이션에서 활용도가 높을 것이다! 다만 supabase 연결하기 전 단계라 데이터 저장은 안된다는 제약이 있다.      시연 영상     1. 현재 구현 상태  현재 이 로그인 컴포넌트는 프론트엔드 로직만을 구현한 상태이다. 실제 데이터베이스나 인증 서비스와의 연동은 아직 이루어지지 않았다. 대신 setTimout을 사용하여 비동기 작업을 시뮬레이션하고 있다.const handleSubmit = (e, action) => { e.preventDefault(); setLoading(true); setTimeout(() => { setLoad..

오늘은 특별한 이야기를 하려고 한다. 바로 일주일 동안 몰두했던 리액트 숙련 과제, '나만의 포켓몬 도감' 프로젝트에 대한 이야기이다.포켓몬 도감 마스터를 향한 7일간의 여정이다. 이번 과제는 단순한 코딩 연습이 아닌, 기능 구현에 심혈을 기울이는 것은 물론이고, CSS 디자인에도 내 창의력을 쏟아부었다. 그 결과, 나름 그럴싸한 포켓몬 도감이 탄생했다!  7일간의 여정이 순탄했던 것만은 아니다. 수많은 오류와 난관에 부딪혔고 좌절도 느꼈다. 하지만 그 모든 과정에 내게는 값진 경험이 되었다. 어떤 문제들을 만났고, 그것을 어떻게 해결해 나갔는지 이야기를 이 블로그에 담아보려고 한다🌟  포켓몬의 세계로의 여행 지금 시작합니다!🚀🌈   # 사진  # 시연 영상시연 영상      🚀 포켓몬 도감 개발..

오늘은 Redux를 이용해서 나만의 todolist를 만들어보겠다! 배포는 netlify를 이용해서 배포하였다.    # 완성본        #시연영상         오늘의 중요한 내용은 Redux를 이용하는 것이니 Redux 코드에 대해서 설명해보겠다! 먼저 크게 순서는 이렇게 진행된다. 1. Redux store 설정2. action 정의3. reducer 생성4. 컴포넌트와 Redux 연결      1. Redux store 설정src 폴더 안에 store 폴더를 만들어서 index.js파일을 생성한 후 store를 생성한다.// 1. store 생성import { createStore } from "redux";// 6. 리듀서 함수 스토어에 연결해주기import todoReducer from "..