기억보다 기록을

페이징 구현하기

const container = document.querySelector('#root');
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';
const store = {
    currentPage: 1,
}

function getData(url){    
    ajax.open('GET', url, false); // method, Url, async
    ajax.send();

    return JSON.parse(ajax.response);
}

function newsFeed(){
    const newsFeed = getData(NEWS_URL)
    const newsList = [];

    newsList.push('<ul>');
    
    for(let i=(store.currentPage - 1) * 10; i<store.currentPage * 10; i++){
        newsList.push(`
            <li>
                <a href="#/show/${newsFeed[i].id}">
                    ${newsFeed[i].title} (${newsFeed[i].comments_count})
                </a>
            </li>
        `);        
    }

    newsList.push('</ul>');
    newsList.push(`
        <div>
            <a href="#/page/${store.currentPage > 1 ? store.currentPage - 1 : 1}">이전 페이지</a>
            <a href="#/page/${store.currentPage + 1}">다음 페이지</a>
        </div>
    `)

    container.innerHTML = newsList.join('');
}

function newsDetail(){
    const id = location.hash.substring(7);

    const newsContent = getData(CONTENT_URL.replace('@id', id));
    const title = document.createElement('h1');        

    container.innerHTML = `
        <h1>${newsContent.title}</h1>
        <div>
            <a href="#/page/${store.currentPage}">목록으로</a>
        </div>
    `;
}

function router(){
    const routePath = location.hash;

    if(routePath === ''){
        newsFeed();        
    }else if(routePath.indexOf('#/page/') >= 0){
        store.currentPage = parseInt(routePath.substring(7));
        newsFeed();                
    }else{        
        newsDetail();
    }
}

window.addEventListener('hashchange', router);

router();

페이징 처리를 하기 위해서 전체적으로 공용으로 사용할 store라는 객체에 currentPage 값을 추가했다. 이 store 객체는 hacknews 페이지의 전역객체로 사용될 것이다. 리액트를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 props를 통해 데이터를 전달하는데 리덕스를 사용하면 컴포넌트를 전역적으로 설정하고 다른 여러 컴포넌트에서 사용할 수 있다. 현재 만든 웹앱 구조의 store 객체의 컨셉은 리덕스처럼 사용될 것 같다. 지금은 단순 리터럴로 사용된 전역 객체지만 앞으로 약간의 변화를 통해 다른 객체들에서 전역적으로 작용할 객체가 될 것이다.

또한 페이징 처리를 할 url과 목록을 조회하는 url을 분리 시켰기 때문에 라우팅 처리를 해줘야하는 router 함수를 수정했다. hashchange 이벤트 리스너를 통해서 변화된 path에 따라 보여지는 화면이 newsFeed와 newsDetail로 나눠진다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

라우터 ? 화면 처리기 만들기

기존의 웹이라면 현재 화면, 즉 현재 화면을 다른 화면으로 전환시 현재의 화면은 이전 화면이 되고 다른 화면이 현재의 화면이 된다. 하지만 지금 구현한 상태는 목록 화면과 내용 화면이 두개 다 보이는 형태이다.

라우터: 중계기, 상황에 따라 맞게 화면을 보여주는 역할을 한다.

const container = document.querySelector('#root');
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';

function getData(url){
    
    ajax.open('GET', url, false); // method, Url, async
    ajax.send();

    return JSON.parse(ajax.response);
}

function newsFeed(){
    const newsFeed = getData(NEWS_URL)
    const newsList = [];

    newsList.push('<ul>');
    
    for(let i=0; i<newsFeed.length; i++){    
        newsList.push(`
            <li>
                <a href="#${newsFeed[i].id}">
                    ${newsFeed[i].title} (${newsFeed[i].comments_count})
                </a>
            </li>
        `);        
    }

    newsList.push('</ul>');

    container.innerHTML = newsList.join('');
}

function newsDetail(){
    const id = location.hash.substring(1);

    const newsContent = getData(CONTENT_URL.replace('@id', id));
    const title = document.createElement('h1');        

    container.innerHTML = `
        <h1>${newsContent.title}</h1>
        <div>
            <a href="#">목록으로</a>
        </div>
    `;
}

function router(){
    const routePath = location.hash;

    if(routePath === ''){
        newsFeed();        
    }else{
        newsDetail();
    }
}

window.addEventListener('hashchange', router);

router();

기존의 코드에서 DOM API 방식을 전부 문자열 HTML 형식으로 수정했고 반복되고 재사용되는 코드들을 함수화했다. 기존에 목록 화면과 내용 화면이 공존하거나 내용 화면이 계속 추가되는 상태였는데, 함수화 작업을 통해 목록 화면 부분과 내용 화면 부분을 나눴고 router라는 함수를 통해 hashchange 이벤트 처리 시 목록 화면을 내보낼지 내용 화면을 내보낼지 중계 해주는 작업을 추가했다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

추가 개선:

변수 = 데이터를 담는 그릇

객체 = 변수 여러개를 담을 수 있는 그릇

함수 = 코드를 담을 수 있는 그릇

: 리팩토링

const container = document.querySelector('#root');
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';

function getData(url){
    
    ajax.open('GET', url, false); // method, Url, async
    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.substring(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<newsFeed.length; i++){
    const div = document.createElement('div');    

    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);

기존의 구조를 변경했다. ajax를 통해서 해커뉴스 서버의 데이터를 받아오는 방식을 특정한 곳에서나 여러번 사용 가능하도록 함수로 바꿨다. ajax나 fetch, axios 등의 서버에서 데이터를 가져오는 기능은 이벤트리스너 함수처럼 비동기로 처리해야 하지만 현재는 강의의 진행에따라 동기적인 방식으로 처리한다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

문자열을 활용한 HTML 다루기

UI의 복잡해짐에 따라 (디자인, 기능 등 추가) 마크업 구조가 더 복잡해지는데 현재 코드의 문제점 등을 개선한다.

DOM API의 문제점: HTML의 구조와 코드를 보고 서로의 구조를 명확히 알기 힘들다.

DOM API를 최대한 사용하지 말자.

const container = document.querySelector('#root');
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); // method, Url, async
ajax.send();

const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');

window.addEventListener('hashchange', function(){
    const id = location.hash.substring(1);
    
    ajax.open('GET', CONTENT_URL.replace('@id', id), false);
    ajax.send();

    const newsContent = JSON.parse(ajax.response);
    const title = document.createElement('h1');

    title.innerHTML = newsContent.title;

    content.appendChild(title);    
});

for(let i=0; i<newsFeed.length; i++){
    const div = document.createElement('div');    

    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);

기존의 DOM API 구조를 innerHTML을 통한 문자열 형태로 바꿨다. 이렇게 코드를 변경함으로 HTML구조와 코드의 구조를 알아보기 쉬워지고 기능이 추가되거나 코드의 양이 많아진다 하더라도 복잡도가 늘어난 것이 아니기 때문에 수월하게 내용을 파악할 수 있다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

두개의 화면을 가진 웹 앱

SPA = 하나의 어플리케이션이 여러개의 화면을 가지고 화면을 전환하면서 보여주는 방식 (라우팅)

const container = document.querySelector('#root');
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); // method, Url, async
ajax.send();

const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');

window.addEventListener('hashchange', function(){
    const id = location.hash.substring(1);
    
    ajax.open('GET', CONTENT_URL.replace('@id', id), false);
    ajax.send();

    const newsContent = JSON.parse(ajax.response);
    const title = document.createElement('h1');

    title.innerHTML = newsContent.title;

    content.appendChild(title);    
});

for(let i=0; i<newsFeed.length; i++){
    const li = document.createElement('li');
    const a = document.createElement('a');
    
    a.href = `#${newsFeed[i].id}`;
    a.innerHTML = `${newsFeed[i].title} (${newsFeed[i].comments_count})`;
    
    li.appendChild(a);
    ul.appendChild(li);
}

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

만든 해커뉴스 화면에서 해당 타이틀의 글을 클릭하면 ajax를 통해 각 해커뉴스 id에 관한 정보를 가져오는 상세 기능을 구현했다. 앵커 태그를 클릭할 때, 해시 값이 바뀌는 이벤트를 통해 해당 글의 id 값으로 라우팅 처리하는 식의 기능을 구현할 수 있다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

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)

가장 기본적인 입력 - 처리 - 출력의 형태

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

Node.js & npm

node.js = V8엔진 (JavaScript를 브라우저 외에 다른 환경에서 실행 시킬 수 있다)

npm = 어떤 기능을 하는 소프트웨어를 설치하고 사용할 수 있게 해준다

https://www.npmjs.com/

npmjs.com에 들어가면 node.js 환경에서 사용할 수 있는 라이브러리를 설치하거나 또 그러한 소프트웨어를 만든다면 npm에 등록할 수 있다.

클라이언트 앱

어플리케이션의 본질: 입력 데이터를 가지고 출력 데이터로 변환하는 과정

입력 - 처리 - 출력

입력: 서버(해커뉴스 API)

처리: 어플리케이션

출력: UI화면(tailwindCss 라이브러리)

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

JavaScript & TypeScript

JavaScript는 초기 HTML을 조작하는 언어로써 처음엔 보잘것 없었지만 웹이 빠르게 발전하고 변화함에 따라 같이 유명해지고 변화에 발 맞춰 살아남았다고 볼 수도 있다. 결론적으로 지금은 여러방면으로 사용하는 언어가 되었는데 TypeScript는 왜 나왔을까 ?

TypeScript는 JavaScript의 슈퍼셋이다. TypeScript는 JavaScript가 지원하는 모든 기능을 지원하기 때문인데 왜 그런 방향으로 갔을까 ? 프로그래밍 언어의 좋고 나쁨을 떠나서 현재 웹에서 JavaScript는 유일한 언어이고 그렇기 때문에 JavaScript를 대신한다라는 개념보다 공생하는 개념이 훨씬 전략적으로 좋을 것이라 생각한다. 

TypeScript가 JavaScript라는 언어와 공생하는 방법은 JavaScript가 가지고 있지 않은 부분(타입, 형)을 메꾸는 방식이다 JavaScript는 언어의 특성 상 Type(형)이라는 것이 없기 때문에 TypeScript는 JavaScript가 가진 모든 기능을 지원하면서 Type을 명시적으로 지정할 수 있는 언어인것이다.

예를 들어

type Centimeter = number;
type RainbowColor = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'indigo' | purple

let age = 10;
let weight:number = 80;
let height:Centimeter = 176;
let color:RainbowColor = 'orange';

color = 'black' // error

타입을 지정하게되면

1) 해당하는 데이터가 어떤 용도나 타입으로 사용되는지 알 수 있다.

2) 타입과 맞지 않은 데이터가 있을 시 오류가 발생한다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential