개인공부/프론트엔드 (10) 썸네일형 리스트형 javascript: 상속 (extends) 특정 Api를 호출해서 상속하는 Api가 있다면 기본 뼈대는 비슷한고 Api별로 반환값을 달리하는 예제를 만들어보자. class Api { url: string; ajax: XMLHttpRequest; constructor(url: string) { this.url = url; this.ajax = new XMLHttpRequest; } protected getRequest(): AjaxResponse { this.ajax.open('GET', this.url, false); this.ajax.send(); return JSON.parse(ajax.response); } } class NewsFeedApi extends Api { getData(): NewsFeed[] { return this.getRe.. TypeScript: typeAlias vs interface 타입스크립트에서는 타입을 명시하기위해서 두가지 방법을 사용한다. 문법적으로 비슷하지만 약간다르고 지원하는 내용도 차이가 있다. 다음과 같은 News와 NewsFeed 타입으로 명시하겠다. typeAlias type News = { id: number; time_ago: string; title: string; url: string; user: string; content: string; } type NewsFeed = & News { commnets_count: number; points: number; read?: boolean; } interface interface News { id: number; time_ago: string; title: string; url: string; user: stri.. TypeScript: 제너릭 TypeScript를 통해서 반환값의 타입을 명시해 줄 수 있습니다. 반환값은 REST API이고 그값에 따라 Json이 다음과 같은 객체를 나타낸다고 생각합니다. a API {a : string, b : string} b API {c : string, d : number} 일반적으로 타입스크립트는 명시해줘야 하기 때문에 다음과 같은 함수를 작성합니다. type A = { a: string; b: string; } type B = { c: string; d: number; } function getData(url: string): A | B { ajax.open('GET', url, false); ajax.send(); return JSON.parse(ajax.response); } cont b_API .. 클로저 클로저 - 내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다. - 프라이빗한 변수를 만들때 사용한다 getter, setter같은것 부연설명을 좀더하자면 클로저는 JS만의 고유한 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어 : 얼랭, 스칼라, 하스켈에서 사용되는 중요한 특성중의 하나이다. 함수형 프로그래밍이란 프로그래밍 방법론중 하나이며 일정한 변수에 대해서 항상같은 결과가 나온다는 개념이다. ( 일급 객체란 함수자체를 인자로 받거나, 반환할 수있고 변수에 할당할 수 있는 객체를 의미한다. 이것이 가능하기 때문에 고차함수, 콜백함수도 가능하다.) 클로저는 자신이 생성될 때의 환경(Lex.. JavaScript push를 이용해서 렌더링하기. API 1 API 2 API 3 API 4 특정 API 호출시 API 1 ~ API 4 까지를 반환하고 이값을 ul > li > a 로 렌더링 할려고한다. React를 사용할 수도 있지만 JavaScript만으로 구현을 한다고하면 대부분은 아래와 같은 과정을 지나갑니다. const ul = documnet.createElement('ul'); // API 호출함수 ["API 1", "API 2", "API 3", "API 4"] 반환 const API = getAPI(URL); for(let i =0; i< 4; i++) { const li = document.createElement('li'); const a = document.createElemen('a'); a.href = `#${API[i]}`;.. XML HttpRequest ajax https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest XMLHttpRequest - Web API | MDN XMLHttpRequest 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용할 수 있습니다. 또한 HTTP 이외의 프로토콜도 지원합니다(file 과 ftp 포함). developer.mozilla.org const ajax = new XMLHttpRequest(); const RequstType = 'GET'; const NEW_URL = 'https://api.hnpwa.com/v0/news/1.json'; ajax.open(RequstType,NEW_URL,false); ajax.se.. React : Hook (2018v) 2018년에 나온 Hook Hook - Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 Reac의 기능을 사용할 수 있습니다. import React, { useState } from 'react'; function Example() { // "count"라는 새로운 상태 값을 정의합니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } - 선택적 사용 : 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있습니다. - 100% 이전 버전과의 호환성을 보장합니다. - 현재 사용가능 Hook은 배포 v16.8.0에서.. Javascript , Typescript, NodeJs 입맛정리. Javascript ES2015 모던 Javascript라 한다. 웹 앱의 구성요소 - HTML - CSS - JavaScript 웹서버에서 주도적으로 UI를 만드는 것은 ServerSide 렌더링 클라이언트에서 주도적으로 UI를 만드는 것은 ClientSide 렌더링 파설, 웹팩 번들러 하나의 자바스크립트파일로 만들어주는 기능. 번들러를 사용할수록 파일 사이즈가 작아지고 클라우드 같은 불피요한 비용들을 줄일 수 있다. 트랜스 파일링. - 기계어로 바꾸는 작업. - 인간이 이해할 수 있는 프로그래밍 언어를 기계가 이해하는 프로그래밍 언어로 변경. Babel - 트랜스 파일러의 한 종류. - 최신 버전의 문법을 하위버전의 문법으로 바꾸어준다. JavaScript VS TypeScript TypeScript.. 이전 1 2 다음
