입력 폼은 웹페이지를 구성할 때 빠지지 않고 포함되며, 그렇기에 html 내 input 의 type 들 역시 기본적인 입력부터 시작하여 number, tel, select, color, file 등등 다양하게 존재한다. 상황마다 달라지겠지만 기본적으로는 이메일과 비밀번호를 입력하는 로그인부터, 유저의 다양한 정보들을 한번에 전송해야 하는 입력폼을 생성해야할 때도 존재한다. 진행중인 closet 프로젝트에도 입력폼은 반드시 포함되었어야 했는데, 당연하게도 로그인 및 회원가입때의 입력폼과, 프로젝트의 핵심이라 할 수 있는 의류들의 정보들을 입력하게 될 add 페이지와 입력했던 의류정보를 수정하게 될 detail 페이지에서 사용될 입력폼이 필요했고, 그렇기에 좀 더 입력폼을 구현하는데 수월한 방법이 없을 까 ..
Nest.js 를 통해서 각 페이지의 레이아웃을 설정하는 것은 간단하다. _app 에서 공통으로 들어갈 레이아웃을 설정해주면 모든 페이지에 레이아웃이 작용하게 된다. 다만 상황에 따라서 페이지마다 다른 레이아웃을 적용해야할 수도 있다. 예를 들자면 상단 Nav 컴포넌트를 Login 페이지에 포함시키고 싶지 않다면, Login 페이지는 이에 맞는 레이아웃이 적용이 되어야 한다. 하지만 _app 에서 레이아웃을 적용시킨다면 Login 페이지까지 레이아웃이 적용되어버린다. 편하게 레이아웃을 적용하려고 하는 노력이 오히려 불편한 상황을 야기한다! 다행이도 Next.js 는 이러한 상황을 고려하여 각 페이지에 따른 subLayout 을 적용할 수 있도록 설정 할 수 있는데, 이번 프로젝트를 진행하면서 Login ..
로그인 여부에 따라 페이지를 리다이렉트 하는 방법은 저번 포스팅에서 한번 다뤄본적이 있다. 문득 모든 페이지마다 getServerSideProps 를 통해서 redirect 를 지정하는 것이 아니라, 한번에 처리할 수 있는 방법이 있지 않을까 하여 찾다보니 Next.js 에서의 Middleware 에 대해서 알게 되었고, 실험적으로 사용해본 과정과 능숙하게 사용을 하지 못해서 느껴진 한계점을 한번 포스팅해보고자 한다. Next.js 의 middleware 미들웨어는 기존 express 에서 다루었던 것과 같이, 모든 요청과 응답 사이에서 작용을 한다. 미들웨어를 활용하면 응답을 받기 전 그 응답에 대하여 마음대로 커스터마이징을 할 수 있다. 캐쉬된 페이지를 로드하는것보다도 더 먼저 실행되기 때문에, 대표..
개인 프로젝트를 진행하면서 공부한 내용을 포스팅하기에, 어느부분은 정확하지 않을 수 있습니다.. 예전에 기본 셋팅을 마무리 하고, Login 페이지를 설계 및 구현하기 위해 고려해야 할 부분들에 대해서 생각해보았다. 기본적으로 회원가입을 통해서 가입이 가능해야 한다. 로그인이 되었다면, 로그인 페이지로는 이동이 불가능해야하며, 반대로 로그인되지 않았다면 메인페이지로 이동이 되지 말아야 한다. 아이디를 분실하였다면 그 아이디를 찾을 수 있어야 한다. 패스워드를 분실할 경우, 인증 절차를 통해 새로운 비밀번호 생성이 가능하여야 한다. 우리가 주로 사용하는 구글이나 카카오 중 한 군데를 선택하여 로그인을 구현하여야 한다. 고려할 부분에 대해 한번에 구현하지는 못하겠지만, 우선적으로 기본적인 회원가입과 로그인,..
지금 작성되는 포스트는 연습하는 과정이라 잘못됬을 수 있으니, 개발 일기로서 참고를... 옷 사고 싶은데 예산이 없다.. 쇼핑몰 사이트에서 옷을 사려고 할 때마다, 집 옷장을 뒤적거리는 적이 많았다. 예산은 한정적이지만 그래도 괜찮은 옷이나 신발은 사고 싶었고, 자연스럽게 효율적으로 구매를 하게 되었다. 그러다 보니 가지고 있는 옷이나 비슷한 스타일의 옷은 좀 회피하고자 하고, 필요하면서도 가지고 있는 옷들과 잘 어울릴 수 있는 옷을 사려고 하였다. 결론은 매번 인터넷 쇼핑 할 때마다 옷장을 뒤적거리면서 사이즈도 체크하고, 옷 색깔도 확인하고... 귀찮다. 결론은 귀차니즘. 한번에 메모지에 정보들을 다 적어놓고, 그 다음에 메모지 참고하면서 쇼핑을 하려고 시도하였는데, 뭔가 이미지도 있음 좋을 듯 싶었고..
클라이언트 사이드 렌더링과 서버 사이드 렌더링의 장점을 모두 가져오기 위해, 앞서서 Next.js 라는 프레임워크를 이용할 수 있다고 설명했었다. 다만 한번도 세팅을 해본적은 없어서, 공식문서 상 learn more 부분을 참고하여 초기 세팅을 해봤고, 간략하게 설명을 해보고자 한다. 시작하기.. 프레임워크인 Next.js 는 프레임워크인 만큼 첫 세팅때부터 말그대로 하라는 데로 잘 따라서 사용을 하면 된다. Next.js 가 가지고 있는 장점은 많은데, 리엑트보다도 좀 더 직관적인 페이지 기반 라우팅 CSR, SSR, SSG 페이지 단위로 지원 더 빠른 페이지 로드를 위한 자동 코드 분할 prefetch 를 통한 Client-side routing 대부분의 CSS-in-JS 라이브러리 구현 가능 등등 ..
