프로젝트 회고
10주간의 React 스터디를 마무리하며...!
10주간의 리액트 중급 스터디를 마무리하며 리액트 중급 스터디가 어느덧 마지막 주차에 도달했다. 처음 스터디를 시작했을 때는 단순히 React와 Next.js를 조금 더 깊게 공부하고, 개인 프로젝트에 적용할 수 있는 실전적인 기술들을 익히는 것…
카테고리
전체
이 카테고리 글 21개
- 프로젝트 회고
개인 포트폴리오 페이지를 구현해보자!
Next.js로 기술 블로그 만들기 어느덧 Next.js를 공부한지도 7주차가 되었다. 처음에는 단순히 React에서 한 단계 더 나아가기 위해 Next.js를 공부하기 시작했지만, App Router, Server Component, 파일 기반…
- React
프론트엔드에서 테스트는 어떻게 진행할까?
프론트엔드 테스트는 왜 필요할까? 버튼 하나의 조건을 바꿨는데 모달이 열리지 않을 수 있고, API 응답 구조가 조금 바뀌었는데 리스트가 렌더링되지 않을 수 있습니다. 또는 로그인 여부에 따라 보여야 할 페이지가 잘못 노출될 수도 있습니다. 특히…
- Next.js
Next.js 스타일링 전략: Tailwind CSS, shadcn/ui, 그리고 CSS-in-JS
Next.js 스타일링 전략: Tailwind CSS, shadcn/ui, 그리고 CSS in JS 이슈 직접 실험해보기 Next.js App Router 환경에서는 스타일링 도구를 선택할 때 단순히 \"디자인을 어떻게 입힐 것인가\"만 보면 부족합…
- React
폴더 구조와 아키텍처에 대해서 알아보자!
폴더 구조 & 아키텍처 프론트엔드 프로젝트가 작을 때는 보통 components, hooks, utils, api, pages 정도로 폴더를 나눠도 큰 문제가 없습니다. 하지만 기능이 많아지고, 로그인, 게시글, 댓글, 마이페이지, 관리자 기능,…
- Next.js
Next.js에서의 인증 전략과 쿠키 vs 토큰
Next.js에서 인증이 중요한 이유 Next.js에서 인증이 조금 까다롭게 느껴지는 이유는 단순히 \"로그인 여부를 확인하는 코드\"만 작성하면 끝나는 구조가 아니기 때문입니다. Next.js는 Server Components, Client Com…
- React
에러 핸들링 & 안정성 - 프론트엔드 에러 처리
프론트엔드에서도 에러처리가 필요하다 서비스를 운영하기 위해 백엔드의 지원은 필수적이지만, 만일 백엔드 서버가 아프거나, 네트워크 상황이 좋지 않아 제대로 통신이 이루어지지 않았을 때, 에러처리가 필요하다. 만일 단순한 API를 요청이 실패하여 에…
- React
Profiler부터 memo까지 제대로 사용해보자!
React 렌더링 최적화 실전 Profiler부터 memo까지 제대로 사용해보자! React에서 성능 최적화를 이야기할 때 가장 많이 나오는 키워드는 useMemo, useCallback, React.memo입니다. 하지만 이들을 어떻게 올바르게…