패캠챌린지 썸네일형 리스트형 Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 11일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #11일차 댓글 목록이 표시되는 UI 만들기 UI에서 아이콘을 사용하기 위해 fontawesome을 사용한다. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com cdn방식으로 사용할 것이므로 cdnjs에서 fontaswome을 검색하여 link를 index.html에 삽입한다. https://cdnjs.com/libraries/font-awesome font-awesome - Libraries.. 더보기 Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 9일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #9일차 페이징 구현하기 현재 작성된 프로그램은 강제로 최신 10개 글만 표시하도록 제한되어 있다. 이번시간에는 페이지를 이동하면서 다른 글들도 확인할 수 있도록 페이징 기능을 구현해보자. 1. 페이징 UI 만들기 function newsFeed () { const newsFeed = getData(NEWS_URL); const newsList = []; newsList.push(''); for (let i = ((store.currentPage - 1) * 10); i < store.currentPage * 10; i++) { newsList.push(` ${ newsFeed[i].title } (${ newsFeed[i].commen.. 더보기 Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 10일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #10일차 복잡한 UI 구현을 위한 준비 작업 - 템플릿 코드를 명확하게 하기 위해 newsFeed의 출력방식을 template로 HTML 구조를 문자열로 담고 이를 replace하는 방식으로 변경해 보자. 1. template 변수를 만들고 HTML 구조를 문자열로 담는다. 반복적인 출력을 위한 뉴스 목록은 {{__news_feed__}} 라는 임의의 문자열로 만들고, 이전페이지번호와 다음페이지번호는 각각 {{__prev_page__}}와 {{__next_page__}}로 정한다. function newsFeed () { const newsFeed = getData(NEWS_URL); const newsList = []; let tem.. 더보기 Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 8일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #8일차 라우터? 화면 처리기 만들기 이전 시간에 간단하게 목록과 내용보는 화면을 구현했다. 그런데 목록에서 제목을 클릭하면 아래 내용(?)이 표시되었고, 계속 목록 제목을 클릭하면 클릭한 제목이 하단에 순차적으로 보여지고 있다. 이번시간에는 화면에 목록과 내용을 따로 표시하기로 하자. 먼저 내용 표시하는 부분이 DOM api가 아닌 지난 시간에 배운 HTML 문자열로 변경하는 작업 부터 해보자. window.addEventListener('hashchange', function () { const id = location.hash.substr(1); const newsContent = getData(CONTENT_URL.replace(.. 더보기 Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 7일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #7일차 문자열을 활용한 HTML 다루기 UI를 만들기 위해 DOM객체를 사용하였다.목록을 위해 를 만들어서 글 전체를 감싸고 각각의 글은 안에 그리고 링크를 위해 를 만들었다.이처럼 DOM api를 이용해서 UI(HTML)를 만들면 이해하기 불편하다. 게다가 디자인적인 스타일을 위해 혹은 기능이 추가되거나 확장 되면 사용방법이 복잡해지고 이해하기 어렵다. 그래서 이를 해결하기 위해 문자열로 태그를 작성해서 사용하는 것으로 개선해보자. 아래는 문자열을 활용하여 기존의 DOM Element를 수정한 것이다. for (let i = 0; i < 10; i++) { // const li = document.createElement('li');.. 더보기 Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 6일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #6일차 두 개의 화면을 가진 웹 앱 이전시간에 해커뉴스 api를 통해 뉴스를 가져와서 화면에 출력하는 것을 했다. 이번시간에는 이전시간에 이어서 가져온 목록에 앵커 태그를 추가하여 해당 글의 내용을 해커뉴스 api에서 가져와서 제목을 표시 하자. 1. 앵커 태글 추가하기 for (let i = 0; i < 10; i++) { const li = document.createElement('li'); const a = document.createElement('a'); a.href = `#`; a.innerHTML = `${ newsFeed[i].title } (${ newsFeed[i].comments_count })`; li.appen.. 더보기 Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 5일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #5일차 Hacker News 클라이언트 앱 소개 애플리케이션을 먼저 만들어 보고 프로그램을 익혀보자. 애플리케이션을 만들기 위해서는 여러가지 지식과 기술들을 필요하기 때문에 여기에서는 몇가지 제한사항을 두고 제한범위내에서 애플리케이션을 만들고자 한다. 애플리케이션의 본질은 입력데이터를 출력데이터로 변환하는 것으로 볼 수 있다. 데이터: hackernews(https://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md) CSS : tailwindcss(https://tailwindcss.com/) 비동기 기술은 제외 12줄의 코드로 시작하기 12줄의 코드로 hackernews 데.. 더보기 Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 4일차 #패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #4일차 TypeScript vs. Javascript 타입스크립트는 왜 필요할까? 자바스크립는 타입스크립트의 superset이다. 타입스크립트는 자바스크립트의 모든 기능을 다 제공한다. 거기에 추가적인 기능을 더한다. 그래서 슈퍼셋이라고 부른다. Type + Script(자바스크립트) = Typescript 즉, 자바스크립트가 현재 제공하지 못하고 앞으로도 제공하지 못하는 것 바로 명시적인 유형(Type)설명을 타입스크립트가 제공한다. 자바스크립트를 배우고 타입스크립트를 배우는 방법이 두가지를 학습하는데 더 도움이 된다. type Centimeter = number; type RainbowColor = 'red' | 'orange' |.. 더보기 이전 1 2 다음
