개발34 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 시작하기 - 프로젝트 세팅 (2) React Hook Form 설치하기https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com React Hook Form은 기존의 form 테그를 리액트에서 훨씬 편리하게 사용할 수 있도록 기능을 제공해준다. 또한 html form 테그를 사용할 때 submit을 한 뒤 페이지가 refresh 되는 현상이 발생하지 않는다. 이외에도 에러 문구를 처리하거나 submit 충족 조건을 설정하는 것 등에 대하여 다양한 기능을 제공해준다. (성.. 2024. 5. 19. Next.js 시작하기 - 프로젝트 세팅 (1) 시작하기에 앞서...React 개발자로 일한지 어느덧 2년차에 접어들었지만, 스스로 기술적인 성장을 이룩하였는가에 대하여 돌아볼 때면 1년 전과 그리 차이가 크지 않은 것만 같은 불안감이 엄습했던 시기가 있었다. 아무래도 React 프레임워크 자체가 지금은 퇴사한 회사에서 사용된지도 3년 정도 밖에 되지 않기도 하고, 모두 처음 시작하는 것이다 보니 체계가 잡혀있거나 조언을 구할 사람이 없었던 것이 원인이었다. 지금은 물론 예전보다는 나아졌지만, 그것보다도 더, IT 산업은 빠르게 변화하고 있었다. 때문에 작년 12월 부터 이번년도 4월까지 F-Lab에서 별도의 멘토링 수업을 수강하였다. 이 때 프로젝트로 진행했던 트렐로 클론 코딩 프로젝트를 다시 한 번 해볼 겸 포스트를 작성한다. F-Lab 수업에 대.. 2024. 5. 19. 이전 1 ··· 3 4 5 6 다음 728x90 반응형
