study

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

타입스크립트를 위한 환경설정 자바스크립트로 만들어진 해커뉴스 페이지를 타입스크립트로 변환하는 작업을 할 것인데 이런 작업을 포팅이라고 한다. 기존에 해커뉴스 페이지는 html파일(index.html)과 js파일(app.js)로 구성되어 있는데 타입스크립트를 사용하기 위해 app.js파일을 app.ts파일로 변환한다. 그리고 tsconfig.json이라는 파일을 생성한다. - tsconfig.json { "compilerOptions": { // 주로 사용하는 부분 "strict": true, // 타입체크 "target": "ES5", // 변환할버전 "module": "commonJS", "alwaysStrict": true, "noImplicitAny": true, "noImplicitThis": t..

2022. 2. 7. 11:13
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