[BoostCourse] 예약관리시스템: 메인페이지
JavaScript - FE
이 프로젝트에서 JavaScript는
1. 사용자의 요청(Request)를 받아 서버로 필요한 기능을 호출한다.
2. 서버에서 응답(Response)한 값(Array 또는 Object)을 화면(HTML)에 데이터를 전달한다.
두 가지의 작업을 하게 된다.
이러한 작업을 하기 위해서 배열(Array)과 객체(Object)를 조작하는 법을 배울 것이다.
- 배열은 index를 주로 사용할때 사용
- 객체는 key값을 주로 사용할 때 사용
[Abstract]
1. 객체(Object)의 선언 및 프로퍼티(Property) 정의
2. 객체의 메소드 추가
3. 객체 탐색
1) for - in
2) Object.keys() & forEach()
3) JavaScript에서 Array와 Object 구분방법
4) Array와 Object가 복합적으로 있는 데이터 탐색
[객체(Object)의 선언 및 프로퍼티(Property) 정의]
- key, value 구조의 자료구조
- Object 형태는 {}로 자료를 표현, 서버와 클라이언트간에 이러한 데이터 타입으로 교환하는 JSON이라는 것이 있다.
- 객체 생성시 프로퍼티(속성)을 정의, 또는 객체 생성 후 프로퍼티를 추가할 수 있다.
- 왼쪽은 Car의 4개의 속성만을 갖고 있을 때 오른쪽은 color 속성이 추가 되었을때 결과값
 |  |
[객체의 메소드 추가]
- 객체 생성 후 추가적으로 메서드를 추가하고 싶은 경우, 필요한 메서드 생성 후 메서드를 포함하여 객체를 새로 생성하여 적용한다.
[객체 탐색]
- 객체 탐색 for - in, Object.keys() & forEach()
- key: value 자료구조에서 value 타입이 number인 entry만을 가져오기
 |  |
[Array & Object가 섞여 있는 객체 탐색]
- 자바스크립트에서 Object, Array 구분방법
(Object와 Array를 "object"로 인식하기 때문에 constructor 속성을 활용)
- type이 sk인, name으로 구성된 배열만을 출력하기
'Edu > BoostCourse - Web' 카테고리의 다른 글
| [BoostCourse] 웹개발 4.4 Handlebar를 활용한 Template 작업 (0) | 2019.01.04 |
|---|---|
| [BoostCourse] 웹개발 3-3. DOM API 활용하여 node 생성과 추가 (0) | 2018.12.23 |
| [BoostCourse] 웹개발 3-1. JavaScript 배열 조작하기 (0) | 2018.12.16 |
| [Connect] 부스트코스 오프라인 스터디 활동증서 (0) | 2018.10.31 |
| [BoostCourse] Web - REST API (0) | 2018.10.08 |
Project3 설정 및 구조 설계.pdf
