멘토링을 찾고 있었던 당시… 당시 필자는 1년째 재직중이었다. 입사 당시 프론트엔드 개발자로 입사를 하였지만, 서버 관리와 여러 현장 대응에 더 많은 시간을 보내고 있었고, React를 사용한 개발 업무는 거의 전무했다. 프론트엔드부터 백엔드, DB, 서버 구축까지 다양한 업무를 수행하다 보니 프론트엔드에 대한 전문성을 쌓을 수 있을지 의문이 들었...

MUI App Bar로 레이아웃 구성 모든 페이지가 공유하는 App Bar를 layout.tsx에 배치한다. // src/components/Header import { AppBar, Box, Toolbar, Typography, Button, IconButton } from '@mui/material'; import MenuIcon from '@...

Next.js의 라우팅 방식 Next.js에서는 자동 라우팅을 지원한다. 파일 혹은 폴더를 생성하는 것으로 라우팅이 가능하다. App Router: 폴더명 기반. 폴더 하위에 page.tsx/layout.tsx가 존재하면 해당 폴더명으로 라우팅 경로 생성. Pages Router: 폴더와 파일명 기반. Next.js 공식 홈페이지는 App Rou...

Zustand 설치 npm install zustand import { create } from 'zustand' const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 })), })) Jest 설치...

React Hook Form 설치 npm install react-hook-form React Hook Form은 form 태그를 React에서 편리하게 사용할 수 있도록 기능을 제공한다. submit 후 페이지 refresh가 발생하지 않는다. MSW (Mock Service Worker) 설치 백엔드 API가 개발되지 않은 상태에서 프론트...

왜 Next.js인가? 많은 회사에서 요구하는 기술 스택 중 하나는 Next.js 프레임워크였다. React는 CSR, Next.js는 SSR로 동작한다. CSR은 빈 HTML 파일과 JS를 클라이언트로 보내 클라이언트 측에서 렌더링한다. SSR은 서버 측에서 렌더링을 끝낸 페이지를 클라이언트로 보내준다. 많은 회사에서 SSR로 전환하려는 이유는...