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 기본 문법아래와 같이 테스트할 파일과 테스트할함수파일명.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..

Zod란 뭘까?TypeScript 기반의 스키마(데이터 유형) 선언 및 유효성 검사 라이브러리 Zod 의 목표는 유형 선언의 중복을 제거하는 것이며, Zod 을 사용하면 한 번 유효성 검사기를 선언하고 Zod 이 정적 TypeScript 유형을 자동으로 추론한다 - Zod - [공식문서] Intro | Zod zod.dev Zod의 장점의존성 없음Node.js 및 모든 최신 브라우저에서 작동작음: 8kb 압축 후 크기불변성 유지: 메서드 (예: .optional())는 새 인스턴스를 반환합니다.기능적 접근: 구문 검사, 유효성 검사하지 않음일반 JavaScript에서도 작동합니다! TypeScript를 사용할 필요가 없습니다. Zod 사용방법설치npm install zodyarn add zod tscon..