자바스크립트 Tip&Tech
본 교재는 2021년도 과학기술정보통신부 및 정보통신기획평가원에서 주관하여 진행하는 ‘SW중심대학사업’의 결과물입니다.
장기영 (Thomas Jang)
CHEQUER FrontEnd Director
tom@chequer.io
CHEQUER
tom.axisj.com (SugarGlider Tom)
목차
- 디버깅 (Debugging)
- This
- 콜백 (Callback)
- 변수의 오염
- 앞으로 공부 하면 좋은 것들
디버깅 (Debugging)
디버깅(영어: debugging) 또는 디버그(영어: debug)는 컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을 찾아내고 그 원인을 밝히고 수정하는 작업 과정을 뜻한다.
디버깅 (Debugging)
COBOL 프로그램 핵심기여자 그레이스 호퍼
소프트웨어 개발 단계
(Software Life Cycle)
요구사항 분석
시스템 명세
Requirements Analysis
설계
테스트
프로그래밍
유지보수
Design
Programming
Testing
Maintenance
소프트웨어 개발 프로세스
폭포수 개발(Waterfall) 모델
소프트웨어 개발 프로세스
애자일 모델
요즘 대부분의 개발방법론으로 사용되며 소프트웨어 개발을 하는 과정에서 매 스프린트마다 테스트과정을 거치게 된다.
CSS 디버깅
CSS 디버깅은 근성으로!!
JS 디버깅
XHR 디버깅
-
jQuery.ajax()
-
node
-
express
-
cors
준비물
https://api.jquery.com/jquery.ajax/
https://nodejs.org/en/
직접 해봅시다.
This
"디스"라고 쓰고 "거시기"라고 읽는다.
다 같은건데 같다고는 할 수 없다.
This
런타임에서 코드가 메모리에 올라가는 시점에 속한 위치나 코드에서 정의한 위치가 This가 된다.
This
-
bind
-
call
-
apply
this을 조작하는 3가지 방법
코드를 보면서 함께 해 봅시다.
Callback
- 피호출자(Callee)가 호출자(Caller)를 다시 호출하는 것
- 비동기적(Asynchronous) 처리를 하기 위한 디자인 패턴의 종류
Promise
IE FXXX
Polyfill
promise-polyfill
Promise
다같이 만들어 봅시다.
namespace pollution
변수의 오염
namespace pollution
변수의 오염
namespace pollution
변수의 오염
모든 것을 바꾸어 버릴 수도 있습니다.
코드를 보면서 같이 해봅시다.
코드를 보면서 같이 해봅시다.
변수 오염을 최소화 하는 방법
JavaScript Immediately-invoked Function Expressions (IIFE)
전역변수 사용의 최소화
// IIFE 작성법
(function(){ /* code */ })();
(function(){ /* code */ }());
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();
// 함수를 만드는 함수
var calc = function(expression){
return new Function('return ' + expression)();
}
calc("9 * 9");// 전역변수 사용의 최소화
var fnObj = {};
fnObj.pageStart = function () {
};
fnObj.pageResize = function () {
};
fnObj.gridView01 = axboot.viewExtend(axboot.gridView, {
});앞으로 공부하면 좋을 것들
- 자바스크립트 디자인 패턴
- MDN (Mozilla Developer Network)
- Git / NPM
- Frontend Developer Roadmap (https://roadmap.sh/frontend)
부록
- aname, cname
장기영 (Thomas Jang)
tom.axisj.com (SugarGlider Tom)