데이터 정규화2 _ Data Injection (Facebook)

Data Injection.

 

Data Injection 의 순서는? 

 1) 데이터 제작 > mock 
 2) html > javaScript 
 3) javascript로 된 html을 문자열 수정 
 4) javascript > HTML화

 

 

 

Facebook의 타임라인을 여러개 만들어 데이터 주입하기 _ Data Injection

 

1. 페이스북의 타임라인 작업하기 (html, css)

페이스북 타임라인 작업하기

 

2. 여러개 만들 영역

1) 여러개 만들 영역 즉 복사할 영역 (타임라인)을 지우거나 주석처리 해주고,

2) 아래에 타임라인을 넣어줄 div 태그를 만들기 (id='feeds')

 

 

3. 아이디 객체 불러오기

스크립트 영역에서 feeds id를 불러와 'feedElement'라는 변수에 담아준다.

 

 

3. 데이터 정규화 

 

데이터 정규화

배열로 데이터 정규화 (mock)를 하여 'feeds' 변수에 담아준다. 

 

 

3. 함수 선언

1)  createFeedElement라는 함수를 선언하여 feedData 값이 들어오도록 함수를 만든다.

2) feeds라는 아이디를 가진 태그 속에 추가할 타임라인을 feed라는 변수에 넣어준다.

앞서 데이터 정규화 한 배열의 object속의 정보들이 feedData를 받을 수 있도록 Data Injection 작업을 해준다.

 

* 이 때 ` ` 인  Back Tick(백틱) 기호를 확인할 수 있는데,

  이는 ES6 JavaScript에서는 templele string 이라 부른다. 

 

 ` ` (백틱)이란?

let count = 10 

count + '초 후에 꺼집니다.'

 

이게 더 복잡해지면?

let count = 10

let something = 핸드폰

 

count + '초 후에' + something + '이 꺼집니다'

너무 복잡하고 길어지며 깔끔하지 않다.

 

이를 해결하기 위해서!

const feed = `${count}` 후에 꺼집니다` 로 표현하는 방법이 생겨났다!

 

4. innerHTMl

feedElement 속에 feed 추가하기

함수 속에서,

위에서 아이디를 불러오고 선언한 feedElement에 feed를 추가시키는 작업을 한다.

 

5. for문 

 

for문으로 feed를 반복시키자.

위에서 선언한 createFeedElement 함수에 데이터 정규화 한 feeds 를 i번 반복시킨다.

 

그러면!

아래와 같이 여러 데이터가 들어간 같은 형식의 타임라인을 실행시킬 수 있다!

완성!