12줄의 코드로 시작하기

프롤로그

이번에는 김민태의 프론트엔드 아카데미를 들으며 프로그래밍을 익히고 있다. 제 1강 JavaScript & TypeScript Essential 은 HackerNews 라는 사이트를 만들어보면서 코드의 퀄리티를 점차적으로 개선해 나가는 작업을 보여준다. 한번 따라 해봤는데 꽤 어려웠다.🥲

class 구조와 전역상태 관리 동기에서 비동기 api 처리를 하는 과정에서 결국 막히게 되었다.(따라가기 힘들었다는 말) 다시 들으면서 코드를 분석해 보기 위한 작업을 시작하려고 한다. 모르는 채로 진도 나가는 것 보다 하나를 더 깊이 파보는 게 더 도움이 될 것 같아 시간이 걸리더라도 천천히 작성해 봐야겠다.

어플리케이션의 본질

입력 데이터를 가지고 어떠한 처리과정을 거쳐 출력데이터로 바꾸는 것

개발 환경

parcel
javascript

1. 데이터 가져오기

const ajax = new XMLHttpRequest(); 
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'; //데이터를 불러 올 주소 

ajax.open('GET', NEWS_URL, false); //false : 동기로 가져오도록 하기 위함
ajax.send();

2. 데이터 처리 (객체로 변환)

const newsFeed = JSON.parse(ajax.response); // 받아 온 데이터를 객체로 변환 -JSON 

3. 데이터 출력

const ul = document.createElement('ul'); 

// li 를 반복하며 생성해서 ul 태그 밑으로 넣어준다. 
for(let i = 0; i < 10; i++) {
  const li = document.createElement('li');

  li.innerHTML = newsFeed[i].title;

  ul.appendChild(li);
}

document.getElementById('root').appendChild(ul); //만든 ul 을 DOM에 그려주기 

전체 12줄의 코드

const ajax = new XMLHttpRequest(); 
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'; //데이터를 불러 올 주소 

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

const newsFeed = JSON.parse(ajax.response); // 받아 온 데이터를 객체로 변환 -JSON 
const ul = document.createElement('ul'); 

// li 를 반복하며 생성해서 ul 태그 밑으로 넣어준다. 
for(let i = 0; i < 10; i++) {
  const li = document.createElement('li');

  li.innerHTML = newsFeed[i].title;

  ul.appendChild(li);
}

document.getElementById('root').appendChild(ul); //만든 ul 을 DOM에 그려주기 

에필로그

어플리케이션의 본질은 데이터를 입력받아 처리하고 출력하는 것이다. 그게 바탕이 된 상태에서 기능을 좀 더 추가하고 디자인을 입히고 하면서 점점 발전 해 나가는 것.

보이는 화면은 그대로여도 어떻게 코드를 가독성있게 만들고 깔끔하게 만드는지에 대해 생각하는 것.

코드 마일리지가 진짜 많이 쌓여야 자유자재로 코드를 현명하게 짤 수 있을 것이라는 생각이든다.