728x90 반응형 next18 [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] Jest 사용 환경 설정하기 안녕하세요. J4J입니다. 이번 포스팅은 jest 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Jest 사용 환경 설정 방법 환경 설정을 하기 전 현재 개발하고 있는 프로젝트 환경이 어떻게 구성되어 있느냐에 따라 저와 같이 수행하더라도 정상 동작이 되지 않을 수 있습니다. 이번 설정에서 구성되는 기본적인 프로젝트 환경은 next cli를 이용하여 typescript 환경을 구축한 것을 기반으로 할 예정이기에 글을 보실 때 참고해 주시면 될 것 같습니다. 또한 일반적으로 next에서 jest를 사용하시는 경우 컴포넌트에 대한 테스트도 함께 수행하실 것이기 때문에 jest를 설정하면서 testing-library도 함께 설정하도록 하겠습니다. [ 1. 패키지 설치 ] $ npm ins.. 2024. 1. 4. [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에 대해 알아보기 (2) - SSG / Dynamic Routing 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 두 번째인 SSG와 Dynamic Routing에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR 들어가기에 앞서 Next 공식문서에 따르면 Next의 Data Fetching의 종류에는 다음과 같이 있습니다. SSR SSG CSR Dynamic Routing ISR 그리고 이번 글에서는 SSG와 Dynamic Routing에 대해 알아보도록 하겠습니다. SSG SSG는 Static-site generation의 약자로 특정 페이지에서 fetching이 이루어져야 할 데이터들을 build 단계 때 prerendering 하여 props로 사용함으로 써 페.. 2023. 2. 17. [Next] Data Fetching에 대해 알아보기 (1) - CSR / SSR 안녕하세요. J4J입니다. 이번 포스팅은 Data Fetching의 첫 번째인 CSR과 SSR에 대해 적어보는 시간을 가져보려고 합니다. Data Fetching에 대해 알아야 하는 이유 최근 Next에 대해 하나, 둘 배워가면서 Next를 제대로 활용하지 못하고 있었다는 것을 깨닫게 되었습니다. 그중 하나가 Data Fetching에 관련된 것입니다. React대신 Next를 사용하는 개발자분들의 95% 이상은 SSR 때문일 것이라고 생각합니다. 그리고 저 또한 어떤 사람이 "React대신 Next를 왜 사용하냐?"라고 묻는다면 당연히 "SSR 때문에 사용합니다."라고 말할 것입니다. 그런데 만약, 다음 질문으로 "API를 통해 서버로부터 가져온 데이터들은 어떻게 SSR에 활용될 수 있냐?" 라고 묻는.. 2023. 2. 12. [Next] next-sitemap 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 next-sitemap 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. sitemap이란? sitemap은 구글, 네이버와 같은 검색 사이트들의 크롤링 봇들에게 우리 서비스에서 사용할 수 있는 사이트 주소를 알려주기 위해 활용합니다. 그러면 검색 사이트들의 크롤링 봇들에게 사이트 주소를 알려주는 이유에 대해 궁금증이 생길 수 있습니다. 이 질문에 대한 이유는 우리가 운영하는 서비스가 사용자들의 검색어에 많이 노출되어 더 많은 사용자가 유입될 수 있도록 도와주기 때문입니다. 하지만 상황에 따라서 우리 서비스의 특정 사이트 주소는 외부에 노출되면 안 되는 것이 존재할 수 있습니다. 즉, 검색 사이트의 크롤링 봇들이 특정 사이트에 대한 정보를 크롤링하는것을 막.. 2023. 2. 8. [GitLab] GitLab Runner + Docker + Ubuntu 환경 구축 (3) - SpringBoot, Next를 동일 Repository에서 사용할 경우 안녕하세요. J4J입니다. 이번 포스팅은 GitLab Runner + Docker + Ubuntu를 이용한 동일 Repository에 SpringBoot, Next가 존재할 때 환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글을 참고하시면 좋을 것 같습니다. [GitLab] GitLab Runner + Docker + Ubuntu 환경 구축 (1) - SpringBoot [GitLab] GitLab Runner + Docker + Ubuntu 환경 구축 (2) - Next 사전 준비 [ 1. GitLab Runner와 GitLab Repository 연결 ] Runner와 Repository를 연결하는 방법은 [GitLab] GitLab Runner 설치하기 (Ubu.. 2022. 2. 10. [GitLab] GitLab Runner + Docker + Ubuntu 환경 구축 (2) - Next 안녕하세요. J4J입니다. 이번 포스팅은 GitLab Runner + Docker + Ubuntu를 이용한 Next 환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글을 참고하시면 좋을 것 같습니다. [Docker] Next 환경 구축 사전 준비 [ 1. GitLab Runner와 GitLab Repository 연결 ] Runner와 Repository를 연결하는 방법은 [GitLab] GitLab Runner 설치하기 (Ubuntu 20.04)를 참고해주시길 바랍니다. 또한 참고적으로 Runner와 연결된 제 Repository는 다음과 같이 구성되어 있습니다. [ 2. Dockerfile 내용 수정 ] [Docker] Next 환경 구축에 작성해 둔 Dockerf.. 2022. 2. 9. [Docker] Next 환경 구축 안녕하세요. J4J입니다. 이번 포스팅은 Next 환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글을 참고하시면 좋을 것 같습니다. [Docker] MySQL 환경 구축 [Docker] SpringBoot 환경 구축 사전 준비 [ 1. 소스 코드 ] Next를 이용해 서비스가 되는 간단한 소스를 준비해주시면 됩니다. 저 같은 경우는 위에 링크를 걸어둔 MySQL과 SpringBoot 환경을 활용하여 다음과 같이 유사 블로그 글을 올릴 수 있는 화면을 구성했습니다. [ 2. 서버 url 설정 ] 해당 부분은 로컬에 구성되어 있는 서버를 이용해 데이터를 가져오는 분들만 해당됩니다. 일반적으로 로컬 서버에 있는 데이터를 가져오기 위한 url로 localhost라고 지정할 .. 2022. 2. 1. [Next] Styled Components 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Styled Components 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Styled Components 사용 방법 [ 1. 패키지 설치 ] $ npm install styled-components $ npm install -D babel-plugin-styled-components // typescript 사용할 경우 추가 $ npm install -D @types/styled-components [ 2. babel 설정 ] root경로에 .babelrc 파일을 생성하여 다음과 같은 설정을 해주시면 됩니다. { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", .. 2022. 1. 11. [Next] Editor 사용하기 (3) - React Draft Wysiwyg 안녕하세요. J4J입니다. 이번 포스팅은 React Draft Wysiwyg Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (1) - React Quill [Next] Editor 사용하기 (2) - Toast UI 앞선 글들에서 언급했듯이 Next에서 Editor를 사용해보기 위해 다음과 같은 총 3개의 패키지를 확인할 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 이번엔 개인 순위로 3등으로 생각했던 react-draft-wysiwyg에 대해 소개를 해보겠습니다. 구현 방법과 간단한 특징들에 대해 적어보겠습니다. 이미지.. 2022. 1. 9. [Next] Editor 사용하기 (2) - Toast UI 안녕하세요. J4J입니다. 이번 포스팅은 Toast UI Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (1) - React Quill [Next] Editor 사용하기 (3) - React Draft Wysiwyg 앞선 글에서 언급했듯이 Editor를 사용해보기 위해 다음과 같이 총 3개의 패키지를 찾을 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 이번에는 이들 중 현재 사용했을 때 두 번째로 괜찮다고 생각한 @toast-ui/react-editor에 대해 소개를 해보겠습니다. 간단한 사용 방법과 제가 경험할 수 있었던.. 2022. 1. 7. [Next] Editor 사용하기 (1) - React Quill 안녕하세요. J4J입니다. 이번 포스팅은 React Quill Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (2) - Toast UI [Next] Editor 사용하기 (3) - React Draft Wysiwyg Next를 사용하면서 Editor를 구현해야 하는 상황이 생겨 사용할 수 있는 Editor를 찾고 테스트해본 결과 다음과 같이 3개의 패키지를 찾을 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 3개를 전부 깊게 사용해보지 않았지만 테스트 코드만 구현해봤을 때 사용성에 있어서 괜찮다고 생각한 순으로 작성해봤습니.. 2022. 1. 6. [Next] 타입 스크립트 개발환경 구축하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 Next에도 React의 CRA와 동일한 것이 존재합니다. 다음 명령어를 이용하면 Next에 타입 스크립트가 얹어있는 환경을 제공해주기는 합니다. $ npx create-next-app --ts {프로젝트 명} 하지만 저는 기본적으로 나만의 환경을 구축하는 것과 CRA 사용으로 몰랐던 여러 설정 방법을 경험하고 싶다는 이유 등으로 CRA를 사용하지 않고 프로젝트 개발 환경을 구축하고는 합니다. 저와 동일하거나 또는 다른 사유로 인해 CRA로 프로젝트를 생성하고 싶지 않으신 분들은 다음의 절차를 따라 환경을 세팅하시면 될 것 같습니다. [ 1. package.json.. 2021. 12. 30. [Next] 초기 개발환경 구축하기 안녕하세요. J4J입니다. 이번 포스팅은 초기 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 [ 1. package.json 생성 ] package.json은 설치된 패키지들을 관리하는 파일입니다. package.json을 생성하는 방법은 다음 명령어를 이용하면 됩니다. $ npm init 명령어를 입력할 경우 추가적인 정보들을 기입해줘야 합니다. 원하는 텍스트를 입력하여 지정할 수도 있고 또한 괄호가 처져있는 부분은 아무것도 입력하지 않고 그냥 넘길 경우 괄호 안에 내용이 입력됩니다. package name: (init) next_init version: (1.0.0) description: next init description entry point: (inde.. 2021. 7. 28. 이전 1 다음 728x90 반응형
