해커뉴스 클라이언트 앱 제작

• 애플리케이션의 본질? : 입력 데이터를 가지고 출력 데이터로 변환하는 과정!
• 해커뉴스 : 개발 트렌드, 개발자들의 생각들을 알아볼 수 있다.
• 제약 : 서버x, tailwincss, 비동기x, 해커뉴스 api
• 9단계로 진행

개발자 도구 :
element - ese키 :console창 보기

//추가로 공부해 볼 것
ajax : 데이터를 가지고 오는 도구/서버와 통신하기 위해 XMLHttpRequest를 사용하여 데이터를 불러오는 방식

const ajax = new XMLHttpRequest(); //const 상수 let 변수
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'
ajax.open('GET', NEWS_URL ,false);
ajax.send();

//응답값을 객체로 바꾸기(json)
const newsFead = JSON.parse(ajax.response);
const ul = document.createElement('ul')

두 화면을 가진 웹앱

• SPA 하나의 어플리케이션이 화면을 여러개 가지고 있고 화면을 계속 전환/액티브한 화면을 계속 보여줌

• 이벤트 등록

• 해시체인지 (window)

• location 객체: 브라우저 기본 내장 객체 주소와 관련된 다양한 정보들을 제공 //location.hash = '#'은 빈 값을 반환

• DOM API를 통해 작성된 UI의 마크업이 완성된 구조를 파악하는 것은 어렵다 따라서, 개선하기 위한 방법 : 최대한 사용하지 않기

프로젝트에 사용한 방법! : 문자열만 가지고 UI를 만들기
let code = `

`;

• 중복 코드 제거 : 변수에 해당하는 값을 넣어서 사용
• 코드를 묶을 수 있는 구조는 함수! 함수를 사용하여 코드의 중복을 줄이자!
  //추가 공부!
• 여러 개의 글을 탐색할 수 있도록 라우터를 작성(화면을 중계한다?)
• 기초 라우터 (화면을 전환)

화면 처리

페이지 구현

• 페이지 정보는 변수로 처리
• 글 목록 페이지

복잡한 ui구현을 위한 준비작업 템플릿

• 양이 늘어나도 복잡하지 않은 코드를 작성해야한다.
• 템플릿:
• 그릇 모양의 틀을 만들고 틀을 통해서 톡같은 그릇을 생성 (같진 않지만 모양은 똑같음!)
• 자주 사용하는 데이터?에 일정한 형태의 구조?를 넣고 나중에 데이터를 넣으면 완성~! //이런 느낌? 설명하기 어려우니 이것도 쓰다보면 되겠지...

tailwindcss

https://tailwindcss.com/docs/installation/play-cdn

댓글 목록이 표시되는 아름다운 ui 만들기?

• handlebars //추가 공부
• Font Awesome : https://cdnjs.com/libraries/font-awesome

상태 가져오기

글을 읽었다는 것을 표시해주기
방법 1.
id를 이용해 읽은 표시를 해서 저장

방법 2.
데이터에 새로운 속성을 부여하여, 저장