분류 전체보기 (399) 썸네일형 리스트형 [react] 리액트에서 가상돔 - 본인이 이해한 리액트의 가상돔에 대한 정리입니다. - 리액트는 실제 DOM과 완전히 똑같은 2개의 가상돔을 생성한다. 리액트는 가상돔(Virtual DOM)이라는 것을 적용했다. 웹 개발에서 DOM(Document Object Model)의 변경을 관찰하고 최적화하는 기술을 가상돔(Virtual DOM) 이라 한다. 가상돔은 자바스크립트에서 DOM(Document Object Model)과 완전히 똑같은 복사체이다. 리액트는 실제 DOM과 완전히 똑같은 복사체인 가상돔을 두 개 생성하는데, 하나는 렌더링 이전의 가상돔, 다른 하나는 렌더링 이후의 가상돔이다. 즉, 변동사항을 반영할 가상돔과 읽기 전용인 가상돔을 생성한다. 리액트는 두 가상 돔을 비교해서 변동사항만 실제 DOM 에 반영한다. 리액트는 .. [리액트 타입에러-해결중] Property 'review' does not exist on type 'string | number'. Property 'review' does not exist on type 'string' 에러 메시지 전문 도대체 뭐가 문제여?! 이거 예전에 뜬 적 있던 타입에러 인데, 또 같은 에러가 뜬다. 예전에는 useState의 타입을 그냥 any[ ] 타입으로 지정하고 넘어 갔는데, 나중에 프로젝트가 커지니까 예상치 못한 곳에서 에러가 뜨길래 디버깅을 거슬러 올라가니 any[ ] 으로 지정한 부분이 문제가 되었다.. 그래서 이번에는 이것을 미리 사전에 차단하고 넘어가려고 하는데, 아직도 도대체 뭐가 문제인지 모르겠다. 에러 메시지를 해석 해보면 (string | number) [ ] 타입의 배열에서 review 라는 프로퍼티(속성)이 존재하지 않는다는 타입 에러인데,, 이건 무슨 장식인가? 타입 에러를 떠나서 잘만 존재하는 데이터인데, 타입 에러가 뜬다. 위 데이터가 존재하지 않는다. 무슨 사람 .. [심심풀이]chatGPT 가 추천하는 코딩 잘하는 법(번역)?..! Becoming good at coding requires dedication and a willingness to continuously learn and improve. Here are some tips to help you improve your coding skills: 코딩을 잘하려면 헌신과 지속적으로 배우고 개선하려는 의지가 필요합니다. 다음은 코딩 기술을 향상시키는 데 도움이 되는 몇 가지 팁입니다: Practice, practice, practice: Writing code is a hands-on activity, so the more you do it, the better you will become. 연습, 연습, 연습: 코드를 작성하는 것은 직접적인 활동이기 때문에, 당신이 그것을 .. [간단정리js] aysnc / await async / await | 비동기 코드를 동기적인 방식으로 실행하도록 돕는 키워드 await 키워드는 비동기 함수에서 약속(promise)이 해결(이행)될 때까지 기다렸다(await)가 값을 반환(return)하는 데 사용됩니다. 즉. Promise가 이행 상태가 될 때 까지 비동기 코드의 수행을 잠시 동안 중단할 때 사용하며, 이 때 비동기 함수의 시작임을 나타내는 aysnc 키워드가 함께 사용됩니다. (하나라도 빠지면 안 됨) async function fetchData() { const response = await fetch("https://api.example.com/data"); //주소로 보낸 응답올 때 까지 대기 const data = await response.json(); //받은 제.. [간단정리 js] Map 객체 Map 객체의 특징과 예시 JavaScript에서 Map 객체는 객체와 유사하지만 조작을 위한 추가 기능과 메서드가 있는 키-값 쌍의 모음입니다. 1. key-value : 맵 개체는 함수, 개체 및 문자열 및 숫자와 같은 원시 데이터 유형을 포함하여 모든 값을 키 또는 값으로 저장할 수 있습니다. 2. 반복가능: Map 객체에는 키, 값 및 키-값 쌍을 반복하는 방법이 내장되어 있으므로 일반 객체보다 작업하기가 더 쉽습니다. 3. size 속성: 맵 개체에는 맵의 키-값 쌍 수를 반환하는 크기 속성이 있습니다. 4. 자동 문자열화 불가능: 개체와 달리 맵은 키를 문자열로 자동 변환하지 않습니다. 이를 통해 기호와 같은 문자열이 아닌 유형을 포함하여 모든 데이터 유형의 키를 저장할 수 있습니다. 즉, 들.. [간단정리js] this 키워드 JavaScript에서 " this " 키워드는 현재 함수가 속성인 개체(즉, 현재 함수 자신을' 프로퍼티==속성' 으로 포함하고 있는 상위 객체)를 나타냅니다. 하지만, 이 값은 함수가 호출되는 컨텍스트에 따라 변경될 수 있습니다. 1. 글로벌 범위에서 "this"은 글로벌 개체(일반적으로 브라우저의 "창")를 나타냅니다. 2. 메소드에서 "this"은 메소드의 속성인 객체를 나타냅니다. 3. 생성자 함수에서 "this"은 생성되는 객체를 나타냅니다. 호출(call), 적용(apply) 또는 바인딩(bind)을 사용하여 "this"의 값을 명시적으로 설정할 수 있습니다. 하지만 이를 사용하는 것은, 메서드 및 속성에 액세스하는 방식과 코드 동작 방식에 영향을 미치기 때문에 " this " 의 값을 정확.. [간단정리 js] 실행 컨텍스트 자바스크립트에서 실행 컨텍스트는 실행되는 스크립트나 함수의 상태를 저장하는 컨테이너입니다. JavaScript에는 전역 실행 컨텍스트와 로컬 실행 컨텍스트의 두 가지 유형이 있습니다. 1. 글로벌(전역) 실행 컨텍스트: 이것은 전체 JavaScript 코드에 대한 기본 실행 컨텍스트입니다. 자바스크립트 코드가 처음 실행될 때 생성되며 글로벌 객체와 'this' 키워드를 포함합니다. 2. 로컬(함수) 실행 컨텍스트: 이것은 함수가 실행될 때마다 생성되며 함수에 전달되는 인수, 함수 내에 선언된 변수 및 'this' 키워드를 포함합니다. 새 함수가 호출될 때마다 새 로컬 실행 컨텍스트가 생성되어 실행 스택의 맨 위에 푸시되지만 이전 컨텍스트는 스택에 남아 있습니다. 실행 컨텍스트는 스택에서 팝업되고 함수가 .. [간단정리 js] promise "비동기 작업의 최종 완료 또는 실패를 나타내는 개체" JavaScript Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 개체입니다. 콜백을 사용하는 것보다 더 읽기 쉽고 관리하기 쉬운 방식으로 비동기 코드를 처리하는 데 사용됩니다. promise 는 약속이라는 의미를 가집니다. 약속에는 세 가지 상태가 있습니다: 즉, 아래의 상태는 약속을 보류하였는지, 약속을 지켰는지(이행), 아니면 약속을 거절(거부) 했는지로 구분할 수 있습니다. - Pending: 초기 상태, 이행되지 않았거나 거부되었습니다. - Fulfilled: 작업이 성공적으로 완료되었습니다. - Rejected: 작업이 실패했습니다. Promise 는 .then() 및 .catch() 메서드와 함께 사용하여 비동기 작업의 결과를 처리할 수 있습니다. 다음은 Promise를 사용.. 이전 1 ··· 38 39 40 41 42 43 44 ··· 50 다음
