[Javascript] Jest 실패한 테스트만 실행시켜보자. watch 모드 기능

벌써 우테코 프리코스 3주 차가 시작되었습니다! 이번 새로운 과제에서의 테스트 코드가 조금 바뀌었는데요, 단순히 jest로 실행하던 테스트 CLI가 다음과 같이 변경되었습니다. "scripts": { "test": "jest --detectOpenHandles --watch" } watch라는 명령어가 추가되었는데요, 그렇다면 이게 무엇을 하는 것일까요? ❓Watch 모드는 어떤걸 하는 걸까? Watch 모드는 실패한 테스트, 정규 표현식을 사용하여 테스트 하고 싶은 파일만 실행시켜주는 기능입니다. 원하는 테스트를 골라서 실행할 수 있게 되는 것이죠! jest --watch 를 실행하게 되면 다음과 같은 화면이 나옵니다. Watch를 실행하게 되면 다양한 옵션을 선택할 수 있습니다. a 를 입력해 모든 ..

• format_list_bulleted Front End/Javascript
• · 2023. 11. 3.
• textsms

[Javascript] 전역에서 객체를 선언하면 안되는 이유

이번에 우테코 2주차 코드 리뷰에서 정말 중요한 피드백을 하나 받았습니다! 바로 전역에서 객체를 선언하지 말라는 것! 그렇다면 왜 객체를 전역에서 선언하는 것이 위험할까요? ❓객체의 특성 이번 우테코 2주차 미션에서 제가 작성한 코드 하나를 예로 보면서 어떤 상황인지 설명드리겠습니다. const carHandler = { readCarsInput: async () => { const INPUT = await readInput(CAR_MESSAGES.INPUT); validateCarsInput(INPUT); return INPUT; }, handleCarConvertedToClass: (cars) => { const carClasses = cars.map((car) => { const carClass =..

• format_list_bulleted Front End/Javascript
• · 2023. 11. 2.
• textsms

[개발 상식] 정규표현식을 배우자!

개발자라면 개발 언어를 불문하고 정규표현식을 접하는 일이 정말 많을텐데요. 초보 개발자인 저에게 정규 표현식은 아직 낯설기만 하네요. 그래서 이번 시간에는 정규 표현식을 완전히 마스터 해보는 시간을 가지려 합니다! 개인적으로 정규 표현식 공부 자료중에서 제일 이해하기 쉽게 만든 영상이라 생각되어서 이 영상을 기준으로 공부하려 합니다! ❓정규 표현식이 무엇일까요? 정규 표현식은 문자열의 검색, 패턴 매칭 및 텍스트 조작을 위한 유연하고 강력한 도구입니다! 기본적인 패턴은 다음과 같습니다 정규 표현식의 자세한 내용은 아래 페이지를 참고하시면 좋습니다! RegExp | PoiemaWeb 정규표현식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다. 예를 들어 회..

• format_list_bulleted 개발 상식
• · 2023. 11. 2.
• textsms

[개발 설계] MVVM이 뭔가요?

이번에는 MVVM에 대해서 공부하며 정리하는 시간을 가지려 합니다. ❓MVVM? MVVM은 MS사에서 프레젠테이션 모델(PM) 패턴을 수용하여 만들어 낸 모델이라고 합니다. MVVM은 모델, 뷰, 뷰 모델 이 세기자의 구성 요소를 가지고 있는 패턴을 말합니다. MVVM 패턴을 통해 ‘애플리케이션의 논리를 UI와 명확하게 구분’하는데 도움이 된다고 합니다! 이에 따라서 UI 수정 비용을 절약할 수 있고, 단위 테스트에 용이해지며, UI 디자이너와 개발자가 함께 작업할 수 있는 환경을 만드는데 도움을 줄 수 있다고 하네요. 그렇다면 어떤 방식으로 애플리케이션의 논리를 UI와 구분짓는 것인지 알아 보도록 하겠습니다. 우선 뷰, 모델, 뷰모델이 무엇일까요? ❓뷰 뷰는 사용자가 화면에 표시되는 구조, 레이아웃 및..

• format_list_bulleted 개발 상식/객체 지향 & 설계
• · 2023. 11. 2.
• textsms

[우아한 테크코스 6기 프리코스] 2주차 회고록

이번 주도 너무나 많은 것들을 배울 수 있어 정말 감사한 한 주였습니다! 이번 주는 코드 리뷰부터 시작해 새로운 요구 사항들을 공부하느라 정신없이 몰입할 수 있었던 한 주였는데요, 그만큼 배울 것도 정말 많았습니다! 코드 리뷰, 공통 피드백에서 정말 생각지 못했던 많은 것들을 배울 수 있었습니다. 다른 사람의 코드를 보는 것이 이렇게 중요하구나! 새삼 깨닫게 되었구요, 또 요구 사항을 분석하면서 ‘코드 가독성’과 ‘TDD’에 대한 고찰을 할 수 있었습니다! 그리고 부족한 점을 채우고자 이번에 ‘클린 아키텍처’라는 책과 함께 한 주를 보냈는데요, 지난주에 이어 ‘객체 지향’에 대해 더욱 잘 이해할 수 있었습니다. 이 과정에서 제가 어떻게 공부를 했는지 말씀 드리겠습니다😆 🌱난생처음 해보는 코드 리뷰 처음 ..

• format_list_bulleted 우아한 테크코스 6기/우아한 테크코스 6기 프리코스
• · 2023. 11. 2.
• textsms

[개발 설계] 퍼사드(Facade) 패턴

객체 지향을 공부하는 와중 퍼사드 패턴이라는 것을 접하게 되었고 이를 완전히 이해하고자 블로그 글을 적습니다! ❓퍼사드 패턴? 우선 정의부터 살펴볼까요? 퍼사드(프랑스어: façade[fəˈsɑːd] 영어: facade) 패턴(외관 패턴)은 소프트웨어 공학 디자인 패턴 중 하나이다. 객체 지향 프로그래밍 분야에서 자주 쓰인다. Facade (외관)는 "건물의 정면"을 의미합니다. 복잡한 시스템이나 서브 시스템의 인터페이스를 단순화하는 데 사용됩니다. 이 패턴은 클라이언트가 복잡한 시스템의 일련의 서브 시스템과 직접 상호작용하는 대신, 단일 인터페이스를 제공하여 시스템과의 상호작용을 쉽게 만듭니다. 저는 이 글에서 눈에띄는 것은 단순화! 입니다. 자바스크립트의 예시를 보겠습니다. // 복잡한 주문 시스템 ..

• format_list_bulleted 개발 상식
• · 2023. 10. 31.
• textsms