connecting dots

1. 직렬화(Serialization)란? 직렬화(Serialization)는 데이터를 전송하거나 저장하기 위해, 객체나 데이터 구조를 일련의 문자열로 변환하는 과정을 말합니다. 예를 들어, 자바스크립트의 객체를 네트워크를 통해 전송하거나 파일에 저장하고 싶을 때, 이 객체를 텍스트 형태로 변환하는 것이 바로 직렬화입니다. 2. JSON.stringify()란?JSON.stringify()는 자바스크립트에서 객체를 JSON 형식의 문자열로 직렬화하는 방법입니다.  • JSON(JavaScript Object Notation)은 데이터 교환 형식으로 널리 사용되는 텍스트 기반의 형식입니다. • JSON.stringify()는 자바스크립트 객체를 JSON 문자열로 변환해 줍니다.const user = { ..

실행 컨텍스트 (Execution Context) - Record와 Outer를 중심으로record/outer는 실행컨텍스트와 크게 관련 없음lexical 은 실행 컨텍스트보다 상위개념이라고 볼 수 있음설명이 어렵게 되어 있음 - 전반적으로 더 읽기 좋게 풀어서 설명해보기 (어렵게 썼는데 틀리면 ? 신뢰도 하락)독자 입장에서 글의 흐름이 뭉쳐있다, 쉽게 풀고 더 흐름을 자연스럽게 고쳐보기 실행 컨텍스트는 실행 가능한 코드에 제공할 환경(코드 실행에 영향을 주는 조건이나 상태) 정보를 모아놓은 객체입니다.해당 객체에는 변수 객체, 스코프 체인, this 정보가 담겨있습니다.자동으로 전역 컨텍스트가 생성된 후 함수 호출시마다 함수 컨텍스트가 생성되고, 컨텍스트 생성이 완료된 후에 함수가 실행됩니다. 함수 실..

if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`);}  그런데 ! 객체가 만들어질 때 마다 메모리에 저장됨 --> 더 효율적인 방법은 없을까 ? 자바스크립트의 Class this 예제 일반함수를 호출할 때와 화살표 함수를 호출할때의 차이점--> 일반함수는 '호출 위치' 화살표 함수는 '선언된 함수 범위'가 중요함 ! heropy.normal(); // Heropy// 여기에서 normal 함수가 호출됨. 이 위치에서 앞에있는 객체데이터가 heropy이므로 this는 heropy를 가리킴// 따라서 this.name은 heropy.name과 같음heropy.arrow(); // undefined// 선언된 범위 외부에 함수가 없으므..

원래라면 ....let name = 'apple store'let tv1 = { name: 'noona tv', price: 200, size: '56inch'}let tv2 = { name: 'ultra tv', price: 200, size: '27inch'}let tv3 = { name: 'grand tv', price: 200, size: '36inch'}// and so on ... --> tv가 추가될 때 마다 하나하나 만들어야 된다고 ???? 너무 번거롭고 실수 확률도 너무 높아 ... Class객체의 설계도(like 작업지시서)객체의 속성과 메서드를 정의함TV를 만들 때는 name, price, size 속성이 반드시 필요하다는 것을 명시class TV{ construc..

css와 module.css의 차이점 CSS (Cascading Style Sheets)CSS는 웹 페이지의 스타일을 지정하기 위한 언어입니다. HTML 요소의 레이아웃, 색상, 글꼴 등을 정의하는 데 사용됩니다. 특징  • 전역 범위: 기본적으로 CSS는 전역 범위입니다. 즉, 한 번 정의된 스타일은 전체 문서에서 적용됩니다. • 간단한 사용법: HTML 파일에서 태그를 사용하여 CSS 파일을 포함하면 됩니다. Hello, world!/* styles.css */.example { color: blue; font-size: 20px;}  CSS ModuleCSS Modules는 CSS를 모듈화하여, 각 모듈이 기본적으로 고유한 범위를 가지도록 하는 기법입니다. 이를 통해 CSS의 전역 범위 문제..

useState와 UseEffectuseState와 useEffect는 React 훅으로, 각각 상태(state)와 사이드 이펙트(side effect)를 관리하는 데 사용됩니다.1. useStateuseState는 함수 컴포넌트에서 상태를 관리하기 위해 사용됩니다.이는 컴포넌트가 상태를 가지고 있고, 이 상태가 변경될 때 컴포넌트를 다시 렌더링할 수 있게 합니다. 예제import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); // 상태 변수와 그 상태를 변경하는 함수 return ( Count: {count} setCount(count + 1)}>Incr..

배열 메소드메소드란 ?객체의 속성 중 하나로, 함수 형태로 정의되어 객체의 동작(behavior)을 나타내는 속성입니다. JavaScript에서 배열 메서드는 배열 객체의 프로토타입에 정의된 함수로, 배열을 조작하거나 배열의 정보를 반환하는 데 사용됩니다.JavaScript 배열도 객체이며, 배열에 사용되는 메서드는 배열의 프로토타입에 정의되어 있습니다.  간단 정리정적 메서드1. Array.from: 유사 배열 객체나 반복 가능한 객체를 배열로 변환합니다.2. Array.isArray: 주어진 값이 배열인지 여부를 확인합니다.인스턴스 메서드1. at: 배열에서 지정된 인덱스에 있는 요소를 반환합니다.2. concat: 두 개 이상의 배열이나 값을 결합하여 새로운 배열을 반환합니다.3. every: 배열..