10주간의 리액트 중급 스터디를 마무리하며리액트 중급 스터디가 어느덧 마지막 주차에 도달했다. 처음 스터디를 시작했을 때는 단순히 React와 Next.js를 조금 더 깊게 공부하고, 개인 프로젝트에 적용할 수 있는 실전적인 기술들을 익히는 것이 목표였다. 하지만 10주간의 과정을 지나오면서 느낀 것은, 프론트엔드 개발에서 중요한 것은 단순히 새로운 기술을 많이 아는 것이 아니라는 점이었다. 오히려 더 중요한 것은 어떤 기준으로 코드를 작성할 것인지, 어떤 구조가 유지보수에 유리한지, 그리고 사용자 경험과 개발자 경험을 어떻게 함께 고려할 것인지에 대한 고민이었다. 이번 글에서는 10주간의 스터디를 돌아보며 학습한 내용, 나의 설계 철학, 포트폴리오에 반영할 기술 블로그 방향, 그리고 스터디를 통해 얻은..

Next.js로 기술 블로그 만들기어느덧 Next.js를 공부한지도 7주차가 되었다.처음에는 단순히 React에서 한 단계 더 나아가기 위해 Next.js를 공부하기 시작했지만, App Router, Server Component, 파일 기반 라우팅, SEO, 정적 생성 같은 기능들을 하나씩 배우다 보니 이 기술을 활용해서 직접 하나의 프로젝트를 만들어보고 싶다는 생각이 들었다. 그러던 중 단순히 기능을 구현하는 프로젝트가 아니라, 나 자신을 보여줄 수 있는 사이트를 만들어보면 어떨까 하는 생각이 들었다.지금까지 공부한 내용, 진행했던 프로젝트, 문제를 해결했던 과정, 프론트엔드 개발자로 성장해가는 기록들을 한곳에 모아두면 좋겠다고 생각했다. 기존에는 Tistory에 내용을 정리했지만, Tistory에서..

프론트엔드 테스트는 왜 필요할까?버튼 하나의 조건을 바꿨는데 모달이 열리지 않을 수 있고, API 응답 구조가 조금 바뀌었는데 리스트가 렌더링되지 않을 수 있습니다. 또는 로그인 여부에 따라 보여야 할 페이지가 잘못 노출될 수도 있습니다.특히 React 프로젝트에서는 컴포넌트가 많아질수록 상태, props, API, 라우팅, 전역 상태가 복잡하게 연결됩니다. 이때 테스트가 없으면 기능을 수정할 때마다 직접 브라우저를 열고 모든 경우를 손으로 확인해야 합니다.테스트 코드는 이런 과정을 자동화해 줍니다.예를 들어 다음과 같은 상황을 코드로 검증할 수 있습니다.사용자가 검색어를 입력한다.검색 버튼을 클릭한다.API 응답이 도착한다.검색 결과 목록이 화면에 표시된다.이 흐름이 테스트로 작성되어 있다면, 이후 코..

Next.js 스타일링 전략: Tailwind CSS, shadcn/ui, 그리고 CSS-in-JS 이슈 직접 실험해보기Next.js App Router 환경에서는 스타일링 도구를 선택할 때 단순히 “디자인을 어떻게 입힐 것인가”만 보면 부족합니다. Server Components, Client Components, SSR, Streaming, 하이드레이션, 번들 크기, 스타일 삽입 시점까지 함께 고려해야 합니다. 특히 App Router에서는 기본적으로 Server Components를 적극적으로 활용할 수 있기 때문에, 스타일링 방식이 서버 렌더링 흐름과 잘 맞는지 확인하는 것이 중요합니다.이번 글에서는 Tailwind CSS와 shadcn/ui를 활용해 UI 컴포넌트를 구현해보고, Styled-Co..

폴더 구조 & 아키텍처프론트엔드 프로젝트가 작을 때는 보통 components, hooks, utils, api, pages 정도로 폴더를 나눠도 큰 문제가 없습니다. 하지만 기능이 많아지고, 로그인, 게시글, 댓글, 마이페이지, 관리자 기능, 실시간 알림, 검색, 필터링 같은 도메인이 늘어나면 문제가 생기기 시작합니다.예를 들어 components 폴더 안에 UserCard, PostCard, CommentItem, AdminTable, LoginForm, ProfileEditModal 같은 파일이 계속 쌓이면, 이 컴포넌트가 어느 기능에 속하는지 알기 어려워집니다. hooks 폴더도 마찬가지입니다. useUser, usePost, useAuth, useModal, useDebounce, useInfi..

Next.js에서 인증이 중요한 이유Next.js에서 인증이 조금 까다롭게 느껴지는 이유는 단순히 “로그인 여부를 확인하는 코드”만 작성하면 끝나는 구조가 아니기 때문입니다. Next.js는 Server Components, Client Components, Route Handlers, Server Actions, Proxy 등 여러 실행 지점을 가지고 있고, 각각의 코드가 실행되는 위치가 다릅니다. 어떤 코드는 서버에서만 실행되고, 어떤 코드는 브라우저에서 실행되며, 어떤 코드는 사용자의 요청이 페이지에 도달하기 전에 먼저 실행됩니다. 그래서 Next.js에서 인증을 설계할 때는 “로그인 상태를 어디에 저장할 것인가”, “서버 컴포넌트에서 세션을 어떻게 읽을 것인가”, “클라이언트 컴포넌트에서는 사용자..

프론트엔드에서도 에러처리가 필요하다 서비스를 운영하기 위해 백엔드의 지원은 필수적이지만, 만일 백엔드 서버가 아프거나, 네트워크 상황이 좋지 않아 제대로 통신이 이루어지지 않았을 때, 에러처리가 필요하다. 만일 단순한 API를 요청이 실패하여 에러가 발생했을 경우, 그 에러로 인해 서비스 전체가 죽어버린다면 큰 손실이 발생할 것이다.이러한 일이 발생하지 않도록 에러 핸들링과 안정성을 관리하는 방법을 알아보자. 발생할 수 있는 에러 상황에는 어떤 것이 있을까?에러처리를 하기에 앞서 어떤 상황에서 에러가 발생하는지에 대해서 먼저 알아보고 싶었다. 다양한 에러 상황 요약 :- 데이터에서 시작되는 에러- 네트워크와 API에서 발생하는 에러- 사용자 행동에서 발생하는 에러- 비동기 처리에서 발생하는 에러- 렌더링..

React 렌더링 최적화 실전 - Profiler부터 memo까지 제대로 사용해보자!React에서 성능 최적화를 이야기할 때 가장 많이 나오는 키워드는 useMemo, useCallback, React.memo입니다.하지만 이들을 어떻게 올바르게 적용할 수 있을까요?중요한 것은 어디가 느린지 먼저 확인하고, 그 원인을 분석한 뒤 필요한 부분에만 최적화를 적용하는 것입니다. 이 글에서는 React DevTools Profiler와 memo를 사용하여 불필요한 렌더링을 찾아 최적화하는 방법에 대해서 알아보겠습니다!React에서의 렌더링의 조건React useState 완전 이해하기에서 state에 관련된 렌더링 조건에 대해서만 다뤘습니다. React 컴포넌트는 다음 네 가지 상황에서 렌더링됩니다.state가..