parcel 번들러를 이용한다.
npm install parcel
- 기본 html 구조
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HN client</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
</div>
<script src="app.js" type="module"></script> <!-- js파일을 module로 사용 -->
</body>
</html>번들링 작업을 하게되면 dist 폴더안에 app.xxxx.js 형태로 파일이 생성된다
>parcel index.html
parcel 번들러를 이용해서 번들링 작업을 한다.
서버에서 데이터를 가져오는 도구 = ajax
const ajax = new XMLHttpRequest(); // ajax
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'
ajax.open('GET', NEWS_URL, false); // method, Url, async
ajax.send();
const newsFeed = JSON.parse(ajax.response); // JSON을 Object로 파싱작업
const ul = document.createElement('ul'); // 태그 생성
for(let i=0; i<newsFeed.length; i++){
const li = document.createElement('li');
li.innerHTML = newsFeed[i].title;
ul.appendChild(li);
}
document.querySelector('#root').appendChild(ul);해커뉴스 사이트에서 입력데이터를 가져온다(ajax)
가장 기본적인 입력 - 처리 - 출력의 형태
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential
'study' 카테고리의 다른 글
| 패스트캠퍼스 챌린지 8일차 (0) | 2022.01.31 |
|---|---|
| 패스트캠퍼스 챌린지 7일차 (0) | 2022.01.30 |
| 패스트캠퍼스 챌린지 5일차 (0) | 2022.01.28 |
| 패스트캠퍼스 챌린지 4일차 (0) | 2022.01.27 |
| 패스트캠퍼스 챌린지 3일차 (0) | 2022.01.26 |