분류 전체보기47 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. 사회초년생의 IRP 관리하기 시작하기에 앞서...처음 회사에 입사했을 때, 회사에서는 기업은행에서 급여를 받을 통장과 IRP 계좌를 개설해 오라는 퀘스트를 쥐여주었다. 월급은 받아야 하니 급여 통장을 개설하는 것 까지야 이해를 했지만, IRP계좌란 뭘까? DC는 뭐고 DB는 또 뭔가. 어렵고도 복잡하고 퇴직금은 너무 먼 이야기인 것 같아 만들어만 둔 채 장롱에 고이 모셔둔 IRP통장. 이때까지만 해도 필자가 아는 것이라고는 단순했다. 회사에서 퇴직금을 IRP 통장으로 지급한다.받은걸 내 예적금 통장에 넣으면 되겠다! 그럼 그렇지. 세상은 호락호락하지 않았고, IRP 계좌로 들어온 작고 소중한 퇴직금을 예적금으로 옮기게 된다면 당연히 세금을 내야만 했다.경제전문가가 아닌 그저 일반 직장인의 입장에서 세금 계산은 너무 어렵고 무서운 것.. 2024. 6. 3. 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. 3박 4일 도쿄 여행기 - 4 (도쿄-나리타 버스, 나리타 공항) 여행의 마지막 날...일본 여행의 마지막 날, 이제 무사히 귀국을 하면 모든 여행이 마무리 된다. 1시 40분 표를 예약한 만큼 3시간 전인 10시 40분까지는 도착해야 했으며, 도쿄에서 나리타 공항까지 약 1시간 15분정도가 걸리기 때문에 9시 30분에는 도쿄에서 나리타로 출발해야 했다. 도쿄 - 나리타 공항행 버스나리타 공항으로 가는 버스는 공항에서 도쿄로 왔을 때 도착했던 바로 그 도쿄역의 JR Expressway Bus에서 출발한다. 해당 버스는 먼저 표를 구매해야 하며, 사람이 많을 경우 표를 구매하는데 오래 걸릴 수 있다. 다행히 나리타행 버스는 자주 있는 편이기 때문에 급할 필요까지는 없다. 참고로 나리타는 터미널이 1, 2, 3 세가지가 있기 때문에 본인이 내릴 터미널을 정확히 인지하고 있.. 2024. 5. 28. 3박 4일 도쿄 여행기 - 3 (가와구치코 오이시 공원, 후지산 당일치기) 3일차 오전오늘도 어김없이 10시 이전에 체크아웃을 해야 한다. 어차피 10시 15분 까지 BUSTA Shinjuku로 가야 했기 때문에 8시 반에 숙소에서 체크아웃을 하며 가와구치코행 버스를 타기 위해 떠났다. 가와구치코행 버스 예매하기도쿄에서 가와구치코 당일치기를 하기 위해서는 버스와 전철, 두 가지 방법이 있다. 전철을 이용하여 느긋한 열차여행을 하고 싶었지만 적어도 한 번은 환승해야 한다는 것과, 비용이 버스의 2배 정도 된다는 것으로 인해 버스를 예매하여 가는 것으로 결정했다. 버스는 당일에 예매를 해도 되지만, 관광객이 많은 만큼 미리 예매하지 않으면 자리가 없을 수도 있다. 인터넷으로 미리 예매를 하면 할인도 받을 수 있으니 가능한 미리 예매하는 것을 추천한다. 버스를 예매하는 방법은 아래의.. 2024. 5. 25. 이전 1 ··· 4 5 6 7 8 다음 728x90 반응형
