javascript hacker new app 두개의 화면 웹앱 만들기

 

 

 

 

 

//xmlhtpp을 저장 할 저장소 생성
const ajax = new XMLHttpRequest();
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json';
const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json'

ajax.open('GET', NEWS_URL, false);
ajax.send(); // 데이터 가져오기


//responce에 있는 데이터를 preview 탭에있는것처럼 바꿀것이다.
// 객체로 변환 json형식만 변환 가능
const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');

window.addEventListener('hashchange', function(){    
    const id = location.hash.substr(1); //id 값 가져오기
    ajax.open('GET', CONTENT_URL.replace('@id', id), false); //replace 값을 대체해주는  함수
    ajax.send();
    const newsContent = JSON.parse(ajax.response);
    console.log(newsContent);
});

for(let i =0; i< 10; i++){
    const li = document.createElement('li');
    //타이틀에 a태그 추가하기
    const a = document.createElement('a');
    a.href = `#${newsFeed[i].id}`;
    a.innerText = `${newsFeed[i].title} (${newsFeed[i].comments_count})`;

    li.appendChild(a);
    ul.appendChild(li);
}

//1.json은 실제 내가 보고싶은 페이지 데이터 주소도 바뀔 수도 있다. 따로 변수로 뺴야한다.
document.getElementById('root').appendChild(ul);

싱글 페이지 어플리케이션(SPA)

하나의 어플리케이션이 화면을 여러 개를 갖고 있고,

일반적인 앱처럼 화면을 계속 전환하는

현재 액티브한 화면을 페이지로 보여주는 형식을 SPA

 

//xmlhtpp을 저장 할 저장소 생성
const ajax = new XMLHttpRequest();
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json';
const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json'

ajax.open('GET', NEWS_URL, false);

ajax.send(); // 데이터 가져오기


//responce에 있는 데이터를 preview 탭에있는것처럼 바꿀것이다.
// 객체로 변환 json형식만 변환 가능
const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');
for(let i =0; i< 10; i++){
    const li = document.createElement('li');
    //타이틀에 a태그 추가하기
    const a = document.createElement('a');
    a.href = '#';
    a.innerText = `${newsFeed[i].title} (${newsFeed[i].comments_count})`;

    li.appendChild(a);
    ul.appendChild(li);
}

//1.json은 실제 내가 보고싶은 페이지 데이터 주소도 바뀔 수도 있다. 따로 변수로 뺴야한다.
document.getElementById('root').appendChild(ul);

 

이벤트

코드상으로 특정한 코드의 실행을 확정할 수 없는 경우가 많다

사용자가 언제 UI에 반응할지 알 수 없으니 그래서 등장한 것이 이벤트 시스템이 등장함.

#을 이용해  a태그 경로를 지정 하였다

a는 해시라고 하고

hashchange라는 함수를 이용하여 a태그가 바뀔때마다 이벤트로 호출하였다.

 

//xmlhtpp을 저장 할 저장소 생성
const ajax = new XMLHttpRequest();
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json';
const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json'

ajax.open('GET', NEWS_URL, false);
ajax.send(); // 데이터 가져오기


//responce에 있는 데이터를 preview 탭에있는것처럼 바꿀것이다.
// 객체로 변환 json형식만 변환 가능
const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');

window.addEventListener('hashchange', function(){    
    const id = location.hash.substr(1); //id 값 가져오기
    ajax.open('GET', CONTENT_URL.replace('@id', id), false); //replace 값을 대체해주는  함수
    ajax.send();
    const newsContent = JSON.parse(ajax.response);
    console.log(newsContent);
});

for(let i =0; i< 10; i++){
    const li = document.createElement('li');
    //타이틀에 a태그 추가하기
    const a = document.createElement('a');
    a.href = `#${newsFeed[i].id}`;
    a.innerText = `${newsFeed[i].title} (${newsFeed[i].comments_count})`;

    li.appendChild(a);
    ul.appendChild(li);
}

//1.json은 실제 내가 보고싶은 페이지 데이터 주소도 바뀔 수도 있다. 따로 변수로 뺴야한다.
document.getElementById('root').appendChild(ul);

location.hash.substr을 이용하여 내가 원하는 값의 위치를 정하여 자르고 가져옴

replace는 값을 대체해주는 함수 사용

 

타이틀을 클릭했을때마다 div태그를 생성하여 h1태그로 출력

 

//xmlhtpp을 저장 할 저장소 생성
const ajax = new XMLHttpRequest();
const content = document.createElement('div');
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json';
const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json'

ajax.open('GET', NEWS_URL, false);
ajax.send(); // 데이터 가져오기


//responce에 있는 데이터를 preview 탭에있는것처럼 바꿀것이다.
// 객체로 변환 json형식만 변환 가능
const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');

window.addEventListener('hashchange', function(){    
    const id = location.hash.substr(1); //id 값 가져오기

    ajax.open('GET', CONTENT_URL.replace('@id', id), false); //replace 값을 대체해주는  함수
    ajax.send();
    const newsContent = JSON.parse(ajax.response);
    const title = this.document.createElement('h1');

    title.innerHTML = newsContent.title;
    content.appendChild(title);
    console.log(newsContent);
});

for(let i =0; i< 10; i++){
    const li = document.createElement('li');
    //타이틀에 a태그 추가하기
    const a = document.createElement('a');
    a.href = `#${newsFeed[i].id}`;
    a.innerText = `${newsFeed[i].title} (${newsFeed[i].comments_count})`;

    li.appendChild(a);
    ul.appendChild(li);
}

//1.json은 실제 내가 보고싶은 페이지 데이터 주소도 바뀔 수도 있다. 따로 변수로 뺴야한다.
document.getElementById('root').appendChild(ul);
document.getElementById('root').appendChild(content);