연습장

https://www.youtube.com/watch?v=pjakE0D4CeI  클래스 컴포넌트 예시import React, { Component } from 'react';// 예시로 사용할 클래스 컴포넌트 정의class Counter extends Component {  constructor(props) {    super(props);    // 초기 상태 설정    this.state = {      count: 0    };  }  // 증가 메서드  incrementCount = () => {    this.setState({ count: this.state.count + 1 });  }  // 감소 메서드  decrementCount = () => {    this.setState({ cou..

https://www.youtube.com/watch?v=XWqs1mMPJ30  자바스크립트는 DOM 요소에 직접 접근하여 조작하는데, DOM의 요소가 많거나 접근과 조작이 빈번한 경우 성능의 문제가 발생할 수 있습니다. 이에 대한 방안으로 Virtual DOM 을 활용할 수 있습니다.  Virtual DOM은 실제 DOM을 추상화하여 만든 자바스크립트 객체로 트리 구조로 표현됩니다. 초기 상태를 담은 Virtual DOM을 메모리 상에 하나 생성state나 props가 변경시, 새로운 버전의 Virtual DOM을 메모리 상에 하나 더 생성두 Virtual DOM을 비교하여 어떤 부분이 변경되었는지 확인변경된 부분만 실제 DOM에 적용합니다. 그럼 state나 props가 변경될 때마다 Diffing과..

https://velog.io/@developer-sora/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8-%EC%A0%95%EB%A6%AC-Part1CS-JSReact 프론트엔드 면접 질문 정리 Part1(CS, JS,React)면접을 준비하자velog.io  해당 사이트의 질문을 참고 했습니다.Virtual DOM이 무엇이고 작동 원리에 대해 설명해주세요자바스크립트는 DOM 요소에 직접 접근하여 조작하는데, DOM의 요소가 많거나 접근과 조작이 빈번한 경우 성능의 문제가 발생할 수 있습니다. 이에 대한 방안으로 Virtual DOM 을 활용할 수 있습니다.  Virtual DOM은 실제 DOM을 추상..

https://www.youtube.com/watch?v=QkCNba92Vqo   요약: 실행 컨텍스트는 코드가 실행되는 환경 자바스크립트에서 코드 처리 과정소스코드 -> 평가(evaluation) -> 실행 컨텍스트 -> 실행(excutation) -> 결과   소스코드:JavaScript 코드 자체를 말합니다. 이 코드는 함수 호출, 변수 할당 등 다양한 작업을 포함할 수 있습니다.평가 (Evaluation):실행 컨텍스트가 생성되기 전에 JavaScript 엔진이 코드를 평가합니다.평가 단계에서는 변수와 함수 선언을 메모리에 등록하고, 스코프 체인을 설정합니다.변수는 초기화되지 않고 단순히 등록되며, 함수는 정의되어 호출 가능한 객체로 만들어집니다.실행 컨텍스트 (Execution Context):..

이벤트 버블링 (Event Bubbling)이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 상위 요소로 이벤트가 전파되는 방식입니다.발생요소 -> 최상위 요소 DOCTYPE html>html lang="en">head>  meta charset="UTF-8">  meta name="viewport" content="width=device-width, initial-scale=1.0">  title>Documenttitle>head>body>  div id="outer">    div id="middle">      div id="inner">클릭해주세요div>    div>  div>  script>    document.getElementById('outer').addEventListener('cli..

프로미스의 완료를 기다리기 위한 문법, 비동기 코드를 동기처럼 작성 할 수 있음. 여러 비동기 작업을 순차적으로 진행할때 사용await 키워드는 async 함수 내에서만 사용할 수 있습니다.await는 Promise 객체 앞에 사용됩니다. 따라서 await를 사용하려면 해당 함수가 async로 선언되어 있어야 합니다.async 함수 안에서는 await를 사용하여 동기 코드처럼 작성할 수 있지만, await는 반드시 async 함수 내에서만 사용할 수 있습니다.await는 비동기 함수의 완료를 기다리는 동안 해당 함수의 실행을 일시 중지하므로, 코드 실행 순서를 제어하기에 유용합니다.await가 던진 에러는 throw의 에러를 처리하는 것 처럼 try-catch를 사용해 처리 할 수 있습니다.   asyn..

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다.  https://js0616.tistory.com/284 비동기 처리https://www.youtube.com/watch?v=rZrbQv1bMaI  1. 비동기 처리는 왜 필요한가?Javascript는 싱글 스레드 언어 == 두 개 이상의 연산이나 함수를 동시에 실행할 수 없다는 뜻하나의 연산이 실행 중이면, 쓰레드가js0616.tistory.com 배경자바스크립트는 싱글 스레드이므로 시간이 오래걸리는 연산에 대해 비동기처리를 해야하며비동기 함수의 처리 결과를 반환하는 경우, 순서가 보장되지 않기 때문에 그 반환 결과를 가지고 후속 처리를 하기 위해서는 비동기 함수의 콜백 함수..

https://velog.io/@developer-sora/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8-%EC%A0%95%EB%A6%AC-Part1CS-JSReact 프론트엔드 면접 질문 정리 Part1(CS, JS,React)면접을 준비하자velog.io 해당 사이트의 질문을 참고 했습니다.Promise와 Callback의 차이를 설명해주세요.콜백함수의 경우 비동기 작업 결과에 대한 처리를 콜백 함수의 중첩을 통해서 할 수 있고 프로미스의 경우 then catch 메서드를 사용해서 처리할 수 있습니다. https://js0616.tistory.com/272 async, await의 사용 방법을 설명..

https://www.youtube.com/watch?v=rZrbQv1bMaI  1. 비동기 처리는 왜 필요한가?Javascript는 싱글 스레드 언어 == 두 개 이상의 연산이나 함수를 동시에 실행할 수 없다는 뜻하나의 연산이 실행 중이면, 쓰레드가 block되는 것입니다.시간이 오래 걸리는 작업이 메인 쓰레드를 block하고 있으면, 심각한 자원 낭비와 사용성 저하로 이어진다.따라서, 메인 쓰레드를 block하지 않고 이런 작업들을 수행할 수 있는 방안이 필요합니다.  2. 비동기 작업이란 무엇인가?  자바스크립트 엔진은, 긴 시간이 소요되는 작업들을 메인 쓰레드에서 처리하지 않고,백그라운드에서 처리하며 이러한 작업을 "비동기 작업"이라고 부르는 것입니다.     3. 왜 C++ 라이브러리를 사용하는..

콜백 함수는 전달인자로 다른 함수에 전달되는 함수입니다.   동기식 콜백(synchronous callbacks)중간에 비동기 작업 없이 외부 함수 호출 직후에 호출예는 Array.prototype.map(), Array.prototype.forEach()에 전달된 콜백 함수가 포함됩니다.let value = 1;function doSomething(callback) {    callback();}doSomething(() => {  value = 2;});console.log(value); // 2   비동기식 콜백(asynchronous callbacks)비동기 작업이 완료된 후 나중에 호출됩니다.setTimeout() 및 Promise.prototype.then()에 전달된 콜백 함수let valu..