JavaScript
-
깊은복사와 얕은복사, 그리고 최신문법 structuredClone 까지JavaScript 2023. 1. 15. 11:40
먼저, 자바스크립트에서 값은 원시값과 참조값 두 가지 데이터 타입의 값이 존재한다. 원시형 즉, 원시값은 기본 자료형 (단순한 데이터)를 의미하며 변형할 수 없다!! 변형할 수 없다는 것이지 재할당 할 수 없다는 뜻은 아니다. 원시값을 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않는다. String number boolean undefined symbol null 참조형 원시형이 아닌것들은 모두 참조형이다. 예로는 객체, 배열, 함수와 같은 것들이 있다. 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다. 따라서 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체..
-
HTTP 구조JavaScript 2022. 6. 17. 16:25
HTTP 구조 HTTP란? HyperText Transfer Protocol 의 약자로 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 통신 규약이다. 웹상에서 네트워크로 서버끼리 통신을 할때 어떠한 형식으로 서로 통신을 하자고 규정해 놓은 "통신 형식" 혹은 "통신 구조" 라고 보면 된다. (프론트-백 통신에 사용) HTTP 통신 방식 HTTP는 기본적으로 요청/응답 (request/response) 구조로 되어있다. 클라이언트가 HTTP request를 서버에 보내면 서버는 HTTP response를 보내는 구조로 클라이언트와 서버의 모든 통신이 요청과 응답으로 이루어 진다. HTTP는 요청이 오면 그에 응답을 할뿐, 여러개의 요청/응답 끼리 연결되어 있지 않다. (stateless 하다.) 각..
-
AxiosJavaScript 2022. 6. 14. 13:18
Axios Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드 / 프론트엔드의 통신을 쉽게하기 위해 Ajax로 서버에 데이터를 요청한다. 라이브러리 설치 npm i --save axios Axios 사용하기 데이터 요청 // 방법 1 axios.get('URL', { 전송할 데이터 }) // 방법 2 axios({ method: '메소드', url: 'URL', params: { 'get ... 등으로 데이터 전송 시 보낼 데이터' }, data: { 'post ... 등으로 데이터 전송 시 보낼 데이터' } }) 데이터를 보낼때는 params 또는 data를 사용하는데, params는 대표적으로 get 메소드, data..
-
자바스크립트 객체 종류와 생성 시기JavaScript 2022. 6. 10. 17:08
자바스크립트 객체 종류와 생성 시기 자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든것들이 객체로 존재한다. 처음 자바스크립트가 로드될 때 글로벌 영역의 세가지 객체가 생성된다. Native Object / Built-in Object (자바스크립트 내장객체) 자바스크립트가 프로그램 전체에 공통적으로 필요한 기능을 제공하기 위한 객체이다. 특정 환경에 종속되지 않은, ECMAScript 명세의 내장객체이다. 자바스크립트 엔진이 구동되는 시점에서 바로 제공되며 자바스크립트 코드 어디에서든 사용이 가능하다. Object, Function, Number, Math, Date, string, RegExp, Array, Error, Symbol 등이 있다. Host Object (브..
-
Array MethodJavaScript 2022. 6. 9. 14:18
Array Method 배열 요소 조작 unshift() 배열의 array.unshift() method는 배열의 앞에 요소를 추가한다. 반환 값 : 메서드를 호출한 배열의 새로운 length 속성 const arr = [1, 2, 3] arr.unshift(4, 5) // [4, 5, 1, 2, 3] push() 배열의 array.push() method는 배열의 끝에 요소를 추가한다. 반환 값 : 호출한 배열의 새로운 length 속성 const arr = [ 1, 2, 3] arr.push(4, 5) // [1, 2, 3, 4, 5] shift() 배열의 array.shift() method는 배열의 앞에서부터 요소를 제거한다. 반환 값 : 배열에서 제거한 요소. 빈 배열의 경우 undefined ..
-
배열 (Array)JavaScript 2022. 6. 7. 13:30
배열 (Array) 배열 (Array) 이란? 한개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. let arr = new Array() let arr = [] 배열 안에 들어있는 값들을 요소(element, item, etc)라고 한다. let arr = [ 1, '2', ture ] let arr1 = [ undefined, null, false, NaN, 1000 ] 배열은 어떤 값이라도 배열의 요소로 추가할 수 있으며 종류가 다른 값들도 함께 담을 수 있다. 배열의 크기는 고정되지 않는다. ( ⇒ 언제든 요소를 추가하거나 제거할 수 있다.) 항상 0부터 시작한다. 💡 💡 배열은 기능이 추가된 특수 객체이므로 배열에 숫자가 아닌 키나 분수, 음수 등을 키로 사용할 수는 있다. 하지만 이러..
-
JSON(JavaScript Object Notation)JavaScript 2022. 6. 3. 10:44
JSON(JavaScript Object Notation) JSON (JavaScript Object Notation) 이란? JSON은 자바스크립트의 객체 표기법을 제한하여 만든 텍스트 기반의 데이터 교환 표준이다. 즉, JSON 데이터는 자바스크립트가 자주 사용되는 웹 환경에서 사용하는 것이 유리하다. 자바스크립트는 JSON 데이터를 처리하기 위한 다음과 같은 메소드를 제공한다. JSON.stringify() JSON.parse() toJSON() 서로 다른 시스템 간 객체를 교환할 수 있다. (서버 간 통신에 유용하다. (AJAX)) JSON은 Javascript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있다. { key: value } 형식이다. 문자열은 ..
-
Object MethodJavaScript 2022. 5. 24. 17:35
Object Method Object.entries() 객체를 순회하며 모든 프로퍼티를 [key, value] 쌍의 배열 형태로 반환한다. 반환된 배열은 객체가 정의된 순서와 상관 없이 나오기 때문에 sort()로 정렬을 하는 것이 좋다. ⇒ Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0])) obj = { a: 1, b: 2, c: 3 } console.log(Object.entries(obj)) // [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ] Object.keys() 객체를 순회하며 해당 객체가 갖는 key 값으로 이루어진 배열을 반환한다. const score = { math: 100, english: 95, his..