변수 생성
선언 단계 > 초기화 단계 > 할당 단계
● var
: 재할당과 재선언 가능
선언과 초기화 단계가 한번에 이루어진다
console.log(cucu); // undefined
var cucu;
console.log(cucu); //undefined
cucu =1; // 할당 단계
console.log(cucu); // 1
● let
: 재할당 가능, 재선언 불가능
선언과 초기화 단계가 분리되어 진행된다
console.log(cucu); // error
//아직 변수가 초기화 (메모리 공간 확보와 undefined로 초기화) 되지 않았다
let cucu; // 초기화 단계 실행
console.log(cucu); //undefined
cucu = 1; //할당 단계 실행
console.log(cucu); // 1
● const
: 재할당과 재선언 불가능
--> 기본적으로 const를 사용하고 재할당이 필요한 경우 let을 사용하자
console.log()
: 디버깅과 정보 표시에 사용된다
querySelectorAll()
: CSS 선택자와 일치하는 모든 요소를 반환한다
반환값 형태 : NodeList 객체의 목록
foreach
: 배열의 각 요소에 대해 반복적으로 작업을 수행하는데 사용된다
다음 매개변수와 콜백함수를 전달한다
- currentValue : 배열에서 현재 처리 중인 요소
- index : 배열에서 현재 처리 중인 요소의 인덱스
- array : forEach()가 호출된 배열
콜백 함수는 배열의 요소를 나타내는 매개변수를 반드시 하나 이상 사용해야한다
배열.forEach(function(매개변수) {
//code
});
화살표 함수 표현
배열.forEach(매개변수 => //code);
push()
: 배열 끝에 요소를 추가한다
Fetch API
웹 브라우저에서 제공하는 자바스크립트 인터페이스로, 네트워크로 요청을 보내고 응답을 처리하는 기능을 제공한다
fetch(url, options)
.then((response) => console.log("response:", response))
.then((error) => console.log("error:", error));
첫번째 인자 : URL
두번째 인자 : 옵션 객체 ( HTTP방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body))
Promise 객체를 리턴한다
API 호출
성공 : 응답(response) 객체를 resolve한다
실패 : 예외(error) 객체를 reject한다
JSON 형태로 데이터를 응답하기 때문에, 응답(response) 객체는 json() 메서드를 제공한다
fetch(url)
.then((response) => response.json())
.then((data) => console.log(data));
이 메서드로 호출하면, 응답(response) 객체로부터 JSON 포맷의 응답 전문을 자바스크립트 객체로 변환해서 얻을 수 있다
.then
Promise가 성공했을 때 실행된다
( 네트워크적으로 실패하지 않는 한 (예: 서버가 아예 죽었거나 인터넷이 끊김) 성공한다
즉, HTTP 응답 코드가 404나 500이여도 .then이 실행된다)
const getHen = () =>
new Promise((resolve, reject) => {
setTimeout(() => resolve('닭'), 1000);
});
const getEgg = () =>
new Promise((resolve, reject) => {
setTimeout(() => resolve('${hen} => 달걀'), 1000);
});
const cook = () =>
new Promise((resolve, reject) => {
setTimeout(() => resolve('${egg} => 후라이'), 1000);
});
getHen()
.then(hen => getEgg(hen))
.then(egg => cook(egg))
.then(meal => consol.log(meal));
//간단하게 표현
getHen()
.then(getEgg)
.then(cook)
.then(consol.log);
콜백 함수를 전달할 때 받아오는 value 하나를 다음 함수로 바로 호출하는 경우 생략 가능
( .then에서 받아오는 value를 바로 다음 함수로 암묵적으로 전달)
application/x-www-form-urlencoded
html form을 통한 POST 전송 방식 중 가장 기본이 되는 content-type 이다
데이터를 url 인코딩 후 웹 서버에 보내는 방식이다
JSON.stringify()
자바스크립트 값을 JSON 문자열로 변환한다
window.onload
페이지가 로드되면 자동으로 실행되는 전역 콜백함수
해당 함수 내의 코드 스크립트는 웹 브라우저 내의 모든 요소가 준비가 되어야 실행이 된다
예)
id가 name인 요소의 색깔을 blue로 바꿔주는 코드이다
<html>
<body>
<script>
let a = document.getElementById('name');
a.style.color = "blue"
</script>
<p id="name">hello</p>
</body>
</html>
하지만 id가 name인 태그가 생성되기 전에 실행되므로 요소를 가져올 수 없어 에러가 발생한다
이때 window.onload를 사용하면 자바스크립트가 문서가 준비된 상황 이후에 발동하므로 실행된다
<html>
<body>
<script>
window.onload = function() {
let a = document.getElementById('name');
a.style.color = "blue"
}
</script>
<p id="name">hello</p>
</body>
</html>
특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러라는 함수를 작성하여 연결한다
/개념
요소와 속성
요소(Element) <>(태그)로 이루어진 것들
| 속성(Attribute) | <>(태그)안에 이름과 값(name=value)으로 구성되어진 것들 |
NodeList
유사 배열 형태로서 배열처럼 인덱스로 접근 가능, length 속성을 통해 요소의 개수 확인 가능
for...of 문으로 순회 가능
forEach를 사용하여 배열 반환 가능
DOM 변경 사항을 실시간으로 반영하지 않음
ES6 화살표 함수
● 인수가 2개인 함수
//기존 문법
function sum(a,b) {
return a+b
}
//화살표 함수
let sum = (a,b) => {
return a+b
}
//더 간단하게 만든 화살표 함수
let sum = (a,b) => a + b
함수(function)을 제거하고 변수 할당을 할 수 있다
괄호 안에 값이 매개변수임을 나타내는 ⇒를 추가한다
( 중괄호가 없을 땐 그 뒤의 모든 것을 반환하다는 의미)
● 인수가 없는 함수
//기존 문법
function sum1() {
return Math.random
)
//화살표 함수
let sum2 = () => {
return Math.random
}
//더 간단하게 만든 화살표 함수
let sum2 = () => Math.random
● 익명 함수
//기존 문법
document.sum2('click',function() {
console.log('click')
})
//화살표 함수
document.sum2('click', () => {
console.log('click')
})
//더 간단하게 만든 화살표 함수
document.sum2('click', () => console.log('click'))
function을 제거하고 변수를 할당하지 않아도 된다
API
어떤 기능을 직접 구현하지 않고 API 제공자들이 제공하는 데이터와 모듈등을 갖다쓸 수 있게 해준다
( 코딩하면서 쓰는 함수, 공유 버튼 등등)
동기 vs 비동기
동기 비동기
| 순차 실행 | 멀티로 작업을 동시에 처리 |
(메인 스레드가 작업을 다른 곳에서 처리되게 하고, 그 작업이 완료되면 콜백 함수를 받아 실행하는 방식)
Promise
: 미래값을 위한 컨테이너
3가지 상태 존재
pending : 대기 상태
fulfilled : 성공 상태
rejected : 실패 상태
promise가 생성될 때, resolve와 reject를 인자로 받는 콜백 함수를 실행하며 비동기 작업 진행
resolve() : 비동기 처리에 성공하면 호출됨 --> fulfilled 상태가 됨
reject() : 비동기 처리에 실패하면 호출된다 --> rejected 상가 됨
콜백함수
매개변수로 함수 객체를 전달해서 호출 함수내에서 매개변수 함수를 실행하는 것이다
.then() 체이닝
.then() 메서드는 이전 .then() 메서드에서 반환된 값을 인수로 받는다
JSON
: 자바 스크립트 객체 표기법
데이터를 쉽게 교환하고 저장하기 위한 텍스트 기반의 데이터 교환 표준이다
기계와 사람이 사용하기 편해 주로 웹 애플리케이션에서 데이터를 주고받을 때 사용된다
( .json : JSON 형식으로 저장된 데이터 파일 )
KeyboardEvent
: 사용자가 키를 누르거나 키를 놓을 때 발생한다
keydown 이벤트 - 키 누를 때
keyup 이벤트 - 키 놓을 때
KeyboardEvent : code 속성 ( .code )
키에 연결된 문자가 아닌 키보드의 실제 키를 나타낸다
창(window)에서 발생하는 keydown 이벤트 코드
window.onkeydown = (e) => keylogging(e);
이벤트 처리를 위한 콜백 함수를 설정해주면 된다
jQuery의 bind vs JS의 bind
jQuery
자바스크립트의 이벤트 핸들러와 동일하게 동작한다
( JS에 비해 보다 편리하고 직관적인 이벤트 메소드를 이용해 보다 수월히 관리가 가능하다)
// JS
document.querySelector("#btn").addEventListener("click", function(event) {
});
// jQuery
$("$btn").on("click", function(event) {
}):
bind() - jQuery 이벤트 메서드
: 이벤트를 연결한다
하지만 같은 역할을 하는 on()으로 대체되고 있는 추세이다
$(selector).bind(eventName, function(event) {});
$(selector).on(eventName, function(event) {});
JS의 bind
this가 원하는 형태로 고정된 함수가 반환된다
let user = {
firstName: "John"
};
function func() {
alert(this.firstName);
}
let funcUser = func.bind(user);
funcUser(); // John
this가 user을 가리키게 된다
IME
한글과 같이 자음,모음을 조합하여 한 글자를 만드는 언어를 입력할 수 있게 해주는 편집기
'Study' 카테고리의 다른 글
| 객체지향 프로그래밍 개념 이해 (0) | 2025.06.05 |
|---|---|
| Port (Telnet, SSH, FTP, SFTP) (0) | 2025.05.17 |