[부스트코스] 2-2. WEB UI 개발- FE

https://www.edwith.org/boostcourse-web/lecture/16698/

[LECTURE] 1) window 객체(setTimeout) : edwith

 

안녕하세요 Parson입니다~

 

 이번 강의에서는 이전 강의에서 기초적인 Javascript 지식을 쌓은 것보다

 

조금 더 깊게 공부해 보는 시간이였는데요, 

 

바로 리뷰 시작하겠습니다~

 

 

1) window 객체(setTimeout)

 

 

javascript의 전역객체인 window에서 setTimeout() 함수에 대해 알아볼 수 있는 강의였습니다. 

 

javascript에서 사용할 수 있는 비동기 방식의 예로 setTimeout 함수를 실습해 본 시간이였는데요,

 

이외에도 setInterval 등이 있다는 것을 알 수 있었습니다.

 

2) DOM과 querySelector 

 

 

javascript를 이용해 HTML 내의 구조와 데이터를 부분적, 전체적으로 변경하는 방법을 알아볼 수 있었습니다.

 

그리고 DOM(Document Object Model)에 대해서도 알아볼 수 있는 시간이였는데요!

 

예를 들어 getElementById()를 이용하면 HTML 내의 태그 중 id 값이 일치하는 태그를 찾을 수 있다는군요!

 

이외에도 Element.querySelector(), css selector 등의 여러가지 종류의 선택자를

 

형식에 맞게 입력하여 찾을 수 있다는 것을 배울 수 있었습니다.

 

3) Browser Event, Event object, Event handler 

 

 

이 강의에서는 javascript event에 대해 배워 볼 수 있는 시간이였는데요,

 

javascript에서 Event는 외부의 클릭이나 입력 등의 동작 또는 javascript 코드에서 자체적으로 발생시키고,

 

발생한 이벤트에 대해 Event listener에서

 

미리 지정한 동작을 수행하는 방식으로 작동한다는 것을 알 수 있었습니다.

 

4) Ajax통신의 이해 

 

 

javascript의 꽃이라고 부를 수 있는 Ajax에 대해 배워보았습니다.

 

이전 1. 웹 프로그래밍 기초 강의에서 수행한 프로젝트를 예로 들면,

 

각 index.html, aoutme.html, photo.html 의 세 페이지를 전환할 때 화면 전체가 깜빡이며 창이 바뀌는 것과 다르게 

 

Ajax 기술을 이용한다면 화면의 상단 하단부의 중복되는 부분을 제외한 가운데 화면만

 

"새로고침 없이" 바꿔 줄 수 있다는 것을 알 수 있었습니다. 

 

 

Ajax 기술은 javascript를 활용하는 다른 언어 기반의 프레임워크에서도 유용한 기능으로 많이 쓰이고 있습니다.

 

 

5) JavaScript Debugging 

 

크롬 브라우저에서 javascript 동작을 디버깅 하는 방법에 대해 배울 수 있었습니다. 

 

이 부분은 저도 한번 듣고 넘기기보단 다시 복습하며 디버깅 스킬을 늘릴 필요를 느꼈습니다 ㅜ.ㅜ 

 

주로 개발자 모드에서 오류 로그만으로 해결을 했던 기억이 있지만, 

 

디버깅을 통해 확실하게 문제가 되는 부분을 찾는 것이 더 효율적인 것 같네요!!!

 

 

 

 

 

 

 

읽어주셔서 감사합니다!