choijming21 님의 블로그

1. 문제 발생❓원격 dev 브랜치에서 로컬 개인 브랜치 feat/mypage로 pull을 시도했을 때, 다음과 같은 문제가 발생했습니다.충돌이 발생하면서 rebase가 자동으로 시작됨.rebase 과정에서 기존에 작업 했던 footer 컴포넌트가 사라짐.브랜치 상태가 ''no branch, rebasing feat/mypage"로 변경됨.git config --global pull.rebase false 설정으로 문제 해결을 시도했으나 실패     2. 원인 추론 🔎Git 설정 문제: pull.rebase 설정이 true로 되어 있어 pull 시 자동으로 rebase가 실행되었을 가능성이 높아보입니다.로컬 브랜치와 원격 브랜치 사이에 많은 차이가 있어 충돌이 발생했을 수 있습니다.git add . 했..

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

Next.js 는 지속적으로 발전하는 React 기반 웹 프레임워크입니다. 최근 버전에서 라우팅 시스템에 큰 변화가 있었습니다. 이 블로그 포스트에서는 Next.js의 새로운 라우팅 시스템, 특히 useRouter의 대체제인 usePathname, useSearchParams, useParams 그리고 useRouter의 주요 메서드들에 대해서도 자세히 알아보겠습니다.     1. useRouter 란?useRouter는 Next.js에서 제공하는 훅 중 하나로, 현재 페이지의 라우터 정보에 접근할 수 있게 해줍니다. 이를 통해 URL의 정보를 얻거나, 프로그래밍 방식으로 페이지 간 이동을 할 수 있습니다.  ⭐⭐⭐⭐⭐   useRouter는 오직 클라이언트 컴포넌트에서만 사용할 수 있습니다. 서버 컴포..

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([]);..

웹 애플리케이션의 기본 구조는 보통 클라이언트(브라우저)와 서버로 구성합니다. 클라이언트는 사용자와 상요작용하는 부분이고, 서버는 데이터를 처리하고 저장하는 부분입니다.  클라이언트-서버 통신은 주로 HTTP 프로토콜을 통해 통신합니다. 클라이언트가 서버에 요청(request)을 보내면, 서버는 그에 대한 응답(response)을 보냅니다.  Next.js의 역할을 React 기반의 프레임 워크로, 클라이언트 사이드 렌더링과 서버 사이드 렌더링 모두 지원합니다. 또한, API 라우트를 쉽게 만들 수 있게 해줍니다.  이제 전반적인 웹 애플리케이션의 흐름을 알았으니 Route Handler와 Server Action에 대해 알아보도록 하겠습니다.      1. Route Handler목적: API 엔드포인..

오늘은 Next.js에서 사용되는 렌더링 방식에 대해서 블로그에 담아보겠습니다. 먼저 렌더링 방식을 설명하기에 앞서 알아야할 주요 개념이 있습니다. 바로 Pre-Rendering과 Hydration입니다. 이 두가지에 대해 먼저 알아보고 갑시다.    Pre-RenderingNext.js는 렌더링을 할 때, 기본적으로 pre-rendring(사전 렌더링)을 수행합니다. 사전 렌더링이란 서버에서 DOM 요소들을 Build하여 HTML 문서를 렌더링 하는 것을 말합니다. Hydration미리 렌더링 된 HTML에 Javascript를 결합하여 이벤트가 동작할 수 있도록 만드는 과정을 말합니다.      이러한 개념을 봤을 때, pre-renderin을 하는 방법은 SSG와 SSR로 나뉘며 둘의 차이는 HTM..

TypeScript(타입스크립트)란?자바스크립트의 모든 기능을 포함한 상위 집합의 언어입니다. 즉, typescript = javascript + 정적 type system 입니다.    모던 개발 환경에서 안전한 프로그래밍을 위해서는 정적 타입 시스템이 존재하는 언어를 사용하는 것이 필수이기 때문에 타입스크립트는 중요합니다!      Javascript vs TypeScript 특징JavaScriptTypeScript타입 시스템동적 타입정적 타입컴파일필요 없음javascript로 컴파일 필요(프로젝트가 대형화되면 컴파일 시간이 길어짐)개발 경험유연하고 빠르게 시작 가능코드 완성, 타입 검사 등으로 향상된 개발 경험프로젝트 규모작은 프로젝트에 적합대규모 프로젝트에 적합런타임 오류런타임에 오류 발견 가능컴..

안녕하세요. 오늘은 아웃소싱 팀프로젝트 발표날입니다. 저희팀은 "Park Finder"라는 주차장을 쉽고 빠르게 찾을 수 있는 서비스를 만들었습니다. 팀프로젝트에서 만들게 된 "Park Finder"서비스를 블로그에 담아보겠습니다!     프로젝트 목적 📝카카오 API를 활용하여 사용자에게 가장 가까운 주차장을 실시간으로 제공하고, 지도 상에 정확한 위치를 표시하여 사용자 편의를 극대화하는 것을 목표로 했습니다. 또한, 빠른 검색 속도와 직관적인 UI, 최신 주차장 정보 제공을 통해 기존 지도 서비스와 차별화된 경험을 제공합니다. 이를 통해 사용자는 실시간 위치 기반으로 주차장을 쉽게 검색하고 정보를 확인할 수 있습니다!     프로젝트 팀 구성 및 역할 👥조아영 (팀장): 주차장 지도 기능(카카오 ..

1. 문제 발생❓사용자가 마이페이지에서 프로필 사진과 닉네임을 수정한 수, Comments 컴포넌트에서 새 댓글 작성할 때 수정된 프로필 정보가 반영되지 않고 이전 프로필 정보가 남아있는 문제가 발생함.     2. 원인 추론 🔎원래 코드를 살펴보면 Comments 컴포넌트가 처음 렌더링될 때만 useAuthStore에서 사용자 정보를 가져오고 있다.이로 인해 마이페이지에서 프로필 정보를 수정해도 Comments 컴포넌트에는 반영되지 않는다.원래 코드(주요 부분)const Comments = () => { const { newComment, setNewComment, editingComment, setEditingComment } = useCommentStore(); const { token, us..