본문 바로가기

반응형

전체 글

(366)
[javascript] reduce() Array.prototype.reduce(누적값, 배열의 요소, 기타옵션) 배열의 각 요소에 차례대로 접근하여 하나의 결과값을 반환하는 메서드 배열요소의 자리는 콜백함수가 1회 호출 시 마다 처리할 현재값을 나타낸다. 누적값은 실질적으로 배열요소인 현재값을 처리할 시 산출되는 결과이다. 초깃값이 지정되지 않으면, 누적값에는 배열의 0번째 요소가 들어가고, 배열요소(value)는 배열의 1번째 요소부터 차례대로 들어간다. 누적값은 초깃값이 지정되면, 초깃값이 누적값을 대체하며, 배열요소는 기존의 1번째 요소가 아닌 0번째 요소부터 차례대로 대입된다. 초깃값을 5로 지정했으므로 누적값의 자리에는 초깃값이 들어간 것을 확인할 수 있다. 누적값에 별도의 값을 더하면, 그 값이 누적값에 더해지며, 콜백함수가 호출..
[javascript] find() , findIndex(); Array.prototype.find(callback) callback 함수 내에서 구현된 조건을 만족하는 최초의 요소를 반환, 중복되는 요소가 있으면 뒤의 요소를 무시한다. 만일 조건과 일치하는 요소가 없으면 undefined 를 반환한다. const users =[ {username:"고기좋아"}, {username:"술좋아"}, {username:"야채싫어"}, {username:"야채싫어"} ]; const find = users.find(user => user.username ==="야채싫어"); console.log(find); // {username:"야채싫어"} Array.prototype.findIndex(callback) find 메서드와 마찬가지로 콜백함수 내 조건을 만족하는 요소를 ..
[javascript] concat , indexOf, includes Array.prototype.concat(추가할 배열) 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환 // 기존 배열 const currentNum = [1,2,3]; //추가할 배열 const addNum =[4,5,6]; //새로운 배열 const newNumbers = currentNum.concat(addNum); // ↓ ↓ ↓ console.log(newNumbers); // [ 1, 2, 3, 4, 5, 6 ] Array.prototype.indexOf( 찾을요소) Array 에서 찾을요소가 존재하면 그 요소가 위치한 인덱스를 반환하고, 없으면 -1 을 반환한다. /** 배열에서 타겟이 존재하는 경우 */ // 배열 ↓ // 0 const numbers = [1,2,3,4..
[javascript] push(), pop(), splice(), slice() Array.prototype.push() 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환 const numbers = [1,2]; numbers.push(3); console.log(numbers) //[1,2,3] const arrLen =numbers.push(4,5); console.log("새배열:",numbers,"배열길이:",arrLen) //새배열: [ 1, 2, 3, 4, 5 ] 배열길이: 5 Array.prototype.pop() 배열의 끝에 하나의 요소를 제거하고, 제거한 요소를 반환 const numbers = [1,2]; const newArr = numbers.pop(); console.log("기존배열:",numbers) // 기존배열: [1] console..
[javascript] 자바스크립트 내부 동작 자바스크립트는 동기적 언어이며, 인터프리터 형식의 언어이므로 코드를 위에서 한줄씩 순차적으로 처리한다. 그리고 이러한 코드를 처리하기 위해 쌓이는 장소가 있는데, 이를 호출스텍 혹은 콜스텍(Call Stack)이라 한다. 하지만, 무조건 순차적으로 처리하는 것은 아닌데, 비동기적 코드(setTImeout, animationframe, promise.then) 를 만나게 되면, 이 코드들은 1차적으로 Call Stack으로 이동시킨 후 곧바로 열외시켜 Web Apis 라고 불리는 공간으로 보내버린다. 여기서 Web Apis 는 비동기적 코드를 처리하는 영역으로, 이 공간에서 비동기적 코드들은 실행될 준비가 완료되고, Callback Queue 로 전달되어 대기상태가 된다. 이 때 무한정 대기상태가 되는 것..
[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. 연습, 연습, 연습: 코드를 작성하는 것은 직접적인 활동이기 때문에, 당신이 그것을 ..

반응형