728x90 반응형 SPA147 [React] react-i18next로 다국어 처리하기 안녕하세요. J4J입니다. 이번 포스팅은 react-i18next로 다국어 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. react-i18next란? react-i18next는 i18next를 기반으로 한 React에서 사용할 수 있는 국제화 프레임워크입니다. 여기서 말하는 국제화란 세계에 존재하는 여러 국가들에 대한 언어를 맞추는 것으로, 다른 말로는 서비스에서 사용되는 단어들을 각 국가에서 사용되는 언어에 맞게 보여주는 것을 의미합니다. 그래서 국내를 대상으로 하는 서비스들에는 국제화에 대해 고려를 할 이유가 없지만, 만약 동일한 서비스를 국내뿐만 아니라 특정 해외 국가에도 지원을 해준다 하면 국제화를 고려해봐야 합니다. 국가에 맞는 언어를 보여주는 방법들은 여러 가지가 존재할 수 있습니다.. 2023. 11. 23. [React] Jest로 테스트 커버리지 확인하기 (2) - 커버리지 비율 한계점 안녕하세요. J4J입니다. 이번 포스팅은 Jest로 테스트 커버리지 확인하는 방법 마지막인 커버리지 비율 한계점에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Jest로 테스트 커버리지 확인하기 (1) - 개념과 설정 방법 커버리지 비율 한계점이란? 커버리지 비율 한계점은 커버리지 동작을 위해 수집된 코드들에서 테스트 코드로 동작되는 코드들의 비율이 충족되어야만 하는 기준치를 의미합니다. 이전 글을 확인해 보시면 커버리지 비율 한계점을 설정하기 위해서는 jest.config.js에서 coverageThreshold 값을 활용하면 가능했었고, 설정되는 값들에는 statements, branches, functions, lines와 같이 총 4가지가 있는 것을 볼 수 있었습니다. 이번 글.. 2023. 11. 20. [React] Jest로 테스트 커버리지 확인하기 (1) - 개념과 설정 방법 안녕하세요. J4J입니다. 이번 포스팅은 Jest로 테스트 커버리지 확인하는 방법 첫 번째인 개념과 설정 방법에 대해 적어보는 시간을 가져보려고 합니다. 테스트 커버리지란? 테스트 커버리지는 테스트 케이스가 작성된 소스 코드 범위를 의미하는 것으로 실제 기능 동작을 위해 작성된 다양한 코드들이 테스트 코드로 얼마나 작성이 이루어졌는지 확인하도록 도와줍니다. 그리고 React에서 테스트 커버리지를 확인해보고 싶을 때 사용해 볼 수 있는 대표적인 라이브러리로 Jest가 존재합니다. 많은 개발자 분들이 테스트 코드를 작성하기 위해 Jest를 사용하고 계실 것이고, Jest를 사용하고 계시는 중이라면 간단하게 테스트 커버리지를 적용해 볼 수 있습니다. 만약 Jest 설정이 필요하신 분들은 다음 글들을 참고하시면.. 2023. 11. 16. [React] Jest Query 우선순위 비교 안녕하세요. J4J입니다. 이번 포스팅은 jest query 우선순위 비교에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] Jest Query 사용 방법 비교, render vs screen query 우선 순위 비교란? jest를 이용하여 테스트 케이스 코드를 작성하다 보면 testing library를 활용하여 query를 사용해야 하는 경우가 빈번히 발생합니다. 그리고 query를 사용할 땐 getBy, findBy, queryBy 등과 같은 query type을 선택할 수 있고 이들을 활용하여 테스트할 때 필요한 element들을 호출해 볼 수 있습니다. element들을 호출하는 방법에는 여러 가지가 있습니다. 예를 들면 class, id를 이용하거나 role, text 등의 .. 2023. 11. 12. [React] Jest Query 사용 방법 비교, render vs screen 안녕하세요. J4J입니다. 이번 포스팅은 Jest에서 Query 사용을 할 수 있도록 도와주는 render와 screen을 비교해 보는 시간을 가져보려고 합니다. Jest Query 사용이란? Testing Library 공식 문서를 확인해보시면 알겠지만 jest에서 말하는 query 사용은 페이지에 존재하는 다양한 element들을 테스트하기 위한 용도로 조회할 수 있도록 도와주는 함수들을 의미합니다. 예를 들어, 특정 text를 포함하고 있는 element들을 조회하거나 특정 class를 포함하고 있는 element들을 조회할 때 활용되는 것들이 query입니다. jest에서 많은 분들이 사용하는 query 사용 방법은 크게 2가지가 있는 것으로 보입니다. 첫 번째는 컴포넌트를 불러올 때 render.. 2023. 11. 6. [React] Jest 이벤트 처리 비교, fireEvent vs userEvent 안녕하세요. J4J입니다. 이번 포스팅은 Jest 이벤트 처리를 위해 사용되는 fireEvent와 userEvent를 비교해 보는 시간을 가져보려고 합니다. Jest 이벤트 처리란? jest를 이용하여 테스트 케이스를 작성하다보면 특정 element에 이벤트가 발생되었을 때 어떤 상황이 만들어져야 하는지에 대한 경우도 생각해 볼 수 있습니다. 예를 들면, 버튼을 클릭했더니 화면에 보이지 않던 컴포넌트가 보이기 시작한다거나 체크박스를 클릭했더니 실제로 체크가 되었는지 등에 대한 것들을 말해볼 수 있습니다. 이런 이벤트 처리를 수행하기 위해 jest에서 활용해볼 수 있는 모듈은 크게 2가지로 fireEvent와 userEvent가 있습니다. fireEvent와 userEvent를 이용하여 처리할 수 있는 이.. 2023. 11. 2. [React] Vite 타입 스크립트 프로젝트에 ESLint / Prettier 설정하기 안녕하세요. J4J입니다. 이번 포스팅은 vite 프로젝트에 eslint / prettier 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] Vite 사용하기 설정 방법 [ 1. extension 설치 ] 대부분 vscode를 활용하여 개발을 하시고 계실 것이고 저 또한 vscode를 활용하여 개발을 하기 때문에 vscode 기준으로 설정을 해보도록 하겠습니다. 먼저 extension 설치를 진행해줘야 합니다. 다음과 같이 eslint와 prettier를 검색하여 모두 install을 해주시면 됩니다. [ 2. 패키지 설치 ] vite를 활용하여 프로젝트를 만드셨다면 일반적으로 다음과 같은 패키지들은 이미 설치가 되어 있을 겁니다. { "devDependencies": {.. 2023. 10. 31. [React] MSW로 API Mocking 하기 (5) - Cypress에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 MSW API Mocking 하기 마지막인 Cypress에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 [React] MSW로 API Mocking 하기 (3) - Node 환경에서 사용하기 [React] MSW로 API Mocking 하기 (4) - Storybook에서 사용하기 설정 방법 Cypress에 MSW를 적용하기 위해서는 Cypress를 사용할 수 있는 환경과 MSW Browser 환경 설정이 되어 있어야 합니다. 만약 각 환경 구축이 필요하신 경우 다음 글들을 참고.. 2023. 10. 24. [React] MSW로 API Mocking 하기 (4) - Storybook에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 MSW API Mocking 하기 네 번째인 Storybook에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 [React] MSW로 API Mocking 하기 (3) - Node 환경에서 사용하기 설정 방법 Storybook에 MSW를 적용하기 위해서는 Storybook을 사용할 수 있는 환경과 MSW Browser 환경 설정이 되어 있어야 합니다. 만약 각 환경 구축이 필요하신 경우 다음 글들을 참고해 주시면 됩니다. [React] Storybook으로 컴포넌트 문서화하기 [R.. 2023. 10. 16. [React] MSW로 API Mocking 하기 (3) - Node 환경에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 MSW API Mocking 하기 세 번째인 Node 환경에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 Node 환경이란? MSW에서는 Browser, Node 총 2개의 환경을 제공해 줍니다. 여기서 Node 환경은 Node를 이용하여 실행할 때 발생되는 API 처리를 Mocking 해주는 것을 의미합니다. Node 환경으로 간단하게 생각해 볼 수 있는 것은 테스트 도구인 Jest를 언급할 수 있습니다. Jest를 이용하여 테스트를 실행시킬 때 발생되는 API들을 MSW에서 .. 2023. 10. 11. [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 MSW API Mocking 하기 두 번째인 Browser 환경에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] MSW로 API Mocking 하기 (1) - MSW란? Browser 환경이란? MSW에서는 Browser, Node 총 2개의 환경을 제공해 줍니다. 여기서 Browser 환경은 말 그대로 Browser에 접속했을 때 발생되는 API 처리를 Mocking 해주는 것을 의미합니다. 쉽게 접근할 수 있는 것은 React를 이용하여 서버를 실행한 뒤 브라우저를 통해 실행된 서버에서 접속했을 때 요청되는 API들을 Mocking 해준다고 생각하면 됩니다. Browser 환경에서 MSW를 사용하게 되면 실제 API가 개발이.. 2023. 10. 9. [React] MSW로 API Mocking 하기 (1) - MSW란? 안녕하세요. J4J입니다. 이번 포스팅은 MSW로 API Mocking 하기 첫 번째인 MSW가 무엇인지에 대해 적어보는 시간을 가져보려고 합니다. MSW란? MSW는 Mock Service Worker의 약자로 Service Worker를 활용하여 API 요청을 Mocking 하도록 도와주는 라이브러리입니다. Mocking을 한다는 것은 단어의 의미대로 실제 값을 활용하는 것이 아닌 허구의 값이 사용되도록 만드는 것이고, API 요청을 Mocking 하도록 도와주기 때문에 API 처리에 대한 결괏값을 허구의 값으로 만들 수 있도록 도와줍니다. MSW를 사용하지 않을 경우 API 요청에 대한 Mocking을 하기 위해 다른 여러 방법들이 활용될 수 있습니다. 예를 들면 Mocking 처리를 위한 서버를 .. 2023. 10. 8. [React] Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] Vite 사용하기 Jest 사용 환경 설정 Jest를 이용하여 테스트 케이스를 작성하는 경우는 여러 가지 존재합니다. Jest 내부에서만 작성되어 테스트하는 경우, 정의해 둔 모듈을 로드하여 테스트하는 경우, HTML element까지 접근하여 테스트하는 경우 등이 있습니다. 내부에서만 작성하는 경우부터 HTML element까지 접근하는 경우까지 점점 갈수록 더 많은 설정들이 필요한데, 일반적으로 React에서 Jest를 활용하는 경우 HTML element까지 접근하여 사용하기 때문에 이번 글에서는 한 번에 모든 설정을 해보겠습.. 2023. 10. 6. [React] Jest로 테스트할 때 비동기 처리하기 안녕하세요. J4J입니다. 이번 포스팅은 Jest로 테스트할 때 비동기 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 비동기 처리하는 경우 Jest에서 비동기 처리하는 경우는 빈번하게 발생됩니다. 단순한 예시를 들면, 하나의 페이지에서 화면에 보이고 싶은 데이터를 가져오기 위해 API 요청을 하게 되고 전달받은 데이터들이 화면에 올바르게 보이고 있는지 확인해 볼 때 비동기 처리가 필요합니다. 예시를 기반으로 간단하게 소스를 작성해보면 다음과 같습니다. import axios from 'axios'; import { useEffect, useState } from 'react'; interface Person { name: string; position: string; } export defau.. 2023. 10. 5. [React] Vite 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 vite 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Vite란? vite는 webpack, rollup 등과 같이 모듈 번들링을 수행할 때 사용되는 번들러 중 하나입니다. vite가 처음 등장하면서 개발자들에게 알려지기 시작할 때 봤었던 "리액트가 10배가 빨라집니다" 라는 글이 아직도 생각이 납니다. 이런 글의 내용처럼 vite의 가장 큰 특징 중 하나는 속도가 빠르다는 겁니다. ESM, HMR, ESBuild 등을 활용하여 서버 구동되는 시간, 번들링 속도, 코드 갱신 속도 등 다양한 방면에서 빠른 속도를 자랑하기 때문에 프로젝트의 규모가 커질수록 느낄 수 있었던 답답했던 번들링 속도 문제들을 개선하는데 도움을 줍니다. 번들링 속도 문제들을 개선.. 2023. 7. 11. [React] Zustand 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Zustand 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Zustand란? zustand는 react에서 사용할 수 있는 상태 관리 라이브러리 중 하나로 redux와 같이 flux 패턴을 활용하는 기술 중 하나입니다. react에서 활용되는 상태 관리 라이브러리들은 여러 개가 있는데 대표적으로 redux, zustand, jotai, recoil 등이 존재하며 최근 npm 트렌드를 확인해 보면 redux 다음으로 가장 많이 활용되는 라이브러리라고 볼 수 있습니다. react를 처음 배울 때 최초로 사용해봤던 상태 관리 라이브러리는 redux인데 전역으로 데이터를 관리하기 위해 이렇게 까지 코드가 장황해야 하는 생각이 들었던 기억이 있습니다. 그래서 .. 2023. 6. 29. [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. 이전 1 2 3 4 5 ··· 9 다음 728x90 반응형
