이번에는 김민태의 프론트엔드 아카데미를 들으며 프로그래밍을 익히고 있다. 제 1강 JavaScript & TypeScript Essential 은 HackerNews 라는 사이트를 만들어보면서 코드의 퀄리티를 점차적으로 개선해 나가는 작업을 보여준다. 한번 따라 해봤는데 꽤 어려웠다.🥲
class 구조와 전역상태 관리 동기에서 비동기 api 처리를 하는 과정에서 결국 막히게 되었다.(따라가기 힘들었다는 말) 다시 들으면서 코드를 분석해 보기 위한 작업을 시작하려고 한다. 모르는 채로 진도 나가는 것 보다 하나를 더 깊이 파보는 게 더 도움이 될 것 같아 시간이 걸리더라도 천천히 작성해 봐야겠다.
입력 데이터
를 가지고 어떠한 처리과정
을 거쳐 출력데이터
로 바꾸는 것
parcel
javascript
const ajax = new XMLHttpRequest();
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'; //데이터를 불러 올 주소
ajax.open('GET', NEWS_URL, false); //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에 그려주기
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에 그려주기
어플리케이션의 본질은 데이터를 입력받아 처리하고 출력하는 것이다. 그게 바탕이 된 상태에서 기능을 좀 더 추가하고 디자인을 입히고 하면서 점점 발전 해 나가는 것.
보이는 화면은 그대로여도 어떻게 코드를 가독성있게 만들고 깔끔하게 만드는지에 대해 생각하는 것.
코드 마일리지가 진짜 많이 쌓여야 자유자재로 코드를 현명하게 짤 수 있을 것이라는 생각이든다.