기록하고 배우는 개발자 ☕️

클로저는 함수가 외부 함수의 변수에 접근할 수 있는 특성을 가집니다. 이는 함수가 실행된 후에도 외부 함수의 변수에 접근할 수 있게 해주며, 외부 함수가 종료된 후에도 그 변수들에 대한 참조를 유지합니다.함수가 실행될때, 그 함수 내부에서 변수를 참조하면 클로저가 형성됩니다. Closure의 특징산태 유지: 외부 함수의 변수에 계속 접근 할 수 있습니다. 은닉화: 함수 내에서만 변수에 접근할 수 있기 때문에 외부에서 변수를 수정하지 못하도록 할 수 있습니다.메모리 사용 - 클로저가 존재하면 외부 변수들이 메모리에 계속 유지 될 수있습니다.function outer() { let outerVar = 'I am from outer function'; function inner() { console..

1. 이벤트 버블링이벤트 버블링이란 가장 안쪽의 요소에서 이벤트가 상의로 올라오는 현상을 버블링이라고 합니다. 예시: 여기를 클릭하세요!사용자가 버튼을 클릭하면 부모가 클릭 이벤트를 방출하는 것을 볼 수 있습니다.버튼이 안에 있으므로 버튼을 클릭하면 암시적으로 버튼 안에 있는 요소도 클릭하게 됩니다.예시:const output = document.querySelector("#output");function handleClick(e) { output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;}const container = document.querySelector("#container");const button = document.quer..

callback 함수는 비동기 작업(데이터 요청, 타이머)이나 이벤트 처리(버튼 클릭, 마우스 이벤트 등)에서 사용된다.콜백 함수는 특정 작업이 완료된후 실행될 추가 작업을 지정하는 데 유용하다. 예: calculate 함수는 a와 b를 더하고 그 결과를 printResult 함수로 전달한다. printResult는 콜백 함수로 사용되며, calculate 함수의 비동기적인 작업이 끝난 후 호출된다.function calculate(a, b, callback) { const result = a + b; // 계산이 끝나면 콜백 함수 호출 callback(result);}function printResult(result) { console.log(`The result is: ${result}`);}..

Rendering 렌더링이 뭘까?렌더링은 쉽게 말해 사용자에게 화면에 보이는 형태로 변환하는 과정을 뜻한다. 예를 들어 내가 머리속으로 그림을 생각하고 친구에게 보여주고 싶다면, 종이에 그림을 그려 보여줘야 한다.  렌더링은 크게 두 가지 방식으로 나뉜다. Client Side Rendering과 Server Side Rendering이다. SSR (Server Side Rendering)사용자가 웹사이트 요청을 보낸다.서버는 바로 렌더링 가능한 HTML 파일을 만들어 보낸다.브라우저는 서버가 보내는 HTML 파일을 바로 읽을 수 있어 화면에 보여지지만 아직 자바스크립트를 받고 읽지 않았기 때문에 조작이 불가능하다.브라우저가 자바스크립트를 다운 받는다.다운 받고 있는 사이에 사용자는 content를 볼 ..

JavaScript에서 this는 현재 객체나 인스턴스를 가리키는 변수라고 할 수 있다.그러나 this의 값은 함수의 호출 방식에 따라 다르게 결정된다. 예:브라우저에서 전역 코드에서 this는 window 객체를 참조한다.console.log(this); // 브라우저에서는 window 객체  예: this는 메서드를 호출한 객체를 참조한다. const person = { name: 'Tom', greet: function() { console.log(this.name); // this는 person 객체를 참조 }};person.greet(); // Tom  call, apply, bind는 모두 this를 명시적으로 설정할 때 사용되는 메서드이다. 각각의 동작 방식은 약간 다르다.  c..

자바스크립트 데이터 타입은 변수에 저장할 수 있는 데이터의 종류를 말한다.자바스크립트는 동적 타입 언어로 (dynamic typed language), 변수를 선언할때 타입를 명시하지 않아도 변수에 값이 할당되면 그 타입이 자동으로 결정된다. 자바스크립트는 크게 원시 타입과 참조 타입으로 나눌 수 있다.  원시 타입 원시 타입은 값 자체를 스택(Stack) 메모리에 저장한다.원시 값은 변경할 수 없으며 (immutable), 변수에 값이 할당되면 그 값 자체가 저장이 된다. 이 방식은 값을 직접 저장하는 방식이기 때문에 복사될 때도 실제 값이 복사된다.Number- 최대 2^53 -1 까지의 숫자를 안전하게 다룰 수 있지만, 이 안전범위 밖에 큰 수를 변수에 저장하면 정확성이 떨어진다. 그래서 BigIn..

변수 선언 (Declaration) - 변수의 이름과 타입을 정의하는 과정이다.변수 초기화 (Initialization) - 변수 선언을 하고, 그 변수에 최초의 값을 할당하는 과정이다. 초기화는 선언과 동시에 발생할 수 있다.변수 할당 (Assignment) - 이미 선언된 변수에 값을 할당하는 과정이다. 할당은 초기화 이후에 여러번 발생할 수 있다.변수 선언let x; 변수 초기화let x = 10; // 변수 선언과 동시에 초기화 변수 할당let x = 10; // 변수 선언 및 초기화x = 20; // 변수에 새로운 값 할당

Hoisting이란 변수 선언이나 함수 선언이 코드의 최상단으로 끌어올라가는 현상을 말한다.자바스크립트 엔진은 실행하기 전에 코드를 스캔하면서 변수 선언과 함수 선언을 메모리에 저장하기 때문에 이런 현상이 발생한다. 값 할당(초기화)나 함수 표현식의 경우은 끌어올리지 않으며, 모두 해당 위치에서 실행된다.var는 선언만 호이스팅되고, 초기화는 실제 코드 실행 시에 이루어진다. 그래서 console.log(a)는 undefined를 출력하지만, 에러는 발생하지 않는다.let과 const는 선언은 끌어올려지지만 초기화되기 전까지는 접근할 수 없는 상태가 된다. 이 구간을 일시적 사각지대(TDZ)라고 부른다. 예: 값 할당(초기화) console.log(a); // undefinedvar a = 10; 예: ..