study

패스트캠퍼스 챌린지 14일차

상태를 가져보자. 읽은 글 표시하기 현재 해커뉴스 페이지에 열람한 글의 상태를 체크해주는 로직이 없기 때문에 해당 로직을 만들것이다. 1) 글의 고유 id를 통해 읽음 처리를 하는 데이터 구조를 만든다. 2) 네트워크를 통해 newsFeed를 가져온 데이터에 새로운 속성을 추가한다. 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, fee..

2022. 2. 6. 16:27

study

패스트캠퍼스 챌린지 13일차

tailwindCss를 통한 UI 수정 지금까지 만들어진 해커뉴스의 디자인적인 부분은 tailwindCss를 가지고 작업을 할것이다. 그렇게 하기 전에 기존에 있는 해커뉴스의 코드는 template을 가지고 구조적인 부분을 수정했지만 아직도 문제가 있다. template의 , 태그들은 아직도 반복문을 따로 사용해서 작업하는 부분이나 template의 동적인 데이터를 추가해야 하는 부분은 데이터의 변경이 있을때마다 replace함수를 써 줘야하기 때문에 여러가지 기능들이 추가되면 replace 함수를 그만큼 추가로 사용해야 하는 문제점이 있다. 따라서 템플릿엔진(ejs, pug, nunjucks, handlebars 등)을 사용할 것이다. 그 전에 먼저 UI 작업을 먼저 한다. https://fontawe..

2022. 2. 5. 15:46

study

패스트캠퍼스 챌린지 12일차

복잡한 UI 구현을 위한 준비 작업 - 템플릿 코드의 양과 복잡도는 비례하지 않는다. 코드의 양이 늘어날 수록 복잡도 또한 늘어나면 좋지 않은 구조의 코드라고 생각해야한다. 따라서 템플릿이라는 컨셉을 사용한다. 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){ ... } function news..

2022. 2. 4. 09:54

study

패스트캠퍼스 챌린지 11일차

페이징 구현하기 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 ..

2022. 2. 3. 09:59

study

패스트캠퍼스 챌린지 10일차

라우터 ? 화면 처리기 만들기 기존의 웹이라면 현재 화면, 즉 현재 화면을 다른 화면으로 전환시 현재의 화면은 이전 화면이 되고 다른 화면이 현재의 화면이 된다. 하지만 지금 구현한 상태는 목록 화면과 내용 화면이 두개 다 보이는 형태이다. 라우터: 중계기, 상황에 따라 맞게 화면을 보여주는 역할을 한다. 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){..

2022. 2. 2. 22:20

study

패스트캠퍼스 챌린지 9일차

추가 개선: 변수 = 데이터를 담는 그릇 객체 = 변수 여러개를 담을 수 있는 그릇 함수 = 코드를 담을 수 있는 그릇 : 리팩토링 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, asyn..

2022. 2. 1. 21:41