[Javascript] Jest란 ?

1.Jest란?Jest는 Javascript 애플리케이션을 위한 테스팅 프레임워크로, 페이스북에서 개발하고, 주로 React 애플리케이션에서 테스트용으로 쓰지만, 일반 Javascript 및 Node.js 애플리케이션에서도 효과적인 사용이 가능합니다. Jest는 단위 테스트, 통합 테스트, 스냅샷 테스트 등을 지원하여 개발자가 코드의 품질을 보장할 수 있도록 도와주는 라이브러리입니다.2. Jest의 특징간단한 설정: 기본적으로 설치 후 바로 사용할 수 있어 복잡한 설정 필요X스냅샷 테스트: UI 컴포넌트의 렌더링 결과를 저장, 이후 비교하여 변경 사항을 쉽게 확인모의 함수(mock functions): 테스트 중 특정 함수의 동작을 모의하여, 의존성을 줄이고 테스트의 집중도를 높임비동기 테스트 지원: P..

• format_list_bulleted Front-End/JavaScript
• · 2025. 2. 25.
• textsms

[Javascript] 슬라이드 구현하기

자바스크립트를 사용해 간단하게 이미지를 슬라이드 구현하는 방법을 알아보겠습니다. 아래 예제는 HTML, CSS,Javascript를 사용해 기본적인 이미지 슬라이드 쇼를  만드는 방법을 알 수 있습니다.1. HTML (index.html) 𘛾 𘛾 2.CSS (style.css)* { box-sizing: border-box;}body { margin: 0; padding:0; display:flex; justify-content: center; /* 중앙 정렬 */ align-items..

• format_list_bulleted Front-End/JavaScript
• · 2025. 2. 16.
• textsms

[Javascript] 14강 Javascript의 프로토타입 객체

자바스크립트에 프로토타입 객체는 객체 지향 프로그래밍 중 중요한 개념 중 하나로, 객체는 다른 객체를 상속받을 수 있습니다. 이를 통해서 코드의 재사용성과 유연성을 높일 수 있습니다.1. 프로토타입 객체의 주요 개념프로토타입모든 자바스크립트 객체는 prototype이라는 속성을 가짐이 속성은 객체가 상속받을 수 있는 메서드와 속성을 정의프로토타입 체인객체가 특정 속성이나 메서드를 찾을 때, 자바스크립트는 먼저 해당 객체 자체에서 찾고, 없다면 그 객체의 프로토타입을 확인, 이 과정을 반복하며, 이를 프로토타입 체인이라함생성자 함수객체를 생성하기 위해 생성자 함수를 사용, 이 함수의 prototpe 속성에 메서드를 추가가능, 생성된 객체는 이 메서드에 접근할 수 있음2. 프로토타입 속성모든 자바스크립트 객..

• format_list_bulleted Front-End/JavaScript
• · 2025. 2. 15.
• textsms

[Javascript] 13강 자바스크립트 모듈

Javascript 프로그램은 꽤 작게 시작했습니다. 초기에 사용 된 대부분 스크립트는 독립적 작업을 수행하고, 필요한 경우 웹 페이지에 약간의 상호 작용을 제공해 일반적으로 큰 스크립트를 필요하지 않았습니다. 시간이 흐르고 많은 웹 브라우저에 실행되고 있는 완전한 애플리케이션을 실행할 수 있음과 동시 다른 컨텍스트(Node.js)에서 사용되게 되었습니다. 브라우저 호환성 js-examples/module-examples/basic-modules at main · mdn/js-examplesCode examples that accompany the MDN JavaScript/ECMAScript documentation - mdn/js-examplesgithub.com 자바스크립트 샘플의 첫 번째 예제(b..

• format_list_bulleted Front-End/JavaScript
• · 2025. 2. 13.
• textsms

[Javascript] 12강 반복기와 생성기

Javascript는 간단한 for 루프에서 map() 함수와 filter()에 이르기까지, 컬렉션을 반복하는 방법이 여럿 존재합니다. 반복기및 생성기는 반복 개념을 핵심 언어 내로 가져와 for...of 루프의 동작을 사용자가 직접 정의하는 매커니즘을 제공합니다. 1. 반복자 반복자(lterator)는 시퀀스를 정의하고 종료시의 반환값을 잠재적으로 정의하는 객체입니다. 두 개의 속성 (value, done)을 반환하는 next() 메소드를 사용해 객체의 lterator protocol을 구현합니다. 시쿼스의 마지막 값이 이미 산출되었다면 done 값은 true가 됩니다. 만약 value 값이 done과 함께 존재하면, 그것은 반복자의 반환값이 됩니다. 반복자를 생성하면 next() 메소드를 반복적으로 ..

• format_list_bulleted Front-End/JavaScript
• · 2025. 2. 10.
• textsms

[Javascript] 11강 형식화 배열

형식화 배열(typed array)은 배열같은 원시(row) 이진 데이터에 엑세스하기 위한 매커니즘을 제공합니다. Array 객체는 동적으로 늘어나다 줄어들고 어떤 Javascript 값이든 가질 수 있습니다. Javascript 엔진은 이렇한 배열이 빨라지도록 최적화를 수행합니다. 그러나, audio 및 video 태그 조작과 관련된 기능 추가, WebSocket은 원시 데이터에 엑세스 등 웹 어플리케이션이 점점 더 강력해짐에 따라, 빠르고 쉽게 형식화 배열의 원시 이진 데이터를 조작할 수 있게 하는 것이 코드에 도움이 될때가 있음을 분명해졌습니다. 그러나, 형식화 배열은 보통 배열과 혼동되지는 않고, 형식화 배열의 Array.isArray() 호출은 false를 반환하기에, 보통 배열에 이용할 수 있..

• format_list_bulleted Front-End/JavaScript
• · 2025. 2. 9.
• textsms