전체 글

전체 글

    Hacker News API 를 이용한 페이지 만들기 3 - API

    Hacker API를 사용하여 데이터를 가져오기 위해 axios를 설치한다. axios - https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코 axios-http.com npm npm install axios yarn yarn add axios 적용한 NewsView 템플릿 화면 news {{ news.title }} import axios from 'axios'; export default { data() { retur..

    Hacker News API 를 이용한 페이지 만들기 2 - 라우터

    Hacker News API 를 이용한 페이지 만들기 2 - 라우터

    SPA Single Page Application 최근 개발되는 웹 애플리케이션은 안일 페이지 애플리케이션(SPA) 구조로 개발된다. 하나의 페이지 안에서 데스크톱 애플리케이션과 같은 사용자 경험을 제공해줄 수 있는 애플리케이션을 말한다. SPA는 여러 화면을 하나의 페이지 안에서 제공하면서 화면을 별도로 로딩하지 않는다. 따라서 화면마다 고유의 식별자를 기반으로 화면을 렌더링해야 한다. 고유 식별자로 사용하기에 가장 적절한 정보가 바로 URI 이다. Vue.js 애플리케이션에서 사용자가 요청한 URI 경로에 따라 각각 다른 화면이 렌더링되도록 하려면 직접 코드로 구현해 사용할 수도 있지만, 대부분 잘 만들어진 라이브러리를 사용한다. 이것이 Vue.js의 vue-router이다. vue-router가 제..

    Hacker News API 를 이용한 페이지 만들기 1 - 프로젝트 생성

    Hacker News API 를 이용한 페이지 만들기 1 - 프로젝트 생성

    인프런 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 강의를 를 토대로 작성 합니다. https://news.ycombinator.com/ 이 페이지의 클론코딩을 진행 https://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md api 참조 Visual Studio Code Extention Night owl vetur ESLint TSLint Auto Close Tag Material Icon Theme Live Serve Vue CLI 설치 Visual Studio Code 터미널을 통한 Vue CLI 설치 - npm npm install -g @vue/cli - yarn yarn global add @vue/cli Vue C..

    Git 로컬 저장소 GitHub 원격저장소 연결

    Git 로컬에 소스를 원격저장소에 연결하는방법 1. 터미널에 작업영역의 경로로 이동 후 깃 로컬저장소 생성 ( 초기화 ) > git init 2. GIthub 홈페이지 저장소 로 이동하여 저장소 생성 후 주소 복사 > https://github ... 3. 로컬 저장소와 원격 저장소 연결 커맨드 입력 > git remote add origin https://github.com/name/projectname.git 4. GIthub 홈페이지 저장소 확인

    javaScript table merge 테이블 같은내용 머지

    테이블 아이디 값에 forRowspan 만 세팅 $(function(){ $('#forRowspan').each(function() { var table = this; $.each(\[2,3,4\] /\* 합칠 칸 번호 \*/, function(c, v) { var tds = $('>tbody>tr>td:nth-child(' + v + ')', table).toArray(), i = 0, j = 0; for(j = 1; j < tds.length; j ++) { if(tds\[i\].innerHTML != tds\[j\].innerHTML) { $(tds\[i\]).attr('rowspan', j - i); i = j; continue; } $(tds\[j\]).hide(); } j --; if(tds\..