1. 오늘의 한 줄 요약
어제보다 너무 많은 개념을 배운 날이라 머리가 어지럽다,,,
2. 배운 내용
DOM vs BOM
| 구분 | 대상 | 대표 내장 객체 |
|---|---|---|
| DOM (Document Object Model) | 문서 내용 | document — 요소(Node) 탐색/조작, event |
| BOM (Browser Object Model) | 브라우저 자체 | window, location, navigator, history, screen |
함수(function) vs 메서드(method)
| 구분 | 실행 방식 |
|---|---|
| 함수 | 독립적으로 실행 가능 |
| 메서드 | 객체에 소속돼야 실행 가능 |
함수의 4가지 유형
| 매개변수 | 반환값 |
|---|---|
| o | o |
| x | o |
| o | x |
| x | x |
구조분해 할당 (Destructuring)
객체 안의 값을 하나씩 obj.속성명으로 꺼내지 않고, 필요한 것만 한 번에 변수로 뽑아내는 문법이다. 오늘 실습한 코드에 그대로 있었다.
let obj = {
name: "jslim",
study: function() {
return {
html: "html",
script: "script",
css: "css"
}
}
};
let { html, script, css } = obj.study();
console.log(`debug>>>> html`, html);✨ 이해한 점: obj.study()가 리턴하는 객체에서 html, script, css를 한 줄로 바로 변수에 담을 수 있었다.
배열 메서드 — map / filter / reduce
map— 새 배열 (같은 길이), 각 요소를 변환filter— 새 배열 (길이 줄어들 수 있음), 조건에 맞는 것만 추출reduce— 값 하나 (또는 객체) 반환. 초기값은 선택(optional)이지만, 안 주면 첫 요소가 초기값이 되고 빈 배열일 땐 에러가 나서 주는 게 안전
반복구문 — for / forEach / for~in / for~of
| 구문 | 순회 대상 |
|---|---|
forEach | 배열 전용 메서드 |
for~in | key (배열엔 비권장) |
for~of | 값 자체 |
조건문 — 삼항 연산자
console.log(`debug >>>> 삼항 연산자 : 조건식 ? true : false`);
choice === 1 ? console.log(`debug >>>> 토레타`) :
choice === 2 ? console.log(`debug >>>> 박카스`) :
choice === 3 ? console.log(`debug >>>> 치맥`) :
console.log(`debug >>>> 메뉴 번호만 서비스 가능합니다.`);✨ 삼항 연산자를 사용해서 이렇게 if/else나 switch 없이도 한 줄로 분기가 다 되는 게 볼 때마다 신기하다. 다만 찾아보니 이렇게 삼항 연산자 안에 console.log 같은 실행문을 넣어서 분기하는 건 실무에선 비권장 패턴이라고 한다 — 삼항 연산자는 원래 "조건에 따라 값을 고를 때" 쓰는 게 원칙이라고.
event와 event handler
| 구성요소 | 의미 |
|---|---|
| event source | 이벤트가 발생한 대상 (실제 코드에서는 event.target) |
| event | 클릭·입력 등 발생한 사건 |
| event handler | 그 사건이 일어났을 때 실행되는 함수 |
계층 구조 — Presentation / Business / Persistence
| 계층 | 역할 |
|---|---|
| Presentation | UI, 렌더링만 |
| Business | 서비스 로직 |
| Persistence | 데이터 저장/조회 (RDBMS 등) |
이론상 Filtering 같은 로직은 Business가 처리해서 내려줘야 하는데, 실제론 서버가 가공 없이 데이터만 주는 경우도 많아서 프론트(UI단)에서도 조건문으로 걸러야 할 때가 있다.
백틱(`) vs 따옴표(')
| 종류 | ${} 동작 여부 |
|---|---|
| 백틱 | O — 템플릿 리터럴 |
| 작은/큰따옴표 | X — 글자 그대로 찍힘 |
기준은 "변수를 문자열 안에 끼워 넣고 싶은가" — 그렇다면 백틱.
변수 값 변경 ≠ 화면 자동 갱신
일반 JS는 변수 값만 바꾼다고 화면이 저절로 안 바뀐다. DOM을 직접 수정해야 화면에 반영된다.
class 키워드 충돌
HTML의 class 속성은 JS의 class 키워드(ES6 class 문법)랑 이름이 겹쳐서 그대로 못 쓴다길래 찾아봤더니, className이라는 이름으로 접근해야 한다는 걸 알았다.
새롭게 알게 된 점
- scriptCondition.html에서 로그인 성공 시
location.href로 이메일/비번을 URL에 실어 보내는 방식으로 짰는데, 이게 보안상 안 좋다는 걸 알게 됐다 — URL은 브라우저 기록에 남기 때문에, 찾아보니깐 POST 요청 body에 담는 방식이 낫다고는 하는데 잘 모르는 내용이라 더 찾아봐야겠다.
헷갈렸던 점
- 문법을 잘 몰라
let이랑forEach가 헷갈렸는데,let은 변수 선언 키워드고forEach는 배열을 순회하는 메서드였다.
3. 실습 / 적용
① scriptFuntion.html — 함수 3가지 방식 + 구조분해 + forEach로 객체 만들기
function test(x, y) {
return x + y;
}
let btnHandler = function() {
console.log(`익명의 함수입니다`);
};
let arrowFunc = () => {
console.log(`화살표 함수 호출!`);
};
let userObj = {};
userAry.forEach(function (user) {
userObj[user.email] = user.nickName;
});② scriptCondition.html — Bootstrap 로그인 폼 + 유효성 체크
document.querySelector("#signInBtn").onclick = () => {
let email = document.querySelector("#email").value;
let pwd = document.querySelector("#pwd").value;
if (email === "" || pwd === "") {
document.querySelector("#err_empty_email_pwd").style.display = "block";
document.querySelector("#err_empty_email_pwd").style.color = "red";
} else {
location.href = "http://www.naver.com";
}
};③ scriptEvent.html — addEventListener로 이벤트 연결
const signInHandler = (event) => {
window.alert(`signIn button clcik`);
console.log(`debug >>>> event : ${event.target}`);
};
document.querySelector("#handler").addEventListener('click', signInHandler);결과: 네 파일 다 오류 없이 동작하는 것까지 확인했다.
4. 오늘의 회고
- 느낀 점: 어제보다 오늘 뭔가 훨씬 많은 내용을 해서 그런가 정리할 것도 많았고, 이해가 안 되는 부분도 많았다. 남는 시간에 강의를 복습해서, 학습했던 내용을 조금 더 반복적으로 봐야 할 것 같다.
- 다음에 할 것: 오늘 강의 복습 및 이전 강의와 필기 내용들 복습하기, HTML 서적으로 조금 더 기본적인 문법이나 기초 이해 잡기
#LGCNS #LGCNS6기 #개발자 #LGCNSINSPIRECAMP
