본문 바로가기
728x90
반응형

SPA/Next37

[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 사용하기 (2) - Node 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 next13 이후로 msw 사용하기 두 번째인 node 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Next13 이후로 MSW 사용하기 (1) - Browser 환경 설정 관련 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (3) - Node 환경에서 사용하기 들어가기에 앞서 들어가기에 앞서 msw가 무엇이고 msw에서 말하는 node 환경이 무엇인지는 위의 관련 링크를 참고해 주시면 됩니다. 해당 글에서는 next에서 msw node 환경 사용을 위한 설정 방법에 대해서만 다루도록 하겠습니다. Node 환경 설정 방법 [ 1. 패키지 설치 ] 현.. 2024. 1. 8.
[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] Jest 사용 환경 설정하기 안녕하세요. J4J입니다. 이번 포스팅은 jest 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Jest 사용 환경 설정 방법 환경 설정을 하기 전 현재 개발하고 있는 프로젝트 환경이 어떻게 구성되어 있느냐에 따라 저와 같이 수행하더라도 정상 동작이 되지 않을 수 있습니다. 이번 설정에서 구성되는 기본적인 프로젝트 환경은 next cli를 이용하여 typescript 환경을 구축한 것을 기반으로 할 예정이기에 글을 보실 때 참고해 주시면 될 것 같습니다. 또한 일반적으로 next에서 jest를 사용하시는 경우 컴포넌트에 대한 테스트도 함께 수행하실 것이기 때문에 jest를 설정하면서 testing-library도 함께 설정하도록 하겠습니다. [ 1. 패키지 설치 ] $ npm ins.. 2024. 1. 4.
[Next] 상황 별 원하는 환경 변수 (.env) 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 상황 별 원하는 환경 변수 (.env) 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [Next] 환경 변수(.env) 사용하기 Next에서 상황 별 사용되는 환경 변수 next에서 사용될 수 있는 환경 변수 파일들은 전부는 아니지만 다음과 같이 다양하게 존재합니다. .env .env.development .env.production .env.local .env.test .env.test.local 또한 이런 환경 변수 파일들은 실행되는 script가 무엇인지에 따라 우선순위를 가지게 됩니다. 우선순위의 역할은 순위가 높은 것에 대한 변수 값을 먼저 확인하고 변수가 존재한다면 해당 변수를 사용하며 변수가 존재하지 않는 다면 점점 순위가 낮은 것.. 2024. 1. 3.
[Next] Storybook으로 UI 컴포넌트 문서화하기 (4) - Figma 연동하기 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 마지막인 figma 연동하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 [Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용 [Next] Storybook으로 UI 컴포넌트 문서화하기 (3) - Path Alias 사용 Figma 연동하는 이유 일반적으로 개발되는 서비스 및 storybook에 표현되는 다양한 컴포넌트 UI들은 개발자가 직접 디자인을 하여 구현된 것이 아닌 디자이너와 협업을 통해 만들어진 결과물일 것입니다. 그러다 보니 자연스럽게 행해지는 플로우는 디자이너가 figma와 .. 2024. 1. 1.
[Next] Storybook으로 UI 컴포넌트 문서화하기 (3) - Path Alias 사용 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 세 번째인 path alias 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 [Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용 Path Alias 사용 예시 많은 분들이 path alias를 사용하는 이유가 import를 통해 모듈을 로드할 때 상대 경로보다는 절대 경로를 이용하기 위해서 일 것입니다. 그래서 일반적인 페이지를 개발할 때 path alias를 활용한 절대 경로를 자연스럽게 많이 사용하고 계실 거고 심지어 설정이 잘 되어 있다면 자동 완성을 사용할 때도 절대 경로를.. 2023. 12. 28.
[Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 두 번째인 tailwind 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 Tailwind 사용 예시 프로젝트 개발을 할 때 tailwind를 사용하시던 분들이 storybook을 처음 도입을 하게 되면 제일 먼저 당황하는 부분은 storybook에 css가 적용되지 않는 현상입니다. 서버를 구동하여 확인할 수 있었던 다양한 컴포넌트들의 디자인들이 storybook에서는 올바르게 보이지 않아 설정에 의문을 품게 됩니다. 예를 들어 다음과 같이 tailwind를 사용하여 새로운 버튼을 만들어 보겠습니다. import { M.. 2023. 12. 26.
[Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 첫 번째인 기본 설정에 대해 적어보는 시간을 가져보려고 합니다. Storybook이란? storybook은 react, next, vue 등의 FE 개발자들이 많이 사용하는 다양한 기술 스택에서 활용할 수 있는 UI 컴포넌트 문서화 오픈 소스 도구입니다. storybook을 BE 입장에서 가장 대표적으로 비교해 볼 수 있는 것은 swagger가 될 수 있습니다. API 산출물을 swagger를 통해 확인할 수 있는 것처럼 서비스 개발을 위해 만들어진 다양한 컴포넌트 및 페이지들의 산출물을 확인할 수 있도록 도와주는 것이 storybook입니다. Storybook 공식 문서를 확인해 보면 storybook을 사용했을 때.. 2023. 12. 25.
[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.
[Next] Naver 로그인 Spring을 활용하여 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 naver 로그인 spring을 활용하여 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 서비스 로그인을 활용하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] Kakao 로그인 Spring을 활용하여 구현하기 [Next] Apple 로그인 Spring을 활용하여 구현하기 Next만을 이용하여 naver 로그인을 구현하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] 네이버 로그인 구현하기 애플리케이션 등록 naver를 이용하여 로그인을 구현하기 위해서는 먼저 사용하려는 서비스 애플리케이션 정보를 등록해줘야 합니다. 다음 절차들을 통해 애플리케이션을 등록해보겠습니다. [.. 2023. 4. 2.
[Next] Kakao 로그인 Spring을 활용하여 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 kakao 로그인 spring을 활용하여 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 서비스 로그인을 활용하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] Naver 로그인 Spring을 활용하여 구현하기 [Next] Apple 로그인 Spring을 활용하여 구현하기 Next만을 이용하여 kakao 로그인을 구현하는 방법에 대해 궁금하신 분들은 다음을 참고해주시면 됩니다. [Next] 카카오 로그인 구현하기 애플리케이션 등록 kakao를 이용하여 로그인을 구현하기 위해서는 먼저 사용하려는 서비스 애플리케이션 정보를 등록해줘야 합니다. 다음 절차들을 통해 설정해보도록 하겠습니다. [ 1. k.. 2023. 3. 26.
[Next] Apple 로그인 Spring을 활용하여 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 apple 로그인 spring 활용하여 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 서비스 로그인을 활용하는 방법에 대해 궁금하신 분들은 다음을 참고해 주시면 됩니다. [Next] Kakao 로그인 Spring을 활용하여 구현하기 [Next] Naver 로그인 Spring을 활용하여 구현하기 Apple Developer 등록 [ 1. App Identifiers 추가하기 ] Apple 로그인을 구현하기 위해서는 먼저 서비스로 사용될 App을 등록해줘야 합니다. Apple Developer Identifiers에 접속한 뒤 + 버튼을 클릭해 줍니다. [ 2. Identifiers 유형 선택 ] 어떤 유형을 등록할지 다.. 2023. 3. 20.
[Next] Data Fetching에 대해 알아보기 (4) - useQuery 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 마지막인 useQuery에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR [Next] Data Fetching에 대해 알아보기 (2) - SSG / Dynamic Routing [Next] Data Fetching에 대해 알아보기 (3) - ISR 들어가기에 앞서 Next 공식문서에 따르면 Next의 Data Fetching의 종류는 다음과 같이 있습니다. SSR SSG CSR Dynamic Routes ISR 공식문서에서 소개하고 있는 위의 Data Fetching들은 이전 글들에서 모두 다룬 상태입니다. 그리고 이번 글은 useQuery와 관련되어서.. 2023. 3. 5.
728x90
반응형