성장을 위한 기록

들어가기 앞서 mock API는 꼭 테스트를 위해서만 사용하는 건 아닙니다. API 명세서가 작성되어 있다면 서버가 완성되기 이전 프론트 단에서 개발을 진행할 때 유용하게 사용할 수 있습니다. 이점은 인지하고 넘어가도록 하겠습니다. mock API를 사용하여 리액트 테스트코드 작성하기 이번에는 mock API를 이용하여 테스트하는 방법에 대해 정리해보도록 하겠습니다. 사실 실제 서비스에 연결된 API를 사용하여 테스트 할 수 있습니다. 그렇게 된다면 API 통신까지 테스트를 할 수 있으니 안정성은 더 올라갈 것으로 생각되지만, API 통신 즉 서버가 정상 동작하는건 서버단에서 테스트를 해야할 사항이지 프론트단에서 꼭 테스트할 필요는 없다고 생각됩니다. 그리고 mock API를 사용할 경우 여러 장점이 있..

아래 포스트를 읽기 전 Jest와 React Testing Library에 대해 이해가 없다면 이전 글을 보고 오시는 것을 추천드립니다. 비동기 작업을 고려하여 테스트 코드를 작성해야 하는 이유 개발을 하다 보면 비동기 작업을 하는 경우가 많습니다. Click, 렌더링 등에 이벤트가 발생했을 때 특정 로직을 수행하도록 코드를 작성한 경험이 많을 겁니다. 또 로직을 즉시 실행할 수도 있지만 의도적으로 특정 시간 이후 실행되도록 한 경험도 있을 것이라 생각합니다. 간단한 예로 렌더링 된 후 2초가 지났을 때 화면에 title이 “Load”에서 “Finish”로 변경되는 화면이 있다고 합시다. 이 화면에 테스트 코드를 단순히 render후 Finish text를 찾는다면 에러가 발생합니다. 당연하죠. 변경하기..

이 글은 벨로퍼트와 함께하는 리액트 테스팅을 참고하여 작성했습니다. 혹시 Jest나 React Testing Library가 처음이라면 이전 포스트를 한번 읽고 보시는 것도 이해에 도움이 됩니다. 물론 보지 않으셔도 이해할 수 있습니다. React Testing Library를 이용하여 Todo List 만들기 들어가기 앞서 기반이 되는 벨로퍼트와 함께하는 리액트 테스팅에서는 yarn add react-testing-library jest-dom @types/jest를 사용하고 있습니다. 현재는 라이브러리 이름이 변경되어 react-testing-library가 아닌 @testing-library/react를 사용하고 있습니다. 제가 이 글에서 사용한 라이브러리는 @testing-library/react..

Testing React Apps · Jest React Testing Library | Testing Library CRA와 함께 사용하는 Jest React 프로젝트를 생성하는 방법은 생략하도록 하겠습니다. create-react-app을 사용하여 프로젝트를 생성 했을 때 기본적인 Jest 라이브러리가 같이 설치가 됩니다.따라서 기본적인 테스트 코드를 위한 라이브러리 설치는 필요없습니다. 여기서는 렌더링 스냅샷을 사용하기 위해 react-test-renderer을 추가 설치하겠습니다. yarn add --dev react-test-renderer //Link.tsx import {useState} from 'react'; const STATUS = { HOVERED: 'hovered', NORMAL:..

Getting Started · Jest 본 글은 Jest 29.5V Docs를 기반으로 작성했습니다. 간단한 테스트 작성하기 Jest 설치 yarn add --dev jest 본 글에서는 yarn을 기준으로 작성하겠습니다. npm은 Docs에 나와있으니 참고 부탁드립니다. package.json 수정 { ... "scripts": { "test": "jest" } ... } 테스트 코드 작성 /* sum.ts */ // 테스트할 함수 function sum(a, b) { return a + b; } module.exports = sum; /* src > __tests__ > sum.test.ts */ // 테스트 코드 const sum = require('./sum'); describe("sum mod..

무한스크롤, 페이지네이션이란? 무한스크롤, 페이지네이션이란? 무한 스크롤과 페이지네이션은 비록 방식이 다르지만, 비슷한 목적을 가진 기법이다. 페이지네이션과 무한 스크롤은 데이터를 효과적으로 표현하기 위한 한 가지 기법이다. 한 번에 많은 양의 데이터를 받게 될 경우, 받는 과정이 오래 걸리고 그 데이터를 기반으로 UI를 그리는 데도 시간이 소요된다. 따라서 먼저 데이터를 일부만 불러온 후, 특정 이벤트가 발생할 때 추가 데이터를 받을 수 있다. 페이지네이션의 경우, 흔히 검색에서 볼 수 있는 '이전', '다음'과 페이지 번호를 누를 때 다음 데이터를 로드하게 된다. 반면, 무한 스크롤의 경우 개발자가 지정한 높이를 지나 스크롤했을 때 이벤트를 설정해 추가 데이터를 로드할 수..

순환 참조 이슈 해결 발달 nest.js로 개발 중 A Service를 B Service에 inject, B Service를 A Serivce에 inject하는 상황에서 서로 의존하다보니 에러가 발생했다. (서버 개발자 부재로 서버 코드를 작성하다 발생한 이슈....)\ 에러 로그 Nest can't resolve dependencies of the AService (?, .....). Please make sure that the argument dependency at index [0] is available in the A Moduel context. 해결 앞서 말했든 위 에러는 양쪽에서 의존하여 발생한 이슈이다. Moduel 문제코드 // A-Module @Module({ imports: [ Ty..

발달 전반적인 앱 리뉴얼을 진행하면서 폰트 변경 요청이 들어왔다. 그리고 요청에 맞게 변경했더니 기존 UI가 깨지는 문제가 발생했다. (android에서만) 기존에 사용하던 폰트 : NanumGothic 변경 예정에 폰트 : NotoSansKR NotoSansKR폰트 자체에 위아래 여백이 존재하는 것 같았다. (Ios에서는 자동으로 여백을 삭제하는 것인지 여백이 없었다.) 위 사진은 단순 태그에 123을 입력한 것인데, 위 123을 보면 위아래 여백이 있어 border과 글자 사이에 간격이 넓은 것을 볼 수 있다. 해결 react-native Style에 includeFontPadding라는게 있는데 이걸 false로 지정하면 여백을 지울 수 있다. 하지만 모든 font에 적용하는 것은 귀찮기 때문에 하..

React 프로젝트를 S3에 배포하는 방법을 정리하고자 합니다. AWS에 깊은 지식은 없으며 프로젝트, 회사 내에서 배포를 했던 경험을 바탕으로 정리하는 글임으로 참고하시는 분들은 이점 유의 바랍니다. 피드백은 언제나 환영입니다. S3 버킷 들어가기에 앞서 AWS 콘솔 로그인 등에 기본적인 과정은 생략하도록 하겠습니다. 버킷 생성 1. S3 접속 S3에 들어가서 우측에 "+ 위젯 추가"를 클릭 2. 버킷 만들기 "버킷 만들기" 클릭 3. 버킷 설정하기 이미지에 작성된 내용을 보기 전 이미지 아래에 각 요소에 대한 간단한 설명을 보시고 상황에 맞게 설정하시면 됩니다. 버킷 이름 버킷 이름은 자유롭지만 도메인과 연동할 예정이라면 동일 혹은 비슷하게 작성해 주는 게 좋습니다. 버킷이 쌓이다 보면 구분하기 어려..