12분40초에 New.js 파일을 DiaryEditor.js 파일로 옮기는 작업에서 오류가 납니다.

class Heap { arr = []; #reheapUp(index) { if (index > 0) { const parentIndex = Math.floor((index - 1) / 2); if (this.arr[index] > this.arr[parentIndex]) { // 값 바꾸기 const tmp = this.arr[index]; this.arr[index] = this.arr[parentIndex]; this.arr[parentIndex] = tmp; this.#reheapUp(parentIndex); } } } #reheapDown(index) { if (index > 0) { const parentIndex = Math.floor((index - 1) / 2); if (this.arr[index] < this.arr[parentIndex]) { const tmp = this.arr[index]; this.arr[index] = this.arr[parentIndex]; this.arr[parentIndex] = tmp; this.#reheapDown(parentIndex); } } } insert(value) { const index = this.arr.length; this.arr[index] = value; // 마지막에 값을 넣어준다. this.#reheapUp(index); } insertDown(value) { const index = this.arr.length; this.arr[index] = value; this.#reheapDown(index); } remove() { // root만 remove } search(value) { for (let i = 0; i < this.arr.length; i++) { if (arr[i] === value) { return i; } } } } const heap = new Heap(); heap.insert(8); heap.insert(19); heap.insert(23); heap.insert(32); heap.insert(45); heap.insert(56); heap.insert(78); const downHeap = new Heap(); downHeap.insertDown(78); downHeap.insertDown(56); downHeap.insertDown(45); downHeap.insertDown(32); downHeap.insertDown(23); downHeap.insertDown(19); downHeap.insertDown(8); console.log(downHeap.arr);reheapDown 이라는걸 만들어서 최소힙 만들기를 해보았는데 부모 index의 값과 비교하는 조건문의 부등호 방향만 바꾸니까 되는데 이게 맞나요...? 

TSLint가 Deprecated 됐다고 나와서요TSLint Vue 설치해도 되나요?

안녕하세요 강의 들으려고 구매했습니다!혹시 CURS에 대한 내용은 이 강의에서 다루지 않나요??

return Number(str.replace(/[^0-9]/g,''));이렇게만 작성했습니다.

강사님 강의 잘 듣고 있습니다!다음 강의를 들으려고 하는데요Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex이 강의는 이제 쿠폰이 제공되지 않는건가요? 양식을 기입했는데 쿠폰이 모두 소진됐다고 떠서요!

강사님 수업 정말 잘 듣고 있습니다.단순한 궁금증이 생겨 문의드립니다.Local Storage는 어디에 있는 걸까요?어떤 저장소를 사용하는 것인지 알고 싶네요

17강에서 class도 함수로 인식한다 라고 하셨고포맷도 함수와 같다고 생각되는데,어떻게 구별해서 사용해야 하나요?언제 클래스를 써야하고,언제 함수를 써야하는지가 잘 인식되지 않아서요.

ModuleNotFoundError: No module named 'distutils' 이런 에러가납니다.구글링해보면 파이썬 버전관련해서 얘기를하던데..갑자기 파이썬이 튀어나오니까 당황스럽습니다 ㅜㅜ 풀 에러코드는 다음과 같습니다.$ docker-compose build Traceback (most recent call last): File "/usr/bin/docker-compose", line 33, in <module> sys.exit(load_entry_point('docker-compose==1.29.2', 'console_scripts', 'docker-compose')()) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/bin/docker-compose", line 25, in importlib_load_entry_point return next(matches).load() ^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/importlib/metadata/__init__.py", line 205, in load module = import_module(match.group('module')) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/importlib/__init__.py", line 90, in import_module return _bootstrap._gcd_import(name[level:], package, level) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "<frozen importlib._bootstrap>", line 1387, in _gcd_import File "<frozen importlib._bootstrap>", line 1360, in _find_and_load File "<frozen importlib._bootstrap>", line 1331, in _find_and_load_unlocked File "<frozen importlib._bootstrap>", line 935, in _load_unlocked File "<frozen importlib._bootstrap_external>", line 995, in exec_module File "<frozen importlib._bootstrap>", line 488, in _call_with_frames_removed File "/usr/lib/python3/dist-packages/compose/cli/main.py", line 9, in <module> from distutils.spawn import find_executable ModuleNotFoundError: No module named 'distutils' 다음은 제가 작성한 docker-compose.yaml입니다.# docker-compose.yaml version: '3.7' services: my-backend: build: context: . dockerfile: Dockerfile volumes: - ./src:/myfolder/src ports: - 3000:3000 env_file: - ./.env.docker my-database: image: mysql:latest environment: MYSQL_DATABASE: 'mydocker' MYSQL_ROOT_PASSWORD: 'root' ports: - 3306:3306  혹시 고수님들 이 문제에대한것을 알고계신다면 답변주세요..혹시나 제가 해결했을 경우 댓글에 해결완료라고 제가 적겠습니다.. 도움이 필요합니다..오늘 하루종일 mysql 로컬 연결 에러와, 지금 이 에러에 강의진도를 못나가니 심신미약상태가 되어버렸네요..

Vue에서 router link 사용시같은 url 이면 새로고침이 안되는데 어떻해야죠

 처음에 터미널 열어서 아무 블로그에서 나오는대로 설치하고 로그인도하고 잘했던거같아요.근데 강의 따라하면서 dbeaver-ce에 연결이안되서 내가 설치를 잘못했나 싶어서검색해서 mysql 지웠습니다.근데 리눅수 우분투 App Center에 mysql치면 나오는게있길래 mysql-shellmysql-server두개를 설치후,mysql -u root -p 를하면  ERROR 2002 (HY000): Can't connect to local server through socket '/run/mysqld/mysqld.sock' (2) 이런 에러가 나옵니다.다시 재설치를위해서sudo apt-get install mysql-server명령어를 입력하면몇몇 패키지를 설치할 수 없습니다. 요청한 상황이 불가능할 수도 있고, 불안정 배포판을 사용해서 일부 필요한 패키지를 아직 만들지 않았거나, 아직 Incoming에서 나오지 않은 경우일 수도 있습니다. 이 상황을 해결하는데 다음 정보가 도움이 될 수도 있습니다: 다음 패키지의 의존성이 맞지 않습니다: mariadb-client-core : 충돌: virtual-mysql-client-core mysql-community-server-core : 의존: libaio1 (>= 0.3.93) 하지만 설치할 수 없습니다 추천: mecab-ipadic-utf8 하지만 %s 패키지를 설치하지 않을 것입니다 E: 오류, pkgProblemResolver::Resolve가 망가졌습니다. 고정 패키지때문에 발생할 수도 있습니다. 이렇게 터미널에 나옵니다.마리아db를 설치한적도없는데 왜 충돌나는건지 잘 모르겠네요.. 혹시 제가 겪은거 겪고 해결해보신분 계실까요?ㅠㅠ

안녕하세요, 강사님 좋은 강의 감사합니다!! 시간 가는지 모르고 빠르게 완강을 하게 되었습니다.API Routes 부분이 조금 헷갈려, 이 부분에 대한 궁금증이 생겨 질문을 남기게 되었습니다.Next.js를 사용하여 API 라우트를 통해 클라이언트에서 서버로 직접 데이터베이스나 외부 서버에 접근하여 클라이언트 단에서 사용할 수 있다는 것을 알게 되었습니다.API 라우트를 통한 외부 서비스 URL 숨기기 서버의 env 사용, 외부 서비스 안전하게 접근.일반, 서버 DB에 접근해서, 사용하는 것보다 어떤 부분에서 장점이 있는지 크게 와닿지 않아서, 혹시 조금 더 구체적인 실무에서의 API Routes를 활용하는 예시를 좀 더 자세하게 알 수 있을까요? 이를 사용했을 때 서버 DB에 직접 접근했을 때 얻는 것에 비해 가질 수 있는 장점과 단점에 대해 알고 싶습니다.

섹션 2HTML & CSS 기본그랩마켓 웹 화면 구현하기 코드 복사할 수 있을까요?컴퓨터를 새로 샀는데 굳이 다시 구현 할 필요가 없어서 그렇습니다.

강의에서 나오는 prototype 말고 class 문법으로 바꿔서 공부하시는 분들 참고하셔요! 🫶❤ 화살표함수란 ?함수를 간결하게 정의할 수 있는 문법으로, 함수가 호출될 때의 this 컨텍스트가 정적으로 결정됨. 주로 콜백 함수나 메서드 정의 시 this 바인딩 문제를 해결하기 위해 사용됨.정리Arrow Function 내부에서 this를 사용하면, 함수가 정의된 시점의 외부 컨텍스트를 유지하게 됨화살표 함수 ver.run = () => { if (this.direction === 'left') { this.xPos += this.speed; } else if (this.direction === 'right') { this.xPos -= this.speed; } this.mainElm.style.left = `${this.xPos}%`; requestAnimationFrame(this.run); };Bind 메소드 ver.run() { if (this.direction === 'left') { this.xPos += this.speed; } else if (this.direction === 'right') { this.xPos -= this.speed; } this.mainElm.style.left = `${this.xPos}%`; requestAnimationFrame(this.run.bind(this)); }

class Node { constructor(value) { this.value = value; this.left = null; this.right = null; } } class BinarySearchTree { constructor() { this.root = null; // 숙제 몇개 인지 확인하는 count this.length = 0; } #insert(node, value) { if (node.value > value) { // 루트노드보다 작은 값이면 if (node.left) { this.#insert(node.left, value); } else { node.left = new Node(value); } } else { // 숙제 : 같은 값을 넣은경우 에러 처리 (alert, throw) if (node.value === value) throw new Error(`이미 해당 ${value}가 존재 합니다`); // 루트노드보다 큰 값이면 if (node.right) { this.#insert(node.right, value); } else { node.right = new Node(value); } } } insert(value) { if (!this.root) { this.root = new Node(value); } else { this.#insert(this.root, value); } this.length++; } #search(node, value) { if (!node) return null; if (node.value > value) { return this.#search(node.left, value); } else if (node.value === value) { return node; } else { return this.#search(node.right, value); } // if (node.value > value) { // // 더 작은값 찾을때 // if (!node.left) { // return null; // } // if (node.left.value === value) { // return node.left; // } // return this.#search(node.left, value); // } else { // if (!node.right) { // return null; // } // if (node.right.value === value) { // return node.right; // } // return this.#search(node.right, value); // } } search(value) { if (!this.root) return null; if (this.root.value === value) { return this.root; } return this.#search(this.root, value); } #remove(node, value) { if (!node) { // 제거 할 값이 bst에 존재하지 않는 경우 return null; // 지울 값이 존재 안하면 null return } if (node.value === value) { // 자식 입장 // 지울 값을 찾은 경우 if (!node.left && !node.right) { this.length--; // leaf return null; } else if (!node.left) { // 왼팔만 없는 경우 return node.right; // 왼팔이 없는 경우 자기 왼팔 대신 오른팔을 쓰라고 return 해줌 } else if (!node.right) { // 오른팔만 없는 경우 return node.left; // 오른팔 없는 경우 자기 오른팔 대신 왼팔을 쓰라고 return 해줌 } else { // 양팔 다 있는 경우 let exchange = node.left; while (exchange.right) { exchange = exchange.right; } const temp = node.value; node.value = exchange.value; exchange.value = temp; node.left = this.#remove(node.left, exchange.value); return node; } } else { // 부모 입장 if (node.value > value) { node.left = this.#remove(node.left, value); return node; } else { node.right = this.#remove(node.right, value); return node; } } } remove(value) { // 1. leaf(양팔 다 없음) -> 제거 // 2. leaf x, 왼팔이 없다 -> 오른팔 끌어올린다 // 3. leaf x, 오른팔이 없다 -> 왼팔 끌어올린다 // 4. leaf x, 양팔 다 있다 -> 왼팔에서 가장 큰 애와 바꾼다, leaf를 지운다 this.root = this.#remove(this.root, value); // return 숙제 length return 하기 return this.length; } } const bst = new BinarySearchTree(); bst.insert(8); bst.insert(10); bst.insert(3); bst.insert(1); bst.insert(14); bst.insert(6); bst.insert(7); bst.insert(4); bst.insert(13); console.log(bst.length); // 9 console.log(bst.remove(8)); // 8 bst.search(7); bst.search(5); console.log(bst.remove(4)); // 7 console.log(bst.remove(15)); // 없는 값을 지운다면 현재 length return 7 숙제 정답일까요?제발 ㅠㅠ 🙏

마지막, 삭제 버튼 테스트Q. 삭제 버튼을 누르면 TableRow가 사라지니까 queryByText('text').not.toBeInTheDocument()를 사용해서 유무를 확인 하셨는데getByText('text').not.toBeInTheDocument()를 사용해서 해당 텍스트가 있는 요소가 없으면 에러가 나타나도록 유도해서 테스트 검증할 수도 있지 않나요?? 가능은 한건지, 권장이 되지 않는건지 질문 드립니다 

class Node { constructor(value) { this.value = value; this.left = null; this.right = null; } } class BinarySearchTree { constructor() { this.root = null; } #insert(node, value) { if (node.value > value) { // 루트노드보다 작은 값이면 if (node.left) { this.#insert(node.left, value); } else { node.left = new Node(value); } } else { // 숙제 : 같은 값을 넣은경우 에러 처리 (alert, throw) if (node.value === value) throw new Error(`이미 해당 ${value}가 존재 합니다`); // 루트노드보다 큰 값이면 if (node.right) { this.#insert(node.right, value); } else { node.right = new Node(value); } } } insert(value) { if (!this.root) { this.root = new Node(value); } else { this.#insert(this.root, value); // 숙제 : 같은 값을 넣은경우 에러 처리 (alert, throw) } } search(value) {} remove(value) {} } const bst = new BinarySearchTree(); bst.insert(8); //bst.insert(8); // Error: 이미 해당 8가 존재 합니다 bst.insert(10); //bst.insert(10); // Error: 이미 해당 10가 존재 합니다 bst.insert(3); //bst.insert(3); // Error: 이미 해당 3가 존재 합니다 bst.insert(1); //bst.insert(1); // Error: 이미 해당 1가 존재 합니다 bst.insert(14); //bst.insert(14); // Error: 이미 해당 14가 존재 합니다 bst.insert(6); //bst.insert(6); // Error: 이미 해당 6가 존재 합니다 bst.insert(7); //bst.insert(7); // Error: 이미 해당 7가 존재 합니다 bst.insert(4); //bst.insert(4); // Error: 이미 해당 4가 존재 합니다 bst.insert(13); //bst.insert(13); // Error: 이미 해당 13가 존재 합니다숙제 코드 정답일까요?

class Node { constructor(value) { this.value = value; this.left = null; this.right = null; } } class BinarySearchTree { constructor() { this.root = null; } #insert(node, value) { if (node.value > value) { // 루트노드보다 작은 값이면 if (node.left) { this.#insert(node.left, value); } else { node.left = new Node(value); } } else { // 루트노드보다 큰 값이면 if (node.right) { this.#insert(node.right, value); } else { node.right = new Node(value); } } } insert(value) { if (!this.root) { this.root = new Node(value); } else { this.#insert(this.root, value); // 숙제 : 같은 값을 넣은경우 에러 처리 (alert, throw) } } search(value) {} remove(value) {} } const bst = new BinarySearchTree(); bst.insert(8); bst.insert(10); bst.insert(3); bst.insert(1); bst.insert(14); bst.insert(6); bst.insert(7); bst.insert(4); bst.insert(13); 영상 따라 했는데 안되면 해당 코드 참고 해보세용!

안녕하세요. 이벤트 위임 연습하다가 변칙적으로 연습하고 있는데요. 동적으로 html 생성 된 후에 버튼에 ''-active"클래스 추가 하면 실제로 클래스가 추가가 안되네요. 그런데 elem을 consol 창에 찍어보면 "-avtive"클래스가 추가된 요소로 나오는데 이건 무슨 문제일까요?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>스크립트 연습</title> <style> *, *::before, *::after {margin:0; padding:0; box-sizing:border-box;} h1 {padding:20px 0;} h2 {padding-bottom:20px;} li {list-style:none;} .container {max-width:1000px; margin:0 auto; padding:0 20px; background-color:#f1f1f1;} .wrap {padding:40px; border:1px solid #888;} .wrap + .wrap {margin-top:50px;} .btn-list {display:flex; justify-content:space-between; gap:20px; width:100%; padding:20px; background-color:dodgerblue;} .btn-list li {width:calc(100% / 3);} .btn-list__item {width:100%; padding:10px;} .btn-list__item.-active {background-color:darkkhaki;} </style> </head> <body> <div class="container"> <h1>스크립트 연습</h1> <section class="wrap btn-wrap"> <h2>버튼 연습</h2> <ul class="btn-list"> <!-- <li class="asdf"><button class="btn-list__item"><span>버튼</span> 1버튼</button></li> <li class="asdf"><button class="btn-list__item"><span>버튼</span> 2버튼</button></li> <li class="asdf"><button class="btn-list__item"><span>버튼</span> 3버튼</button></li> --> </ul> </section> <script> window.addEventListener('DOMContentLoaded', initHandler) function initHandler() { buttonListHandler(); } function buttonListHandler() { const btnWrap = document.querySelector('.btn-wrap'); const btnList = document.querySelector('.btn-list'); let currentItem = null; function clickHandler(el) { let elem = el.target; while (!elem.classList.contains('btn-list__item')){ elem = elem.parentNode; // console.log(elem) if(elem.nodeName === 'BODY'){ elem = null; return; } } if(currentItem){ currentItem.classList.remove('-active'); } if(elem.classList.contains('btn-list__item')){ elem.classList.add('-active'); currentItem = elem; } console.log(elem); } btnWrap.addEventListener('click', ()=> { const htmlStr = ` <li><button class="btn-list__item"><span>버튼</span> 1버튼</button></li> <li><button class="btn-list__item"><span>버튼</span> 2버튼</button></li> <li><button class="btn-list__item"><span>버튼</span> 3버튼</button></li> `; btnList.innerHTML = htmlStr; }) btnWrap.addEventListener('click', clickHandler); } </script> </div> </body> </html>

Delete ␍ 오류나면prettier/prettier 쪽에 아래것 추가,endOfLine: 'auto',