Web

Symbol

1. Symbol 이란? Symbol은 원시타입 데이터로, 유일무이한 값을 만드는데 사용된다. (Symbol의 뜻이 상징이라는 뜻이니까...) 그리고 이 값은 익명의 객체 속성(object property)을 만들 수 있는 특성을 가졌다. 한 마디로 객체의 키값은 문자열, 뿐만 아니라 Symbol형도 가능하다. Symbol() 을 사용하면 Symbol 값을 만들 수 있다. // id는 새로운 심볼이 됩니다. let id = Symbol(); 아래와 같이 Symbol을 만들 때 인자를 줄 수 있는데, 이 인자는 Symbol을 나타내는 설명, 이름이다. 이 Symbol 이름은 어떠한 것에도 영향을 주지 않는 단순 '이름'역할만 한다. 디버깅시에 많이 쓰인다. // 심볼 id에는 "id"라는 설명이 붙습니다...

얕은 복사와 깊은 복사(Shallow Copy & Deep Copy)

서론얕은 복사와 깊은 복사에 대해 정리하다보니 여러 개념이 얽혀있고, 그에 대한 이해가 필요하다는 것을 알게됐다.나도 얕은 복사와 깊은 복사에 대해 굉장히 많이 헷갈렸었고, 지금도 가끔 헷갈리는 개념이므로 처음부터 정리하고자 한다. 원시타입과 참조타입Javascript 에는 원시타입과 참조타입이 존재한다. 각각 타입에 무엇이 존재하는지 알아보고, 그 둘의 차이점을 안다면 이번 포스팅의 주제인 얕은 복사와 깊은 복사에 대해 이해하기 쉬워질 것이라 생각한다.1. 원시타입Javascript의 원시타입에 다음과 같은 타입들이 존재한다.stringnumberbigintbooleanundefinednullsymbol (ES6+)원시타입은 메모리에 저장될 때 '불변성'을 가지고 있다. 일단 아래 코드를 보자.let ..

Object Method

ObjectObject 클래스는 JavaScript의 데이터 유형 중 하나를 나타낸다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용된다. JS의 거의 모든 객체는 Object의 인스턴스이다. JS는 객체 기반의 스크립트 언어이다. 원시 타입을 제외한 나머지는 모두 객체이다. 한마디로 JS는 객체빼면 시체다... 객체는 키(key)와 값(value)쌍으로 이루어진 프로퍼티(property)들의 집합이다.const obj = { key: value, ... }; Object.entries()for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환한다.Object.entries() 에 의해 반환된 배열(array)의 순서는 객체가 정의된..

Array Method

Array 배열은 리스트와 비슷한 '객체'이다. JS의 배열은 길이도 고정되어 있지 않고, 요소의 자료형도 고정되어 있지 않다. 따라서 한 배열에 숫자와 문자열이 같이 들어갈 수도 있고, 아래와 같이 그냥 뒤에 값을 넣을 수도 있다. let arr = [1, 2]; arr[2] = 3; console.log(arr); // [1, 2, 3] 또한 위와 같이 그냥 리터럴 표기법으로 배열을 생성할 수도 있고, 생성자로 생성할 수 있다. 이제 아래에서 생성자를 시작으로 관련 메소드들을 알아보자. Array() 생성자 let arr1 = new Array(3); console.log(arr1); // [empty * 3] console.log(arr1[0]); // undefined 위 코드와 같이 '빈 슬롯'..

React Hooks

1. useState State란 컴포넌트가 가질 수 있는 상태를 의미한다. useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트 시킬 수 있는 도구를 제공해준다. // 사용법: const [state, setState] = useState(초기값); // 아래와 같이 이름을 바꿔 사용할 수 있다. const [time, setTime] = useState(5); State를 변경하게 되면, 화면을 다시 렌더링하게 된다. import { useState } from 'react'; const heavyWork = () => { console.log('heavy work'); return ['홍길동', '김민수']; }; function App() { // 초기값을 가져올 때 무거운 작업을 해야 ..

TS Compiler

Watch 만약 app.ts를 컴파일 할 때 tsc app.ts -w 혹은 tsc app.ts --watch를 입력한다면 관찰 모드로 진입하게 된다. 그러면 저장이 될 때 마다 디스크에 저장이되고, 컴파일을 자동적으로 다시 하게 된다. 이처럼 관찰 모드는 좋은 기능이지만, 파일을 구체적으로 지정해야 한다는 번거로운 단점이 있어 규모가 큰 프로젝트에서는 잘 사용하지 않는다. 전체 프로젝트 컴파일 / 다수의 파일 특정 파일을 지정하지 않고 tsc --init 을 하면 이 커맨드가 실행되는 폴더의 모든 항목을 TS에게 알려주게 된다. 그러면 tsconfig.json 파일이 생기게 되고, 설정들을 관리할 수 있다. 그리고 나서 tsc를 입력하게 되면 폴더 내의 모든 .ts 파일들을 컴파일하게 된다. 또한 모두 ..