첫번째 프로젝트:hacker-news(1-4)

 javascript를 이용해서 간단한 웹 어플리케이션을 만들어보는 파트.

 

* 해커뉴스닷컴 - 다양한 나라의 개발자들이 커뮤니케이션하는 사이트.

개발과 관련된 최신 문법이나 이슈들은 주로 해외에서 들어오기 때문에 자주 들여다보는 것이 좋다. 

* 어플리케이션의 본질 - 입력 데이터를 가지고 어떤 형태의 처리과정을 통해서 출력데이터로 변환하는 것 

 

Ajax

서버와 같이 네트워크 너머에 있는 데이터를 가져오는 도구

const ajax = new XMLHttpRequest();
ajax.open('GET', 'https://abc_1234.com', false);  // 동기로 해당 주소에서 데이터를 가져오겠다
ajax.send(); // 데이터를 가져온다 
const result = ajax.response;

 

open 메소드에서는 인자로 method, url, async를 받았다. 

method 인자는 HTTP request method로 "GET", "POST", "PUT", "DELETE" 등을 받는다. 

url은 ajax를 통해 데이터를 받아올 주소를 받는다. 

async는 해당 데이터를 동기 혹은 비동기로 가져올 지 설정하는 부분으로  boolean(true or false)값을 받는다. 

 

이벤트

브라우저가 제공하는 시스템 중 하나로, UI 요소에서 특정 이벤트가 발생했을 때 동작할 함수를 미리 세팅을 해놓은 것이 호출되는 것이다.

click, doubleClick, hashchange  등등 다양한 이벤트가 존재한다. 

* hash - 일종의 북마크로 페이지 내에서 어떤 앵커 태그의 name 속성과 같은 해시 이름이 들어오면 해당 위치로 스크롤 해주는 기능. hashchange 이벤트는 이 hash가 변경될 때마다 일어나는 이벤트이다. 

 

아래는 프로젝트 내에서  hashchange 이벤트가 발생 했을 때, 클릭된 타이틀을 화면에 뿌려주는 코드이다. 

window.addEventListener('hashchange', function(){
    const id = location.hash.substr(1);		// 첫번째 글자 제외 
    const newsContent = getData(CONTENT_URL.replace(':id', id)); //:id를 id 값으로 대체 
    const title = document.createElement('h1');
    
    title.innerHTML = newsContent.title;
    content.appendChild(title);
});

 

데이터를 담을 수 있는 것은 변수

변수를 여러 개 담을 수 있는 구조는 객체

코드를 묶을 수 있는 구조는 함수 

 

만약 중복된 부분이 생기게 되면 위와 같은 구조에 담거나 묶어 재사용이 가능하게끔 수정해주면 된다. 

 

 app.js 전체 코드

const container = document.getElementById('root');
const ajax = new XMLHttpRequest(); // ajax 사용법
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';

function getData(url) {
    ajax.open('GET', url, false);  //동기로 해당 주소에서 데이터를 가져오겠다
    ajax.send(); // 데이터를 가져온다 
    return JSON.parse(ajax.response);
};
 
const newsFeed = getData(NEWS_URL);
const ul = document.createElement('ul');

window.addEventListener('hashchange', function(){
    const id = location.hash.substr(1);
    const newsContent = getData(CONTENT_URL.replace(':id', id)); 
    const title = document.createElement('h1');
    
    title.innerHTML = newsContent.title;
    content.appendChild(title);
});

for(let i = 0; i < 10 ; i++) {
    const div = document.createElement('div');
    const li = document.createElement('li');
    const a = document.createElement('a');

    div.innerHTML = `
        <li>
            <a href=#${newsFeed[i].id}>
                ${newsFeed[i].title}(${newsFeed[i].comments_count})
            </a>
        </li>
    `
    ul.appendChild(div.firstElementChild);    
}

container.appendChild(ul);
container.appendChild(content);