타입스크립트의 장점 중 하나가 자바스크립트와 달리 명시적으로 타입(Type)을 정의해서 활용할 수 있다는 부분입니다. 개인적으로는 Type을 타입이라고 부르기보다는 유형이라고 생각하는 게 개념적으로 이해하기에는 좋다고 생각하는데요. 이번 글에서는 타입 스크립트가 가지는 타입 주석과 타입 추론에 대해 알아보겠습니다. 타입 주석 - type annotation let n: number; let b: boolean; let s: string; 타입 주석은 변수에 할당되는 값의 유형을 정의하는 타입스크립트 문법입니다. 사용 방법은 변수를 선언하고 콜론(:)과 변수에 정의할 수 있는 값의 유형을 기입하면 됩니다. number는 숫자를 boolean은 true, false은 string은 문자를 받을 수 있다는 의..
자바스크립트에서 숫자 값은 Number 타입으로 정의해서 사용 할 수 있습니다. 다르게는 자바스크립트에서 숫자는 Number로 취급된다고 이야기 할 수 있죠. 그런데 자바스크립트에서 취급하는 숫자(Number)가 어떻게 정의되는지 코드로 사용되는 유효 값의 범위가 얼마인지 알고 계신가요? 얼마 전 숫자를 다루는 기능을 만들다보니 Number에 대해 추상적으로만 생각하고 사용했구나 라는 생각이 문득 들었습니다. 오늘은 자바스크립트의 숫자 정의와 유효 범위에 대해 이야기해볼까 합니다. Number의 정의 Javascript는 숫자 값을 다루기 위한 타입으로 Number를 제공합니다. Number는 정수, 실수, 양수, 음수, 지수 등 모든 숫자 값을 나타낼 수 있습니다. Number 타입은 64비트 형식의 ..
숫자에 금액 단위 형식을 적용하면 어떻게 될까요? 돈(금액)을 화면에 보여주다 보면 단순히 숫자로 10,000원 이렇게 표기되는 것보다, 1만원이라고 표기되는 게 단위를 세지 않아도 되어 읽기가 편합니다. 돈의 단위를 숫자에 적용하면 가독성이 좋다는 건 사람마다 주관적인 부분이라 다르게 생각할 수 있는 부분이니 이게 꼭 옳다고 이야기는 어려운 부분이네요. 숫자 금액 단위 형식 적용하면? - 원, 만, 억, 조, 경 일반적으로 숫자에 포맷 형식을 적용하면 천 단위를 기준으로 "," 를 사용해 표기를 합니다. 하지만 금액(돈)을 셀 때는 만, 억, 조, 경 단위를 붙여 읽습니다. 위에서 제시한 결과처럼 말이죠 처음에 금액에 단위 형식을 적용하면 가독성을 높이고 문자의 길이가 짧아져서도 좋을 거라고 생각했는데..
ESNext는 다음 버전의 자바스크립트를 말합니다. 처음에 이 단어를 접했을 때는 "이건 뭐지?"라고 했었는데, 다음의 Javascript를 가리킨다니 어떻게 보면 재미난 용어인 것 같기도 합니다. ESNext의 정의 ESNext에 대한 명확한 정의는 Mozila의 문서에서 확인할 수 있습니다. 본문 내용을 해석해본다면, ESNext는 작성 시점에 다음 버전을 가리키는 역동적인 이름이다. ESNext 기능들은 제안이라고 부르는 것이 더 정확하다. 정의에 따라 사양이 아직 확정되지 않았기 때문에라고 설명되어 있습니다. 즉 ESNext는 단순히 신규 버전의 자바스크립트로 생각하기보다는 앞으로 발전할 자바스크립트를 통칭하는 단어라고 말할 수 있을 것 같습니다.
오늘은 Axios를 사용해 파일 업로드 기능을 구현하는 방법에 대해 알아보겠습니다. 이전에 Axios 파일 다운로드 기능에 대한 글을 쓴 적이 있는데, 이번에는 그 후속 편으로 Axios로 파일을 업로드하는 방법을 코드로 확인해보겠습니다. Axios 파일 업로드 요청하기 axios({ headers: { "Content-Type": "multipart/form-data", }, url: "https://7942yongdae.tistory.com/file-upload", // 파일 업로드 요청 URL method: "POST", data: formData, }).then(...); Axios를 사용해서 파일을 업로드할 때 중요한 부분은 headers의 Content-Type, data입니다. 이 두 가지 ..
이번에는 Axios 파일 다운로드 기능을 만들어보려고 합니다. 개발을 하다 보면 자주 구현하는 기능 중에 하나가 파일 다운로드입니다. 간단한 내용이지만 정리를 해두면 좋을 것 같아 매번 정리해둔다고 하면서 한 적이 없어 이제 정리해보려고 합니다. 글의 제목은 Axios 파일 다운로드 기능 구현이지만 실제로 구현할 코드는 Axios 뿐만 아니라 fetch나 jQuery.ajax에서도 사용할 수 있는 내용입니다. Axios 파일 다운로드 요청하기 axios({ url: 'https://7942yongdae.tistory.com/file-download', // 파일 다운로드 요청 URL method: 'GET', // 혹은 'POST' responseType: 'blob', // 응답 데이터 타입 정의 })..
자바스크립트에서 소수점을 내리거나 올리거나 혹은 반올림하는 방법을 알고 계신가요? 소수점 계산을 해야 하는 경우가 별로 없다 보니 Math 객체에 대해 크게 관심을 가져 본 적이 없는데요. 이번에 반올림(round), 올림(ceil), 내림(floor)을 사용해 소수점 단위까지 검증이 필요한 요구사항을 구현하게 되어 Math에 대해 알아보려고 합니다. 아 그리고 소수점 처리에서 빠질 수 없는 Number 객체 toFixed()도 같이 공부해보겠습니다. 소수점 반올림 - Math.round() 반올림은 근삿값을 구할 때 4 이하의 수는 버리고 5 이상의 수는 윗자리에 1을 더하는 방법입니다. 예를 들어 0.4를 반올림하면 1, 0.5 반올림하면 1이 됩니다. 자바스크립트에서 소수점 반올림은 Math.ro..
이번에는 Javascript의 Array가 가진 groupBy() 함수의 정의와 사용 방법에 대해 알아보겠습니다. groupBy() 함수는 알아두면 컬렉션(Collection)을 다룰 때 유용하게 쓸 수 있기 때문에 기본적인 사용 방법뿐만 아니라 알아두면 활용하는 부분도 예제 코드로 확인해보겠습니다. 그리고 자바의 스트림 API에서도 groupBy() 기능을 사용할 수 있어요. groupBy() 정의 Array.prototype.groupBy ( callbackfn[, thisArg] ) MDN에서 groupBy() 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다고 정의합니다. 조금 말이 어렵다고 생각되는데요. groupBy() 함수가 주로 사용되는 용..
자바스크립트에서 JSON은 JavaScript Object Notation의 줄임말로 문자 기반의 표준 포맷을 말합니다. 그리고 자바스크립트에서 데이터를 다룰 때는 주로 JSON 형식을 취하기 때문에 JSON의 사용하는 방법에 대해 알아두는 것이 좋습니다. 특히 JSON을 다루기 위해 내장되어 있는 JSON.stringify(), JSON.parse() 사용 방법을 알아두면 JSON 객체를 다루기도 쉽고 개발의 생산성, 효율성도 좋아집니다. JSON은 무엇일까? JSON을 잘 사용하는 방법을 알아보기 전에 먼저 JSON에 대한 정의를 알아보겠습니다. JSON을 잘 사용하기 위해서는 JSON의 정의를 아는 것도 중요합니다. 서문에서는 JSON(JavaScript Object Notation)을 문자 기반의..
프로그래밍에서 정규 표현식을 잘 사용하면 보다 간단하게 문제들을 해결할 수 있습니다. 대표적으로는 공백, 숫자, 한글과 같은 문자 유효성 검증을 이야기할 수 있겠네요. 정규 표현식(regular expression)을 사용하면 if문을 사용하지 않는 검증을 만들 수 있을 뿐만 아니라 코드의 가독성도 높일 수 있고 문자 탐색에서도 이점을 가질 수가 있습니다. 오늘은 자바스크립트를 이용해 유효성을 검증하는 정규표현식에 대해서 알아보겠습니다. 유효성 검증의 경우 대표적으로 사용하는 사례는 공백 확인, 영문자 혹은 한글 확인과 같이 사용자의 입력 값을 확인하는 경우입니다. 그럼 예제 코드를 통해서 정규 표현식에 대해 알아보겠습니다. 이 글에 예제 코드로 작성한 유효성 검증 코드는 공백 확인, 숫자 확인, 영문자..
이번 글에서는 자바스크립트의 map() 함수를 만들어보겠습니다. 이전에 filter()를 구현했던 것과 같이 map()을 직접 정의해보면서 map() 함수에 대해 알아가 보도록 하겠습니다. map() 함수도 filter() 함수처럼 구현하는 내용이 어렵지 않기 때문에 글 내용을 따라 코드를 작성해보시기를 추천드립니다. map()를 사용하는 이유 map() 함수는 새로운 자료구조 혹은 객체를 정의할 때 사용하는 함수입니다. 객체보다는 주로 새로운 자료구조를 필요로 하는 경우에 많이 사용한다는 점을 알아주세요. 예를 들어 성과 이름으로 나누어진 사용자 데이터가 주어졌을 때 성과 이름을 합친 사용자 데이터 사용해야 하는 상황이 발생한 경우에 map()을 사용할 수 있습니다. map()은 주어진 값을 새로운 값..
고차 함수의 정의는 함수를 매개변수로 사용하거나 함수를 반환하는 함수입니다. 문장으로만 보면 어렵게 느껴질 수 있는 개념이지만 함수형 프로그래밍에서는 필수적으로 알아야 하는 개념이기도 합니다. 고차 함수(HOF)라는 용어가 생소하고 개념도 낯설어서 어렵다고 느껴질 뿐 조금만 익숙해지면 함수형 프로그래밍을 보다 빛나게 해주는 멋진 기술입니다. 예를 들어 자바스크립트의 filter(), map(), reduce() 함수도 고차 함수 개념을 활용해 만들어져 있습니다. filter()를 구현하는 방법에 대해서도 다룬 적이 있으니 흥미가 있으시다면 한 번 확인해보셔도 좋습니다. 고차 함수와 비슷한 개념으로는 고차 컴포넌트(HOC: Higher-Order Component)도 있습니다. 고차 컴포넌트가 주로 리엑트..