도커까지 진행했는데제 깃허브에 따로 저장하지않고 진행하다가하드가 고장나서 다 날려버렸네요 ... ㅜ없으면 어쩔수 없지만....아 그리고 가상머신에서 우분투 설치해서 해도 될까요? 

axios요청을 통해 서버에서 데이터를 불러오고 그 데이터를 화면에 보여줄 때 아래와 같은 방식을 사용하고 있습니다. 그런데 이러면 isLoading이 true일때 잠깐 화면에 보이는 loading이 맘에 안들어서요.. 이렇게 안하면 data를 찾을수 없다고 에러가 뜨고.. isLoading state로 관리하는 것 말고는 방법이 없을까요?import { useState, useEffect } from 'react'; import axios from 'axios'; const MyComponent = () => { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.example.com/data'); setData(response.data); } catch (error) { setError(error); } finally { setIsLoading(false); } }; fetchData(); }, []); if (isLoading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return ( <div> {data ? ( <div>{data}</div> ) : ( <div>No data available</div> )} </div> ); }; export default MyComponent;

“49장. Babel과  Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축”에 “브라우저의 ES6 모듈(ESM)을 사용하도록 Babel을 설정할 수도 있으나, 앞서 설명한 바와 같이 ESM을 사용하는 것은 문제가 있다.” 라는 구절이 있습니다.하지만 브라우저의 ES6 모듈(ESM)을 사용하도록 Babel을 설정하는 부분에 대한 구체적인 설명이 없어, 구글링을 통해 몇 가지 해결책을 찾아 시도해 보았지만 제가 제대로 이해하지 못하고 적용하지 못했는지 기대했던 대로 동작하지 않습니다. 혹시 브라우저의 ES6 모듈(ESM)을 사용하도록 Babel을 설정할 수 있는 방법을 알 수 있을까요?

.Header .header_center { justify-content: center; } .Header .header_left { justify-content: flex-start; } .Header .header_right { justify-content: flex-end; }.Header { justify-content: space-between; }이렇게 해도 같은 결과가 나오는데 두 코드 차이점이 있을까요?

안녕하세요 강사님중급강의 스토어 모듈화까지 마치고 정상작동을 확인 한 후터미널에서 프로젝트를 재실행 하였지만오류로 인해 TodoList, TodoInput 등 작동 되지 않습니다.오류는 다음과 같고main.js와 store.js, todoApp.js 모두 import가 올바른 경로로 되어있습니다.main.jsimport Vue from 'vue' import App from './App.vue' import { store } from './store/store.js' new Vue({ el: '#app', store : store, render: h => h(App), }) store.jsimport Vue from 'vue' import Vuex from 'vuex' import todoApp from './modules/todoApp.js' Vue.use(Vuex); export const store = new Vuex.Store({ modules : { todoApp } });todoApp.jsconst storage = { fetch(){ const arr = []; console.log('created') if(localStorage.length > 0 ){ for(let i = 0; i < localStorage.length; i ++){ if (localStorage.key(i) !== 'loglevel:webpack-dev-server'){ arr.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); } } } return arr; } } const state= { todoItems: storage.fetch() }; const getters = { getTodoItems(state) { return state.todoItems; } }; const mutations= { addOneItem(state, todoItem) { const obj = {completed: false, item: todoItem} localStorage.setItem(todoItem, JSON.stringify(obj)); state.todoItems.push(obj); }, removeOneItem(state, payload){ localStorage.removeItem(payload.todoItem.item); state.todoItems.splice(payload.index,1); }, toggleOneItem(state, payload){ state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed; localStorage.removeItem(payload.todoItem.item); localStorage.setItem(payload.todoItem.item, JSON.stringify(payload.todoItem)); }, clearAllItems(state){ localStorage.clear(); state.todoItems=[]; } }; export default{ state, getters, mutations }

// 얕은 동결 (shallow freeze) const obj1 = { a: 1, b: 2, c: { d: 3, e: 4 } }; Object.freeze(obj1); // 얕은 동결 obj1.a = 10; console.log(obj1); // {a: 1, b: 2, c: {d: 3, e: 4}} obj1.c.d = 30; console.log(obj1); // {a: 1, b: 2, c: {d: 30, e: 4}}이렇게 작성했을 때 당연히 오른쪽 코멘트처럼 출력이 나올 것이라고 생각했었는데, 출력이 이렇게 나옵니다.d가 첫 콘솔 로그에도 30으로 출력되는데, 이런 현상 관련해서 구글링을 해봐도 답을 찾기가 어려워 게시판에 질문 드립니다.혹시 왜 이런지 알 수 있을까요?

ggang_effect.jsfunction 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); }, }, });

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

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

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); } } }최소 힙 insertconst 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]결과 그림최소힙 removeconst 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최소힙 updateconst 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]최소힙 removeValueconst 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); } } 

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

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

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

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

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

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

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 멤버변수에 넣어주어야 하는거 아닌가 궁금합니다.

안녕하세요! 마름모 별찍기 문제입니다 ! 우선 위에 마름모는 출력을 하였는데 밑으로 다시 내려오는 마름모가 안되어서 질문 드립니다. 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를 만들어서 해야되는 걸까요?아니면 콘솔로 나온 결과는 반대로 해서 한번더 다시 나올수 있도록 해야되나? 라는 생각도 해보았습니다.

빨간줄 에러 그어져있는거를 읽고 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 타입이 충돌일어나서 그런거다. 라고 이해하고있는데 맞을까요?

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