Jest 확장 프로그램 jest-extended 사용하기 Jest-extended란?- jest-extended는 Jest에서 사용할 수 있는 추가적인 matcher들을 제공하는 확장 라이브러리입니다.- Jest에서 기본적으로 제공하는 matcher(toBe, toEqual, toContain 등) 외에도 다양한 상황에서 유용한 matcher들을 추가로 사용할 수 있게 해줍니다.- jest-extended를 사용하면 테스트의 가독성과 표현력을 높일 수 있습니다. Jest-extended 설치 (TypeScript 사용)1. 설치npm i -D jest-extended 2. Root에 global.d.ts 파일 생성 (Typescript)import "jest-extended"; 3. Root에 tscon..

Jest 유용한 MatcherJest는 다양한 방식으로 테스트 할 수 있는 matcher를 지원합니다. 쉽게 설명하면 너가 의도하는 값이 이게 맞아? 라고 물어보는 메서드라고 보면 됩니다. 한국어로 모든 Matcher에 대한 자세한 설명을 보고 싶다면 아래 사이트를 참고하시면 됩니다!https://runebook.dev/ko/docs/jest/expect Jest Expect 한국어Articles AWS Documentation Contributors GitHubrunebook.dev Jest 공부 내용 정리toBe()- 단순 값 비교// 함수export const sum = (a: number, b: number) => { return a + b;};// 테스트test("sum은 두 숫자를 더해줍니..

Jest 기본 문법아래와 같이 테스트할 파일과 테스트할함수파일명.test.ts를 해준다. (+ spec.ts도 Jest가 인식하기에 가능하다) // 기본적인 test 문법test('a + b는 3이다.', () => { expect(a + b).toEqual(3);});// 그룹 테스트 문법describe('그룹 테스트 설명 문자열', () => { test('a + b는 3이다.', () => { expect(a + b).toEqual(3); }); test('a + b는 4이다.', () => { expect(a + b).toEqual(4); });}); 기본적으로 test는 test 하나를 테스트할 때 사용하고, 그안의 첫번째 인수로 테스트 설명, 두번째 인수에..

과연 테스트를 해야할까? 테스트를 안 하는 이유테스트 효과 대한 불확실귀찮음스트레스시간이 오래걸림그렇다면 해야하는 이유는?예전에 났던 에러가 또 나는 경우코드가 복잡한데 많이 바꿔야하는 경우하나의 코드를 수정했더니 import한 다른 곳에서 에러가 나는 경우장기간에 걸쳐 내가 유지보수를 해야 하는 경우 Jest란?Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리다. 출시 초기에는 프론트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있다. Jest 이전에는 자바스크립트 코드를 테스트하라면 여러가지 테스팅 라이브러리를 조합해서 사용하곤 했었다.하지만 다른 라이브러리들은 서로 유사하지만..

키보드가 TextInput을 가린다면? 로그인 페이지에서는 이메일, 비밀번호만 작성하면 돼서 키보드에 TextInput이 가릴일이 없었는데회원가입 페이지에서는 TextInput이 많다보니 키보드에 가려지는 현상이 발생했다. 검색을 해보니 React Native에서 keyboardAvoidingView 컴포넌트를 사용해 해당 문제를 해결해준다고 해서 적용을 해보았다. import { Keyboard } from 'react-native'; {children} 키보드가 TextInput을 가리는 이슈를 해결을 했지만 오히려 문제가 두개가 더 생겼다. ㅋㅋㅋㅋ 1. TextInput 외 영역 선택시 키보드가 내려 가야 하는데 내려가지 않음2. 키보드가 화면에 올라갔을때 화면 스크롤..

출시 모드로 APK 또는 Android App Bundle에 서명해야 합니다. - 해결 방법Google Play Console에서 내부 테스트 배포를 자동화 하려면 최초에 한 번은 수동 배포를 해야한다고 해서 빌드한 결과물을 업로드 했는데 위와 같은 오류가 발생했다.android/app/build.gradle 파일이 잘못된 빌드 설정을 했기 때문이라고 한다. 해결방법아래와 같이 수정하는 이유는 출시용 키로 서명을 합니다. 이는 Google Play Console에 업로드를 할 때 필요한 설정입니다. // 기존 코드buildTypes { debug { signingConfig signingConfigs.release } release { ..

@react-native-picker/picker 값 "?"로 나오는 오류 해결 import { SafeAreaView, View, Platform, StatusBar, Text } from 'react-native';import styled from 'styled-components/native';import { Picker } from '@react-native-picker/picker';export default function App() { return ( Hello ..

욕설(비속어) 필터링 기능 개선 (Aho-Corasick 알고리즘) 사이드 프로젝트를 만들었는데 뭔가 허전함을 느꼈다 문득 생각난게 게임처럼 비속어 필터링 기능을 넣으면 어떨까? 라는 생각이 문득 들었다. import { badWords } from "@/constants/badwords"; // 욕설 모음 zip...export default function badWordsFilter(text: string) { let filteredText = text; badWords.forEach((badWord) => { let index = filteredText.toLowerCase().indexOf(badWord.toLowerCase()); while (index !== -1) { ..

Next.js server action을 공부하면서 요소의 action속성은 기본 FormData(캡처된 데이터가 포함된 개체)를 자동으로 수신한다는 것을 알았다.그리고 이 FormData를 어떤식으로 사용하는지에 대해서 공부하면서 처음보는 Object.fromEntries()를 보게 되어 기록하고자한다. FormData를 사용하려면 기본적으로 아래와 같이 사용한다.'use server';// 데이터 추출하기export async function createInvoice(formData: FormData) { const rawFormData = { customerId: formData.get('customerId'), amount: formData.get('amount'), statu..