❓ 궁금한 내용 React를 공부하다가 `useLayoutEffect`에 대해 알게 되었고, `useLayoutEffect`를 사용하면 `useEffect`를 사용했을 때와는 달리 화면에 렌더링될 때 값이 0을 출력했다가 값이 채워지는 깜빡임 현상(Flash of Unstyled Content, FOUC)이 발생하지 않는다는 것을 알게 되었다.그럼 `useLayoutEffect`를 사용하는 것이 더 좋은 것이 아닌가?하는 생각이 들었다. 일단 정답은 'No' 이다.📚 학습 내용우선 useEffect와 useLayoutEffect에 대해서 알아보자. 1. useEffect`useEffect`는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook이고, 비동기적으로 동작한다. ..

유레카 첫 포스트 [회고] 유레카 부트캠프 3기 프론트엔드 신청 및 후기LG U+에서 주관하는 유레카 부트캠프!수료만 해도 LG U+ 서류/코테 면제(1년 이내 1회만 가능)라기에 좋은 기회라서 바로 보자마자 신청했습니다 서류자기소개서 문항은 아래와 같습니다. 저는 비joooii.tistory.com 최종 회고를 올릴 날이 올지도 몰랐고, 그동안 꾸준히 포스트를 쓰게 될지도 몰랐다 ..사실 유레카 후기 중 이전 기수 분께서 작성한 최종 회고를 보고 꼭 나도 최종 회고를 써야겠다고 다짐했고, 그 회고를 보면서 많은 도움과 힘이 됐기에 써보려고 한다. 🗓️ 월별 회고8월운이 좋게 메카드한장 친구들을 만나서 같이 회식도 하고 빠르게 친해져서 행복했다!!사실 생일이 있었는데 제주도 친구들이 서프라이즈로 올..

약 1달 간 진행한 융합 프로젝트에 대한 회고를 해보고자 한다. 다른 프로젝트와는 달리 프론트엔드만을 담당했기에 프론트엔드 위주로 작성하려고 한다. 주제는 총 4개가 있었으며, 4개 중 순위를 매기면 강사님과 매니저님이 각 주제에 배정해주는 방식이었다. 💼 FE Github - User Repo GitHub - OpenTheTaste/frontend: 유레카 3기 융합 프로젝트 O+T의 프론트엔드 입니다유레카 3기 융합 프로젝트 O+T의 프론트엔드 입니다. Contribute to OpenTheTaste/frontend development by creating an account on GitHub.github.com 💼 FE Github - Admin Repo GitHub - OpenTheTas..

프론트엔드 회고https://joooii.tistory.com/28 [회고] 유레카 부트캠프 프론트엔드 과정: 미니 프로젝트 핏로그 - 프론트엔드지난번에 미니프로젝트 핏로그의 백엔드 부분이 끝나고, 최종적으로 프론트엔드 작업을 시작하게 되었다. 💼 FE Github GitHub - FitLog-ureca/FE: FitLog FE 레포지토리입니다.FitLog FE 레포지토리입니다. Cojoooii.tistory.com 백엔드 회고https://joooii.tistory.com/14 [회고] 유레카 부트캠프 프론트엔드 과정: 미니 프로젝트 핏로그 - 백엔드유레카에서 첫 미니 프로젝트를 시작했다. (두근두근) 📌 주제 선정프론트엔드의 꽃인 To Do List를 적용하기 위해서 고민을 하던 중 운동 목표를..

융합 프로젝트를 진행하면서 무한스크롤과 관련된 파트는 전부 다 Infinite Queries를 사용하여 구현하였다. 왜 Infinite Queries를 사용하면 좋은지 한번 톺아보고자 한다. Infinite Queries란?Infinite Queries는 TanStack Query에서 제공하는 기능으로, 페이지네이션이 필요한 데이터를 “연속된 페이지 형태”로 관리하는 데이터 패칭 방식이다.일반적인 useQuery가 단일 요청-응답 구조라면, useInfiniteQuery는 여러 페이지 데이터를 누적하여 관리한다.핵심은 다음과 같다.페이지 단위 데이터를 pages[] 형태로 관리다음 페이지 요청을 pageParam 기반으로 자동 연결 어떤 상황에서 어떻게 쓰이나요?다음과 같은 상황에서 사용된다.무한 스..

웹 개발에서 성능 최적화만큼이나 중요한 것이 바로 '사용자가 느끼는 속도'이다. 오늘은 단순히 데이터를 불러오는 것을 넘어, 대기 시간마저도 사용자 경험(UX)의 일부로 승화시키는 스켈레톤 UI에 대해 깊이 있게 탐구하고 정리해 보았다. 1. 스켈레톤 UI란 무엇인가?스켈레톤 UI는 데이터가 로드되기 전, 실제 콘텐츠가 들어갈 자리에 미리 박스나 선 등으로 레이아웃의 '뼈대'를 그려주는 기법이다. 과거에는 화면 중앙에 빙글빙글 돌아가는 '스피너(Spinner)'를 주로 사용했지만, 이는 사용자에게 "나는 지금 기다리고 있다"는 부정적인 인식을 강조하는 경향이 있다.반면 스켈레톤 UI는 다음과 같은 장점을 가진다.심리적 안정감: 화면의 전체적인 구조를 미리 보여줌으로써 콘텐츠가 곧 나타날 것이라는 예측 ..

🚧 문제 상황⚙️ 발생한 환경 및 프로그램`next.js ^16.1.16` , `배포 서버 - 로컬 프론트` 🎯 문제 상황 정의Next.js 16의 `proxy.ts`를 도입하여 인증 토큰 검증 로직을 추가했을 때, 로컬 개발 환경(`localhost:3000`)에서 배포된 백엔드 서버와 통신하는 구조에서 로그인을 하면 login API가 배포/로컬 url로 각각 호출(총 2번) 되며 계속 `/auth/login`으로 튕기는 문제가 발생하였다. 🔥 발생한 문제 및 에러 로그인 API는 200 응답을 받고 쿠키도 브라우저 Application 탭에 저장되는 것을 확인하지만 `router.push("/")`로 이동 시 미들웨어가 토큰이 없다고 판단하여 `/auth/login`으로 리다이렉트Netw..

React 애플리케이션을 개발하다 보면 서버에서 데이터를 가져오고 관리하는 작업이 매우 빈번하게 발생한다.예를 들어 API 요청을 통해 데이터를 가져오고, 로딩 상태를 관리하고, 오류 처리를 하고, 데이터가 변경되면 다시 요청을 보내는 등의 작업이 반복된다. 보통 이러한 작업을 `useEffect`와 `useState`를 이용하여 직접 관리할 수도 있지만, 프로젝트 규모가 커질수록 코드가 복잡해지고 상태 관리가 어려워지는 문제가 발생한다. 또한 전역 상태 관리 라이브러리(Redux, Zustand 등)를 이용해 서버 데이터를 관리하려고 하면, 서버 상태와 UI 상태가 섞이면서 코드가 복잡해지는 문제가 생길 수 있다. 이러한 문제를 해결하기 위해 등장한 라이브러리가 TanStack Query (React ..

보통 처음 프로젝트를 시작할 때, 레포지토리를 분리할지 혹은 하나의 레포지토리 내에서 프로젝트를 관리할지 선택하게 된다. 프로젝트 규모가 작을 때는 크게 고민하지 않을 수 있지만, 프로젝트가 커지고 서비스가 여러 개로 분리되기 시작하면 코드 관리 방식이 협업 효율과 유지보수에 큰 영향을 미치게 된다. 이때 사용되는 대표적인 개념이 모노레포(Monorepo)와 멀티레포(Multi Repo)이다.또한 최근에는 모노레포 환경에서 효율적인 개발을 돕는 Turborepo와 같은 도구도 함께 사용된다. 멀티레포 (Multi Repo, Poly Repo)멀티레포는 각 프로젝트를 독립적인 저장소에서 관리되는 구조이다. 독립적으로 관리하기 때문에 프로젝트 간의 의존성을 줄일 수 있다.보통 전통적으로 사용되는 레포 구조..

융합 프로젝트를 진행하면서 현직자 멘토링을 통해 폴더 구조에 대한 피드백을 받았다.FSD 아키텍처로 가는 것이 어떤 지 피드백을 주셔서 FSD 아키텍처에 대해서 알아보고자 한다. FSD 아키텍처란?FSD 아키텍처는 Feature-Sliced Design(기능 분할 설계) 의 약자로, 프론트엔드 애플리케이션 구조를 위한 아키텍처 방법론이다.프론트엔드 개발자는 대부분 모듈 간 느슨한 결합 + 높은 응집력을 제공해야 하며, 쉽게 확장할 수 있는 아키텍처를 필요로 한다.이를 위해 FSD 아키텍처를 도입하는 개발자들이 늘어나게 되었다. FSD는 총 3가지의 개념이 존재한다: Layer, Slice, Segment 레이어 (Layer)레이어는 최상위 디렉토리이자, 애플리케이션 분해의 첫 번째 단계이다.레이어의..