[JS] Element 함수 matches()를 이용한 이벤트 추가

❗matches 함수의 기본적인 사용방법 matches 함수는 Element의 내장 메서드입니다. CSS 선택 문자열로 요소의 일치 여부를 판단할 수 있습니다. const element = document.getElementById('myElement'); if (element.matches('.myClass')) { console.log('The element matches the selector'); } else { console.log('The element does not match the selector'); } ❗matches를 이용한 버튼 이벤트 추가 다음과 같이 버튼이 있다고 했을 때, 이벤트를 어떻게 부여할 수 있을까요? btn1 btn2 btn3 기본적으로 순회를 통해서 addEvent..

• format_list_bulleted 개발관련/Javascript
• · 2024. 3. 7.
• textsms

[디자인 패턴] 프로토타입(Prototype) 패턴

❓프로토타입 패턴이 무엇일까? 프로토타입 패턴은 생성패턴의 하나로, 프로토타입(원형)을 사용하여 객체를 생성하는 것을 말합니다. ❓프로토타입(원형)을 사용하는 이유? 프로토타입에서는 기존에 있는 객체가 있다면, 새로 생성하는 것이 아닌, 기존의 객체를 복제하여 사용합니다. 이는 새로 객체를 만드는 것 보다 자원을 절약할 수 있습니다. 즉 인스턴스화 과정을 생략함으로써 생성 로직에 소모되는 시간과 자원을 절약할 수 있다는 것! 이러한 특성 때문에 대량 생산을 할 때 적은 자원으로 많은 객체를 만들 수 있다는 장점이 있습니다! ❓자바스크립트의 예시? 사실 자바스크립트의 예시라고 할 것이 없는 것이, 프로토타입은 자바스크립트에 내장 되어 있는, JS의 특징이라 할 수 있습니다. const Person = (f..

• format_list_bulleted 개발관련/디자인 패턴
• · 2023. 11. 11.
• textsms

[Javascript] If 조건문과 Switch 조건문의 차이

우테코 프리코스의 3주 차가 벌써 막바지에 다다랐습니다. 저는 현재 3주 차 미션의 리팩토링을 진행하고 있는데요, 저번 2주 차 피드백에서 “if문 대신 switch문을 쓰는 게 더 깔끔하게 보일 수 도 있다” 라는 피드백을 받았습니다. 이 피드백을 계기로 switch 구문과 If 구문의 차이점을 정확하게 알고 적시에 사용할 수 있는 역량을 길러보려고 합니다! 일단 저는 지금까지 개발 공부를 하며 switch 구문을 단 한 번도 사용해 본 적이 없습니다. 그리고 굳이 switch 구문을 사용해야 될 필요성도 못 느꼈죠. 그래서 if문의 설명은 생략하고, switch 구문의 특성부터 알아보도록 하겠습니다. ❓Switch 구문의 특성 1️⃣ 값에 따른 Case 분기 switch 구문에서의 case는 특정 변..

• format_list_bulleted 개발관련/Javascript
• · 2023. 11. 7.
• textsms

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

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

• format_list_bulleted 개발관련/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 개발관련/Javascript
• · 2023. 11. 2.
• textsms

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

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

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