[JS Deep Dive] 30장 - Date
·
Deep Dive 정리
1. Date 생성자 함수자바스트립트에서 날짜를 생성하는 방법은 두가지다. 첫 번째는 Date() 함수만 호출하는 방법, 두 번째는 new Date() 로 호출하는 방법이다.Date() 로 생성한 날짜는 문자열을 반환하고, new Date()로 생성한 경우 새로운 Date 객체를 반환한다.즉 Date()함수로 호출한 값은 String이라 replace, length 같은 String 메서드만 사용할 수 있다. new Date() 생성자로 호출한 경우 새로운 getDate(), getDay() 와 같은 메서드를 사용할 수있다.  생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 가진다. 기본적으로는 현재 날짜와 시간을 나타내는 정수값을 가지는데 현재 날짜와 시간이 아닌 다른 ..
[JS Deep Dive] 29장 - Math
·
Deep Dive 정리
Math 는 생성자 함수가 아니기 때문에 정적 프로퍼티와 정적 메서드만 제공한다. Math 객체는 생성자 함수가 아니기 때문에 new 키워드를 통해 인스턴스를 생성할 수 없는 객체이며, 인스턴스를 통해 접근하는 메서드나 속성 없이 클래스 자체에 속하는 정적(static) 프로퍼티와 메서드만 가진다⏭️ Math의 함수와 값들은 Math 자체에서만 접근할 수 있다. 1. Math 프로퍼티Math.PI : 원주율 값을 반환Math.PI; //3.145.. 2. Math.메서드 Math.abs : 절대값 반환 Math.ceil : 소수점 이하를 올림한 정수 반환 Math.floor: 소수점 이하를 내림한 정수 반환Math.sqrt : 인수로 전달된 숫자의 제곱근 반환Math.max: 전달받은 인수 중 가장 큰..
[JS Deep Dive] 28장 - Number
·
Deep Dive 정리
1. Number 생성자 함수new 연산자와 함께 호출하여 number 인스턴스를 생성할 수 있다. new 연산자를 사용하지 않고 Number 생성자 함수를 호출하면 Number 인스턴스가 아닌 숫자 반환숫자가 아닌 값을 전달하면 인수를 숫자로 강제 변환한 후 [[NumberData]] 내부 슬롯에 변환된 숫자를 할당한 Number 래퍼객체를 생성한다. -> 만약에 숫자로 변환할 수 없다면 NaN 을 [[NumberData]] 내부슬롯에 할당한 Number 래퍼객체 생성함const numObj = new Number('10');vondolr.loh(numObj);//Number {[PimitiveValue]]:10}const textObj = new Number('Hello');vondolr.loh(te..
[JS] 객체의 프로퍼티-getter/setter
·
Java Script
지금까지 객체의 프로퍼티(Property) 에 대해서 많은 언급을 했었다.이번엔 객체의 프로퍼티 중에서도 접근자 프로퍼티를 조금 더 정리해보려고 한다. 1. 프로퍼티란(Property) ?사실 이름 그대로 프로퍼티는 ...  속성이란 뜻으로 자바스크립트에서 객체 내부의 속성을 의미한다.즉 객체 내부의 {key:value} 형태로 구성되는 객체가 가지는 정보라고 말할 수 있겠다.  프로퍼티는 크게 두가지로 분류할 수 있다. 데이터 프로퍼티 (data property)접근자 프로퍼티 (accessor property)  2. 데이터 프로퍼티 (data property)데이터 프로퍼티는 일반적으로 사용하는 프로퍼티이다. 즉 일반적으로 값을 저장하기 위한 프로퍼티이다. 여기서 Value 는 프로퍼티의 속성값을 ..
[JS] 접근제어자란?
·
Java Script
1. 접근 제어자(Access modifier) 란? 접근 제어자는 클래스 내부에서 특정 속성이나 메서드에 대한 접근 권한을 제어하는 방법이다. 사실 JavaScript는 프로토타입 기반의 언어이기 때문에 전통적인 접근 제어자인 public, protected, private 키워드를 지원하지 않아,필요하다면 임의의 패턴을 이용하여 이러한 기능을 사용해야 했다. ES6 이후 #을 사용하여 비공개(private) 필드를 정의할 수 있는 문법이 추가되었다. 접근제어자를 사용하여 접근권한을 제어하는 이유가 뭘까? 클래스는 외부에서 객체가 어떻게 사용할지를 결정하고, 객체는 각 클래스의 속성을 이용한다. 이때 자바스크립트에서는 기본적으로 모든 속성과 메서드가 클래스의 public 접근 권한을 가지기 때문에클래스..
[JS] 자바스크립트 클래스와 생성자 함수 차이
·
Java Script
생성자와 객체 타입에 대해서는 일전에 포스팅 한적이 있었지만 이번에 함수를 구현해보면서 또 헷갈리는 부분이 있어 다시 포스팅하고자 한다.  자바스크립트에서 객체를 생성하는 데에는 세가지 방법이 있다. 생성자 함수를 통해 만들기, 객체 리터럴을 통해 만들기, object 함수를 통해서 만들기여기서 생성자 함수와 class 에 대해서 알아보도록 하자. 1. 생성자 함수(constructor functions)생성자 함수는 새로운 객체를 반환하고 객체의 초기 상태를 설정할 수 있게 도와준다.생성자 함수를 만들기 위해서는 반드시! new 키워드와 함께 호출이 되어야 하는데,이때 class 문법의 constructor 와 함께 사용할 수도 있고 일반 함수 형태로 정의할 수도 있다. 두 가지 규칙은 잊지말자!new..
next.js + firebase연동하기
·
카테고리 없음
백엔드 서버와 호스팅을 간편하고 빠르게 하기 위해서 firebase를 선택하였다. 전에 혼자 만들 때 firebase를 잠깐 사용한 적은 있지만next js 에 연결하는 건 또 처음이고... 두고두고 유용할 것 같아서 포스팅한다.1. firebase 등록하기🫤 이 부분에서 살짝 애를 먹었다. 구글링해서 보면 그냥 바로 storage를 누르면 db 만들 수 있다고 되어있는데 개편이 된건지..??firestore database가 있고 realtime database가 있었다.  다른 사람들이 하는 것처럼 따라하기 위해서는 그냥 firestore database 를 선택하면 된다. 그리고 기존과 똑같은 방식으로 collection 을 눌러주면 된다. 위의 add database 를 누르면 이런게 뜬다. 이..
[JS Deep Dive] 27장 - 배열 (3)-스택, 큐 자료구조
·
Deep Dive 정리
1. 스택구조push 메서드와 pop 메서드를 통해 쉽게 구현 가능스택은 한 방향으로 데이터를 넣고 뺄 수 있는 자료구조먼저 들어간 자료가 나중에 나오는 후입선출 자료구조로, LIFO(Last In First Out) 방식언제나 가장 마지막에 밀어넣은 최신 데이터를 먼저 취득한다. 스택은 top에 바로 접근 가능하기 때문에 삽입, 삭제의 시간 복잡도는 O(1). top은 가장 끝쪽에 위치한 데이터를 가리키며 push는 top에 새로운 데이터를 추가하고, pop은 top을 추출📌 스택 활용 예시후입선출 특징으로 여러 분야에서 활용웹 브라우저 방문기록(뒤로가기)실행 취소(undo)역순 문자열 만들기후위 표기법 계산 //생성자함수const Stack = (function () { function Stack..
[JS Deep Dive] 27장 - 배열 (2)
·
Deep Dive 정리
1. 배열 메서드원본 배열을 직접 변경하는 메서드 mutator method  // mutator원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드 accessor method // no mtator 2.  concatconcat : no mutator 원본배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환(/push:mutator)const arr = [1,2];const result = arr.concat(3);console.log(arr) //[1,2]console.log(result)//[1,2,3] 3. Array.prototype.indexOf->원본 배열에서 인수로 전달된 요소를 검색하여 인덱스 반환-> 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있다면..
[JS Deep Dive] 27장 - 배열 (1)
·
Deep Dive 정리
1. 배열이란?여러 개의 값을 순차적으로 나열한 자료구조 2. 배열의 특징요소 : 배열이 가지고 있는 값 -> 자바스크립트의 모든 값(원시값, 객체, 함수, 배열 등) 은 배열의 요소가 될 수 있다. 인덱스 : 배열에서 자신의 위치를 나타내는 값 -> 배열의 요소에 접근할 때 사용한다.length 프로퍼티 : 배열은 요소의 개수, 즉 배열의 길이를 나타내는 Length 프로퍼티를 가진다. 배열은 '객체'타입이다.const arr = ['hi','bye','long']arr[0] // 'hi'arr.length //3//대괄호 내에 요소의 인덱스 지정 //인덱스는 0부터 시작 순서와 Length 프로퍼티 를 가지고 있기 때문에순차적 요소 접근, 역순 접근, 특정 위치부터 접근할수도 있다.  3. 배열의 생..
하이롱하이롱
파이티이잉