🍒What I did today(오늘 한 일)

✅continue/break

반복문 종료방법이다. 반복문을 실행하다가 break문을 만나면 반복문은 그 즉시 실행을 멈추고 반복문은 종료된다.

function addNum() {
var sum = 0;
for(var i=1; i<51; i++) {
if(sum > 100) {
break;
}
sum += i;
}
console.log(sum); // 1275 -> 105
}
addNum();

// sum이 100보다 커지는 순간 break문을 만나 반복을 종료한다.

continue는 특정 조건이 주어졌을 때, 그 조건이 만족하는 값을 만나면 명령을 건너뛰고 다음으로 넘어갈 때 쓴다.

function addNum() {
var sum = 0;
for(var i=1; i<51; i++) {
if(i % 2 === 0) {
continue;
}
sum += i;
}
console.log(sum); // 625
}
addNum();

// i를 2로 나눴을 때 나머지가 0이라면 그 숫자는 짝수이므로 continue문을 사용하여 명령을 실행시키지 않고 건너뛰도록 만든다.

 

✅알고리즘 = 문제를 푸는 방법

시행 -> 패턴을 알아보고 -> 실행

손으로 문제를 풀어보고(수도코드) 입출력예시를 보면서 패턴을 관찰하고, 수도코드를 기반으로 코드를 써보는 것이 효과적이라고 이야기했다. 생각해보면 정말 맞는 말이고, 계속 생각하게 되는 내용이었는데 대답을 잘 들은 듯한 느낌이었다.

알고리즘 문제를 푸는 것은 접근하는 방식도 너무 많고 생각이 많아지면 문제와 멀어져서 풀 수 가 없을 때도 많았는데 이야기를 들으니 조금은 나아진 것 같다. 사고 훈련을 늘리는게 더 효과적이라고도 애기해주셨다.

결국 이 말에는 많이 풀어보는게 답인 것 같기도 하다!😏

// 꿀팁 아닌 꿀팁🍯
// 알고리즘 문제 중에 자주 나온다고 한다. 

MAX_SAFE_INTEGER = MinLen  // 작은 값을 구할 땐 제일 큰값을 찾고
MIN_SAFE_INTEGER = Maxlen  // 큰 값을 구할 땐 제일 작은 값을 찾아야한다!

✅DOM(Document Object Model)

HTML을 객체처럼 조작할 수 있는 '모델'인 DOM에 대해서 배웠다. HTML의 document 객체에 접근하는 방식으로 조작하는데, document는 수많은 속성들과 메서드들을 가지고 있다. 이 중 HTML element를 만들고(Create), 조회하고(Read), 갱신하고(Update), 삭제하는(Delete)하는 방법을 알게 되었다. DOM에는 CRUD도 있지만, 적용(Append)하는 메서드도 있어서 총 다섯가지의 메서드를 html 예제 파일에 적용시켜보면서 방식을 이해했다.

 

 

🍒Remember(기억할 것)

---

✅DOM 조작하기

Create : createElement
Append : append, prepend, appendChild
Read : querySelector, querySelectorAll
Update : textContent, classList.add
Delete : remove, removeChild

 

✅console.dir

console.dir은 console.log와 달리 객체의 속성을 '계층구조'로 출력해준다.

DOM을 객체의 모습으로 보여주기 때문에 태그만 보여주는 console.log보다 console.dir이 DOM 구조를 조회하는데 유용하다!

✅DOM(Document Object Model)이란?

DOM은 Document Object Model의 약자로, HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model이라는 의미를 가지고 있다. 즉, 자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작할 수 있다는 의미입니다.

DOM은 "웹 페이지의 객체 지향 표현" 이며, 자바스크립트같은 언어를 이용해 DOM을 수정 할 수 있다. 

JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어, DOM은 바로 이 작업이 이루어지는 장소입니다.

이 두가지를 정확히 기억하고 있어야 될 것 같다. 그리고 HTML과 DOM 같은 트리구조로 되어있다.

 

DOM과 HTML의 차이점

DOM	HTML
화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다.  (최초에 화면을 그릴때 사용하는 설계도)	HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다.  (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스)

 

🍒More Study

---

✅Twittler 예습

✅"XSS Attack" 이란?

참고자료 : 여기

✅addEventListener vs onclick 차이점

참고자료 : 여기

✅look-up table?(검색만 해보자)

✅모듈러스 연산?(알고리즘 문제)

 

2021-02-03

---

이번주는 너무 피곤하다ㅠㅠ 너무 많은 것을 한번에 이해하려해서 그런 것 같다.

공부량은 너무 많은데 시간은 없으니..😥

오늘은 그래도 알고리즘 문제의 대한 피드백을 많이 받은 것 같아 좋았고, 구주이배라는 뜻을ㅋㅋ 알게 된 시간이었다.

// 구 구하는게 무엇인지.

// 주 주어진 것이 무엇인지 (조건) = 입출력, 문제의 크기, 제약사항

// 이 이것을 어떻게 사용하지?

// 배 배운것은 무엇일까?

이런 뜻이라는데 수능 보기 전에 많이 들었다는데 나는 처음들어 신기해서 기록해본다ㅋㅋ😄