nextjs4 Next.js 시작하기 - 간단한 Login 페이지 만들기 (2) React-Hook-Form 간단한 화면 구성하기로그인 폼을 만들기 위해, 지금부터 MUI로 간단한 화면 구성을 먼저 만들어둘 예정이다. 이때, 모든 페이지는 상단에 bar가 있어야 한다. 모든 페이지에 일일이 bar 컴포넌트를 넣는 대신, 하나의 레이아웃 형태로 모든 페이지가 동일한 bar를 가지고 있을 수는 없을까? 리액트에서도 그랬듯, Next.js에서도 마찬가지로 최상위 파일에 컴포넌트를 지정하고 children을 통해 하위 컴포넌트를 랜더링하면 굳이 모든 페이지에 bar를 지정할 필요 없이 공통적으로 사용할 수 있게 된다. 현재 Next.js의 app 폴더는 다음과 같은 구조로 되어있다.app├── favicon.ico├── globals.css├── layout.tsx├── login│ └── page.tsx├── .. 2024. 6. 9. Next.js 시작하기 - 간단한 Login 페이지 만들기 (1) Router 시작하기전체적인 프로젝트 세팅이 끝났으니, 이제 본격적으로 페이지를 만들어볼 차례다. 빠른 개발을 위해 MUI를 적극적으로 사용하여 직접 스타일링을 하는 경우를 최대한 줄이고자 하지만, React-Hook-Form과 MUI를 사용하는 것에 있어서 컨트롤적인 문제가 발생하는 부분이 있다. 때문에 이러한 문제가 발생하는 부분에 대하여 직접 스타일링을 하는 부분 또한 존재할 예정이다.만약 MUI를 어쩔 수 없이 꼭 React-Hook-Form과 사용하고자 한다면, 사용법을 함께 첨부할 예정이다. 필자는 방법을 알아내는데 너무 많은 삽질이 들어갔다.Next.js의 라우팅 방식Routing - 페이지 간의 이동을 관리하는 방법이다. NextJS 14 Folder StructureOnce again, it’s 5 .. 2024. 5. 30. Next.js 시작하기 - 프로젝트 세팅 (3) Zustand/Typescript+Jest/MUI Zustand 설치상태 관리 라이브러리는 Redux를 많이 사용하지만 Zustand는 학습 난이도가 높지 않고 간편하게 사용할 수 있다는 장점으로 인해 개인 프로젝트에서는 Zustand를 자주 사용한다. Zustand의 특징간결하고 직관적인 사용 방법Hook 기반 API중앙집중식 상태 관리 제공컴포넌트 최적화 zustand는 아래의 명령어를 통해 설치 가능하다.npm install zustand zustand 공식 사이트에서 zustand는 다음과 같이 사용할 수 있다.import { create } from 'zustand'const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 }.. 2024. 5. 28. Next.js 시작하기 - 프로젝트 세팅 (1) 시작하기에 앞서...React 개발자로 일한지 어느덧 2년차에 접어들었지만, 스스로 기술적인 성장을 이룩하였는가에 대하여 돌아볼 때면 1년 전과 그리 차이가 크지 않은 것만 같은 불안감이 엄습했던 시기가 있었다. 아무래도 React 프레임워크 자체가 지금은 퇴사한 회사에서 사용된지도 3년 정도 밖에 되지 않기도 하고, 모두 처음 시작하는 것이다 보니 체계가 잡혀있거나 조언을 구할 사람이 없었던 것이 원인이었다. 지금은 물론 예전보다는 나아졌지만, 그것보다도 더, IT 산업은 빠르게 변화하고 있었다. 때문에 작년 12월 부터 이번년도 4월까지 F-Lab에서 별도의 멘토링 수업을 수강하였다. 이 때 프로젝트로 진행했던 트렐로 클론 코딩 프로젝트를 다시 한 번 해볼 겸 포스트를 작성한다. F-Lab 수업에 대.. 2024. 5. 19. 이전 1 다음 728x90 반응형
