728x90 반응형 SPA/React98 [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. [React] Tailwind 사용하기 (3) - 커스텀(Custom) 하기 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 마지막인 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Tailwind 사용하기 (1) - 개념 및 설정 [React] Tailwind 사용하기 (2) - StyledComponents와 CSS 적용 비교하기 Theme 커스텀 theme 커스텀은 기본적으로 tailwind에서 제공해 주는 theme을 사용자의 스타일에 맞게 재 정의하는 것으로 tailwind.config.js에서 적용할 수 있습니다. 색상, 글자 크기, 너비 등 tailwind를 이용하여 적용하고 싶은 css 들을 원하는 데로 추가해 줄 수 있으며 다음과 같이 설정하여 적용해 볼 수 있습니다. // tailwind.config.js /*.. 2023. 5. 24. [React] Tailwind 사용하기 (2) - StyledComponents와 CSS 적용 비교하기 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 두 번째인 styledComponents와 CSS 적용 비교하기에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Tailwind 사용하기 (1) - 개념 및 설정 들어가기에 앞서 이전 글에서도 간단하게 확인해 볼 수 있는 것처럼 tailwind에 css를 적용할 땐 tailwind에서 기본적으로 정의해 둔 class 명을 이용해야 합니다. 색상, 크기, 여백 등의 모든 css들이 기본적인 css 구조에서 스타일을 적용하기 위해 사용하던 방식과 모두 상이하기에 처음 tailwind를 사용하시는 분들이라면 tailwind 공식 문서를 당분간 필수적으로 참고하시는 것을 추천드립니다. 그리고 이번 글에서는 일반적으로 자주 사용되.. 2023. 5. 22. [React] Tailwind 사용하기 (1) - 개념 및 설정 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 중 첫 번째인 개념 및 설정에 대해 적어보는 시간을 가져보려고 합니다. Tailwind란? tailwind는 유틸리티 우선(Utility-First) css 프레임워크로 불립니다. 여기서 말하는 유틸리티 클래스는 버튼, 모달 등과 같이 주변을 구성하기 위한 css가 아닌 빨간색 글자 색상, xl 사이즈의 글자 크기 등과 같이 하나의 css에 정의된 속성과 값을 가지는 걸 의미합니다. 즉, 유틸리티 우선이라고 하는 것은 bootstrap처럼 기존에 정의된 값을 가져와 사용하는 것이 아닌 사용자가 원하는 데로 각각의 속성값을 적용하는 방식이라고 말할 수 있습니다. // css .container { border: 2px solid black;.. 2023. 5. 17. [React] Cypress Custom Command 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Cypress Custom Command 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Custom Command란? Custom Command는 테스트 코드를 작성할 때 Cypress에서 제공해 주는 명령어가 아닌 사용자가 원하는 의도대로 동작될 수 있는 명령어를 자체적으로 구현한 것을 의미합니다. Custom Command를 사용하는 대표적인 이유는 재사용성을 높이기 위함이라고 생각합니다. 테스트 코드를 작성하다 보면 중복되는 코드들이 수 없이 발생될 수 있습니다. 그럴 때마다 각 파일들에 중복 코드들을 매번 작성해주는 것은 비효율적이며 유지보수하기 어렵게 만들기 때문에 Custom Command를 생성한 뒤 단순 호출하는 방식을 선택하여 코드 개선.. 2023. 5. 14. [React] Cypress API 요청 기다리기 안녕하세요. J4J입니다. 이번 포스팅은 cypress에서 api 요청 기다리는 방법에 대해 적어보는 시간을 가져보려고 합니다. API 요청을 기다려야 하는 경우 cypress를 사용하면서 api 요청을 기다려야 하는 경우는 정말 단순하게 api 요청 처리가 오래 걸리는 작업들이라고 얘기할 수 있습니다. 대부분의 api를 처리할 때 시간이 오래걸리지 않겠지만 시간이 오래 걸리는 일부 api들에 대해서 cypress 테스트를 진행하려고 하면 api가 응답되는 시간을 모두 기다리지 않고 이후 처리를 진행하기 때문에 생각하던 것과 다른 결과를 얻게 됩니다. 이와 같은 상황을 테스트를 위해 다음과 같은 api를 이용하여 데이터를 호출한 뒤 화면에 그려주는 코드를 작성해 볼 수 있습니다. import axios .. 2023. 4. 23. [React] Cypress로 내부 DOM 테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 cypress로 내부 dom 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Cypress로 내부 DOM 테스트할 때 발생되는 문제 예를 들어 다음과 같은 코드를 테스트한다고 가정해 보겠습니다. import React from 'react'; const App = () => { return ( 첫번째 타이틀 첫번째 아이템1 첫번째 아이템2 두번째 타이틀 두번째 아이템1 두번째 아이템2 ); }; export default App; 테스트하고자 하는 것은 두 번째 wrapper의 내부에 있는 [data-cy=item]의 첫 번째 요소를 확인했을 때 요소가 가지고 있는 텍스트 값이 "두번째 아이템1" 인지 검증하는 것입니다. 해당 요소를 검증하는 것은 cy.. 2023. 4. 16. [React] Cypress로 E2E테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 cypress를 이용하여 e2e 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. E2E 테스트란? E2E는 End to End의 약자로 사용자의 관점에서 테스트를 진행하는 것을 의미합니다. 말 그대로 사용자가 서비스에 접속했을 때 하는 행동들과 그 행동들에 의해 동작되는 여러 액션들을 테스트할 수 있기 때문에 사용자가 사용하는 관점에서 발생될 수 있는 문제들을 파악하는데 도움을 줍니다. E2E 테스트를 포함하여 React에서 진행되는 테스트들은 다음과 같이 있습니다. 단위 테스트 통합 테스트 E2E 테스트 E2E 테스트는 브라우저를 통해 실제 사용자가 서비스를 사용하는 부분을 테스트하기 때문에 위의 테스트들 중 가장 큰 리소스를 필요로 합니다. 즉, 테.. 2023. 4. 12. [React] react-hook-form에서 Cannot read properties of undefined (reading '_f') 발생되는 경우 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form Cannot read properties of undefined (reading '_f') 에러에 대해 적어보는 시간을 가져보려고 합니다. 발생되는 경우 먼저 다음의 간단한 코드를 봐보도록 하겠습니다. import React, { useEffect } from 'react'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; interface UseForm { firstPhone: string; secondPhone: string; thirdPhone: strin.. 2023. 2. 1. [React] 브라우저에서 암호화를 사용할 경우 발생하는 문제점 안녕하세요. J4J입니다. 이번 포스팅은 브라우저에서 암호화를 사용할 경우 발생하는 문제점에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... 아래 글에서 사용될 암호화는 대표적으로 많이 사용되는 aes를 사용하려고 합니다. aes 암호화와 복호화를 위한 코드는 아래와 같고 자세한 설정 사항은 [React] AES256 암호화 (with. Java)를 참고해주시길 바랍니다. import cryptoJs from 'crypto-js'; const secretKey = '12345678901234567890123456789012'; // 32자리 비밀키 const iv = 'abcdefghijklmnop'; // 16자리 iv // 암호화 export const encrypt = (text: s.. 2022. 10. 17. [React] webpack을 이용하여 sourceMap 제거하기 안녕하세요. J4J입니다. 이번 포스팅은 webpack을 이용하여 sourceMap 제거하는 방법에 대해 적어보는 시간을 가져보려고 합니다. sourceMap이란? sourceMap을 제거하기에 앞서 sourceMap이 무엇이기에 제거해야 되는지에 대해 먼저 알아보겠습니다. sourceMap은 빌드된 파일과 실제 개발할 때 사용된 파일을 연결 시켜주기 위해 사용됩니다. 일반적으로 배포를 하기위해 빌드를 하면 최적화 작업을 위해 사용되고 있는 HTML, CSS, JS 등이 난독화가 이루어지며 압축이 이루어집니다. 그렇기 때문에 에러가 발생되었을 때 빌드가 이루어진 파일로 확인하기가 쉽지 않은데, 이를 쉽게 확인하기 위해 원본 파일과 매칭 하여 에러난 부분이 어딘지를 확인할 수 있도록 도와주는 것이 sour.. 2022. 10. 12. [React] 뒤로 가기 막기 안녕하세요. J4J입니다. 이번 포스팅은 뒤로 가기 막는 방법에 대해 적어보는 시간을 가져보려고 합니다. 뒤로 가기 막는 방법 리액트를 이용해 여러 UI/UX를 제공하다 보면 상황에 따라 뒤로 가기를 눌렀을 때 기존에 우리가 알던 방식처럼 이전 URL로 넘어가는 것이 아니라 특정 액션이 취해지는 결과를 만드실 필요가 있을 수도 있습니다. 흔히 사용되는 케이스는 아닐 것으로 생각되지만, 혹시나 필요하신 분들을 위해 제가 알고 있는 방법에 대해 간단히 적어보도록 하겠습니다. 먼저 다음과 같은 코드를 보겠습니다. import React, { useEffect, useState } from 'react'; const App = () => { const [toggle, setToggle] = useState(fa.. 2022. 10. 10. 이전 1 2 3 4 5 6 다음 728x90 반응형
