🙄 엘리먼트는 뭔데요 리액트 공식 문서에 따르면 엘리먼트는 리액트 앱의 가장 작은 단위를 뜻합니다. 리액트를 공부하다보면 컴포넌트라는 개념을 만나게되는데 엘리먼트는 컴포넌트의 "구성요소"라고 알고 있으면 되겠네요! 엘리먼트가 모여서 컴포넌트가 되는 이미지입니다. 브라우저의 DOM 엘리먼트와 달리 Reach 엘리먼트는 일반 객체이고 쉽게 생성할 수 있으며 리액트 DOM은 리액트 엘리먼트와 일치하도록 DOM을 업데이트 해준다고 합니다. 또한 리액트 엘리먼트는 불변객체입니다. 따라서 엘리먼트를 생성한 이후에는 수정이 불가능해요 그럼 어케 수정함? 새로운 엘리먼트를 생성하고 이걸 root.render()에 전달하는 걸로 업데이트합니다. 🙄root DOM 노드 리액트로 구현된 애플리케이션은 하나의 root D..
⚡문제정보 해쉬를 이용한것과 이용하지 않은것의 시간복잡도가 크게 차이나는 문제입니다. 첫번째 인덱스와 일치하는 값을 지워나가면서 [없앤 쌍 , 남은 숫자]를 반환하는게 조건입니다. 0 index를 그대로 구현하려고하면 배열을 실제로 조작해야하겠지만 저는 일치하는 쌍을 지워나갈거라면 값이 홀수로 남는 경우만 남겨주고 짝수인 경우에는 없앤 쌍을 카운트해주는 걸 통해 한번의 반복으로 답을 찾는 방법을 사용했습니다. 🔍나의 풀이 var numberOfPairs = function(nums) { let map = new Map() let answer = 0 for(i=0; i
⚡능지이슈가 온 부분 리트코드 문제를 풀던 중 능지 이슈가 발생했습니다. 문제는 간단한데 두 문자열의 구조가 일치하면 true 다르면 false를 뱉는 함수를 만드는 것입니다. 전 maker함수를 하나 만들어두고 maker함수는 배열을 반환하도록 코드를 작성했습니다. 그런 뒤 maker함수에 각 문자열을 넣고 결과값을 콘솔로 찍어보면 [0,1,1] == [0,1,1]을 비교하는데도 false가 반환되는 것입니다. 엄격한 비교를 했을때 false라면 이해가 되지만 느슨한 비교를 했는데도 false? 뭔가...이상한데..? 싶어서 찾아본 결과 자바스크립트에서 배열 끼리의 비교(==,===)는 객체를 비교할때처럼 요소의 값이 아닌 주소값(reference)를 기준으로 비교합니다. 즉 각 배열의 길이와 각 요소..
🙄모듈 모듈은 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말합니다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리하는데 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야합니다. 또한 모듈은 모듈의 모든 자산을 캡슐화하며 애플리케이션과 분리되어 존재합니다. 하지만 모듈이 완전히 개별적으로 존재하면 재사용이 불가능하니까 의미가 없음 따라서 모듈은 공개가 필요한 부분을 선정해서 선택적으로 공개하며 이것을 export라고 합니다. export된 모듈의 자산은 다른 모듈에서 재사용할 수 있고 모듈 사용자는 모듈이 공개한 자산 중 일부 or 전체를 선택해 자신의 스코프 내로 불러 들여서 재사용합니다. 이것은 import라고 합니다. 모듈은 개별적으로 존재하다..
🙄async/await 문법 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 구현할 수 있는 문법입니다. async/await를 이용하면 프로미스를 기반으로 동작하지만 프로미스 후속 메서드 없이도 마치 동기 처리처럼 프로미스를 사용할 수 있습니다. async 함수는 항상 프로미스를 반환합니다. await 키워드는 항상 async 함수 내부에서 사용해야하며 async함수는 대충 이렇게 사용합니다. async function fetchTodo() { const response = await fetch(url) } function 앞에 async를 쓰는걸로 할 수 있네요 // async 함수 선언문 async function foo(n) {return n;} foo(1).then(v => c..
🙄제너레이터란 제너레이터란 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수입니다. ES6에 도입되었으며 일반함수와의 차이점이 약간 있습니다. 1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있습니다. 일반 함수는 호출하면 제어권이 함수에게 넘어갑니다. 즉 함수 호출자는 함수를 호출한 이후 함수 실행을 제어할 수가 없습니다. 하지만 제너레이터 함수는 함수 실행을 호출자가 제어할 수 있습니다. 이것은 함수의 제어권을 함수가 독점하는게 아니라 함수 호출자에게 양도할 수 있다는 뜻입니다. 2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고 받을 수 있습니다. 일반 함수는 호출하면 매개변수를 통해 함수 외부에서 값을 주입 받고 함수 코드를 실행하여 결과값..
⚡문제정보 문제는 다음과 같습니다. 숫자를 뒤집어서 비교해라(이때 0이 맨앞으로 오면 0은 사라져야함) 원본 숫자와 뒤집은 숫자를 중복없이 세어서 몇 종류가 되는지 리턴해라 set을 사용하면 간단할 것 같은데 숫자를 뒤집는게 조금 어려울 수 있겠네용 🔍접근방법 원본 배열을 set에 담아주고 뒤집은 숫자를 set에 add해주겠습니다. 🔍나의 풀이 var countDistinctIntegers = function(nums) { let set = new Set(nums) nums.forEach(e => { let a = Number(e.toString().split('').reverse().join('')) set.add(a) }) return set.size }; 1. set에 원본 배열을 담아준다. 2. ..
⚡문제정보 각 쌍의 값이 일치하게 짝지어준다음 그 쌍들을 곱한 값을 더해서 return 해주면 됩니다. 근데 만약 모든 쌍의 값을 일치하게 짝지어줄 수 없다면 -1을 반환해야합니다. 전 정렬을 통해서 가장 높은 값과 가장 낮은 값을 더해주는 방법으로 접근하며. 이 과정에서 두개의 포인터를 만들어주는 방법으로 해결했어요! 🔍나의 풀이 var dividePlayers = function(skill) { skill.sort((a,b) => a-b) let [left , right , equal] = [0, skill.length -1 , skill[0] + skill[skill.length-1]] let answer = 0 while(left
