4월 11일 ~ 4월 15일 주간 피드백

이번주는 배운 것도 너무 많고 블로그 기록에 대한 생각도 많고,,, 이래저래 힘들었다!
아래는 노션에 적혀 있는 메모들

1. 나 너무 블로그에 전부다 쓰는 것같음, 필요한 거 어려운거 중요한거만 요약해서 읽기 쉽게 재밌게 쓰고싶은데 고민이 많네
그렇게 쓰면 시간이 오래걸리는데...

2. 오늘수업.... 너무 힘들다 따라가기 버겁다

배우는 양이 너무 많아서 문제집 풀때마다 계속 찾아보고, 어떤거를 적용해야될지 몰라서 답안도 많이 봤다 ㅜㅜ...
목요일 DOM, Event 자바스크립트 문제집도 풀기 싫어서 미루다가 4일뒤(오늘)에서야 풀었다...
더 부지런히 공부하고 , 복습도 많이 해야될텐데 체력이 안따라준다.......... 속상하다

2주차에 배운 것

---

데이터 타입

원시 타입 (Primitive type)	객체 타입 (Object type)
- Number (숫자)	- Array (배열)
- Strings (문자열)	- Function (함수)
- Boolean (불리언)	- RegExp (정규표현식)
- Undefined (정의되지 않음)
- Null (널)
- Symbol (ES6 추가)

변수

: 데이터를 저장하고 참조(사용)하는 데이터의 이름

Name	Scope	변경 가능성
var	Function Scoped	변경 가능
let	Block Scoped	변경 가능
const	Block Scoped	변경 불가능

Scope

Global Scope(전역 스코프)

• 만약 변수가 중괄호 { } 밖에 선언된다면 어디서든 접근 가능한 전역 변수가 되고, 전역 스코프에 정의 됩니다.

Local Scope(지역 스코프)

• 반대로 괄호 { } 안에 변수가 선언된다면 괄호 안에서만 호출이 가능한 지역 변수가 되고, 지역 스코프에 정의됩니다.
• 지역 스코프에는 두가지 스코프가 존재하는데, 바로 함수 스코프랑 블록 스코프 입니다.

Function Scope

• 함수 내부에서 선언 된 변수 입니다.
• 함수내부에서만 접근 가능

Block Scope

• 블록 { } 안에서만 호출될 수 있습니다.

연산자

산술 연산자

기호	기능
+, -, *, /, %	더하기, 빼기, 곱하기, 나누기, 나눈 나머지

증감 연산자

기호	기능
++i	i의 값을 1씩 증가시키고 i 에 값을 다시 전달
--i	i의 값을 1씩 감소시키고 i 에 값을 다시 전달
i++	i의 값을 1씩 증가시키고 원래 값을 전달
i--	i의 값을 1씩 감소시키고 원래 값을 전달

비교 연산자

기호	기능
==(등치 연산자)	두개의 값이 같으면 참(true), 같지 않으면 거짓(false)
!=(비등치 연산자)	두개의 값이 같지 않으면 거짓(false), 같으면 참(true)
===(일치 연산자)	등치 연산자에서 타입까지 비교
!==(불일치 연산자)	등치 연산자에서 타입까지 비교
>	왼쪽 값이 오른쪽 값보다 크면 참(true), 아니면 거짓(false)
>=	왼쪽 값이 오른쪽 값보다 크거나 같으면 참(true), 아니면 거짓(false)
<	왼쪽 값이 오른쪽 값보다 작으면 참(true), 아니면 거짓(false)
<=	왼쪽 값이 오른쪽 값보다 작거나 같으면 참(true), 아니면 거짓(false)

할당 연산자

기호	기능
a += b	a와 b를 더한 값을 a에 대입
a -= b	a와 b를 뺀 값을 a에 대입
a *= b	a와 b를 곱한 값을 a에 대입
a /= b	a와 b를 나눈 값을 a에 대입
a %= b	a와 b를 나눈 나머지 값을 a에 대입

논리 연산자

기호	기능
&&(and)	좌측 표현식과 우측 표현식이 모두 참이면 참
||(or)	좌측 표현식과 우측 표현식 중 하나만 참이면 참
!(not)	표현식이 참이면 거짓, 거짓이면 참

문자 연산자

기호	기능
A + B	문자열을 이어주는 역할
A += B	A문자열에 B문자열을 더한 다음 A에 대입

조건문

if...else

if 문은 지정한 조건이 참인 경우 명령문(statement)을 실행합니다. 조건이 거짓인 경우 또 다른 명령문이 실행 될 수 있습니다.

if (조건1)
   명령문1
else if (조건2)
   명령문2
else if (조건3)
   명령문3
...
else
   명령문N

switch

switch명령문 은 표현식을 평가하고 표현식 의 값을 case절과 일치시키고 해당 케이스와 연관된 명령문과 일치하는 케이스 뒤에 오는 케이스의 명령문을 실행합니다.

switch(표현식) {
    case 값1:
        명령문1
        break;
    case 값2:
        명령문2
        break;
    default:
        명령문3
}

반복문

for

for 문은 괄호로 감싸고 세미콜론으로 구분한 세 개의 선택식과, 반복을 수행할 문(주로 블럭문)으로 이루어져 있습니다.

for( 초기값; 조건식; 어떤 간격으로) {
	실행할 문장
}

함수

: 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

빌트인함수

빌트인 함수(Built-in function) 은 언어 설계 과정에서 미리 만들어진 함수를 말합니다. print 라는 함수도 빌트인 함수에 속합니다. 이와 같은 빌트인 함수와 혼동하지 않기 위해, 개발자가 직접 만든 함수는 사용자 정의 함수 라고도 부릅니다.

• alert()
• prompt(’아이디?’)
• Math.random()
• ...

함수 선언식

function helloFunc() {
  console.log(1234)
}

함수 호출식

helloFunc()

return

return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환합니다.

function helloFunc() {
  return 123
}

console.log(helloFunc())
alert(helloFunc())

Window 객체

window 객체는 웹 브라우저의 창을 가르키며, window 객체를 이용하여 브라우저를 조작 할 수 있습니다. (생략 가능합니다)

메서드	설명
close()	현재 창을 닫습니다
open(링크, 새 탭 or 현재 탭 (optional), 설정 (optional))	새 창을 엽니다
setTimeout(함수, 밀리초)	지정한 초 뒤에 함수 실행
alert(메시지)	팝업 창 생성
scrollTo(옵션)	옵션에 있는 좌표 값으로 스크롤

Document 메소드

HTML 요소의 선택

새로운 HTML 요소를 선택하기 위해 제공되는 메소드

메소드	설명
document.getElementById()	해당 아이디의 요소를 선택
document.getElementsByClassName()	해당 클래스에 속한 요소를 선택
document.getElementsByName()	해당 name 속성값을 가지는 요소를 선택
document.getElementsByTagName()	해당 요소 이름으로 선택
document.querySelectorAll()	해당 선택자로 선택되는 요소를 모두 선택
document.querySelector()	해당 선택자로 선택되는 요소를 1개 선택

HTML 요소의 생성

HTML 요소를 생성하기 위해 제공되는 메소드

메소드	설명
document.createElement()	지정된 HTML 요소를 생성
document.write()	HTML 출력 스트림을 통해 텍스트를 출력

HTML 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성

속성	설명
요소.onclick = function(){}	마우스 클릭 이벤트와 연결될 이벤트 핸들러

HTML 요소의 내용 생성

속성	설명
textContent	- 텍스트만 가져온다 - 스타일은 무시한다
innerText	- 마크업 언어가 적용된 상태로 읽어온다 - 스타일 또한 적용된 상태로 읽기 때문에 display: none; 한 값은 가져오지 못한다
innerHTML	- HTML 요소를 반환하거나 변경할 수 있다 - XSS 공격에 취약하니 주의

ClassList

선택된 Element의 클래스명들을 반환

메서드	설명
.add(클래스명)	선택된 Element에 클래스명 추가
.remove(클래스명)	선택된 Element에 클래스명 삭제
.toggle(클래스명)	선택된 Element에 클래스명이 존재하면 삭제하고, 없으면 추가

속성값

메서드	설명
속성값 가져오기	요소 객체.getAttribute("속성의 이름") 해당하는 속성이 없을 때 null or 빈문자열 반환
속성값 설정하기	요소 객체.setAttribute(속성 이름, 속성 값) 해당하는 속성이 없을 때 그 속성을 새롭게 추가
속성이 있는지 확인하기	요소 객체.hasAttribute(속성 이름)
속성 삭제하기	요소 객체.removeAttribute(속성 이름)

DOM

DOM(Document Object Model) : HTML(Object)에 들어있는 오브젝트 모델
div, span, input 요소 등등

메서드/속성	설명
appendChild(append할 Element)	선택한 Element의 자식 Element 마지막에 추가
remove()	선택된 Element 삭제
removeChild(삭제할 Element)	선택된 Element의 자식 Element 삭제
createElement(만들 Element)	Element 생성, 그 후 appendChild()로 추가해줘야 함
firstChild/lastChild	first면 첫번째, last면 마지막 자식 Element 반환

HTML DOM Element Object

DOM 요소의 스타일 변경

// 아이디가 "even"인 요소를 선택
var selectedItem document.getElementById("even")

// 선택된 요소의 텍스트 색상을 변경
selectedItem.style.color = "red"

DOM 요소의 내용 변경

// 아이디가 "text"인 요소를 선택
var str = document.getElementById("text")

// 선택된 요의 내용을 변경
str.innerHTML = "요소의 내용을 바꿉니다"

Node 객체

노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다

• nodeName (이름)
• nodeValue (값)
• nodeType (타입)

// HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택
document.childNodes[0].nodeName

// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 노드값을 선택
document.getElementById("heading").firstChild.nodeValue

// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 타입을 선택
document.getElementById("heading").firstChild.nodeType
## 이벤트

Event

• 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
• 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다

1. 이벤트 타입

발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window 객체 등)

<body>
	<button onclick="this.innerText='성공입니다!'">클릭하세요!</button>
</body>

2. 이벤트 핸들러

• 이벤트가 발생했을 때 그 처리를 담당하는 함수
• 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다

// 이 함수는 HTML 문서가 로드될 때 실행됨
window.onload = function() {
	
	// 아이디가 "text"인 요소를 선택함.
	var text = document.getElementById("text")

	text.innerHTML = "HTML 문서가 로드되었습니다."
}

3. addEventListener()

객체나 요소의 메서드에 이벤트 핸들러를 전달할 때는 addEventListener() 메서드를 사용할 수 있습니다

대상객체.addEventListener(이벤트명, 실행할이벤트핸들러, 이벤트전파방식)

• 사용 가능한 이벤트

이벤트	설명
click	클릭 시 (마우스 버튼에서 손가락을 땐 순간)
mouseenter	마우수를 요소 위에 올리면
mouseover	마우스를 요소 위에 올리면 (자식 Element도 영향을 받음)
mouseout	마우스가 요소 밖으로 벗어날 때
mousedown	클릭 하고 버튼에서 손가락을 때기 전
focus	포커스가 갔을 때
keypress	키를 누르는 순간에 발생, 그리고 누르고 있는 동안 계속 발생
keydown	키를 누를 때
keyup	키를 눌렀다가 떼는 순간
load	웹 페이지 소스가 다운로드 되었을 때
resize	창크기를 조절 할 때
scroll	스크롤바, 마우스 휠, up, down 버튼으로 스크롤 할 시
unload	링크를 클릭해서 다른 페이지로 이동하거나 브라우저나 브라우저 탭을 닫았을 때
change	form 필드의 상태가 변경 되었을 때

Event.target

Event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체를 가리킵니다.

event.preventDefault()

• 특정 기능 정지 메서드
• 이벤트가 실행 됐을때, 원래 동작이 되어야하는 기본 기능을 정지 시켜야할 때 사용

document.getElementById("button").addEventListener("click", function(event){
  event.preventDefault()
	// 동작
});

추가로 알게 된 것

---

• Window 객체
• Document 메소드
  - HTML 요소의 생성
  - HTML 요소의 내용 생성
  - ClassList
  - 속성값
• DOM
• Node 객체
• Event
  - event.preventDefault()

주차테스트 오답노트

---

작성예정

피드백 정리

---

긍정 피드백 👍

• 밀리긴 했지만 이번주 TIL 작성 완료!
• 1일 1커밋도 성공했다 🌱

개선점 피드백 🔥

• 백준 알고리즘... 하루..? 이틀...? 풀었나.. ➡️ 일주일에 3일 이상 풀자!
• TIL과 문제집을 미뤘다... ➡️ 목표 : 온라인강의 당일날 끝내기!
• 시간이 생기면 복습해야 했는데... 하질 않았다...... ➡️ 열심히 해야지...