GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — ES6를 사용한 간단한 데이터 불러오기 토이프로젝트 · Jaehyunleejava/JavaScript@d37ba1a

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
  • .vs
    • slnx.sqlite
  • blog_LikeSelector(ES6)
    • .gitignore
    • README.md
    • data
      • data.json
    • dist
      • bundle.js
    • image
      • ZZIm.PNG
      • click.PNG
      • main.PNG
    • index.html
    • package-lock.json
    • package.json
    • src
      • css
        • index.css
      • index.js
      • main.js
    • webpack.config.js
    • yarn.lock
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎.vs/slnx.sqlite‎

Copy file name to clipboard
76 KB
Binary file not shown.
Collapse file

‎blog_LikeSelector(ES6)/.gitignore‎

Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules
Collapse file

‎blog_LikeSelector(ES6)/README.md‎

Copy file name to clipboard
+49Lines changed: 49 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# 자신이 원하는 영화 찜하기
2+
3+
## Just QuickStart
4+
```
5+
npm install
6+
npm run stardevserver
7+
8+
localhost:8080/
9+
```
10+
11+
## Abstract
12+
ES6를 활용하여(import, spread, dstructing, set... etc) 간단한 영화 위시리스트 찜목록 추가하기를 제작하였다.
13+
### main
14+
![main](\image\main.PNG)
15+
### 상단 버튼 클릭 시 json파일 불러온 후 렌더링하기
16+
![click](\image\click.PNG)
17+
### 찜하기 클릭 시 찜목록에 글 추가하기
18+
![image](\image\ZZim.PNG)
19+
20+
21+
## What did I do??
22+
### webpack
23+
webpack이라는 빌더가 상호 의존관계를 찾아서 해당 웹 브라우저에 맞는 버전을 bundle.js(임의) 하나의 묶여진 파일로 만들어 배포할 수 있게 도와준다.
24+
25+
(ohter effect: css(imort) )
26+
27+
babel (코드를 transfile) (es6 -> es5)
28+
29+
(loader, plugin.....)
30+
31+
### babel-prest-env
32+
33+
https://github.com/babel/babel/tree/master/packages/babel-preset-env
34+
35+
### webpack-dev-server
36+
개발단계에서 코드가 변경시 빠르게 빌드를 해주는 설정을 할것이다.
37+
38+
inline은 전체 화면을 새로고침 하는 역할을한다.(default)
39+
40+
dev-server같은 경우 publicPath를 중요하게 생각하고 있다.
41+
42+
즉 바로 js빌드를 해주는것이 아니라 임시 저장공간에서 build를 계속하여 개발의 진행속도를 높여 준다.
43+
44+
완료 후 자신이 설정한 script의 npm run build를 실행하여 빌드 성공한 후 배포하면 된다.
45+
46+
47+
48+
49+
Collapse file

‎blog_LikeSelector(ES6)/data/data.json‎

Copy file name to clipboard
+55Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"statusCode":"200",
3+
"body":[
4+
{
5+
"sub":"짠내 폭발 청년백수, 전대미문의 진짜 재난을 만나다! 대학교 산악 동아리 에이스 출신이지만 졸업 후 몇 년째 취업 실패로 눈칫밥만 먹는 용남은 온 가족이 참석한 어머니의 칠순 잔치에서 연회장 직원으로 취업한 동아리 후배 의주를 만난다. 어색한 재회도 잠시, 칠순 잔치가 무르익던 중 의문의 연기가 빌딩에서 피어 오르며 피할 새도 없이 순식간에 도심 전체는 유독가스로 뒤덮여 일대혼란에 휩싸이게 된다. 용남과 의주는 산악 동아리 시절 쌓아 뒀던 모든 체력과 스킬을 동원해 탈출을 향한 기지를 발휘하기 시작하는데…",
6+
"title":"엑시트",
7+
"link":"http://www.cgv.co.kr/movies/detail-view/?midx=82012"
8+
},
9+
{
10+
"sub":"임무는 단 하나! 달리고 달려, 일본군을 죽음의 골짜기로 유인하라! 1919년 3.1운동 이후 봉오동 일대에서 독립군의 무장항쟁이 활발해진다. 일본은 신식 무기로 무장한 월강추격대를 필두로 독립군 토벌 작전을 시작하고, 독립군은 불리한 상황을 이겨내기 위해 봉오동 지형을 활용하기로 한다. 항일대도를 휘두르는 비범한 칼솜씨의 해철(유해진)과 발 빠른 독립군 분대장 장하(류준열) 그리고 해철의 오른팔이자 날쌘 저격수 병구(조우진)는 빗발치는 총탄과 포위망을 뚫고 죽음의 골짜기로 일본군을 유인한다. 계곡과 능선을 넘나들며 귀신같은 움직임과 예측할 수 없는 지략을 펼치는 독립군의 활약에 일본군은 당황하기 시작하는데...",
11+
"title":"봉오동 전투",
12+
"link":"http://www.cgv.co.kr/movies/detail-view/?midx=82013"
13+
},
14+
{
15+
"sub":"넌 이제, 혼자가 아니야 가슴 아픈 비밀과 소중한 약속을 간직한 ‘티라노’와 ‘프논’이 그들만의 천국을 찾아 떠나면서 펼쳐지는 우정, 사랑 그리고 희망에 관한 이야기",
16+
"title":"안녕, 티라노-영원히, 함께",
17+
"link":"http://www.cgv.co.kr/movies/detail-view/?midx=80609"
18+
},
19+
{
20+
"sub":"세상에 나쁜 개는 없다는데… 우리 애는 도대체 무슨 생각인 거죠? 집을 비우면 다시 시작되는 펫들의 시크릿 라이프! 집구석 걱정에 하루도 편할 날이 없는 ‘맥스’ 캣닢을 사랑하는 자유로운 영혼 ‘클로이’ 슈퍼히어로를 따라 하는 토끼 ‘스노우볼’ 완벽하게 고양이가 되고픈 강아지 ‘기젯’까지 아직도 나만 몰랐던 마이펫들의 속마음이 공개된다!",
21+
"title":"마이펫의 이중생활2",
22+
"link":"http://www.cgv.co.kr/movies/detail-view/?midx=81942"
23+
},
24+
{
25+
"sub":"사건 사고가 끊이지 않는 동화의 섬. 사라진 아빠를 찾던 화이트 왕국의 공주는 마법구두를 신고 이전과 완벽하게 다른 ‘레드슈즈’로 거듭난다. 한편, 초록색 난쟁이가 된 일곱 왕자들은 우연히 자신들의 집에 머물게 된 '레드슈즈’가 저주를 풀 유일한 희망이라 생각해 그녀를 돕기 시작하고, 영원한 아름다움을 꿈꾸는 왕비 ‘레지나’는 마법구두를 신고 성을 빠져나간 ‘레드슈즈’를 쫓기 시작하는데… ",
26+
"title":"레드슈즈",
27+
"link":"http://www.cgv.co.kr/movies/detail-view/?midx=82009"
28+
},
29+
{
30+
"sub":"호기심 대장 ‘준’과 동물 친구들의 신나는 모험이 시작된다! 어릴 적부터 엄마와 함께 자신만의 테마파크를 만드는 것이 취미인 장난기 많고 상상력 풍부한 소녀 ‘준’은 어느 날 숲속에서 길을 잃고 헤매다 상상 속에서만 그리던 ‘원더랜드’를 발견하게 되는데...!",
31+
"title":"원더랜드",
32+
"link":"http://www.cgv.co.kr/movies/detail-view/?midx=82088"
33+
},
34+
{
35+
"sub": "드디어 그들이 만났다! 공식적으로만 세상을 4번 구한 전직 베테랑 경찰 ‘루크 홉스’(드웨인 존슨) 분노 조절 실패로 쫓겨난 전직 특수요원 ‘데카드 쇼’(제이슨 스타뎀) 99.9% 완벽히 다른 두 남자는 전 세계를 위협하는 불가능한 미션을 해결하기 위해 어쩔 수 없이 한 팀이 되고 마는데…",
36+
"title":"분노의 질주- 홉스&쇼",
37+
"link" : "http://www.cgv.co.kr/movies/detail-view/?midx=82082"
38+
},
39+
{
40+
"sub":"서울을 시작으로 북미와 유럽까지 LOVE YOURSELF 투어를 마친 방탄소년단! 전세계의 팬들과 함께 호흡하고 열광했던 유럽에서의 콘서트가 파리를 마지막으로 끝났다. 그리고 모든 긴장이 풀어진 다음날, 파리의 작은 루프탑 테이블에서 멤버와 팬들에게 하지 못했던 그들만의 이야기를 나누는 작은 뒤풀이가 시작된다. 방탄소년단의 솔직담백한 이야기를 한 테이블에 둘러 앉아 들을 수 있는 설렘 가득한 시간이 펼쳐진다.",
41+
"title":"브링 더 소울-더 무비",
42+
"link":"http://www.cgv.co.kr/movies/detail-view/?midx=82056"
43+
},
44+
{
45+
"sub":"너도 보고 싶지? 그 영화! 8년째 공포영화를 준비하던 신인 감독 ‘미정’은 어느 날 후배로부터 지나친 잔혹함으로 인해 상영이 금지된 영화에 대해 듣는다. 실체를 추적하던 중 만난 그 영화의 감독 ‘재현’은 그 영화는 잊어, 죽음보다 끔찍한 인생 살기 싫으면이라고 경고하지만 ‘미정’은 그의 경고를 무시한 채 더욱 더 그 영화에 집착한다. 이후, 이유를 알 수 없이 벌어지는 기괴하고 끔찍한 일들. 극장에 불이 꺼지는 순간, 공포는 바로 등 뒤에 있다",
46+
"title":"암전",
47+
"link":"http://www.cgv.co.kr/movies/detail-view/?midx=82092"
48+
},
49+
{
50+
"sub":"나이는 구십넷, 이름은 김복동입니다 일본의 사죄를 받기 위한 김복동 할머니의 27년 간의 기나긴 여정 포기할 수 없고, 포기해서도 안 될 희망을 위한 싸움 결코 잊어서는 안될, 아직 끝나지 않은 이야기 희망을 잡고 살자. 나는 희망을 잡고 살아",
51+
"title":"김복동",
52+
"link":"http://www.cgv.co.kr/movies/detail-view/?midx=82076"
53+
}
54+
]
55+
}
Collapse file

‎blog_LikeSelector(ES6)/dist/bundle.js‎

Copy file name to clipboardExpand all lines: blog_LikeSelector(ES6)/dist/bundle.js
+1Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Collapse file

‎blog_LikeSelector(ES6)/image/ZZIm.PNG‎

Copy file name to clipboard
26 KB
  • Display the source diff
  • Display the rich diff
Loading
Collapse file

‎blog_LikeSelector(ES6)/image/click.PNG‎

Copy file name to clipboard
163 KB
  • Display the source diff
  • Display the rich diff
Loading
Collapse file

‎blog_LikeSelector(ES6)/image/main.PNG‎

Copy file name to clipboard
5.69 KB
  • Display the source diff
  • Display the rich diff
Loading
Collapse file

‎blog_LikeSelector(ES6)/index.html‎

Copy file name to clipboard
+23Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>MY Project</title>
6+
<link rel="stylesheet" href="./src/css/index.css">
7+
</head>
8+
<body>
9+
<section class="controller">
10+
<button class="start">yjkwon07 영화마을 입니다.</button>
11+
</section>
12+
13+
<section class="blogList">
14+
<ul></ul>
15+
</section>
16+
17+
<section class="like-list">
18+
<h4>내 찜 목록</h4>
19+
<ul></ul>
20+
</section>
21+
<script src="./dist/bundle.js"></script>
22+
</body>
23+
</html>

0 commit comments

Comments
0 (0)
You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.