묻고 답해요

swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터

미해결

쉽고 빠르게 만드는 다양한 이미지 이펙트!

ggang_effect.js function ggangImgEffect() { var obj = $(".ggang_effect"); var makeHtml = ""; var row = 4; var columns = 8; var rowHeight = 100 / row + "%"; var columnsWidth = 100 / columns + "%"; var imgWidth = 100 * columns + "%"; var imgHeight = 100 * row + "%"; for (var i = 0; i < row; i++) { // console.log('-행-:'+i); for (var j = 0; j < columns; j++) { var delaySpeed = (columns - j - i * 0.5) * 0.25; var left = -j * 100 + "%"; var top = -i * 100 + "%"; makeHtml += '<div class="img_box" style="width:' + columnsWidth + "; height:" + rowHeight + "; transition-delay:" + delaySpeed + 's; ">'; makeHtml += '<div class="img_position" style="width:' + imgWidth + "; height:" + imgHeight + "; left:" + left + "; top:" + top + ';"></div>'; makeHtml += "</div>"; // console.log('열:'+j); } } $(obj).append(makeHtml); setTimeout(function () { $(obj).find(".img_box").addClass("active"); }, 200); } $(function () { ggangImgEffect(); }); const mySwiper = new Swiper(".swiper-container", { effect: "fade", loop: true, speed: 1500, autoplay: { delay: 5000, disableOnInteraction: false, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, on: { slideChange: function () { var thisSlide = $(".swiper-container").find(".swiper-slide").eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); }, }, });

• HTML/CSS
• javascript
• jquery
• 인터랙티브-웹

bun, biome 사용 질문

해결됨

Next.js 시작하기

안녕하세요, 강의 잘 보고 있습니다. React Native 프로젝트를 진행할 때 Bun을 사용하여 패키지 매니징을 했을 때 굉장히 개발 경험이 쾌적했던 기억이 있습니다. 그리고 비교적 최근 ESLint와 Prettier의 단점을 상쇄해줄 Biome라는 솔루션이 나와서 도입해보려고 하던 상태였습니다. 선생님은 Bun, Biome에 대해 어떻게 생각하시는지 궁금합니다!

• javascript
• react
• next.js

트랜잭션 queryRunner 더러운 읽기 , 반복 못하는 읽기 기타 등등 질문있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

예시 코드를 보면 트랜잭션 이용해서 조회하고, 작성하고 하시는데 이거는 예시를 위해서 그렇게 하신걸까요? 실무에서는 한가지 작업할 때는 트랜잭션 사용안하고 바로 디비에 저장하고, 조회하고 하는걸까요?

• javascript
• node.js
• docker
• rest-api
• nestjs

[숙제] minHeap 구현, maxHeap -> minHeap , minHeap -> maxHeap

해결됨

비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)

minHeap 구현 class MinHeap { // 최소힙 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); } } } insert(value) { const index = this.arr.length; this.arr[index] = value; // 마지막에 값을 넣어준다. this.#reheapUp(index); } #reHeapDown(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index if (leftIndex < this.arr.length) { const rightIndex = index * 2 + 2; const smaller = this.arr[leftIndex] < this.arr[rightIndex] ? leftIndex : rightIndex; if (this.arr[index] > this.arr[smaller]) { const temp = this.arr[index]; this.arr[index] = this.arr[smaller]; this.arr[smaller] = temp; this.#reHeapDown(smaller); } } } remove() { // root만 remove if (this.arr.length === 0) { return false; } if (this.arr.length === 1) { // 마지막 하나 남으면 pop해서 리턴해주기 return this.arr.pop(); } const root = this.arr[0]; this.arr[0] = this.arr.pop(); this.#reHeapDown(0); return root; } sort() { // 힙 정렬 const sortedArray = []; while (this.arr.length > 0) { sortedArray.push(this.remove()); } return sortedArray; } search(value) { for (let i = 0; i < this.arr.length; i++) { if (this.arr[i] === value) { return i; } } return null; } // 특정값 수정 update(value, newValue) { const index = this.search(value); if (index === null) { return false; } this.arr[index] = newValue; for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { this.#heapify(i); } } // 특정값 삭제 removeValue(value) { const index = this.search(value); if (index === null) { return false; } // 특정값의 index를 splice를 이용하여 없애버린다. this.arr.splice(index, 1); for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { // 이렇게 했을때 힙이 깨질 수 있기 떄문에 heapify 해준다 this.#heapify(i); } } transFormMaxHeap() { for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { // i가 2부터 시작 // 이렇게 했을때 힙이 깨질 수 있기 떄문에 heapify 해준다 this.#maxHeapify(i); } return this.arr; } // 특정값을 수정하거나 특정값을 삭제하거나 #heapify(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index 78의 왼쪽 5: 23 const rightIndex = index * 2 + 2; // 오른쪽 6: undefined const smaller = (this.arr[leftIndex] || Number.MAX_SAFE_INTEGER) < (this.arr[rightIndex] || Number.MAX_SAFE_INTEGER) ? leftIndex : rightIndex; if (this.arr[index] > this.arr[smaller]) { const temp = this.arr[index]; this.arr[index] = this.arr[smaller]; this.arr[smaller] = temp; this.#heapify(smaller); } } #maxHeapify(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index const rightIndex = index * 2 + 2; const bigger = (this.arr[leftIndex] || 0) > (this.arr[rightIndex] || 0) ? leftIndex : rightIndex; if (this.arr[index] < this.arr[bigger]) { const temp = this.arr[index]; this.arr[index] = this.arr[bigger]; this.arr[bigger] = temp; // 재귀 호출 해주어야 된다! this.#maxHeapify(bigger); } } } 최소 힙 insert const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); // 결과 [8, 32, 19, 78, 45, 56, 23] 결과 그림 최소힙 remove const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); // 8 , 32, 19, 78, 45 ,56, 23 // 19, 32, 23, 78, 45, 56 // 23, 32, 56, 78, 45 // 32, 45, 56, 78 // 45, 78, 56 // 56, 78 // 78 최소힙 update const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); minheap.update(32, 90); // [8, 32, 19, 78, 45, 56, 23] // 결과 -> [8, 45, 19, 78, 90, 56, 23] 최소힙 removeValue const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); minheap.removeValue(19); // [8, 45, 19, 78, 90, 56, 23] // 결과 -> [8, 45, 23, 90, 56, 78] 최소힙 -> 최대힙 const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); console.log(minheap.transFormMaxHeap()); // [ 8, 32, 19, 78, 45, 56, 23 ] // 결과 -> [78, 45, 56, 32, 8, 19, 23] 최대힙 -> 최소힙 class MaxHeap { 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); } } } insert(value) { const index = this.arr.length; this.arr[index] = value; // 마지막에 값을 넣어준다. this.#reheapUp(index); } #reHeapDown(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index if (leftIndex < this.arr.length) { // 만약에 왼쪽 인덱스가 총 배열의 길이보다 작은경우 const rightIndex = index * 2 + 2; const bigger = this.arr[leftIndex] > this.arr[rightIndex] ? leftIndex : rightIndex; if (this.arr[index] < this.arr[bigger]) { const temp = this.arr[index]; this.arr[index] = this.arr[bigger]; this.arr[bigger] = temp; this.#reHeapDown(bigger); } } } remove() { // root만 remove if (this.arr.length === 0) { return false; } if (this.arr.length === 1) { // 마지막 하나 남으면 pop해서 리턴해주기 return this.arr.pop(); } const root = this.arr[0]; this.arr[0] = this.arr.pop(); this.#reHeapDown(0); return root; } sort() { // 힙 정렬 const sortedArray = []; while (this.arr.length > 0) { sortedArray.push(this.remove()); } return sortedArray; } search(value) { for (let i = 0; i < this.arr.length; i++) { if (this.arr[i] === value) { return i; } } return null; } // 특정값 수정 update(value, newValue) { const index = this.search(value); if (index === null) { return false; } this.arr[index] = newValue; for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { this.#heapify(i); } } // 특정값 삭제 removeValue(value) { const index = this.search(value); if (index === null) { return false; } // 특정값의 index를 splice를 이용하여 없애버린다. this.arr.splice(index, 1); for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { // 이렇게 했을때 힙이 깨질 수 있기 떄문에 heapify 해준다 this.#heapify(i); } } transFromMinHeap() { for (let i = Math.floor(this.arr.length / 2 - 1); i >= 0; i--) { // i가 2부터 시작 // 이렇게 했을때 힙이 깨질 수 있기 떄문에 heapify 해준다 this.#minHeapify(i); } return this.arr; } // 특정값을 수정하거나 특정값을 삭제하거나 #heapify(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index const rightIndex = index * 2 + 2; const bigger = (this.arr[leftIndex] || 0) > (this.arr[rightIndex] || 0) ? leftIndex : rightIndex; if (this.arr[index] < this.arr[bigger]) { const temp = this.arr[index]; this.arr[index] = this.arr[bigger]; this.arr[bigger] = temp; this.#heapify(bigger); } } // 특정값을 수정하거나 특정값을 삭제하거나 #minHeapify(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index 78의 왼쪽 5: 23 const rightIndex = index * 2 + 2; // 오른쪽 6: undefined const smaller = (this.arr[leftIndex] || Number.MAX_SAFE_INTEGER) < (this.arr[rightIndex] || Number.MAX_SAFE_INTEGER) ? leftIndex : rightIndex; if (this.arr[index] > this.arr[smaller]) { const temp = this.arr[index]; this.arr[index] = this.arr[smaller]; this.arr[smaller] = temp; this.#minHeapify(smaller); } } } const heap = new MaxHeap(); heap.insert(8); heap.insert(19); heap.insert(23); heap.insert(32); heap.insert(45); heap.insert(56); heap.insert(78); console.log(heap.transFormMinHeap()); // [78, 32, 56, 8, 23, 19, 45] // -> 결과 [8, 23, 19, 32, 78, 56, 45] 질문1) maxheap(minheap) 코드 구현시 heapify 메서드에서 재귀호출 되어야 되지 않는가요? 강의에서는 heapify 메서드 구현시 재귀 호출 부분이 빠져있는것 같아서 질문 드립니다. 아니라면 죄송합니다. #heapify(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index const rightIndex = index * 2 + 2; const bigger = (this.arr[leftIndex] || 0) > (this.arr[rightIndex] || 0) ? leftIndex : rightIndex; if (this.arr[index] < this.arr[bigger]) { const temp = this.arr[index]; this.arr[index] = this.arr[bigger]; this.arr[bigger] = temp; // 여기 빠진것 같습니다! this.#heapify(bigger); } }

• javascript
• 코딩-테스트
• 알고리즘

JS 변수 선언 3단계 관련 문의드립니다

해결됨

let x = x; 를 선언했을 때 호이스팅으로 let x; //선언 x = x; //초기화&할당 //reference error 발생 으로 알고 있습니다. TDZ에 들어간 x를 참조하지 못하기 때문인데요 x = x; 가 undefined으로 초기화된 후 x가 할당된 것인지 아니면 바로 x로 값 x가 할당되는 것인지가 궁금합니다. 전자라면 x=undefined;로 초기화되어 TDZ을 벗어나게 되는데 REFERENCE ERROR가 발생하지 않을 것 같긴 한데요... 순서는 선언, 초기화, 할당이라서 헷갈립니다.

• js
• javascript

footer

미해결

포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편

수업을 따라하다 보니 footer 부분에서 footer 윗 부분에 살짝 파랑색 라인이 보입니다. 이걸 없애고 싶으면 어떻게 해야하는 건가요 ?

• HTML/CSS
• javascript
• 포트폴리오
• github-pages

테스트 오류

미해결

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

수업에서 처럼 이렇게 코드를 작성했을 때는 오류가 발생하는데 placeholder를 넣으면 에러가 나지않습니다. 왜그런지 알 수 있을까요?!

• javascript
• react
• 소프트웨어-테스트
• vitest

파일 저장시 prettier가 의도적으로 줄 바꿈한 문장을 한 줄로 합쳐버립니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

<저장 전> <저장 후> <저장 전> <저장 후> <저장 전> <저장 후> 파일 저장을 하면 prettier가 실행되면서 의도적으로 줄 바꿈 했던 것을 한 줄로 합쳐버립니다. 그렇다고 format on save를 끄거나 prettier를 끄고 싶지는 않습니다. 한 줄로 합쳐지지만 않게 하고 싶은데 어떻게 해야 할까요?

• javascript
• react
• node.js

eslint 오류..

해결됨

Next.js 시작하기

수업 내용을 따라 작성 하는데..이상한 점이 있어서 문의 드립니다. eslint, prettier 등 처음 부터 셋팅을 그대로 따라 했는데요. 저는 그림 처러 저런 오류가 생깁니다. problem 을 보면 이런게 생기고요.. 그런데 상단에 /* eslint-disable prettier/prettier */ 라는 것을 넣으면 오류가 사라지는데요.. 왜 그럴까요? 제가 셋팅을 잘못 한게 있을까요??

• javascript
• react
• next.js

part2는 언제..

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

혹시 언제쯤 강의로 볼 수 있을까요 ㅠㅠ part1 내용이 너무 좋아요

• javascript
• typescript
• rest-api
• nestjs
• backend

최소힙 remove 구현하기

미해결

비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)

class MinHeap { // 최소힙 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); } } } insert(value) { const index = this.arr.length; this.arr[index] = value; // 마지막에 값을 넣어준다. this.#reheapUp(index); } #reHeapDown(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index if (leftIndex < this.arr.length) { // 만약에 왼쪽 인덱스가 총 배열의 길이보다 작은경우 const rightIndex = index * 2 + 2; const smaller = this.arr[leftIndex] > this.arr[rightIndex] ? leftIndex : rightIndex; if (this.arr[index] < this.arr[smaller]) { const temp = this.arr[index]; this.arr[index] = this.arr[smaller]; this.arr[smaller] = temp; this.#reHeapDown(smaller); } } } remove() { // root만 remove if (this.arr.length === 0) { return false; } if (this.arr.length === 1) { // 마지막 하나 남으면 pop해서 리턴해주기 return this.arr.pop(); } const root = this.arr[0]; this.arr[0] = this.arr.pop(); this.#reHeapDown(0); return root; } sort() { // 힙 정렬 const sortedArray = []; while (this.arr.length > 0) { sortedArray.push(this.remove()); } return sortedArray; } search(value) { for (let i = 0; i < this.arr.length; i++) { if (arr[i] === value) { return i; } } } } const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); console.log(minheap.arr); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); 최대힙 코드를 최소힙 구하기 코드로 바꿔봤습니다. 질문1) 최소힙 구하기 remove 코드가 맞을까요? 질문2) 최대힙이든 최소힙이든 sort 메서드가 sort 메서드 호출시 remove 메서드를 while문 루프로 호출하여서 sort 메서드 실행 후에 this.arr가 당연하게 빈배열이 되는데 while문 전에 this.arr를 변수에 담아두었다가 while 루프가 끝난후에 다시 this.arr 멤버변수에 넣어주어야 하는거 아닌가 궁금합니다.

• javascript
• 코딩-테스트
• 알고리즘

별찍기 마름모 문제입니다.

미해결

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

안녕하세요! 마름모 별찍기 문제입니다 ! 우선 위에 마름모는 출력을 하였는데 밑으로 다시 내려오는 마름모가 안되어서 질문 드립니다. for(let j =0; j<6 ;j++){ if(j % 2 ===0) continue for(let i =0; i<3; i++){ for(i+ j+i ===5) console.log(' '.repeat(i)+ '*'.repeat(j)+' '.repeat(3-i)); } } 이 for문 에서 종료식을 바꿔야될것 같은데 지금은 종료식이 1씩 더해지는 것인데 혹시 종료식이 1씩 빼지는 것도 동시에 할수 있는 것 이 있을까요? 아니면 그림에 나온것 처럼 따로 k를 만들어서 해야되는 걸까요? 아니면 콘솔로 나온 결과는 반대로 해서 한번더 다시 나올수 있도록 해야되나? 라는 생각도 해보았습니다.

• javascript
• 별찍기

선생님 10-8 숙제 질문있습니다.

미해결

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

빨간줄 에러 그어져있는거를 읽고 ProductTag타입과 create-product.input.ts에서 선언한 @Field(() => [String]) productTags: string[]; 이부분이 문제라고 판단을 했습니다. 더 깊게 파고들어가보면 선생님이 제시하신 숙제에대해서 먼저 살펴봐야할것 같다는 생각이 들었습니다. 1. 아래 코드에서 ...product 의 타입은 Product로 선언되어있습니다. // 숙제-1)왜 아래 에러가 발생하는지 고민해보기 // 숙제-2)아래 에러 고쳐보기 const result = this.productsRepository.save({ ...product, ...updateProductInput, }); Product의 타입중 아래와같이 ProductTag[]를 필수로선언한게 있는데 이게 업데이트프로덕션인풋 타입과 충돌(?)이 일어나서 에러가 발생하는것 같았습니다. productTags: ProductTag[]; 왜냐하면 업데이트프로덕션인풋 타입은 아래처럼 모든 타입을 ?로 바꿔주고있기때문입니다. PartialType(CreateProductInput) create-product.input.ts에서 선언한 타입을 아래와 같이 바꿔주어 해결했습니다. ProductTag의 {} 객체안에들어가는 값까지 다 ?로 바꿨습니다. @Field(() => [String]) productTags: DeepPartial<ProductTag[]>; 여기까지가 제가 풀이해본건데요.. 솔직히 맞는지 모르겠어요 요약하자면 ,updateProductInput이랑 product 타입이 충돌일어나서 그런거다. 라고 이해하고있는데 맞을까요?

• javascript
• node.js
• docker
• rest-api
• nestjs

advanced 수업자료 문의

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

Deep Dive섹션 공부할 차례인데, 쌤이 설명해주시는 강의에서의 수업폴더와 제가 다운받은 폴더(파일)이 다릅니다. 제가 다운받은 자료입니다. 전체 다운받아 압축푼 상태인데, deep dive 폴더안에는 이게 전부입니다. 확인 부탁드립니다.

• HTML/CSS
• javascript
• 인터랙티브-웹
• gsap

사이트 접속이 안돼요

미해결

<M.B.I.T> 테스트 페이지 만들기! with Django

http://mbit.weniv.co.kr/ 사이트 접속이 안돼요

• HTML/CSS
• javascript
• django

숙제 질문

해결됨

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

강의 커리큘럼에 있는 셀프 체크는 정답 예시를 찾았는데 강의 중간중간에 내주시는 if문 중첩 줄이기, 계산기 처음 입력시 음수 입력가능하게 하기 등의 숙제는 정답 예시는 따로 없는건가요? 그냥 유튜브나 인프런에 관련 질문 올리면 확인해주시는건가요?

• javascript

var 로 선언해서 window 객체의 프로퍼티로 만들기

미해결

따라하며 배우는 자바스크립트 A-Z

수업 자료 보면" let과 const는 블록 스코프이기에window 객체 내부의 블록에서 선언된 것으로 되기에전역 객체의 프로퍼티로 활용될 수 없습니다. " 라는 표현이 나오는데window 객체 안에 있는 더 작은 블록 단위 안에서 선언된 것이므로그 블록 안에서만 유효하고 window 객체에서 호출하지는 못한다는 뜻인가요?

• javascript

안녕하세요 선생님 Event Emit 질문 드립니다.

해결됨

Vue 3 시작하기

선생님 강의 들으면서 따라하고 있습니다 강의랑 똑같이 타이핑하면서 공부하고 있는데 왜 타임라인에서 이벤트 호출이 안되는지 이유를 모르겠어서 질문 남깁니다! 확인 부탁드립니다...!

• javascript
• vue.js
• vue-3

뷰 라이프사이클

해결됨

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

Vue2는 created가 있지만, Vue3는 없기때문에 혼용해서쓴다면 (누가하던 작업을 이어받음) Api호출을 mounted 시점에하는게 나을까요? created시점에 호출하는것과 차이 많이날까요?

• javascript
• vue.js
• es6
• vuex

settings.json에 올려두신 사진과 동일하게 안뜹니다

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

처음 세팅중인데 읽기전용이라 떠서 커뮤니티에 뜨는대로 따라했는데 올려두신 사진과 같은 내용이 뜨질않아서 어떻게 세틍을 해야하나 질문드려봅니다..

• HTML/CSS
• javascript
• react
• node.js
• react-native
• 머신러닝
• express
• tensorflow