본문 바로가기

이것저것 스터디📚/JavaScript

 (13)
var, let, const 차이 - var와 ES2015(ES6)에서 추가된 let, const는 JavaScript에서 변수를 선언하는 키워드이다. - var, let, const는 변수를 선언하는 키워드라는 공통점이 있지만, 재선언과 재할당 가능성, 범위(Scope), 호이스팅(Hoisting)에서 차이점을 가지고 있다. ※ 재선언, 재할당 - 재선언 : 동일한 이름의 변수를 같은 스코프 내에서 두 번 이상 선언하는 것을 의미힌다. - 재할당 : 이미 선언된 변수에 새로운 값을 할당하는 것을 의미한다. - var는 재선언, 재할당이 모두 가능하다. var name = 'poco' console.log(name); // 'poco' // 재선언 var name = "Kim" console.log(name); // "Kim" // 재할..
call, apply, bind - JavaScript의 함수는 각자 자신만의 this를 정의한다. 일반 함수 호출(전역 함수, 중첩 함수, 일반 함수로 호출되는 메서드 내에서 정의한 중첩 함수 내부, 콜백 함수) : 기본적으로 this에는 전역 객체가 바인딩 된다. var name = "kim" // const, let으로 선언한 전역 변수는 window 전역 객체에 추가되지 않는다. function fn() { var name = "lee" console.log(this.name); // "kim" // 전역 객체 (브라우저에서는 window, Node.js에서는 global) } fn(); 메서드 호출 : 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체가 바인딩 된다. const person = { na..
가비지 컬렉션 - 가비지 컬렉션(Garbage Collection)은 메모리 관리의 한 형태로, 프로그램이 더이상 사용하지 않는 메모리를 자동으로 회수하고 재활용하는 과정이다. - 이는 메모리 누수를 방지하고, 프로그램이 효율적으로 작동하도록 도와준다. - JavaScript의 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지하고, JavaScript는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 가비지 컬렉션 기준 - JavaScript에서는 도달 가능성(reachability)이라는 개념을 사용해 메모리 관리를 수행한다. - 도달 가능성이라는 것은 어떻게든 접근하거나 사용할 수 있는 값인가를 의미한다. - 루트(root) : 처음부터 도달 가능하기 때문에, 명백한 이유 없이는 삭제되지 않는다. ..
커링과 클로저 1. 커링(Currying) - 커링 : 커링은 f(a, b, c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합되도록 반환하는 것이다. - 커링은 함수를 호출하는 것이 아닌 단지 반환할 뿐이다. - 함수 호출을 체인으로 연결할 수 있으며, 함수의 재사용성을 높일 수 있다. * 커링 예제 function curry(f) { // 커링 변환을 하는 curry(f) 함수 return function(a) { return function(b) { return f(a, b); }; }; } function sum(a, b) { return a + b; } const curriedSum = curry(sum); console.log(curriedS..
React에서 서버와 통신하는 과정을 구현하는 방법 1. 사용자 상호작용으로 인한 서버 통신 - 사용자의 상호작용으로 인한 서버 통신은 예를 들어 "버튼 클릭으로 서버와 통신", "사용자 입력으로 서버에 요청", "사용자 상호작용에 의한 서버 통신" 등을 의미한다. - 사용자가 버튼을 클릭하거나 어떤 입력을 하면 이벤트 핸들러가 실행되고, 그 내부에서 서버와의 통신이 이루어지는 것을 의미한다. import React, { useState } from 'react'; function App() { const [data, setData] = useState(null); const fetchData = async () => { try { // 서버와 통신하여 데이터 가져오기 const response = await fetch('https://api.exampl..
Virtual DOM이란? - DOM(Document Object Model) : 하나하나의 Element(HTML)들을 담고 있는 웹페이지를 Document라고 하는데, 이를 브라우저가 분석해 페이지를 띄워주는 방식이다. - Virtual DOM이란 React에서 사용하는 가상 DOM으로 실제 DOM 기반으로 만들어지며 실제 DOM이 아닌 JS 객체 형태로 메모리 안에 저장되어 있다. - 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁기 때문에, React는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리한다. - 예를 들어, document.querySelector("#title").style.color = "red"와 ..
리액트에서 list 태그에 key 값을 추가해야하는 이유 - 리액트에서 배열 항목을 렌더링할 때, key 값을 추가하지 않으면 아래와 같은 오류 메시지가 콘솔에 표시된다. "Warning: Each child in a list should have a unique "key" prop." * key 값이 필요한 이유 - 고유성을 보장 : key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에게 알려주어 나중에 매칭할 수 있도록 하며 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요하다. - 성능 최적화 : key 속성을 제공함으로써 리액트는 리스트의 변경 사항을 더 빠르게 감지할 수 있다. 예를 들어, list의 일부가 업데이트되는 경우 virtualDOM에서 변화를 감지하고 realDOM과 비교하여 새로운 DO..
useReducer를 활용한 상태관리 흐름 - useReducer Hooks API는 flux 아키텍쳐를 따른다. - useReducer API는 복잡한 상태관리에서 useState보다 유리하다. - useReducer는 구체적인 상태변경을 감추고, reducer에게 맡길 수 있고, 콜백(setState 등)을 계속 하위 component에 전달해줘야 하는 불편함을 줄일 수 있다. 대신 dispatch라는 매개체 역할의 함수를 전달해준다. * flux 아키텍처 - dispatcher는 애플리케이션에서 발생하는 모든 action을 수신하고 이 action을 처리할 적절한 store에게 전달한다. - action은 dispatcher에 전달되는 객체로 애플리케이션에서 발생하는 이벤트나 사용자의 상호작용을 나타낸다. - store는 애플리케이션의 상태..

티스토리툴바