Mong dev blog

1. 단위 테스트의 여러 검증법이번 시간에는 React, Vitest, React Testing Library를 사용해, 단위 테스트의 여러 검증방법을 알아보았다. 포스팅의 목차는 아래와 같다.1) 모킹으로 외부 모듈 검증하기2) 커스텀 훅 검증하기(ex. custom Hook)3) 비동기 검증하기(ex. timer)만약 단위테스트의 정의, 작성법에 대한 사전 지식이 없다면, 이 포스팅을 먼저 보는 걸 추천한다.1) 모킹으로 외부 모듈 검증하기(1) 모킹이 필요한 경우는?프로젝트는 여러 외부 라이브러리를 사용한다.그렇다면 테스트하고 싶은 대상 컴포넌트에서 외부 라이브러리를 사용하고 있다면 어떻게 검증해야할까?외부 라이브러리에 대한 검증도 해야할까? 검증이 필요할 수도 있지만, 대체로 생략 가능하다!❓ 그..

0. 들어가기 전에 현대의 개발 생태계는 빠르게 변화하는 기술 요구사항과 지속적인 서비스 업데이트를 경험하고 있다. 그래서 개발 팀은 코드의 품질을 지키면서 신속한 배포를 동시에 충족해야한다. 이러한 환경에서 프론트엔드도 테스트의 중요성이 커지고 있다. 단위 테스트는 코드의 각 부분이 예상대로 작동하는지 확인함으로써, 전체 시스템의 안정성과 신뢰성을 보장할 수 있다. 이번 포스팅에서는 단위 테스트는 무엇이며 테스트 작성시 주의할 점은 무엇인지 한 번 알아보았다. 1. 단위 테스트 개념과 작성시 주의할 점 1) 단위 테스트란? (Unit Test) 단위 테스트는 개발 과정에서 개별 모듈이나 함수가 예상대로 작동하는지 검증하는 절차이다. 테스트는 소스 코드의 가장 작은 실행 단위에 대해 수행되며, 각 단위가..

이번 시간에는 string 문자나 정규표현식을 정규표현식으로 변경해주는 코드를 살펴보자 1. 언제 유용할까? string 문자(’feat’) 혹은 string 타입의 정규표현식(’/feat/’)은 정규표현식 함수를 바로 쓸 수 없다. 그렇기 때문에 string타입의 문자 혹은 정규표현식을 정규표현식으로 변환해야하는데, 어떤 경우에 변환하는 코드를 쓰는 걸까? 대체로 입력값을 string 타입만 받을 수 있는 경우일 것이다. 대표적으로 github actions의 경우, 인자를 string으로만 받을 수 있기 때문에 github actions에서 입력값으로 정규표현식을 받으려면 ‘/feat/’ 형태로 써야한다. 하지만 ‘/feat/’형태로 받으면 정규표현식 함수를 쓸 수 없다. 🤔 왜 string타입의 정..

이번 시간에는 병합된 PR의 라벨에 따라 버전을 올리고 release note를 작성해보자! 이 작업을 위해, 자동 라벨링을 해주는 labeler-action과 릴리즈 노트를 작성해주는 release drafter 쓴다. 대략적인 컨셉은 아래와 같다. pull_request가 opened됐을 때 labeler-action을 사용해 라벨링을 한다. 이때, pull_request 제목에 feat가 들어갔다면 enhancement라는 라벨을 지정해준다. pull_request가 main에 merge되었을 때 release drafter을 사용해 릴리즈 노트를 작성하도록 한다. 기본적으로 patch 버전을 올리며, 만약 라벨이 enhancement인 경우 minor 버전을 올린다. 1. labeler-actio..

1. CI/CD는 무엇일까? 1) CI, CD란? CI/CD는 코드 병합, 테스트, 배포를 자동화하는 걸 이야기한다. CI(Continuous Integration)는 지속적 통합을 의미하며, CD는 지속적인 서비스 제공(Continuous Delivery), 배포(Continuous Deployment)를 의미한다. CI, CD는 각각 개념이 다르지만, 같이 구축되는 경우가 많아 CI/CD라고 묶인다. 구체적인 개념은 아래에서 살펴보자. (1) CI? CI는 지속적 통합을 뜻하며, 일련의 통합 과정을 자동화하는 걸 의미한다. 그런데 CI는 어떤 경우 때문에 필요한걸까? A팀에 개발자가 5명 존재한다. 이 팀은 각각, 코드 작업을 완료하여 github에 push한다. 그리고 모인 코드는 병합을 거치게 된..

1. 정규표현식이란? 정규표현식은 특정 규칙을 가지는 문자열을 찾아내는 방법입니다. 정규표현식을 통해 검색을 할 수도 있고, 해당하는 문자를 변경할 수도 있습니다. 2. 정규식 생성법 정규식을 생성하는 방법에는 2가지 방법이 있습니다. 하나는 리터럴, 또 다른 하나는 RegExp 객체를 생성하는 방법입니다. 그렇다면 이 두 방법 어떤 경우에 쓰는 게 좋을까요? A. 정규식 패턴이 유지되는 경우 만약 정규식 패턴이 변경되지 않는다면 리터럴 방법을 사용하는 걸 추천합니다. 리터럴 방식은 아래와 같습니다. const reg = /ab/; //ab문자열을 가지는 패턴 B. 정규식 패턴이 변동되는 경우 만약 정규식 패턴에 변수처럼 변동값이 들어가는 경우에는 이 방법을 써야 합니다. new RegExp객체를 생성하..