자바스크립트 (49) 썸네일형 리스트형 [JavaScript] 페이지 라이프사이클 페이지 라이프사이클은 크게 3가지로 분류된다. DOMContentLoaded HTML이 모두 로드되고, DOM 트리가 완성 되었지만,외부 리소스가 아직 로드 되지 않았을 때 ※ DOM이 준비된 상태이기 때문에, DOM 노드를 제어 할 수 있다. load 브라우저에 모든 리소스(img, style, script, etc)가 로드 되었을 때 ※ 모든 리소스가 로드된 시점이기에, image 사이즈와 같은 것들을 얻을 수 있다. beforeunload / unload 페이지를 떠날 때 (사용빈도 낮음) ※ 변화에 따른 저장 여부 및 페이지 이탈 여부를 확인할 수 있다. 위 내용을 보았을때, "DOMContentLoaded" 가 "load" 보다 빨리 발생한다는 것을 알 수 있다. load 보다 jQuery의 r.. [CS] 함수(function) 이름 짓기 함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것입니다. 함수의 이름은 대개 동사로 지으며, 간결하고 명확해야 어떤 동작을 하는지 설명이 되야 합니다. 함수 이름만 보고도 어떤 기능/작동을 하는지 힌트를 얻을 수 있어야 합니다. 접두어를 잘 활용하면 함수 이름만 보고도 함수가 어떤 동작을 하고 어떤 값을 반환 하는지 알 수 있습니다. 함수는 동작 하나만 담당해야 합니다. showMessage(msg) // 메세지를 보여줌 getAge(age) // 나이를 나타내는 값을 얻고 그 값을 반환함 [JavaScript] 함수(function) 함수는 프로그램을 구성하는 주요 구성요소 입니다. 잘 만들어진 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러번 호출 가능합니다. 함수는 간결하게 한가지 기능만 수행 할 수 있도록 만들어야 합니다. (예제1) function sayHello() { alert("Hello kim!"); } sayHello(); // 함수 호출 위 (예제1)은 "Hello kim"을 alert 창에 보여주는 작업을 하는 함수입니다. 이렇게 함수를 만들어 두면 원하는 곳에서 함수 호출을 하여 간편하게 원하는 동작을 하게 만들 수 있습니다. (예제2) function sum(a, b) { return a + b; // 전달 받은 값을 더하기 연산 후 반환 } let result = sum(1, 2); // 1 과 2.. [JavaScript] 전역 변수 와 지역변수 변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있다. Javascript 변수 유효범위는 변수를 어디에서 접근 할 수 있느냐를 가르킨다. 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수이다. 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수이다. 지역변수는 함수 외부에서는 접근할 수 없다. let name = "global" // 전역변수를 선언 function scopeTest() { let name = "local" // 지역 변수를 선언 console.log(name); // 전역 변수가 아닌 지역변수를 사용 } scopeTest(); // "local.. [JavaScript] null / undefined 란 let age = null; console.log(age); // null; Javascript의 null은 다른 언어의 null과 성격이 다릅니다. 다른 언어에서는 존재하지 않는 객체에 대한 참조 / 널 포인터(null pointer)를 나타낼 때 사용합니다. Javascript에서는 null을 (존재하지 않는 값 / 비어있는 값 / 알 수 없는 값) 을 나타낼 때 사용됩니다. let age; console.log(age); // undefined undefined 는 값이 할당되지 않은 상태를 나타낼 때 사용합니다. 변수는 선언 했지만, 값을 할당하지 않은 경우 해당 변수에 undefined가 자동으로 할당 됨 [Node js] Blocking Code / Non-Blocking Code 란 let fs = require("fs"); let data = fs.readFileSync("sample.txt"); console.log(data.toString()); console.log("프로그램이 종료 되었습니다."); 위 예제는 Callback Function이 사용 되지 않는, Blocking Code 입니다. 위 코드를 실행 해보면 파일을 읽고 텍스트를 출력 한 후 "프로그램이 종료 되었습니다." 로그가 찍힌다. 즉, 파일을 찾고 읽고 toString() 하고 출력 후 "프로그램이 종료 되었습니다."가 순서대로 실행 된다. let fs = require("fs"); // 모든 Node 어플리케이션의 비동기식 함수에서는 첫번째 매개변수로는 error를 받는다. // 마지막 매개변수로는 cal.. [Node js] 콜백 함수(Callback Function)란 Callback Function 는 일반적인 Javascript function 이다. 이름 그대로 나중에 호출 되는 함수를 말한다. Callback Function(콜백 함수) 이란 함수를 전달 받은 함수안에서 호출을 하는것이다. 어떤 이벤트가 발생 했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다. // Ex_1) $("#btn_1").click(function() { alert("btn_1 clicked"); }); // click 메소드의 인수는 변수가 아닌 함수(function)이다. // click 메소드의 인수가 바로 Callback function 이다. // click 메소드에 이름이 없는 callback function을 인수로 전달해준다. // 그리고 click 메소드.. [JavaScript] 맵(Map) 이란? 키(key)가 있는 데이터를 저장한다는 점에서 객체(Object)와 유사하다. 키(key)에 다양한 자료형을 허용한다. 객체(Object)와 달리 키(key)를 문자형으로 타입 변환 없이 그대로를 유지한다. NaN도 키(key)로 사용 가능하다. 값(value)의 삽입 순서를 기억한다. 객체(Object)는 프로퍼티 순서를 기억하지 못한다. 배열(Array)와 유사하게 내장 메서드 forEach도 지원한다. new Map() // 맵(Map)을 만든다. map.set(key, value) // 키(key)를 이용해 값(value)를 저장 map.get(key) // 키(key)에 해당하는 값을 반환한다. 키(key)가 존재하지 않으면 undefined를 반환 map.has(key) // 키(key)가 존.. 이전 1 ··· 3 4 5 6 7 다음