JS Ecosystem (44) 썸네일형 리스트형 Mocha, chai, jsdom을 활용한 JS 테스팅(1) - jsdom (Testing) Mocha, chai, jsdom을 활용한 JS 테스팅(2) - Mocha 와 chai (Testing) Mocha, chai, jsdom을 활용한 JS 테스팅(3) - custom event dispatch Bare minimum 수준의 테스트 통과 사례이다. JS테스팅에서 DOM을 생성하는 자바스크립트 파일을 테스팅할 때 이벤트를 직접 만들어서 자바스크립트 웹 애플리케이션이 제대로 작동하는 지를 점검해야 하는 경우가 있다. Mocha로 단순 JS파일을 테스트하는 작업도 낯선데 DOM을 조작하는 calculator 애플리케이션에 대해서 testing을 하는 작업에 대해 기술하도록 하겠다. 1. Node.js와 jsdom으로 document 객체 생성하기 if (typeof window.. (JavaScript) DOM 조작방법 DOM과 JavaScript의 차이에 대해 이해할 수 있다. DOM은 JavaScript 언어의 일부가 아니라 웹사이트를 구축하는 데 사용되는 Web API. JS는 다른 컨텍스트에서도 사용할 수 있다. DOM은 특정 프로그래밍 언어와 독립적으로 설계되어 문서의 구조적 표현을 일관된 단일 API에서 사용할 수 있습니다. createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다. HTML5 template tag 사용법을 이해할 수 있다. : The Content Template element - HTML: HyperText Markup Language | MDN The HTML element is a mechanism for holding HTML that is not.. (JavaScript) 번들링과 빌드 시스템 bundler 웹서비스 규모가 커지면서 수백줄의 코드, 수십개의 JS파일을 읽어야 하면서 발생하는 문제점 전역 범위를 파일의 중복 선언 느린 로딩 수동적인 웹 개발 루틴 작업 (파일, 이미지 압축 / CSS 전처리기 변환 등) 번들러(bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(번들) 도구를 의미합니다. Webpack 프론트엔드 프레임워크에서 가정 대중적인 모듈 번들러. 모듈: 웹 애플리케이션을 구성하는 특정 기능의 자원 JS 파일 뿐만 아니라 HTML, CSS, image,Font 등의 수십개의 파일을 하나의 JS파일로 압축, 축소 장점: 서버와 여러번 통신하지 않아도 됨. 로딩 속도 높아짐 transpile 최신 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스.. (React) useRef : 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안되는 값을 다룰 때 사용 useRef 유스 케이스 1. 변수 관리 : 렌더링과는 무관하게 변수를 관리해야 하는 경우 const initailValue = useRef(0) //useRef는 current 객체를 가진다. console.log(initail.current) useRef는 객체이고 current라는 키에 useRef의 값을 담고 있다. let, const 키워드로 선언된 값은 컴포넌트가 렌더링되면 초기값으로 변하게 된다. 컴포넌트의 생명주기와는 무관하게 관리되어야 할 값들이 let, const에 담기게 된다면 렌더링이 발생하는 순간 그 값들은 초기값으로 변하게 되어 누적 관리된 값들이 사라지게 된다. 이런 문제를 방지하기 위해 useRef를 사용하면 렌더링과는 무관하게 변수를 관리할 수 있다. 2. DOM 접근 : .. (DOM) querySelector의 부모는 꼭 document 객체여야만 하는가? document.querySelector() element.querySelecotor() 꼭 document만 들어갈 필요가 없다. document 하위의 어떤 객체이든 간에 자식 요소를 가지고 있다면 querySelector의 부모 요소가 될 수 있다. (링크) var x = document.getElementById("myDIV"); x.querySelector(".example").innerHTML = "Hello World!"; (DOM) querySelector로 좀 더 복잡한 요소를 선택해 보자. CSS 셀렉터(=선택자)에서 '기본 속성 선택자' 를 활용하여 좀 더 복잡한 요소를 선택해 보자. HTML에서 클래스명이 tweet 이라는 요소를 조회하는 DOM메소드는 querySelector('.tweet') 이다. 그렇다면 아래의 DOM메소드는 어느 요소를 조회하는 메소드일까? let oneEle = document.querySelector("div.user-paner.main input[name=login]"); 위의 예제는 MDN querySelector에 나온 것이다. 예제의 결과는 클래스가 "user-panel main"인 안에 이름이 "login"인 중 첫번째 요소를 조회하는 것이다. input[name=login]은 CSS 선택자의 기본 속성 선택자이며, div.user-paner.mai.. (JS) DOM과 Jquery로 짠 코드 간단한 차이 DOM JQuery 추천 도서 : 'DOM을 깨우치다' (Javascript) 정규 표현식 메소드 정규 표현식에서 자주 사용되는 메소드는 test(), search(), replace()이다. test() - 찾는 문자열이 포함된 여부를 알려준다. 회원가입 할 때 아이디나 비밀번호 입력의 유효성 검사에 많이 사용된다. 문장안에서 찾으려는 문자가 들어 있으면 결과는 true이고 없으면 false 이다 search() - 검색된 문자열의 위치값을 반환한다. (전체 문자열에서의 순서이다.) 순서값을 계산할 때 공백은 제외하고 판단한다. 만일 해당 찾으려는 단어가 없으면 -1을 반환한다. replace() - 문자열의 일부를 다른 문자열로 바꾸어 준다. 교체하기 Please visit Tistory! 교체하기 Please visit Tistory! 참고: https://tonks.tistory.com/20 이전 1 2 3 4 5 6 다음
