자바스크립트

안녕하세요. 이번 글에서는 타입스크립트 사용 이유 핵심만 알려드리겠습니다. 1. 타입스크립트 사용 이유 타입스크립트는 자바스크립트의 타입 부분을 업그레이드 한 언어입니다. 그냥 타입체크와, 자동완성을 도와주는 부가기능 정도로만 생각하시면 쉽게 도입하실 수 있을 거예요! 1.1 타입 체크 자바스크립트는 변수의 타입이 실행 시점에 결정되고 변경될 수 있는 동적 타이핑(Dynamic typing)을 지원하는 언어입니다. 그래서 아래와 같이 숫자와 문자를 연산하거나, 숫자만을 넣어야 하는 함수에 문자열을 넣어도, 제지를 하지 못합니다. //1. 숫자와 문자 연산 console.log("100" + 5); //1005 //2.숫자만을 넣어야 하는 함수 function add (a, b) { return a + b..

1. 파일 용량 제한하기 const file_list = [{ "name":"IMG_1378.HEIC", "size":1918839, "uri":"...." }, { "name":"IMG_3017.HEIC", "size":1789432, "uri":"...." }]; const total_file_size = file_list.reduce((total, file) => total + file.size, 0); const MB = 1048576; if ((MB * 50)

안녕하세요. 이번 글에서는 자바스크립트에서의 import / export 핵심만 알려드리겠습니다. 1. 사용이유 코드가 많아지면 파일을 분리해서 작업하는 게 좋은데요. 이렇게 분리된 각각의 파일을 모듈이라고 부릅니다. 즉 모듈(module)은 파일 하나입니다. 이 모듈에 export와 import를 이용하면 만들어진 모듈의 코드(변수, 함수 등)를 사용할 수 있습니다. 2. 사용방법 먼저 index.html파일에 scipt.js의 코드를 가져오는 경우를 들겠습니다. html파일에서 import를 사용하시려면 type을 module로 설정해줘야 합니다. //index.html 2.1 단일 export, import (export default) 단일 값을 가져오고 싶으면 default키워드를 사용해야 합니..

안녕하세요. 이번 글에서는 자바스크립트에서의 ?. / ?? 핵심만 알려드리겠습니다. 1. ?.(optional chaining operator) 1.1 사용이유 용도는 .과 같습니다. 근데?. 왼쪽의 값이 null 혹은 undefined일 경우 .을 찍는 대신 undefined를 반환합니다. 중첩 객체에서 안전하게 데이터를 꺼내고 싶을때 사용합니다. 1.2 사용방법 예를 들어 중첩 객체에서 없는 값을 가져와 보겠습니다. var person = { name: 'kim', }; console.log(person.height.value); 당연히 없는 값을 가져오려 하기 때문에 에러가 나고, 하단의 코드들은 실행하지 못하게 됩니다. 이럴 땐 if를 통해 중첩 객체에서 데이터를 꺼내게 에러처리를 하는데요. 귀찮..

안녕하세요. 이번 글에서는 자바스크립트에서의 Map, Set 핵심만 알려드리겠습니다. 1. Map 1.1 사용이유 객체처럼 key, value형태로 자료를 저장하는 자료형입니다. 근데 객체는 key 값이 문자열과, Symbol만 가능하지만, Map자료형은 어떠한 타입이어도 상관없습니다. 어떠한 값도 넣을 수 있기에, 자료의 연관성이 클 때 쓰입니다. 1.2 사용방법 const human = new Map(); human.set('name', 'kim'); human.set([1,2], 30); console.log(human) //{'name' => 'kim', Array(2) => 30} 위처럼 key값으로 배열도 들어갈 수 있습니다. 객체처럼 key값이 자료의 이름보다는, 배열 [1, 2]가 30과 ..

안녕하세요. 이번 글에서는 자바스크립트에서의 상속 - (Prototype) 핵심만 알려드리겠습니다. 1. 알아야 하는 이유 자바스크립트에서 자료형은 6개의 원시 타입(number, string, boolean, null, undefined, symbol)과 한 개의 객체 타입(object)을 가지고 있습니다. 그중에서 es6부터 추가된 symbol은, 객체에서 유일한 key값을 만들고 싶을 때 사용합니다. 2. 사용방법 const my_symbol = Symbol('description'); 이렇게 Symbol함수 안에 설명을 적으면 사용할 수 있습니다. 그냥 설명을 저장할 수 있는 유일한 자료형입니다. Symbol()은 사용할 때마다 유일한 Symbol이 생성됩니다. 심볼 안에 넣는 설명이 같아도, 비..

안녕하세요. 이번 글에서는 자바스크립트에서의 enumerable, iterable(for in/ for of) 핵심만 알려드리겠습니다. 1. 알아야 하는 이유 자바스크립트 반복문에는 for, forEach 등이 있습니다. 근데 for in/ for of 를 사용해서도 반복을 구현할 수 있는데요. 두 반복문의 차이를 알려면 enumerable, iterable 속성을 알아야 합니다. 오늘 2가지 속성을 배워 for in/ for of를 언제 쓰는지 정확히 이해해 봐요! 2. for in - enumerable 2.1 사용이유 for in 반복문은 객체 값들을 반복하고 싶을 때 사용합니다. var obj = {num1: 1, num2: 2}; for(let key in obj){ console.log(obj..

안녕하세요 이번 글에서는 자바스크립트에서의 async/await - (동기, 비동기) 핵심만 알려드리겠습니다. 1. 사용이유 Promise 대신 코드를 동기적으로 짜고 싶을 때 사용하시면 됩니다. 2. async async키워드를 함수앞에 붙이면, 함수 자체가 Promise가 됩니다. 함수가 promise로 바꼇기에, 함수에 then을 붙일 수 있습니다. 그리고 귀찮게 Promise 생성할 때 마다 new Promise를 해 줄 필요도 없어집니다. async function say_hi () { console.log('hi'); } say_hi().then(function() { console.log('성공'); }) return을 통해 값을 then안으로 넣어줄 수 있습니다. async function..

안녕하세요. 이번 글에서는 자바스크립트에서의 promise(프로미스) - (동기, 비동기) 핵심만 알려드리겠습니다. 1. 사용이유 콜백함수와 마찬가지로 순서대로 코드를 짜고 싶을 때 사용합니다. 하지만 콜백함수보다 좋은 이유가 크게 2가지가 있습니다. 코드 가독성이 향상됩니다. 에러 처리가 가능합니다(catch) 예를 들어 2개의 함수를 순서대로 실행시켜 보겠습니다. const say_1 = () => { setTimeout(() => { console.log('1'); }, 0) } const say_2 = () => { console.log('2'); }; say_1(); say_2(); //2 1 코드에서 원한 건 1과 2가 순서대로 출력되는 것이었지만, say_1안엔 비동기함수 setTimtout..

안녕하세요 이번 글에서는 자바스크립트에서의 콜백함수 - (동기, 비동기) 핵심만 알려드리겠습니다. 1. 사용이유 비동기함수는 요청 결과가 반환되기 전에 다른 작업을 수행할 수 있는 장점이 있지만, 코드의 실행 순서를 유추하기 어려워 집니다. 그래서 콜백함수는 코드를 순서대로 실행하고 싶을 때 사용합니다. 그냥 함수 안에 함수를 넣으면 콜백함수입니다. 2. 사용방법 setTimeout(() => { console.log(1); }, 0); console.log(2); 위 코드에서 1,2, 순서대로 출력하고 싶지만, setTimtout은 비동기 함수기에 2,1 순서대로 출력됩니다. const say_1 = (callback) => { console.log(1); callback(); } const say_2..