choijming21 님의 블로그

오늘은 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..

1. 문제 발생❓댓글 수정 기능 구현 중 UI 반응성 문제 발생수정 버튼 클릭 후 프로세스(문제 과정 설명)수정 후 완료 버튼 누르기수정 모드 종료기존 값 유지몇초 후 수정된 값으로 변경됨    2. 원인 추론 🔎서버 응답을 기다린 후 UI 업데이트React Query의 기본 동작을 그대로 사용원래 코드(주요 부분)const { mutate: edit } = useMutation({ mutationFn: ({ id, text }) => updateComment({ id, text }), onSuccess: () => { queryClient.invalidateQueries(["comments"]); alert("댓글이 수정되었습니다!"); }});const handleEditSubmit..

드디어 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": ..

비동기 프로그래밍: 자바스크립트는 비동기 작업을 통해 긴 작업이 완료될 때까지 다른 코드가 멈추지 않고 실행되도록 한다.    동기(Synchronous)특징: 작업이 순차적으로 진행되며, 하나의 작업이 끝나야 다음 작업을 수행할 수 있다.문제점: 네트워크 요청이나 파일 읽기 같은 작업이 오래 걸리면, 그 작업이 끝날 때까지 나머지 코드가 실행되지 않는다. 비동기(Asynchronous)특징: 오래 걸리는 작업이 끝나길 기다리지 않고, 다른 작업을 먼저 진행할 수 있다.장점: UI가 멈추지 않고 사용자에게 빠르게 반응할 수 있는 애플리케이션을 만들 수 있다.     비동기 작업을 동기적으로 처리하기!async / await 문법: 자바스크립트에서 비동기 작업을 처리하기 위한 최신 문법이다! 기본적인 작동..