공부 정리 공부 정리

전체 글

• TS 설치

  JavaScript/TypeScript 2021. 6. 12. 17:37

  TS 설치 VS Code에는 TypeScript Compiler가 내장되어 있다 내장된 컴파일러 버전은 VS Code가 업데이트 되면서 올라간다 내장된 컴파일러를 선택할 수 있고, 직접 설치한 컴파일러를 선택할 수도 있다 직접 설치한 컴파일러 사용 npm을 이용한 설치 (Node.js 패키지 매니저) npm init -y npm i typescript -D TypeScript 버전에서 작업 영역 버전 사용 선택 Type Annotation - TypeScript 코드에서는 어떤 변수 또는 값의 타입을 표기하기 위해 타입 표기를 사용 - 타입 표기는 식별자 또는 값 뒤에 : 을 붙여서 value: type 형태로 표기 let a: number; // a = "Yoo"; (오류) a = 39; functio..

  Read More
• TS 알아보기

  JavaScript/TypeScript 2021. 6. 10. 17:47

  TypeScript JavaScript에 타입을 부여한 언어 JavaScript에서 확장된 언어 Complied Language (Complied 대신 Transpile 이라는 용어를 사용하기도 한다) Compiled - 컴파일이 필요 O - 컴파일러가 필요 O - 컴파일하는 시점 O (컴파일 타임) - 컴파일된 결과물을 실행 - 컴파일된 결과물을 실행하는 시점 Interpreted - 컴파일이 필요 X - 컴파일러가 필요 X - 컴파일하는 시점 X - 코드 자체를 실행 - 코드를 실행하는 시점 O (= 런타임) 참조 https://joshua1988.github.io/ts/why-ts.html Why TypeScript? | 타입스크립트 핸드북 타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한..

  Read More
• 정규표현식 widh JavaScript

  기본 지식/정규표현식 2021. 6. 10. 12:12

  정규표현식 (RegExp) 문자열을 검색하고 대체, 추출하는데 사용 가능한 일종의 형식 언어(패턴) // 생성자 new RegExp('표현', '옵션') new RegExp('[a-z]', 'gi') //리터널 /표현/옵션 /[a-z]/gi 정규표현식을 다루는 메소드 정규식.test(문자열) // 일치 열부(Boolean) 반환 문자열.match(정규식) // 일치하는 문자열의 배열(Array) 반환 문자열.replace(정규식,대체문자) // 일치하는 문자열을 대체하고 대체된 문자열(String) 반환 // 예제 const str = ` 010-1234-5678 ITBlue@tistory.com The quick brown fox jumps over the lazy dog. abbccccdddd ` c..

  Read More
• JS 자세히 알아보기 (영화 포스터 출력하기)

  JavaScript/JavaScript 2021. 6. 9. 02:46

  Query String 주소?속성=값&속성=값 Axios 브라우저 및 node.js 용 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 영화 포스터 출력하기 Hello World! import axios from 'axios' // omdbapi 활용 function fetchMovies() { axios .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen') .then(res => { console.log(res) const h1El = document.querySelector('h1') const imgEl = document.querySelector('img') h1El.textContent = res.data.Search[0].Tit..

  Read More
• JS 자세히 알아보기 (Storage)

  JavaScript/JavaScript 2021. 6. 9. 00:15

  Storage localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage 의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 localStorage 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.) 출저 - MDN https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage const user = { name: 'Yoo', age..

  Read More
• JS 자세히 알아보기 (JSON)

  JavaScript/JavaScript 2021. 6. 8. 23:54

  JSON JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다. 출저 - 위키백과 https://ko.wikipedia.org..

  Read More
• JS 자세히 알아보기 (lodash)

  JavaScript/JavaScript 2021. 6. 7. 00:41

  lodash import _ from 'lodash' // From `node_modules`! const usersA = [ { userId: '1', name: 'Yoo' }, { userId: '2', name: 'Lee' } ] const usersB = [ { userId: '1', name: 'Yoo' }, { userId: '3', name: 'Kim' } ] // 배열을 병합 const usersC = usersA.concat(usersB) // 0: {userId: "1", name: "Yoo"} // 1: {userId: "2", name: "Lee"} // 2: {userId: "1", name: "Yoo"} // 3: {userId: "3", name: "Kim"} console.l..

  Read More
• JS 자세히 알아보기 (가져오기, 내보내기)

  JavaScript/JavaScript 2021. 6. 7. 00:20

  가져오기, 내보내기 // getType.js // 기본 통로로 빠져나가기 때문에 함수명이 없어도 된다 // 한개의 데이터만 내보낼 수 있다 export default function (data) { return Object.prototype.toString.call(data).slice(8, -1) } // getRandom.js // 이름이 필요한 통로를 지정 // 이름만 지정되어 있으면 몇개를 내보내도 상관이 없다 export function random () { return Math.floor(Math.random() * 10) } export const user = { name: 'Yoo', age: 35 } // main.js import _ from 'lodash' // From `node_m..

  Read More