Web

CSR (Client Side Rendering)

CSR 이란? React를 사용한 CSR에서 브라우저는 페이지에 필요한 최소한의 HTML 페이지와 JavaScript를 다운로드한다. 그런 다음에 JavaScript를 사용해서 DOM을 업데이트하고 페이지를 렌더링한다. 애플리케이션이 처음 로드될 때, 즉 사용자가 페이지를 처음 로딩했을 때 사용자는 전체 페이지를 보기 전에 약간의 딜레이를 느낄 수 있다. 모든 JavaScript가 다운로드 및 실행이 될 때까지 페이지가 완전히 렌더링되지 않기 때문이다. 순서대로 나타내자면 다음과 같다. 사용자가 홈페이지를 최초로 접속했을 때 클라이언트는 이를 확인하고 서버로 요청한다. 서버는 빈 페이지(HTML, CSS)를 클라이언트에게 전달한다. (JavaScript에 대한 링크는 존재) 전달받은 클라이언트에서 해당 ..

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의 원시타입에 다음과 같은 타입들이 존재한다. string number bigint boolean undefined null symbol (ES6+) 원시타입은 메모리에 저장될 때 '불변성'을 가지고 있다. 일단 아..

Object Method

Object Object 클래스는 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() { // 초기값을 가져올 때 무거운 작업을 해야 ..