묻고 답해요

깃허브 vue-todo 접근불가에 따른 확인요청

해결됨

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

깃허브 권한이 별도 없다고해주셨는데, 아래와같이 vue-todo 접근이 불가해서 확인부탁드리려합니다.

• javascript
• vue.js
• es6
• vuex

Nextjs fetch, react-query 캐시 개념

미해결

Next + React Query로 SNS 서비스 만들기

Nextjs fetch도 캐시가 지원되고, react-query도 캐시가 지원되는걸로 이해를 했는데요 문득 궁금한 점이 생겨서 질문 드립니다. Nextjs fetch와 react-query에서의 캐시는 같은 개념인가요? 아니면 서로 다른 개념인가요? 왜 Nextjs fetch를 안 쓰고 react-query를 쓰는 걸까요? Nextjs fetch는 어떨 때 쓰고 react-query는 어떨 때 쓰는 건가요? 감사합니다.

• react
• next.js
• react-query
• next-auth
• msw

HTML, CSS에 대한 선수 지식은 어느 정도로 필요한가요?

해결됨

웹 프론트엔드를 위한 자바스크립트 첫걸음

HTML이랑 CSS 아는 게 얼마 없는데 이 상태로 공부하면 하다가 막힐까요? 그리고 출판사에서 전자책 출간 일자 답변은 아직인지요..ㅠㅠ

• javascript
• dom

Entity에 ElementCollection이 두 개 있는 경우

미해결

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요! 하나의 엔티티에 @ElementCollection 붙은 필드가 두 개 있는 경우를 시험해 보고 있습니다. @EntityGraph(attributePaths = {"a", "b"}) 이런 식으로 해서 테스트를 돌리면 org.hibernate.loader.MultipleBagFetchException: cannot simultaneously fetch multiple bags 과 같은 오류가 나는데 ElementCollection 두 개가 있는 경우는 하나의 쿼리로 모두 가져오는 방법은 없나요?

• react
• spring-boot
• jpa
• jwt
• redux-toolkit

Encountered two children with the same key

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

Multer 이용하여 이미지 업로드 하면 다음 오류가 뜹니다 import React from 'react' import Dropzone from 'react-dropzone' import axiosInstance from '../utils/axios'; import PropTypes from 'prop-types'; const FileUpload = ({ onImageChange, images }) => { const handleDrop = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' } } formData.append('file', files[0]); try { const response = await axiosInstance.post('/products/image', formData, config); onImageChange([...images, response.data.fileName]); } catch (error) { console.error(error); } } return ( <div className='flex gap-4'> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <section className='min-w-[300px] h-[300px] border flex items-center justify-center' > <div {...getRootProps()}> <input {...getInputProps()} /> <p className='text-3xl'>+</p> </div> </section> )} </Dropzone> {images.map((image, index) => ( <div key={image+index}> {/* image 이름과 index를 조합하여 고유한 키를 생성 */} <img className='min-w-[300px] h-[300px]' src={`${import.meta.env.VITE_SERVER_URL}/${image}`} alt={image} /> </div> ))} </div> ) } FileUpload.propTypes = { // onImagesChnage: PropTypes.bool.isRequired, onImageChange: PropTypes.any, images: PropTypes.any, }; export default FileUpload

• react
• redux
• node.js
• 웹앱
• mongodb

컴포넌트 만들때에는 jsx를 사용하는 이유?

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요. 강의를 수강중인 수강생입니다. 혹시 컴포넌트들을 만들때엔 타입스크립트 tsx가 아닌 jsx를 사용하시는데, 이러한 이유가 있을까요? 추가적으로 React.FC에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.

• react
• 인터랙티브-웹
• 클론코딩
• next.js
• tailwind-css

Bearer라는 단어로 작성하는 이유가 있나요?

미해결

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

항상 좋은 강의 감사합니다. 예전에 프론트 개발 할 때도 궁금했던 부분인데 Bearer 를 굳이 작성하는 이유나 혹은 작성하게 된 관습의 기원이 궁금합니다.

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

puppeteer 네이버 로그인

미해결

안녕하세요. 제가 프로그램을 만들고 있습니다. 네이버 로그인을 puppeteer로 자동화를 하려고 하고있습니다. 하지만 네이버에서 매크로 프로그램으로 로그인을 하는것을 막고 있습니다 ㅠㅠ 로그인을 자동화 시키려하면 캡챠로 넘어가서 다른 방법이 있는지 알아보는 와중 복사 붙여넣기 기능을 하면 된다고 구글링을 통해 봤습니다. 하지만 복사 붙여기능또한 네이버 로그인에서는 안되게 막아놓은것 같습니다.. 혹시 네이버 로그인 자동화를 구현하신 분 있는 멋진분을 찾습니당.

• puppeteer
• javascript
• 매크로
• 크롤링
• electrone

relation option "nullable : false" 로 설정했는데, 테이블에 insert가 되고 있습니다.

미해결

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

안녕하세요 선생님~ 위와 같이 세팅해서 user/profile 로 post 요청을 보내면 500 에러가 나야하는걸로 알고 있는데, 이처럼 잘 들어가 버리네요ㅜ `users` 로 get요청을 보내도 profile이 null이 들어간 상태로 조회됩니다. 개발환경 버전도 올려드립니다~

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

map 함수에서 cannot read properties of undefined 에러 발생

미해결

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

강사님이 알려주신 대로 작성했는데 해당 부분에서 Cannot read properties of undefined (reading 'map') 이라는 오류가 발생합니다.ㅠㅠ 오타가 있는것 같지는 않은데..어디가 문제일까요..?

• javascript
• react
• node.js

var 변수의 문제점 설명하실 때 질문 있습니다.

해결됨

진짜! 자바스크립트(Javascript) - 기초부터 고급까지

function testShadowing() { let x = 5; if (true) { let x = 10; console.log(x); } console.log(x); } testShadowing() 위와 같이 let으로 x 변수를 2번 할당했는데, 실제 메모리에는 어떻게 할당이 되나요? 블록 스코프라고 하더라도 함수 스코프 안에서 블록 스코프가 만들어 질 것으로 생각이 되는데(뇌피셜입니다.), 이미 함수 스코프에서 x라는 변수명을 사용하고 있어서 블록 스코프에서 x는 자바 스크립트 엔진에서 어떻게 받아들이고 실제 메모리에 어떤 식으로 메모리 할당을 하는지 궁금합니다.

• javascript
• es6
• 객체지향
• es5

Hot reload 오류 문의 드립니다.

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요 강사님은 코드 수정 후 브라우저에서 바로바로 확인이 되는 것 같은데 저는 코드를 수정할 때 마다 아래의 오류가 발생해서 매번 다시 yarn dev를 해줘야 수정한 내역이 확인이 되다 보니 강의를 따라 진행 하는대 집중이 되질 않네요. 혹시 아래의 에러가 발생 되지 않게 하는 방법이 있는 것인지 문의 드립니다. 감사합니다. 수고하세요. =================================================================== ⨯ [Error: UNKNOWN: unknown error, open 'D:\study\react\workspace\yt-music-clone-next\.next\static\chunks\app\layout.js'] { errno: -4094, code: 'UNKNOWN', syscall: 'open', path: 'D:\\study\\react\\workspace\\yt-music-clone-next\\.next\\static\\chunks\\app\\layout.js' ===================================================================

• react
• 인터랙티브-웹
• 클론코딩
• next.js
• tailwind-css
• zustand

오픈그래프 태그

미해결

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

배포 후 링크 공유하는데 오픈 그래프 태그가 나타나지 않습니다.ㅜㅜ

• javascript
• react
• node.js

관련 책이 언제 나올까요?

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

관련 도서 출간은 언제쯤 예상하시나요? 건강하시길 바라요~

• react
• python
• django
• web-api
• htmx

멀티 선택 단축키

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

2분 50초쯤에서 멀티선택 하는 방법 알려주시면 감사하겠습니다!!

• react
• 인터랙티브-웹
• 클론코딩
• next.js
• tailwind-css
• zustand

리랜더링 highLight 질문..

미해결

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

10.3) React.memo와 컴포넌트 렌더링 최적화 위 강의를 보다보니, 뭔가 이상해서 질문드립니다... 여기서 Header컴포넌트에 memo함수로 감싸서 최적화된 컴포넌트를 만드셨다고 했는데, 영상으로만 보면 item 컴포넌트 변경시에 리랜더링이 안되야 하는 Header 컴폰넌트에 highLight가 들어가는데요..(4:46 경..) 아무리 봐도 하이라이트가 들어가는데, 말씀으로는 하이라이트가 더이상 들어가지 않는다고 하는데, 제가 뭘 잘못 이해한걸까요?

• javascript
• react
• node.js

노란색 경고글을 없애고 싶어요..

해결됨

코드로 배우는 React 19 with 스프링부트 API서버

프론트 부분에서 ESLint 때문에 계속 에러를 겪고 있는데요,, 해결했다 싶으면 신기하게도 다음번 컴퓨터를 키면 또 에러가 생겨있고 그러는데요, 빨간색 에러는 없앴는데 노란색 경고글도 없애고 싶습니다. 아래 노란색 경고글들도 없앨수 있는 방법이 있을까요... 에러때문에 이것저것 시도하다가 뭔가 버전이 안맞는 걸까요...

• react
• spring-boot
• jpa
• jwt
• redux-toolkit

useQuery vs useQueryClient

해결됨

Next + React Query로 SNS 서비스 만들기

tanstack query와 next.js 를 함께 사용하면서 의문이 들어 질문합니다! 강의의 코드를 보니 같이 prefetch를 해도 유저데이터는 useQueryClient를 사용해서 데이터를 재사용하는듯한데 안에 하위 컴포넌트의 경우 prefetch를하고 useQuery를 사용해서 데이터를 가져오는듯 하더라구요 이 경우도 데이터를 재사용하는건가요? 아니면 새로 가져오는건가요? 그렇다면 똑같이 데이터를 prefetch해도 useQueryClient를 사용해서 가져오는것과 useQuery를 사용해서 가져와야하는 기준이 있을까요? (저의경우 프로젝트 전체를 prefetch후 useQueryClient를해서 데이터를 가져왔더니 데이터를 가져옴과 동시에 fresh가아니라 inactive상태가 되더라구요. ) 좋은강의 감사합니다. 벚꽃같은 제로초 화이팅

• react
• next.js
• react-query
• next-auth
• msw

웹사이트에서 바로 한글로 번역되는거 어떤 프로그램쓰시는건가요?

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요. 처음 15초쯤에 nextjs소개하면서 나오는 번역프로그램은 어떤걸 쓰시는건가요? 편리해보여서요~

• react
• 인터랙티브-웹
• 클론코딩
• next.js
• tailwind-css
• zustand

catnip 이펙트 범위가 이상하네요

해결됨

[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론

디버깅으로 확인했는데, catnip의 써클 범위가 캐릭터가 이동할 때 마다 캐릭터 중심에서 살짝 어긋나는데, 캐릭터의 중심에 고정할 수 있을까요? import Phaser from "phaser"; import Player from "../characters/Player" export default class Catnip extends Phaser.Physics.Arcade.Sprite { // scene의 startingPosition 위치에 데미지 damage와 크기 scale의 Catnip을 생성합니다. constructor(scene, startingPosition, damage, scale) { super(scene, startingPosition[0], startingPosition[1], "catnip"); // 화면 및 물리엔진에 추가합니다. scene.add.existing(this); scene.physics.world.enableBody(this); // Catnip은 static 공격입니다. (플레이어 주변에만 발생하고 몹으로 이동하지 않음) scene.m_weaponStatic.add(this); // 데미지를 멤버 변수로 설정해줍니다. this.m_damage = damage; // 크기, 투명도, depth를 설정해줍니다. this.scale = scale; this.alpha = 0.5; this.setDepth(5); // catnip은 동그랗게 생겼으므로 물리적 영역을 원으로 설정해줍니다. this.setCircle(30); // 애니메이션을 재생합니다. this.play("catnip_anim"); } // 플레이어가 움직이면 Catnip도 따라 움직여야 하므로 move 메서드를 만들어주었습니다. move(vector) { this.x += vector[0] * 4; this.y += vector[1] * 4; } }

• javascript
• phaser