전체 글
-
정규표현식 패턴 - 정규표현식 | 생활코딩INFO/WEB 2021. 10. 8. 18:12
※ 예제 설명 정규표현식 === 소스 첫 매치 모두 매치 위치 ^ : 캐럿 뒤에 나오는 패턴이 소스 상에서 시작 위치에 있을 때만 매치 ^who === who is who & : 달러 앞에 나오는 패턴이 소스 상에서 끝 위치에 있을 때만 매치 who$ === who is who 이스케이핑 \ : 백슬래시 뒤에 나오는 문자를 정규표현식에서 의미가 있는 문법적 요소(^, $, 등)가 아닌 일반 문자로 변환 ^\$ === $12-$13 *escape(이스케이프) : 코드 상에서 어떤 역할로부터 탈출(해제) 시켜 준다. 모든 문자 . : 모든 문자(≒character)를 매치 .... === test of point 특정 문자 [] : 스퀘어 브라켓(대괄호) 안에 있는 문자 중 일치하는 문자 하나를 매치 [oy..
-
2. 모듈패턴으로 기존 코드 개선하기 - 견고한 JS 소프트웨어 만들기 | 김정환Javascript/프로그래밍 기법 2021. 9. 2. 17:43
클릭 카운터 모듈 (ClickCounter) : 카운터 데이터를 다루는 모듈 (전역 공간에 있는 counter 변수를 ClickCounter 안에서 관리하자) 첫번째 스펙 "ClickCounter 모듈의 getValue() 는 카운터 값을 반환한다." > git checkout --force ClickCounter-spec-1 두번째 스펙 "ClickCounter 모듈의 increase() 는 카운터 값을 1만큼 증가한다." > git checkout --force ClickCounter-spec-2 beforEach는 it 함수 호출 직전에 실행되는 자스민 함수. describe(() => { beforeEach(() => {})// 1 afterEach(() => {})// 3 it(() => {})..
-
1. TDD 이론 및 패턴 소개 - 견고한 JS 소프트웨어 만들기 | 김정환Javascript/프로그래밍 기법 2021. 8. 31. 13:19
단위 테스트 (Unit Test) 단위(Unit) : 특정 조건에서 어떻게 작동해야 할지 정의한 것 (인풋에 따라 계산한 결과를 아웃풋으로 내놓는 것) ≒ 함수 - 준비, 실행, 단언(결과 검증) 패턴을 따른다. 테스트주도개발(TDD) 1. 적색(Red) 단계 기능을 테스트할 수 있는 테스트 코드를 만든다 ≒ 단위 테스트 2. 녹색(Green) 단계 함수의 기능 코드를 테스트에 통과할 수준으로 작성 3. 청색(Blue) 단계 (리팩터) 추상화, 확장 가능, 중복되지 않는 소프트웨어 공학 원칙에 준수한 코드 작성 > git clone https://github.com/jeonghwan-kim/lecture-develop-fe-with-tdd.git > git checkout -f install-jasmin..
-
VSCODE 에서 PHP 개발 환경 구축 with XAMPP | 친절한 직장인K씨INFO/WEB 2021. 8. 12. 15:03
XAMPP 설치 파일 다운로드 (사이트 경로 : https://www.apachefriends.org) 설치하기 - PHP 개발에 필요한 Apache, MySQL, PHP 항목만 선택한다. VSCODE 개발 환경 구축 C:\xampp\htdocs\ 디렉토리에 프로젝트 폴더 생성 (ex. C:\xampp\htdocs\프로젝트폴더 생성한 프로젝트 폴더를 VSCODE로 실행 상단 메뉴 터미널 → 기본 빌드 작업 구성 → 탬플릿에서 tasks.json 파일 만들기 → 옵션 중 아무거나 선택 프로젝트 폴더 내에 자동 생성 tasks.json 파일의 내용을 모두 지우고 아래 코드 입력 { "version": "2.0.0", "command": "chrome", "windows": { "command": "C:\\P..
-
태그 추가 감지 이벤트, iframe 내부 요소 이벤트CODE/Javascript 2021. 7. 30. 15:39
특정 태그가 추가되면 이벤트 발생 $(document).on('DOMNodeInserted', '#tag-id', function(){ 실행문... }); document에 '' 가 추가되면 이벤트 발생 iframe 내부 요소에 이벤트 추가 $("#iframe").load(function(){ $(this).contents().find('body').find('#button').on("click", function(){ 실행문... }); }); 로 호출한 페이지 내부 에 'click' 이벤트 추가
-
서버 시간 및 표준 시간 구하기 (XMLHttpRequest)CODE/Javascript 2021. 7. 30. 11:16
[출처 : https://flyingsquirrel.medium.com] 서버 시간 가져오기 function serverTime() { var xmlHttp; // XMLHttpRequest는 대부분의 브라우저 지원가능: https://caniuse.com/#search=XMLHttpRequest if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); // InternetExplorer ActiveXObject 지원하는 경우 } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject('Msxml2.XMLHTTP'); } /* xmlHttp.open : 헤더 정보만 받기 위해 HEAD방식으로 요청. ..
-
MutationObserver (DOM 변경사항 감지) | ZerochoCODE/Javascript 2021. 7. 2. 14:30
[출처 : https://www.zerocho.com] // 감시할 대상 var target = document.getElementById('zerocho-changeable'); // 옵저버 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation); }); }); // 감시할 내용 설정 var config = { attributes: true, childList: true, characterData: true, subtree: true || null, attributeOldValue: true || null, characterDataOldValue:..
-
3D 게임 프로그래밍을 위한 기초 수학 | 게임코디INFO/COMPUTER 2021. 6. 30. 13:23
[출처 : http://lab.gamecodi.com ] 벡터(Vertor) 정의 크기와 방향을 동시에 나타내는 물리량을 말한다. 벡터의 덧셈 두 벡터끼리 서로 이어지도록 만든다. 한 벡터의 꼬리에서 다른 벡터의 머리까지 이어서 새로운 벡터를 만든다. 새로 만들어진 벡터가 두 벡터를 더한 것이 된다. 벡터의 뺄셈 ※ 뺄셈은 덧셈으로도 표현할 수 있다. 1 – 1 == 1 + (-1) 뒤에 있는 벡터의 방향을 반대로 바꾼다. (b – a 라면, a 벡터의 방향을 반대로 바꾼다.) 방향을 바꾸는 것은 길이는 그대로 두고 화살표가 가리키는 곳만 반대로 만들어 주는 것을 의미한다. 두 벡터를 덧셈 규칙에 맞게 꼬리에서 머리로 이어준다. 벡터의 뺄셈은 한 위치에서 다른 위치로 향하는 벡터를 만들 때 사용할 수 있..