728x90 반응형 Next137 [Next] Next13 이후로 MSW 사용하기 (3) - Storybook에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 next13 이후로 msw 사용하기 마지막인 storybook에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (4) - Storybook에서 사용하기 이전 글 [Next] Next13 이후로 MSW 사용하기 (1) - Browser 환경 설정 [Next] Next13 이후로 MSW 사용하기 (2) - Node 환경 설정 들어가기에 앞서 들어가기에 앞서 storybook에 msw를 적용하기 위해서는 2가지 환경이 설정되어 있어야 합니다. storybook 사용 환경 msw browser 사용 환경 storybook 사용 환.. 2024. 1. 9. [Next] Next13 이후로 MSW 사용하기 (1) - Browser 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 next13 이후로 msw 사용하기 첫 번째인 browser 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 들어가기에 앞서 들어가기에 앞서 msw가 무엇이고 msw에서 말하는 browser 환경이 무엇인지는 위의 관련 글 링크를 참고해 주시면 됩니다. 해당 글에서는 next에서 msw 사용을 위한 설정 방법에 대해서만 다루도록 하겠습니다. 그리고 next에서는 SSR, SSG 등의 데이터 fetching과 next 13 이후로 등장한 RSC와 같이 서버 단에서 발생되는 API .. 2024. 1. 5. [Next] Next13의 새로운 기능 알아보기 (5) - Metadata 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 마지막인 Metadata에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 Opengraph 이미지 적용을 위해 아래 이미지를 활용할 예정입니다. 테스트가 필요하신 분은 해당 경로를 이용하여 동일하게 사용해 보셔도 무방합니다. https://blog.kakaocdn.net/dn/kT8fV/btskKl5skJt/XcqUQY5A7DDGcqU4iIY9P0/img.png 기본 설정 next13 이전에 metadata 설정을 위해 일반적으로 _document 파일을 활용하거나 layout을 이용하여 적용해 볼 수 있었습니다. 간단한 예시로 다음과 같이 코드를 작성해볼 수 있습니다. // src/layouts/metadata/la.. 2023. 6. 21. [Next] Next13의 새로운 기능 알아보기 (4) - Link 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 네 번째인 Link에 대해 적어보는 시간을 가져보려고 합니다. a태그 사용 제거 next13 이전에 Link를 이용하여 페이지 이동을 위한 화면을 구성할 때 Link 아래에 a태그를 사용하신 경험이 있을 겁니다. 일반적인 상황에서는 next13 이전에도 a태그를 사용하지 않아도 문제 될 것은 없습니다. 하지만 Link 아래에 추가적인 다른 태그를 사용하거나 styledComponents, emotion 등을 이용한 커스텀 컴포넌트를 넣는 경우 페이지 이동은 가능하지만 a태그가 사라지는 문제를 발생시킵니다 Link의 사용 목적은 페이지 이동을 하기 위해 활용하기 때문에 전혀 문제 없는 것 아닌가? 라고 생각할 수 있지만 a태그가 .. 2023. 6. 11. [Next] Next13의 새로운 기능 알아보기 (3) - Font 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 세 번째인 Font에 대해 적어보는 시간을 가져보려고 합니다. Google Font next를 이용하여 웹 페이지를 개발할 때 원하는 형태의 font를 적용시키기 위해 가장 많이 사용하는 방법으로 google font를 생각할 수 있습니다. next13 이전에 google font를 적용시키기 위해서는 Google Fonts에 접속하여 원하는 스타일의 폰트를 선택한 뒤 다음과 같이 google에서 하라는 대로 적용시켜 주면 됩니다. import Head from 'next/head'; const FontGoogle = () => { return ( Font Google Page ); }; export default FontGoo.. 2023. 6. 7. [Next] Next13의 새로운 기능 알아보기 (2) - Data Fetching 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 두 번째인 Data Fetching에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 next의 data fetching이 무엇인지에 대해 궁금하신 분들은 다음 글들을 참고하시면 됩니다. [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing [Next] Data Fetching에 대해 알아보기 (3) - ISR SSR (Server Side Rendering) next13으로 넘어오면서 SSR을 포함한 여러 fetching 방법이 간소해지며 비슷한 유형으로 처리될 수 있도록 변경되었습니다... 2023. 6. 4. [Next] Next13의 새로운 기능 알아보기 (1) - Routing과 RSC 안녕하세요. J4J입니다. 이번 포스팅은 Next13의 새로운 기능 알아보기 첫 번째인 Routing과 RSC에 대해 적어보는 시간을 가져보려고 합니다. Routing 기본 방법 next13 이전에는 routing 처리를 위해 pages폴더의 하위 경로에 원하는 경로를 구성하는 방법을 사용했습니다. next13에서도 해당 방식을 지속적으로 지원을 하고 있기에 동일하게 사용해도 문제없지만 pages대신 app을 이용한 새로운 routing 처리 방식이 등장했습니다. pages를 이용하여 routing 경로를 구성했던 것과 유사하게 app 하위 경로에 입력한 폴더 명을 기준으로 routing 경로가 구성되기 때문에 pages를 이용하여 환경을 구성했던 것과 비슷한 개발 경험을 제공해주고 있습니다. Page와.. 2023. 5. 29. 이전 1 다음 728x90 반응형
