개인공부 (151) 썸네일형 리스트형 Array.from 과 Array().fill 차이점. 배열을 초기화 할때 두가지 방법을 사용한다. Array(N).fill(변수); Array.from({length:N},()=> 변수)); 이때 fill 안의 변수는 하나고 밑에는 변수가 그 때마다 생성된다. Js에서 C언어의 포인터 개념을 빌리자면 위쪽 변수의 주소번지가 1000이라면 모든 배열에 대한 같은 주소지로 초기화된다. 밑에는 변수가 그때마다 1001 1005 1009 식으로 할당 된다. 이차이는 new Class()를 생성하고 내부객체를 변경할 때 fill로 초기화 되어있는 배열은 같은 주소를 참조함으로 주의하자. 정규 표현식과 일치하는 값 해체하기 function parseProtocol(url) { var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); if (!parsedURL) { return false; } console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"] var [, protocol, fullhost, fullpath] = parsedURL; return protocol; } console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/J.. 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.. IE11 , min-height flex 이슈 min-height 문제 소스코드 html item 1 item 2 css .container { width : 200px; height : 200px; border: 2px solid red; } .flexBox { display: flex; flex-direction: column; min-height: 50px; justify-content: center; border: 2px solid blue; } * IE11에서는 flex 영역의 min-height값을 인식하지 못합니다. * 영역은 min-height값을 잡지만 flex는 높이를 인식하지못하여 justify-content : center 임에도 위쪽으로 처리됩니다. 해결방법 * min-height가 적용되지 않는 태그를 감싸는 태그 추가합니다.. 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]}`;.. 이전 1 2 3 4 5 6 ··· 19 다음