키다리 개발자

Facebook 만들기 (템플릿 문자열-Template string, 객체 배열, data model 속성 가져오기) 본문

Javascript

Facebook 만들기 (템플릿 문자열-Template string, 객체 배열, data model 속성 가져오기)

JunBucks 2019. 10. 24. 16:40

Template string : ES6에 새롭게 추가된 기능이며 backtick : ` ` 을 사용하여,

 

javascript 간단한 문자열 채워넣기 (string interpolation) 기능이 가능해졌습니다.

 

템플릿 문자열은 JavaScript 값(value)을 문자열에 넣어 보기 좋고 편리한 방법입니다.

 

그리고 ${대입받는 값} 템플릿 대입문(template substitution)이라고 부릅니다.

 

 

객체 배열, data model
const recommenderCardDataModels = [
 {
   recImg: 'https://img.sbs.co.kr/newsnet/etv/upload/2018/01/23/30000591747_1280.jpg',
   recName: 'Kim Yu Jung',
   recLocation: 'Republic Of Korea'
 },
 {
   recImg: 'https://img.kbs.co.kr/kbs/620/nsimg.kbs.co.kr/data/news/2019/09/25/4290226_4Fz.jpg',
   recName: '김래원',
   recLocation: '대한민국'
 }
];

data를 가져오기 위해 객체 배열을 만들어, 위 코드처럼 객체 내 속성을 만들어 줍니다.

 

속성(property)  =  키(key) +  값(value)

 

recName: '김래원'  = recName + '김래원'

 

 

 

 Template string(템플릿 문자열)
function CreateRecommenderCardElement({ recImg, recName, recLocation }) {  
 return `<div class="recommenderCard">
            <div class="recommender-image-wrapper">
             <div class="recommender-image" style="background-image: url('${recImg}')">           
           </div>      
           <div>
             <span class="recommender-name">${recName}</span>
             <span class="recommender-location">${recLocation}</span>
           </div>

위에서 만든 객체 배열의 key를 ${} 내에 넣습니다.

 

즉 해당 key값의 ${key} 넣어 값을 불러오는 것입니다.

 

recName 이 가지고 있는 value(값)인 'Kim Yu Jung' 과 '김래원'

 

${recName} 위치에 표시가 되는 것입니다. 

 

 

 

Javascript 문법
const recommenderFeed = document.getElementById("recommenderFeed");

for (let i = 0; i < 8; i++) {  
  const recommenderCardWrapper = document.createElement("div");
  recommenderCardWrapper.innerHTML += CreateRecommenderCardElement( 
  recommenderCardDataModels[i]);  
  recommenderFeed.appendChild(recommenderCardWrapper);
}

document.createElement("div") : div라는 element를 생성

 

innerHTML : HTML 내의 값

 

appendChild() : 부모 요소 내 자식 요소를 추가

 

 

 

 

 

 

 

 

HTML 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <title>Facebook</title>
  </head>
  <body>
    <div class="header-menu-wrapper">
      <img class="header-menu" src="./image/header/newspaper.svg" />
      <img class="header-menu" src="./image/header/people.svg" />
      <img class="header-menu" src="./image/header/flash.svg" />
      <img class="header-menu" src="./image/header/bell.svg" />
      <img class="header-menu" src="./image/header/search.svg" />
      <img class="header-menu" src="./image/header/menu.svg" />
    </div>
    <div class="header-my-profile-wrapper">
      <div class="my-profile-wrapper">
        <div class="my-profile-image"></div>
        <input
          class="my-profile-thinking"
          placeholder="무슨 생각을 하고 계신가요?"
        />
      </div>
      <div class="my-profile-photo-wrapper">
        <div>
          <img class="my-profile-photo" src="./image/header/photo.svg" />
        </div>
        <div>
          <span class="photo">사진</span>
        </div>
      </div>
    </div>
    <div class="recommender-wrapper">
      <span class="recommender">알 수도 있는 사람</span>
      <div id="recommenderFeed"></div>
    </div>
    <div class="recommender-all-wrapper">
      <span class="recommender-all">모두 보기</span>
    </div>
    <div id="feed"></div>
    <script src="./index.js"></script>
  </body>
</html>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

 

 

css 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
body {
  margin: 0;
}
 
.header-menu-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  background-color: #4267b2;
}
 
.header-menu {
  width: 20px;
}
 
.header-my-profile-wrapper {
  display: flex;
}
 
.my-profile-wrapper {
  display: flex;
  align-items: center;
  padding: 12px;
}
 
.my-profile-thinking {
  font-size: 14px;
  font-weight: bold;
  width: 260px;
  height: 46px;
  border: 1px solid gainsboro;
  border-radius: 50px;
  padding: 6px 12px;
  outline: none;
}
 
.my-profile-photo-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
 
.my-profile-photo {
  width: 26;
  margin-bottom: 2px;
}
 
.photo {
  font-size: 12px;
}
 
.my-profile-image,
.friend-profile-image {
  width: 46px;
  height: 46px;
  border-radius: 46px;
  margin-right: 12px;
  /* margin:  12px; */
 
  background-image: url("./image/myprofile/myprofile.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
 
.recommender-wrapper {
  padding: 12px;
  border-top: 8px solid gainsboro;
 
  overflow-x: scroll;
}
 
::-webkit-scrollbar {
  display: none;
}
 
#recommenderFeed {
  display: flex;
}
 
.recommender {
  font-size: 14px;
  font-weight: bold;
  color: gray;
}
 
.recommender-image-wrapper {
  width: 199px;
  border: 1px solid gray;
  border-radius: 12px;
  margin-top: 12px;
  margin-right: 12px;
}
 
.recommender-image {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  margin-right: 12px;
 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
 
.recommender-name,
.recommender-location {
  display: block;
  padding-left: 12px;
}
 
.recommender-name {
  font-weight: bold;
}
 
.recommender-location {
  color: gray;
}
 
.recommender-add-delete {
  display: flex;
}
 
.recommender-add-wrapper,
.recommender-delete-wrapper {
  border: 1px solid gainsboro;
  border-radius: 6px;
}
 
.recommender-add-wrapper {
  width: 122px;
  height: 40px;
  margin: 12px;
  background-color: #609dfe;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.recommender-add {
  width: 14px;
  margin-right: 6px;
}
 
.recommender-add-text {
  font-size: 12px;
  color: white;
}
 
.recommender-delete-wrapper {
  width: 36px;
  height: 40px;
  margin: 12px 12px 12px 4px;
  background-color: #ebedf0;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.recommender-delete-text {
  font-size: 12px;
  font-weight: bold;
}
 
.recommender-all-wrapper {
  display: flex;
  justify-content: center;
  padding: 6px;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  background-color: #ebedf0;
}
 
.recommender-all {
  text-align: center;
}
 
.friend-wrapper {
  border-top: 8px solid gainsboro;
}
 
.friend-header,
.replier-header {
  display: flex;
  align-items: center;
  padding: 12px;
}
 
.name-more {
  display: flex;
}
 
.name {
  width: 282px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
}
 
.more {
  width: 16px;
}
 
.date {
  font-size: 12px;
}
 
.earth {
  width: 10px;
  margin-left: 2px;
  vertical-align: middle;
}
 
.comment-wrapper {
  padding: 0px 12px 12px;
}
 
.comment {
  font-size: 16px;
}
 
.friend-upload-image {
  width: 100%;
  height: 60%;
 
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
 
.friend-bottom-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
}
 
.friend-bottom-icon {
  width: 16px;
}
 
.bottoms {
  font-size: 13px;
  font-weight: bold;
  color: gray;
}
 
.reply-share {
  text-align: right;
}
 
.bottom-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  padding: 8px 12px;
}
 
.bottom-icon {
  width: 18px;
  margin-right: 4px;
}
 
.bottom-text {
  font-size: 12px;
  font-weight: bold;
  vertical-align: text-top;
  font-family: monospace;
}
 
.friend-reply {
  text-align: left;
  border: 1px;
  background-color: #ebedf0;
  border-radius: 12px;
  padding: 8px 12px;
}
 
.fr-name {
  font-weight: bold;
}
 
.fr-ment-wrapper {
  padding-top: 2px;
}
 
.fr-ment {
  font-size: 14px;
}
 
 

 

 

Javascript 코드

 

const cardDataModels = [

  {

    friendImg:

      "https://post-phinf.pstatic.net/MjAxOTA0MjRfMTY3/MDAxNTU2MDg5NTM3ODYz.nBE7c6ZtgZc9vAEHPRbPazvwmVsRS6HvS1mFPXbADPMg.C1zUstQJJg7wuz8C5VTftM5grI5ND8xUpzoRZfhMs1Ug.JPEG/%EB%9E%91%EC%BD%A4_%EC%88%98%EC%A7%80_%287%29.jpg?type=w1200",

    friendName: "수지",

    month: "10",

    day: "23",

    amPm: "오후",

    hour: "3",

    minute: "13",

    friendComment:

      "이번에 배가본드에서 해리 고를 맡은 배수지입니다! 많이 사랑해주세요!",

    uploadImg:

      "https://cdn.allets.com/400/2017/09/12/400_13825_1505179270.jpeg",

    replierName: "Justin",

    replierNumber: "31.2만",

    replyNumber: "12.3만",

    shareNumber: "5.3천",

    replierImg:

      "https://pbs.twimg.com/profile_images/982164959076339713/I3xcmCLI_400x400.jpg",

    replierSecondName: "차달건",

    replierMent: "해리 고! 같이 함께 싸워줘서 고마워! ^^"

  },

  {

    friendImg:

      "https://pds.joins.com/news/component/ilgan_isplus/201905/22/2019052217572956900.jpeg",

    friendName: "조여정",

    month: "10",

    day: "22",

    amPm: "오후",

    hour: "9",

    minute: "53",

    friendComment: "아름다운 세상♥",

    uploadImg:

      "http://images.sportskhan.net/article/2019/04/05/l_2019040502000284200052941.jpg",

    replierName: "수지",

    replierNumber: "51.2만",

    replyNumber: "11.3만",

    shareNumber: "8.3천",

    replierImg: "http://topclass.chosun.com/news_img/1511/1511_008.jpg",

    replierSecondName: "선균 이",

    replierMent: "아름다운 세상같이 마음씨 착한 여정이~"

  },

  {

    friendImg:

      "https://spnimage.edaily.co.kr/images/Photo/files/NP/S/2019/02/PS19021100207.jpg",

    friendName: "한지민",

    month: "10",

    day: "20",

    amPm: "오후",

    hour: "5",

    minute: "23",

    friendComment: "안녕하세요. 다들 잘 지내시죠?",

    uploadImg:

      "http://thumb.mtstarnews.com/06/2019/09/2019090615123109698_1.jpg",

    replierName: "조여정",

    replierNumber: "32.6만",

    replyNumber: "8.1만",

    shareNumber: "5.3천",

    replierImg: "https://t1.daumcdn.net/cfile/tistory/9933C34B5AD4BE9415",

    replierSecondName: "Yi Hyun So",

    replierMent: "Good! 너무 이뻐요!"

  },

  {

    friendImg:

      "https://pds.joins.com/news/component/htmlphoto_mmdata/201410/06/htm_2014100613542c010c011.jpg",

    friendName: "차승원",

    month: "10",

    day: "18",

    amPm: "오후",

    hour: "1",

    minute: "03",

    friendComment: "이번에 정장 모델을 하게 되었는데, 메인 사진이에요^^",

    uploadImg:

      "http://image.ichannela.com/images/channela/2017/12/13/000000583321/00000058332120171213173019048.jpg",

    replierName: "한지민",

    replierNumber: "16.2만",

    replyNumber: "5.2만",

    shareNumber: "3.3천",

    replierImg:

      "https://4.bp.blogspot.com/-KaiXMCzoFLY/Ws3U9_-8I_I/AAAAAAAAKe8/FeAZghY2SAY9GYUcOQN5Bid9vo5GvbUlACLcBGAs/s1600/icon.jpg",

    replierSecondName: "유재석",

    replierMent: "승원이형 역시 프로 모델답다!"

  },

  {

    friendImg:

      "https://upload.wikimedia.org/wikipedia/commons/b/bd/Zo_In_Sung.jpg",

    friendName: "조인성",

    month: "10",

    day: "17",

    amPm: "오전",

    hour: "10",

    minute: "32",

    friendComment:

      "안녕하세요. 예전 프로필 사진인데 오랜만에 보다가 올려요ㅎㅎ",

    uploadImg:

      "https://upload.wikimedia.org/wikipedia/commons/b/bd/Zo_In_Sung.jpg",

    replierName: "차승원",

    replierNumber: "11만",

    replyNumber: "2.1만",

    shareNumber: "2.3천",

    replierImg: "https://img.sbs.co.kr/newimg/news/20171121/201116610_1280.jpg",

    replierSecondName: "공효진",

    replierMent: "오 멋있다~"

  }

];

 

function createCardElement({

  friendImg,

  friendName,

  month,

  day,

  amPm,

  hour,

  minute,

  friendComment,

  uploadImg,

  replierName,

  replierNumber,

  replyNumber,

  shareNumber,

  replierImg,

  replierSecondName,

  replierMent

}) {

  return `<div class="card">

    <div class="friend-wrapper">

      <div class="friend-header">

        <div class="friend-profile-image" style="background-image: url('${friendImg}')"></div>

        <div>

          <div class="name-more">

            <span class="name">${friendName}</span>

            <img class="more" src="./Image/friend/more.svg" />

          </div>

          <div>

            <span class="date">${month}월 ${day}일 ${amPm} ${hour}:${minute} · </span>

            <img class="earth" src="./image/friend/earth.svg" />

          </div>

        </div>

      </div>

      <div class="comment-wrapper">

        <span class="comment">${friendComment}</span>

      </div>

      <div class="friend-upload-image-wrapper">

        <img class="friend-upload-image" style="background-image: url('${uploadImg}')">

      </div>

      <div class="friend-bottom-wrapper">

        <div>

          <img class="friend-bottom-icon" src="./image/friend/like.svg" />

          <img class="friend-bottom-icon" src="./image/friend/heart.svg" />

          <img class="friend-bottom-icon" src="./image/friend/happy.svg" />

          <span class="bottoms">${replierName}님 외</span>

          <span class="bottoms">${replierNumber}명</span>

        </div>

        <div class="reply-share">

          <span class="bottoms">댓글 ${replyNumber}개</span>

          <span class="bottoms">공유 ${shareNumber}회</span>

        </div>

      </div>

      <div class="bottom-wrapper">

        <div>

          <img class="bottom-icon" src="./Image/bottom/thumb-up.svg" />

          <span class="bottom-text">좋아요</span>

        </div>

        <div>

          <img class="bottom-icon" src="./Image/bottom/chat.svg" />

          <span class="bottom-text">댓글 달기</span>

        </div>

        <div>

          <img class="bottom-icon" src="./Image/bottom/share.svg" />

          <span class="bottom-text">공유하기</span>

        </div>

      </div>

      <div class="replier-header">

      <div class="my-profile-image" style="background-image: url('${replierImg}')"></div>

      <div class="friend-reply">

        <div>

          <span class="fr-name">${replierSecondName}</span>

        </div>

        <div class="fr-ment-wrapper">

          <span class="fr-ment">${replierMent}</span>

        </div>

      </div>

    </div>

    </div>

  </div>

    `;

}

 

const feed = document.getElementById("feed");

 

for (let i = 0; i < 5; i++) {

  const cardWrapper = document.createElement("div");

  cardWrapper.innerHTML += createCardElement(cardDataModels[i]);

  feed.appendChild(cardWrapper);

}

 

const recommenderCardDataModels = [

  {

    recImg:

      "http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2019/10/09/z5LJgNI3X7so637062371094404813.jpg",

    recName: "이승기",

    recLocation: "서울"

  },

  {

    recImg:

      "https://img.sbs.co.kr/newsnet/etv/upload/2018/01/23/30000591747_1280.jpg",

    recName: "Kim Yu Jung",

    recLocation: "Republic Of Korea"

  },

  {

    recImg:

      "https://img.kbs.co.kr/kbs/620/nsimg.kbs.co.kr/data/news/2019/09/25/4290226_4Fz.jpg",

    recName: "김래원",

    recLocation: "대한민국"

  },

  {

    recImg:

      "http://image.chosun.com/sitedata/image/201006/06/2010060600310_0.jpg",

    recName: "Jennifer love hewiit",

    recLocation: "USA"

  },

  {

    recImg:

      "https://media.allure.com/photos/5d2dee349c886b0008e8cbb6/1:1/w_1500,h_1500,c_limit/avril-lede.jpg",

    recName: "Avril Lavigne",

    recLocation: "Canada"

  },

  {

    recImg:

      "https://shawetcanada.files.wordpress.com/2018/06/naomiscott.png?w=450&h=300&crop=1",

    recName: "Naomi scott",

    recLocation: "UK"

  },

  {

    recImg:

      "https://img.huffingtonpost.com/asset/5d811a99240000d3267d06e8.jpeg?ops=scalefit_630_noupscale",

    recName: "Ryan thomas gosling",

    recLocation: "Canada"

  },

  {

    recImg:

      "https://image.fmkorea.com/files/attach/new/20170202/559683442/479621048/574166776/8f1a355b2c5c90dd2ec78035c4f876a3.jpg",

    recName: "Emma stone",

    recLocation: "USA"

  }

];

 

function CreateRecommenderCardElement({ recImg, recName, recLocation }) {

  return `<div class="recommenderCard">

    <div class="recommender-image-wrapper">

      <div class="recommender-image" style="background-image: url('${recImg}')"></div>

      <div>

        <span class="recommender-name">${recName}</span>

        <span class="recommender-location">${recLocation}</span>

      </div>

      <div class="recommender-add-delete">

        <div class="recommender-add-wrapper">

          <div>

            <img

              class="recommender-add"

              src="./image/recommender/adduser.svg"

            />

          </div>

          <div>

            <span class="recommender-add-text">친구추가</span>

          </div>

        </div>

        <div class="recommender-delete-wrapper">

          <span class="recommender-delete-text">삭제</span>

        </div>

      </div>

    </div>

  </div>`;

}

 

const recommenderFeed = document.getElementById("recommenderFeed");

 

for (let i = 0; i < 8; i++) {

  const recommenderCardWrapper = document.createElement("div");

  recommenderCardWrapper.innerHTML += CreateRecommenderCardElement(

    recommenderCardDataModels[i]

  );

  recommenderFeed.appendChild(recommenderCardWrapper);

}

 

템플릿 문자열-Template string, 객체 배열, data model 속성 가져오기)

'Javascript' 카테고리의 다른 글

ECMA Script, 트랜스파일러, 폴리필  (0) 2019.11.21
DOM의 개념, API, Rendering 이란?  (0) 2019.11.20
Javascript (별, 왕관 찍기, 배열에 값 담기-push())  (0) 2019.10.24
Javascript + HTML + CSS 계산기 만들기  (0) 2019.10.08
Javascript 조건문, 반복문 (if,for)  (0) 2019.10.08
'Javascript' Related Articles more
Comments