Next JS 13 적용해 보기 시리즈 2023.03.05 - [Library,Framework] - Next JS 13 적용해 보기 - App Routing 편 2023.08.15 - [Library,Framework] - Next JS 13 적용해 보기 - 데이터 불러오기 Data Fetching 편 이번 Next JS 13 적용해보기 시리즈에서는 navigation, sidebar, footer 등 여러 페이지에서 공통적으로 사용될 수 있는 레이아웃을 만들고 사용해 보도록 하겠습니다. Next JS 13 이전 버전에서 공통 레이아웃 적용 방법은 아래 글을 참고 해주시길 바랍니다. [NEXT.js] 넥스트 JS를 배워보자 2편 - 공통 레이아웃 오늘은 Next JS에서 공통된 레이아웃 (Header,..

2023.03.05 - [Library, Framework] - Next JS 13 적용해 보기 - App Routing 편 이번 Next JS 13 적용해 보기 시리즈에서는 서버에서 데이터를 불러오는 data fetching 방법에 대해서 알아보도록 하겠습니다. Next JS 13 이전 버전에서는 getStaticProps이나 getServerSideProps라는 메서드를 사용하면 data fetching 및 사전에 각 페이지의 HTML을 생성해 두는 Pre-rendering이 가능했습니다. 사실 이름만 복잡하지 막상 사용해 보면 크게 사용하기 힘든 점은 없었으나 처음 Next JS를 접했을 때는 어렵게 느껴질 수도 있을 법만 한 것들이기도 하고 React 18에 Server Component와 Cli..

이번 포스트에서는 노션 컨텐츠를 홈페이지에서 불러오는 방법에 대해 알아보도록 하겠습니다. 보통은 채용페이지에서 많이 쓰이는 방식이지만 필자는 설문 결과값에 따라 글들을 맞춤 추천해주는 용도로 사용했습니다. 궁금하신분은 아래 링크로 이동하셔서 직접 해보시기를 추천드립니다. 서비스 신청 | 정리습관 집정리가 필요한 고객에게 정리전문가를 연결하고 정리습관을 만드는 대표 집정리 플랫폼 클린테크 기업 www.jungleehabit.com iframe 으로는 안되나요? 우선 notion 컨텐츠를 사이트에서 보여주기만 하면 되는거면 별도의 패키지 설치 없이 페이지를 공개설정 해두고 iframe을 사용하면 안되나요 라고 물어보실 수 있겠지만, 결론 부터 말하자면 안됩니다. Notion 자체적으로 iframe을 사용하..

해당 적용해 보기 시리즈는 12 버전을 기준으로 변경/추가된 부분에 대해 설명하고 있기 때문에 이전 버전을 사용하지 않으셨던 분들은 모르는 기능이 나왔다고 해서 당황하지 마시고 최신 버전에서는 이렇게 쓰면 되는구나 하고 넘어가시거나 필자가 이전에 작성했던 글들을 12 기준으로 작성되었기 때문에 해당 글들을 한번 보시기를 권장드립니다. [NEXT.js] 넥스트 JS를 배워보자 1편 - Pre Rendering 예전부터 꼭 배워보고 싶은 Next JS 프레임워크에 드디어 입문했다. 여태까지 관리자 페이지나 랜딩페이지를 만들다 보니 CSR(Client Side Rendering)로도 충분했지만 현재 SEO과 원할하게 이루어져야 하 mingeesuh.tistory.com 우선 Next JS 13 버전의 주요 업..

배워보기 시리즈는 필자도 많이 써보지 않은 스택들을 사용하면서 공식문서 바탕으로 이해한 내용들을 정리하는 시리즈이기 때문에 잘못된 부분이 있을 수 있습니다. 잘못된 부분을 발견하신다면 댓글로 남겨주시면 수정하도록 하겠습니다. 스토리북이란? 스토리북은 컴포넌트 개발을 좀 더 효율적으로 할 수 있도록 도와주고, 유지 보수 및 테스트를 보다 손쉽게 할 수 있도록 해주는 도구입니다. 타입스크립트를 쓰면 개발자의 의도가 좀 더 명확하게 기술되어 좀 더 예측 가능한 코드를 작성할 수 있듯이, 스토리북이라는 도구를 사용하면 팀원들이 각 다른 컴포넌트를 개발한다 해도 해당 컴포넌트의 사용 예제 라던지 전달받는 prop 등을 상세히 명시할 수가 있기 때문에 유용합니다. 만약 팀원들이 만든 컴포넌트를 테스트해보기 위해 매..

웹이나 앱을 만들 때 훅을 애용하고 폼을 자주 다룰일이 많으셨다면 React Hook Form 라이브러리를 한 번쯤 사용해 보셨을 겁니다. 필자는 formik이나 redux-form도 가끔 사용하긴 하지만 간결한 코드 작성이 가능한 훅을 더 선호하기 때문에 해당 라이브러리를 즐겨 사용합니다. 커스텀 인풋 창을 만들어 사용할 경우 register후 바로 사용해주면 되는 구조이지만, react-select이나 react-datepicker 등 외부 라이브러리를 사용해야 할 경우 하나의 스텝이 더 추가되기 때문에 이번 포스트에서는 해당 내용을 주제로 글을 작성해보겠습니다. 글 작성일 기준으로 사용한 버전은 아래와 같습니다. "react-hook-form": "^7.33.1", "react-select": "^..