투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

돔이란? DOM (Docment Obfect Model) 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. add버튼을 눌렀을때 additem()함수가 실행되면서 5개씩 보이게되고 누를때마다 계속 위에 리얼돔이 실행이 된다. append가 실행될때마다 리얼돔이 실행이 되서 잦은 업데이트로 브라우저는 필요이상으로 연산을 실행해야하고 성능적으로 저하된다. 또한, 최근 모던 웹은 SPA(Single Page Application)을 사용한다. 하나의 웹 페이지를 어플리케이션처럼 구성하는 SPA에서는 HTML 문서 자체가 하나이며, 여러 동..

얕은복사 (Shallow copy) 객체의 속성 값들을 복사하지만, 객체 내부의 객체(중첩 객체)를 복사하지는 않는다. 복사된 객체와 원본 객체는 같은 객체를 참조하고 있기 때문에, 복사된 객체의 속성 값을 변경하면 원본 객체의 속성값도 함께 변경된다. 객체의 Object.assign() 메소드나 전개 연산자(...)를 사용하여 수행할 수 있다. 깊은복사 (deep copy) 객체나 배열 등 복합 자료형의 내부에 중첩된 객체들을 포함하여, 객체 전체를 복사하는 방법이다. 깊은 복사는 내부 구조를 모두 복사하여, 복사된 객체와 원본 객체가 완전히 별개의 객체가 된다. 💡복합 자료형은 객체와 배열이다. 복합 자료형은 객체와 배열을 이용하여 복잡한 데이터를 표현하고 처리할 수 있다. 단점 : 깊은 복사는 객체..

git을 설치하는 방법 Git을 설치하면 Git을 사용하여 React 프로젝트의 코드 변경사항을 추적하고 저장할 수 있습니다. Git은 버전 관리 시스템으로서, React 프로젝트의 코드를 보다 효율적으로 관리할 수 있도록 도와줍니다. 따라서, Git을 설치하는 것은 React 프로젝트를 효과적으로 관리하고 협업하는 데 필수적인 단계 중 하나입니다. Git은 무료이며, 거의 모든 운영 체제에서 사용할 수 있으므로 React 개발을 위해 Git을 설치하는 것은 매우 유용합니다. MacOS에 git을 설치하기 위해서는 homebrew를 설치해야합니다. 👇🏻homebrew설치 링크 https://brew.sh/ Homebrew The Missing Package Manager for macOS (or Linu..

😃 설명) windows에서 지원하는 지뢰 찾기 게임을 한번쯤은 해 보았을 것이다. 특히 르탄이는 지뢰찾기의 매니아로 알려져 있다. 지뢰 찾기 map은 N*N의 정사각형 모양으로 각 칸에는 숫자가 들어가 있거나 지뢰가 들어가 있다. 빈 칸에는 숫자 0이 들어있다고 생각하자. map의 어떤 칸에 적혀 있는 숫자는, 그 칸과 인접해 있는 여덟 개의 칸 중에서 지뢰가 들어 있는 칸이 몇 개인지를 나타내 준다. 물론 인접한 칸이 map 내부에 있는 경우에 대해서만 생각하면 된다. 예제를 보면 더 잘 이해할 수 있을 것이다. 이번 문제는 조금 업그레이드 된 지뢰 찾기로, 한 칸에 한 개의 지뢰가 있는 것이 아니고, 한 칸에 여러 개(1 이상 9 이하)의 지뢰가 묻혀 있는 게임이다. 따라서 map의 어떤 칸에 적혀..

문제 설명 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이) 제한사항 a, b의 길이는 1 이상 1,000 이하입니다. a, b의 모든 수는 -1,000 이상 1,000 이하입니다. 입출력 예 a b result [1,2,3,4] [-3,-1,0,2] 3 [-1,0,1] [1,0,-1] -2 입출력 예 설명 입출력 예 #1 a와 b의 내적은 1*(-3) + 2*(-1) + 3*0 + 4*2 = 3 입니다. 입출력 예 #2 a와 b의 내적은 (-1)*1 + 0*0 + 1*(-1)..

문제 설명 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요.s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. 제한 사항 str은 길이 1 이상인 문자열입니다. 입출력 예 s return "Zbcdefg" "gfedcbZ" function solution(s) { let len = s.split('').sort().reverse().join("") return len } console.log(solution("Zbcdefg")) 이 문제는 처음에 배열로 만들어 준 후 내림차순해서 뒤집어 준 후에 다시 조인으로 합쳐서 코드를 완성했다. 코드는 간결하지만 sort에서 알아야할 내용이 있었다. ASCII ..

문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요.divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 입출력 예 arr divisor return [5, 9, 7, 10] 5 [5, 10] [2, 36, 1, 3] 1 [1, 2, 3, 36] [3,2,6] 10 [-1] 입출력 예 설명 입출력 예#1arr의 원소 중 5로 나누어 떨어지는 원소는 5와 10입니다. 따라서 ..

ES6가 제공하는 일부 새로운 기능 let 및 const 선언자 var선언자 대신 let 및 const 선언자를 사용할 수 있다. 1. var는 함수 내에서 선언된 변수가 함수 외부에서도 접근 가능하다. 이를 호이스팅이라고 부른다. 2. var는 블록 스코프를 지원하지 않는다. if문이나 for문과 같은 블록 내에서 선언된 변수가 블록 외부에서도 접근이 가능하다. 3. var는 중복 선언이 가능하다. 이는 코드의 복잡도를 증가시키고, 얘기치 않은 결과를 초래할 수 있다. var a = 1 var a = 2 화살표 함수 function키워드 없이 함수를 만들 수 있으며, return키워드 없이, 식을 계산한 값이 자동으로 반환된다. es5 => function myfunc(name){ return "Tok..