2. FrontEnd/Javascript

[JS] JSON.stringify(…) 스프레드 연산자를 사용하면?

[문제] 프로젝트를 하면서, 배열을 stringify를 하면 마지막값만 저장되는 현상이 있음localStorage.setItem(‘history’, JSON.stringify(…curHistory))return […curHistory][원인]스프레드 연산지 오용 사용JSON.stringify(…curHistory) = 잘못된 문법- …curHistory는 배열을 해체하는 문법인데, JSON.stringify는 하나의 값만 받을 수 있음- 스프레드 연산자는 배열을 개별요소로 해체하기에 올바른 형태가 아님2. 마지막 값만 저장되는 이유- 잘못된 스프레드 사용으로 직렬화가 실패하거나, localStorage.setItem이 유효한 데이터를 받지 못해 덮어쓰기가 발생한 것[해결]배열 자체를 JSON.string..

2025. 2. 27. 15:43

2. FrontEnd/Javascript

[ JS ] 실행 컨텍스트

실행 컨텍스트는 JS에서 코드가 실행되는 환경이다JS엔진이 코드를 실행할때, 그 코드가 실행될 때의 환경을 정의하고 관리하기 위해 존재하는 것이 실행 컨텍스트이다 실행컨텍스트는 크게 전역과 함수 실행 컨텍스트로 나눌 수 있다1. 전역 실행컨텍스트JS가 처음 실행될 때, 생성되는 컨텍스트이다. 이 전역 컨텍스트는 프로그램이 종료될 때까지 유지되며 전역에 선언된 변수나 함수가 모두 포함된다. 전역 컨텍스트에서 선언된 변수와 함수는 프로그램 내 어디서든 접근이 가능하다기본적으로 JS는 싱글 스레드이기에 전역 실행컨텍스트는 1개만 존재2. 함수 실행 컨텍스트함수가 호출될 때마다 생성되는 컨텍스트이다. 각 함수는 자신만의 실행 컨텍스트를 가지며, 이컨텍스트 내에서 선언된 변수와 함수는 해당 함수 내에서만 유효함...

2025. 1. 17. 11:47

2. FrontEnd/Javascript

[JS] MVC패턴 & Flux패턴

MVC패턴 (Model, View, Controller) : 양방향 데이터 바인딩 Model, View, Controller 의 약자이다 Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)합니다 Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여짐 사용자가 View를 통해 데이터를 입력하면, View역시 Model을 업데이트 할 수 있다는 점 즉, 데이터가 양방향으로 흐를 수 있다는 것 만약 여기서 규모가 커지면 Model과 View가 많아져 View가 다양한 상호작용을 위해 여러개의 Model을 동시에 업데이트하고 Model역시 여러개의 View에 데이터를 전달하는 상황이 발생한다. 한 Model이 업데이트되면 View가 업데이트되고, 업데..

2024. 4. 3. 17:17

2. FrontEnd/Javascript

[JS] 비동기처리 (Promise)

[ Promise ] ▶️ Promise함수란? Promise는 자바스크립트 비동기 처리에 사용되는 객체이다.(약속해 줘~이런 느낌인데..) 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다. (난 널 기다리지 않아 언제 오든 다음코드실행한다.) ▶️ Promise가 왜 필요한가요? Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용합니다. API가 실행되면 서버에다가 ‘데이터 하나 보내주세요’라는 요청을 보내죠. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터..

2023. 8. 31. 17:28

2. FrontEnd/Javascript

[JS] Event Bubbling / Capturing

어떤 프레임워크를 쓰느냐와 관계없이 기본적인 브라우저의 이벤트 감지 방식이다. 이벤트 등록 및 제거 방법 : addEventListener() / removeEventListener() 이벤트 전달 방식 (Event Bubbling, Event Capturing) 이벤트 전파 막기 : event.stopPropagation() 이벤트 위임 : Event Delegation ▶️ 이벤트 등록 및 제거 웹 애플리케이션에서 사용자의 입력을 받기 위해 필요한 기능이다. (아래와 같은 코드를 의미) add one item const button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem..

2023. 8. 31. 17:08

2. FrontEnd/Javascript

[JS] This의 4가지 역할

▶️ This 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. 자바스크립트의 경우 Java와 같이 this에 바인딩되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. this는 this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서(=문맥에 따라서) 그 역할이 크게 4가지정도로 나눌 수 있다. 즉, this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 1. 함수 호출 2. 메소드 호출 3. 생성자 함수(new) 호출 4. apply/call/bind 호출 1. 함수 호출 (일반함수 실행 방식 Regular Funct..

2023. 8. 31. 16:50

2. FrontEnd/Javascript

[JS] object에 key:value 추가하는 방법

obj라는 object에 ,key3: value3를 추가하여 넣는 방법 const obj = {key1: value1, key2: value2}; 방법01. Using dot notation: obj.key3 = "value3"; 방법02. Using square bracket notation: obj["key3"] = "value3";

2023. 5. 8. 16:10

2. FrontEnd/Javascript

[JS] LocalStorage, SessionStorage, Cookie의 차이점

▶️ WEB STORAGE HTML5에는 웹 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함된다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다. Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념이다. 거의 차이가 없지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었다. (쿠키는 여전히 존재하고 적절한 클라이언트 저장도구이다) HTML5에서 Web Storage 스펙을 새로 추가했지만 쿠키를 배제한다는 의미는 아니므로 ..

2022. 9. 18. 18:59

2. FrontEnd/Javascript

[JS] 호이스팅

노션에 적어서 했던 이론들을 정리하여 올려봅니다 : > ✅ 호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 ✅ 호이스팅이란 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 { } 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것 실제 메모리에서는 변화가 없다 ✅ 호이스팅의 대상 ..

2022. 9. 11. 16:39

2. FrontEnd/Javascript

[JS] 싱글 스레드 언어

✅ Javascript : 싱글 스레드 언어 싱글 스레드 = 한 번에 하나의 작업만 할 수 있다 👉🏻 one thread == one call stack == one thing at a time 자바스크립트는 싱글 스레드 언어이기에 함수를 실행하면 함수 호출이 스택에 순차적으로 쌓이고, 스택의 맨 위에서부터 차례대로 한 번에 하나의 함수만 처리할 수 있다. 간단한 프로그램이라면 상관없지만 아주 복잡한 프로그램을 구동한다고 생각했을때, 시간이 매우 오래 걸리는 작업이 스택에 쌓이고 실행되면 그 다음 작업은 무한정 대기할 수밖에 없다. 이처럼 다른 작업을 실행하기 위해서 이 전 작업이 완료될 때까지 기다려야만 하는 상황을 블로킹(blocking)이라고 한다. 극복하기 위한 해결 방안이 바로 Asynchron..

2022. 8. 17. 20:17