▶동적인 페이지 구성할 때, HTML 안에 데이터와 html요소(UI적 요소) 섞여 있는 것은 좋지 않다
▶자바스크립트는 어플의 비지니스 로직 담당 : 코드가 들어있다
▶데이터는 자바스크립트가 아닌 곳에 따로 보관하는 것이 좋다 : 백엔드, 데이터 파일 등
▶현재 프로젝트는 백엔드가 없기 때문에, JSON에 데이터를 보관한다
▶JSON = javascript object notation, 오브젝트와 유사하다
▶object는 key : value로 구성된다
▶JSON은 주석을 허용하지 않는다
|
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
|
{
"items": [
{
"type": "tshirt",
"gender": "female",
"size": "large",
"color": "pink",
"image": "../img/pink_t.png"
},
{
"type": "pants",
"gender": "male",
"size": "small",
"color": "blue",
"image": "../img/blue_p.png"
},
{
"type": "pants",
"gender": "male",
"size": "large",
"color": "yellow",
"image": "../img/yellow_p.png"
},
{
"type": "skirt",
"gender": "male",
"size": "large",
"color": "yellow",
"image": "../img/yellow_s.png"
},
{
"type": "skirt",
"gender": "female",
"size": "small",
"color": "blue",
"image": "../img/blue_s.png"
},
{
"type": "tshirt",
"gender": "male",
"size": "large",
"color": "blue",
"image": "../img/blue_t.png"
},
{
"type": "tshirt",
"gender": "male",
"size": "large",
"color": "yellow",
"image": "../img/yellow_t.png"
},
{
"type": "pants",
"gender": "female",
"size": "small",
"color": "pink",
"image": "../img/pink_p.png"
},
{
"type": "tshirt",
"gender": "female",
"size": "large",
"color": "pink",
"image": "../img/pink_t.png"
},
{
"type": "pants",
"gender": "male",
"size": "small",
"color": "blue",
"image": "../img/blue_p.png"
},
{
"type": "pants",
"gender": "male",
"size": "large",
"color": "yellow",
"image": "../img/yellow_p.png"
},
{
"type": "skirt",
"gender": "male",
"size": "large",
"color": "yellow",
"image": "../img/yellow_s.png"
},
{
"type": "skirt",
"gender": "female",
"size": "small",
"color": "blue",
"image": "../img/blue_s.png"
},
{
"type": "tshirt",
"gender": "male",
"size": "large",
"color": "blue",
"image": "../img/blue_t.png"
},
{
"type": "tshirt",
"gender": "male",
"size": "large",
"color": "yellow",
"image": "../img/yellow_t.png"
},
{
"type": "pants",
"gender": "female",
"size": "small",
"color": "pink",
"image": "../img/pink_p.png"
}
]
}
|
cs |
//주석
1줄 객체형식
2줄 배열형식
3줄 배열 안에 아이템역시 객체형식
8줄 object 안에는 관련된 모든 정보를 포함해야 한다, 티셔츠 이미지도 포함 시킨다
여러개 복붙한다
▶설명: JSON 파일 안에는 items라는 배열이 들어있고, 그 안에는 여러 item들이 들어있다
▶이 JSON을 자바스크립트에 동적으로 연결해줘야 적용된다
'클론 코딩' 카테고리의 다른 글
| 드림코딩 : 미니 쇼핑몰 게임 만들기 - 5.코드 리뷰 & 주의할 점 (0) | 2020.10.22 |
|---|---|
| 드림코딩 : 미니 쇼핑몰 게임 만들기 - 4. JS 동적 연동 (main.js), 완성본 (0) | 2020.10.22 |
| 드림코딩 : 미니 쇼핑몰 게임 만들기 -2. CSS 꾸미기 (0) | 2020.10.22 |
| 드림코딩 : 미니 쇼핑몰 게임 만들기 -1. HTML 마크업 (0) | 2020.10.22 |
| 드림 코딩 : 반응형 유튜브 만들기 (by HTML, CSS) (0) | 2020.09.23 |