코딩병원

Frontend/Javascript

[Javascript] Mobile인지 PC인지 확인하는 함수

가끔 코딩을 하다 보면 사용자가 PC이냐 Mobile이냐에 따라 다르게 분기 처리를 해야 할 때가 있습니다. 따라서 이번 글에서는 현재 사용자가 Mobile로 접근하고 있는지 PC로 접근하는지 확인하는 함수를 구현해보겠습니다. 정말 간단합니다. navigator라는 객체를 통해서 손쉽게 브라우저 정보를 확인할 수 있고 navigator는 전역 객체여서 개발자 도구를 켜시고 console에 navigator를 입력하면 바로 확인이 가능합니다. navigator에는 다양한 프로퍼티들이 있지만 저는 userAgent라는 프로퍼티를 이용해서 현재 pc에서 사용 중인지 mobile에서 사용 중인지 구분해 봤습니다. userAgent에 'iPhone'이라는 문구가 포함되어있다면 아이폰으로 접속했다는 것입니다. 마찬..

2022. 5. 12.

Frontend/Javascript

[Javascript] Set 정리 및 예제

Set은 흔히 집합이라고도 합니다. Set(집합)의 개념은 간단합니다. 유한하고 구분되는 객체들의 그룹입니다. 즉, 유일한(중복되지 않는) 항목들의 그룹입니다. 집합은 O(1) 상수 시간에 유일한 항목을 확인하고 추가할 수 있기 때문에 굉장히 중요합니다. 집합이 상수 시간 연산이 가능한 이유는 집합의 구현이 해시 테이블의 구현을 기초로 하기 때문입니다. 다음과 같이 자바스크립트에서는 Set이 기본으로 지원됩니다. 기본 Set 객체에는 속성이 하나만 존재하는 데 size라는 정수 속성입니다. 해당 속성은 집합 내 항목들의 현재 개수를 나타냅니다. const exampleSet = new Set(); [삽입] Set의 주요 특징은 유일함을 확인한다는 것입니다. Set은 항목들을 추가할 수 있지만 중복되는 항..

2022. 5. 5.

Frontend/Javascript

[Javascript] 빅오 표기법 정리 및 예제

알고리즘의 시간 복잡도를 f(n)이라고 표현했을 때, n은 입력의 개수를 나타내고 f(n)time은 필요한 시간을 나타내고 f(n)space는 필요한 공간(추가적인 메모리)을 나타냅니다. 알고리즘 분석의 목표는 f(n)을 계산함으로써 알고리즘의 효율성을 이해하는 것입니다. 하지만 f(n)을 계산하는 것은 어려울 수 있습니다. 이런 계산을 하는데 도움이 되는 빅오 표기법의 기본적인 규칙이 있습니다. [계수 법칙] 계수 법칙은 가장 이해하기 쉬운 법칙입니다. 단순히 입력 크기와 연관되지 않은 상수를 전부 무시하면 됩니다. 빅오에서 입력 크기가 클 때 계수를 무시할 수 있습니다. 상수 K>0인 경우 f(n)이 O(g(n))이면 kf(n)은 O(g(n))이다. 즉, 5f(n)과 f(n)이 모두 동일한 O(f(n..

2022. 4. 28.

Frontend/Javascript

[Javascript] 시간 복잡도 정리 및 예제

빅오 표기법은 알고리즘의 최악의 경우 복잡도를 측정합니다. 빅오 표기법에서 n은 입력의 개수를 나타냅니다. 알고리즘을 구현할 때 빅오 표기법이 해당 알고리즘이 얼마나 효율적인지 나타내기 때문에 빅오 표기법은 중요합니다. 빅오와 관련된 질문으로 "n이 무한으로 접근할 때 무슨 일이 일어날까?"가 있을 수 있습니다. [시간복잡도의 예] 1. O(1) - Constant Time O(1)은 입력 공간에 대해 변하지 않습니다. 따라서 O(1)을 상수 시간이라고 부릅니다. n의 값이 얼마나 크든 상관이 없습니다. O(1) 알고리즘의 예로 배열에 있는 항목을 인덱스를 사용해 접근하는 경우가 있습니다. function exampleConstant(arr) { console.log(arr[0]); } 2. O(n) -..

2022. 4. 27.

Frontend/Javascript

[Javascript] push() 대신 펼침 연산자로 원본 변경을 피하는 방법

원본 데이터를 조작하는 경우 예상치 못한 결과를 낳을 수 있습니다. 코드의 앞부분에서 컬렉션의 무언가를 수정하면 훨씬 더 찾기 어려운 버그를 만들 수 있습니다. 조작이 항상 문제를 일으키는 것은 아니지만 잠재적으로 문제가 되는 것은 사실이므로, 가능하면 조작을 피하는 것이 좋습니다. 실제로 리덕스를 비롯한 인기 있는 자바스크립트 라이브러리는 원본을 건드는(조작) 함수를 허용하지 않습니다. 모던 자바스크립트의 상당수가 함수형 프로그래밍 형식을 취하기 때문에 부수 효과와 조작이 없는 코드를 작성해야 합니다. 배열을 조작하기 위해 흔히 사용하는 push() 메서드는 새로운 항목을 배열 뒤에 추가해 원본 배열을 변경합니다. 즉, push로 항목을 추가하면 원본 배열을 조작하는 셈입니다. 하지만, 펼침 연산자를 ..

2022. 4. 21.

Frontend/Javascript

[Javascript] 커링(Currying) 함수란?

커링(Currying)은 함수의 재사용성을 높이기 위해 함수 자체를 return하는 함수입니다. 함수를 하나만 사용할 때는 필요한 모든 파라미터를 한 번에 넣어야 합니다. 커링을 사용하면 함수를 분리할 수 있으므로 파라미터도 나눠 전달할 수 있습니다. * 커링과 같이 함수 자체를 인자로 받거나 반환하는 함수를 '고차 함수' 라고 부르기도 합니다. [일반적인 함수] function add(num1, num2) { console.log(num1 + num2); } add(5, 8); // 13 [커링(Currying) 함수] 커링을 사용하면 num1 하나를 파라미터로 받고, 그 다음으로 num2를 파라미터로 받아서 함수를 재사용할 수 있습니다. function add(num1, num2) { return n..

2022. 1. 3.

Frontend/Javascript

[JavaScript] 실무에 유용한 Array API 함수들

1. make a string out of an array (배열을 문자열로만들기) const fruits = ['apple', 'banana', 'orange'] const result = fruits.join(); console.log(result); // 'apple,banana,orange' join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. /** * Reverses the elements in an array in place. * This method mutates the array and returns a reference to the same array. */ 1-1. make an array out of a string (문자열을 배열로 만들기) const fru..

2021. 6. 11.

Frontend/Javascript

[JavaScript] function 정리 (ES6)

Javascript 함수(Function)에 대해 알아보겠습니다. 아래 doSum 함수는 함수를 선언한 것이고 보시면 num1, num2 인자를 받고 그 합을 반환해줍니다. 이와 같이 선언하여 사용할 수도 있고 아니면 printSum() 변수처럼 선언하고 변수에 함수를 대입하여 표현할 수도 있습니다. function은 Object입니다. 따라서, doSum.length, doSum.prototype 등의 프로퍼티들을 사용할 수 있습니다. function doSum(num1, num2) { // 함수 선언식 return num1+num2 } doSum(1, 2); // output = 3 const printSum = function(num1, num2) { // 함수 표현식, anonymous funct..

2021. 6. 8.

Frontend/Javascript

[JavaScript] toFixed()와 toPrecision() 메소드

toFixed() 메소드 Number 인스턴스의 소수 자릿수를 문자열로 반환합니다. 아래 예제를 보시면 쉽게 이해하실 수 있으실 것입니다. toPrecision() 메소드 Number 인스턴스의 가수와 소수를 합친 자릿수(즉, 앞자리부터)를 문자열로 반환합니다. 마찬가지로 아래 예제를 보시면 쉽게 이해하실 수 있습니다. Number 관련 메소드 2020/06/28 - [1. 웹개발/1_1_1 JavaScript] - [JavaScript] 전달된 값이 정수인지를 확인하는 isInteger() 메소드 2020/06/08 - [1. 웹개발/1_1_1 JavaScript] - [JavaScript] NaN인지를 확인하는 isNaN() 함수 2020/04/17 - [1. 웹개발/1_1_1 JavaScript] ..

2020. 6. 30.

Frontend/Javascript

[JavaScript] isInteger() - 전달된 값이 정수인지를 확인하는 메소드

Number.isInteger() 메소드 Number.isInteger() 메소드는 인수의 값이 정수인지 아닌지를 반환해줍니다. 전달된 값이 정수이면 true를 아니라면 NaN, Infinity와 같은 값은 모두 false를 반환합니다. 아래 예제를 통하여 확인해보겠습니다. 정수인 값에는 true를, 그 외의 값에는 fasle가 출력된 것을 확인할 수 있습니다. 이해가 잘 되셨을 거라고 생각합니다! Number 관련 메소드 2020/06/30 - [1. 웹개발/1_1_1 JavaScript] - [JavaScript] toFixed()와 toPrecision() 메소드 2020/06/08 - [1. 웹개발/1_1_1 JavaScript] - [JavaScript] NaN인지를 확인하는 isNaN() 함수..

2020. 6. 28.

Frontend/Javascript

[Javascript] setRequestHeader() - HTTP 요청 헤더 값 설정하는 방법

Ajax에서는 setRequestHeader() 메소드를 사용하여 HTTP 요청 헤더의 값을 설정할 수 있습니다.setRequestHeader()XMLHttpRequest객체.setRequestHeader(헤더이름, 헤더값); 헤더 이름은 HTTP 요청 헤더에 포함하고자 하는 헤더의 이름이며, 그 값도 같이 전달합니다.하지만 다루기 전에 반드시 open()을 setRequestHeader 전에 호출해야하고 그 이후에는 send() 메소드를 적어주시면 됩니다.예제 코드아래 예제를 통하여 직접 한 번 HTTP 요청 헤더를 작성해보겠습니다. 위의 예제에서 setRequestHeader() 메소드를 추가하기 전에 open() 메소드를 이용하고그 이후에 setRequestHeader()가 사용되어서 'hayan'..

2020. 4. 18.

Frontend/Javascript

[JavaScript] 객체란?

객체(Object)란?- 실생활에서 우리가 인식할 수 있는 사물이라고 생각하시면 됩니다.- 이 부분에서 이해가 잘 안되셔도 아래 글들을 읽어보시면 객체가 무엇인지 완벽하게 이해하실 수 있으실 겁니다. 프로퍼티(property)- dog.name = "하얀"- dog.color = "베이지"- dog.age = 13- dog.address = "주엽" 메소드(Method)- dog.cry()- dog.act()- dog.eat()자바스크립트 객체객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다.또한, 자바스크립트의 기본 타입은(data type)은 객체(obj..

2020. 3. 17.

Frontend/Javascript

[JavaScript] 희소 배열이란?

희소 배열- 배열 안에 요소의 위치가 연속적이지 않은 배열을 의미합니다.- 배열의 length 값보다 배열 요소의 개수가 언제나 적습니다.const arr = new Array(); // 빈 배열 객체를 생성arr[99] = "Java Script";// 배열 arr의 100번째 위치에 문자열을 삽입함.document.write("배열의 길이 : " + arr.length)// 100번째 요소를 삽입했기 때문에 배열의 길이는 100으로 늘어남. 비슷한 예제로 희소 행렬을 예로 들을 수 있습니다. 희소행렬희소행렬은 행렬의 값이 대부분 0인 경우를 가리키는 표현이다.[1] 그와 반대되는 표현으로는 밀집행렬(dense matrix), 조밀행렬이 사용된다. 개념적으로 희소성은 시스템들이 약하게 연결된 것에 해당..

2020. 3. 16.

Frontend/Javascript

[JavaScript] 자바스크립트 적용하는 방법

자바스크립트를 적용하는 방법HTML 문서에 자바스크립트 코드를 적용하는 방법은 다음과 같은 방법이 있습니다. 1. 내부 자바스크립트 코드로 적용2. 외부 자바스크립트 코드로 적용내부 자바스크립트 코드자바스크립트 코드는 head 태그 내의 자바스크립트자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!현재 날짜와 시간 표시하기! 다음 예제는 HTML 문서의 태그에 자바스크립트 코드를 삽입한 예제입니다.head 태그 내의 자바스크립트자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!현재 날짜와 시간 표시하기!출력 결과외부 자바스크립트 파일- 자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생성하여 삽입할 수도 있습니다. 외부에 작성된 자바스크립..

2020. 3. 14.