오늘 한 일
- 개인과제 코드 해설강의 듣기
- [내배캠] Javascript 문법 5주차
- 콜백지옥, DOM
- [특강] Github
배운 것
일단 오늘 콜백함수와 동기vs비동기, 콜백지옥과 콜백지옥을 해결하는 방법으로 Promise, Generator(ES6), async/await(ES7) 강의를 들었다. 이해가 너무 안가서 두 세번 반복해서 들었는데도 이해가 안가고 정리조차 힘들어서, 이 부분은 주말에 다시 반복학습 하면서 다시 정리를 해보려고 한다.
1. DOM
(1) DOM의 기본 개념
사용자가 브라우저에 www.naver.com에 입력했을 때 일어나는 일!
클라이언트 = 브라우저 = 사용자
1. 클라이언트가 서버에게 요청(request)
2. 서버는 클라이언트에게 응답(response) → HTML 문서(document)
3. 브라우저가 HTML 파일을 해석(파싱, parsing)
클라이언트가 서버에 요청을 하면 서버는 클라이언트에게 HTML 문서(document) 형태로 응답을 한다. 그러나 Javascript에서는 이 문서를 이해할 수 없기 때문에 해석이 필요하다.
-> 브라우저는 렌더링 엔진을 통해 서버가 클라이언트에게 준 HTML 문서를 해석
-> Javascript가 알아들을 수 있는 방식으로 DOM Tree 구성
- API란?
카페의 메뉴판 역할!
API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할을 한다.
API를 제공함으로써 브라우저의 DOM 객체에 접근할 수 있다.
즉, 다른 시스템의 DOM 객체를 가져와 데이터로 사용할 수 있는 것.
DOM: Document Object Modeling
HTML 파일(document)을 Javascript가 해석할 수 있는 Object 형태로 Modeling한 것
-
DOM은 브라우저 환경에서 돌아감
DOM이 브라우저에 내장되어 있기 때문에
HTML의 내용을 javascript로 접근하고 제어할 수 있다.
-
DOM은 node를 갖는다.
DOM 요소 하나 하나를 노드라고 하며 속성과 메서드를 갖고 있다.속성 : 값을 가짐, 해당 객체의 특성을 나타내는 값을 가져오거나 설정
메서드 : 동작을 수행, 해당 객체가 수행하는 작업을 나타내는 함수
오늘의 회고
- 팀 프로젝트를 시작하면서 Github를 본격적으로 사용해 보았다. 팀원들과 역할을 분담하고 각자 코드를 짠 다음 공유하고 합치기 위해 정말 유용한 툴이라는 생각이 들었다. main 브랜치 밑으로 develop 브랜치를 만들고, 또 그 밑으로 각각 기능별 브랜치를 만든 후 해당 브랜치에 push하고 develop 브랜치에 병합하는 것까지 연습을 했다. 이제 내일부터 본격 기능 개발을 할 계획이다.
- 개인과제 코드 해설 강의를 봤는데, 정말 튜터님이 짜신 코드는 너무 보기 좋고 심플하고 좋았다. 언제쯤 저런 코드를 스스로 떠올려서 그려낼 수 있을까...
내일 할 일
- 개인과제 코드 해설강의 듣기
- [팀 Project.01] 영화 검색 사이트 디벨롭
- 기능개발 역할 분담
- 코드 디벨롭 진행
