173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
결제를 구현하는 중인데 여기 프로젝트에서 결제 과정이 로그인 한 후에 그 아이디로 포인트 충천 API를 날려서 포인트를 충전후 상세 페이지에서 결제버튼 클릭시 포인트가 충분하면 성공 포인트가 부족하면 실패 이런식으로 만들어져야 하는 건가요??
해결됨
만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
const handleClick = ()=>{ localStorage.setItem(inputText, inputText); setInputText(''); } 제가 처음 생각한 걸론 저 상태에서도 로컬스토리지에 인풋텍스트가 저장되고 setInputText()로 <App> 엘리먼트가 리렌더링 될테니 할 일을 추가하면 바로 화면에 표시가 될 거라고 생각했거든요? 실제로 todos를 state로 관리하기 전까진 그런 방식이었던 것 같고, 그런데 삭제 구현 이후에는 어떤 차이로 디스플레이에 반영이 안되는 건가요? 만약 <App> 단위로 리렌더링 되는 게 맞다면 todos랑 <ul> 평가할 때 데이터가 바뀌었을테니 리렌더링 되는 게 맞다고 생각이 들었거든요.
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
시간: 9:00 Q. ‘비밀번호를 입력하지 않고 로그인 버튼을 클릭할 경우 “비밀번호를 입력하세요” 경고 메시지가 노출된다’ 를 테스트 할 때, 비밀번호가 입력하지 않은 상태인지 확인하는 부분은 없어도 되는 건가요?? 비밀번호를 입력하는 요소가 null 인지 확인하는 테스트는 없어도 되는 건가요??
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
Q1. 장바구니, 구매 버튼 클릭 시 해당 상품의 이름을 cy.findByText('Handmade Cotton Fish 장바구니 추가 완료!').should('exist) 상품 이름을 직접 입력하는데, (통합 테스트에서 모킹 데이터를 사용한다면 모킹 데이터는 직접 설정하기 때문에 가능하지만), 실제 api를 사용하면 첫번째 상품 데이터가 변경할 수도 있기 때문에 실패할 수도 있기 때문에 다르게 작성해야 하지 않을까요?? 질문 드립니다 Q2. 로그인을 커스텀 커맨드에서 설정해서 session을 사용해 설정해서 테스트할 때, 웹에서는 로그인 성공/실패 여부는 확인할 수 없는 것 아닌가요?? 로그인이 실패하게 되면 로그인 관련 테스트는 모두 실패하게 되는데 그냥 이 결과로 로그인 성공/실패 확인을 하는 건가요??
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
Q. cy.intercept()는 회원 가입 요청에 대한 성공/실패 응답을 모킹해서 받는데, 이 때 의도하는 코드는 1번이지만 응답이 정해져 있기 때문에 2번처럼 틀린 요청으로도 결과는 똑같이 나오게 될 거라고 생각됩니다. 실제 응답이 아니라 응답을 정해 놓고 전달하기 때문에 실제 동작과 다를 수도 있어서 이 부분은 '실패, 성공 시 문구 노출'이 나타나는 동작이 있다는 document 로만 이해해도 될까요?? 1 성공 데이터 요청 -> 성공 데이터 응답 실패 데이터 요청 -> 실패 데이터 응답 2 실패 데이터 요청 -> 성공 데이터 응답 성공 데이터 요청 -> 실패 데이터 응답
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
도커까지 진행했는데 제 깃허브에 따로 저장하지않고 진행하다가 하드가 고장나서 다 날려버렸네요 ... ㅜ 없으면 어쩔수 없지만.... 아 그리고 가상머신에서 우분투 설치해서 해도 될까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
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을 설정할 수 있는 방법을 알 수 있을까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 . 아직 리액트에 빠져살아서 서버컴포넌트와 클라이언트 컴포넌트 사용 구분이 잘 가지 않아 질문드립니다. 1번 질문. 예를들어 3개의 페이지가 존재한다고 했을때, 각 페이지는 navbar(하위컴포넌트)를 가지려고 하는데요 navbar의 버튼은 각 페이지 마다 다 다른 함수로 동작하게 된다고 가정하면, 3개의 페이지 컴포넌트는 'use-client'를 사용하여 클라이언트 컴포넌트가 되어야 하는게 맞나요? 그렇다면 페이지의 하위컴포넌트를 서버컴포넌트로 만들면 서버컴포넌트로 사용하면 ssr을 사용하는 이유가 충분할까요? 2번질문. after_login 폴더 안에 _lib폴더에서 'getTrends'함수로 패치를 했는데요, 결국에는 클라이언트 컴포넌트에서 usequery로 데이터를 패치해오고 있습니다. 그러면 데이터 패치도 클라이언트컴포넌트에서 진행하는것인데, 1번상황에 패치도 2번과 같이 한다면 서버사이드렌더링의 장점은 어떤것이라고 볼 수 있을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
.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; } 이렇게 해도 같은 결과가 나오는데 두 코드 차이점이 있을까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 유저정보를 모달창으로 보여주게 하기위해 아래와같이 user를 사용해서 적용했었습니다. 처음 만들었을때 메타데이터도 유저정보에 맞게 변경시켜줘야하는데 인터셉팅 라우터를 사용하면 메타데이터를 적용하지 못한다는 걸 어디서 본거같아서 테스트해보고 적용했었습니다. (user 폴더) 그리고나서 테스트를 하던중에 ux가 어색한거같아서 다시 검색해보니 인터셉팅라우트에서 메타데이터 적용하는 부분을 했다는 사람도 있는것 같더라구요 그래서 (.)tester 폴더를 만들어서 실험해봤는데 메타데이터가 적용 안되서 혹시 선생님은 인터셉트 라우트에서 메타데이터를 적용하는 방법을 아실까해서 여쭤봅니다! 📦@modal ┣ 📂(.)promise ┃ ┗ 📂form ┃ ┃ ┗ 📜page.tsx ┣ 📂(.)tester ┃ ┣ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getSingleUser.ts ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┣ 📜layout.tsx ┃ ┃ ┗ 📜page.tsx ┃ ┗ 📜default.tsx ┣ 📂user ┃ ┗ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getSingleUser.ts ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┗ 📜page.tsx ┗ 📜default.tsx 시도했던 방법은 1. page.tsx에서 직접 generateMetadata를 사용. layout.tsx를 만들고 거기에 generateMetadata를 사용후 page.tsx를 children으로 받기 여유되실때 확인해주시면 정말 감사하겠습니다!
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요 강사님 중급강의 스토어 모듈화까지 마치고 정상작동을 확인 한 후 터미널에서 프로젝트를 재실행 하였지만 오류로 인해 TodoList, TodoInput 등 작동 되지 않습니다. 오류는 다음과 같고 main.js와 store.js, todoApp.js 모두 import가 올바른 경로로 되어있습니다. main.js import 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.js import 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.js const 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 }
미해결
따라하며 배우는 자바스크립트 A-Z
// 얕은 동결 (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.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); }, }, });
해결됨
Next.js 시작하기
안녕하세요, 강의 잘 보고 있습니다. React Native 프로젝트를 진행할 때 Bun을 사용하여 패키지 매니징을 했을 때 굉장히 개발 경험이 쾌적했던 기억이 있습니다. 그리고 비교적 최근 ESLint와 Prettier의 단점을 상쇄해줄 Biome라는 솔루션이 나와서 도입해보려고 하던 상태였습니다. 선생님은 Bun, Biome에 대해 어떻게 생각하시는지 궁금합니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
예시 코드를 보면 트랜잭션 이용해서 조회하고, 작성하고 하시는데 이거는 예시를 위해서 그렇게 하신걸까요? 실무에서는 한가지 작업할 때는 트랜잭션 사용안하고 바로 디비에 저장하고, 조회하고 하는걸까요?
해결됨
비전공자의 전공자 따라잡기 - 자료구조(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); } }
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
taliWindcss를 사용해서 클래스네임에 작성을하고 마우스를 가져다 대면 75% 이런식으로 나온다고 하셨는데 아무것도 안나오는데 어떻게 하나요? 이 부분 강사님처럼 모양 바꾸고 싶은데 어떻게 하나요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
Form 컴포넌트를 신규로 만들어서 기존 컴포넌트에서 가져왔는데 강의에서는 오류가 표시가 되지만 저는 오류가 나타나지 않아서 현재, Form.js 파일에는 오류가 없는걸로 나오는데 어떻게 해야 하나요?
해결됨
Next + React Query로 SNS 서비스 만들기
제로초님 안녕하세요! 제가 개발중인 프로젝트에서 최신순, 조회순 정렬과 키워드 검색을 통해 도서 목록을 출력하고 있는데요. Infinite scroll을 적용하려다 보니 강의에서 처럼 cursor로 전달할 postId 같은 값이 없고, 도서 데이터의 키 값은 uuid로 되어있습니다. 커서 기반으로 개발하려면 백엔드에서 별도 값을 내려준다거나, 조회 SQL을 변경 해야 할까요? 어떤 적절한 방법이 있을지 궁금합니다. 감사합니다!
