묻고 답해요

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

Next에서 자동 로그인 구현

미해결

안녕하세요 😃 현재 Next.js 사용해 프로젝트 진행중인데 한번 로그인하면 웹에 재접속 시 자동으로 로그인 처리되도록 하고 싶습니다. 현업에서는 어떤 방식으로 진행하는지 궁금합니다! 답변 주시면 정말 정말 감사합니다!!

• next.js
• 프론트엔드
• 자동로그인
• jwt
• 토큰관리
• 현업
• 로그인
• 구현
• 질문
• 도와주세요

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

혼자 푼 것 코드리뷰 부탁드립니다!

미해결

자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

// 한 개의 문자열 s와 문자 t가 주어지면 문자열 s의 각 문자가 문자 t와 떨어진 최소거리 function solution(str = "", char = "") { let answer = []; let count = 0; for (let i = 0; i < str.length; i++) { if (str[i] === char) { count = 0; answer.push(count); } else { count++; answer.push(count); } } count = 1; for (let i = answer.length - 1; i >= 0; i--) { if (i > 0 && answer[i - 1] > count) { answer[i - 1] = count; count++; } else { count = 1; } } return answer; } console.log(solution("teachermode", "e")); // 1 0 1 2 1 0 1 2 2 1 0 혹시나 반례나 수정할 곳 있으면 조언 부탁드려요!

• javascript
• 코딩-테스트

Prettier 적용 안되는 이슈

미해결

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

강의에서 소개해주신 것 처럼 Format on Save 옵션을 적용하였는데도, 저장 시 자동으로 Formatter가 작동하지 않아 서치해보니,Default Formatter 옵션이 위처럼 없음(null)로 설정이 된 경우에는 Prettier로 적용해주어야 정상동작하더라구요.해당 내용 공유드려요 ㅎ

• javascript
• react
• node.js

vue 개발자도구 refresh event 문제

해결됨

Vue 3 시작하기

component events에서 refresh log가 보이지 않습니다. component의 event listners에서 refresh: not declared인 것이 문제일까요? 코드도 함께 첨부합니다.

• javascript
• vue.js
• vue-3

addAttackEvent 속도가 너무 빠르면 이런 오류가 발생하네요

해결됨

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

addAttackEvent(this, "beam", 3, 1, 100) 속도를 위처럼 빠르게 하면 몹이 한마리 죽으면서 아래 오류가 나오는데 이런 경우는 어떻게 해야하나요? beam.js:31 Uncaught RangeError: Maximum call stack size exceeded at Beam.setVelocity (beam.js:31:19) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18) at Beam.setVelocity (beam.js:32:18)

• javascript
• phaser

javascript 공부없이 바로 react native 배워도 되나요?

미해결

html/css, jQuery, Java Script, react까지 3년전에 배웠었어요. 현재는 html/css 코드를 보고 읽고 간단한 건 수정할 수 있는 정도의 수준입니다. 개인적인 흥미로 취미로 개발을 배워보고 싶은데 시작하면 앱 개발, 유지/보수 할 수 있는 수준으로는 배우고 싶어요. 과외로 배울 예정인데 2분의 선생님을 소개받았는데 어떤 분의 루트가 더 나을지 판단이 어려워 전문가분들의 의견 구합니다. html/css > Java > react > react native까지 차근히 배우는 선생님 React native와 Java Script를 병행으로 배우는 선생님 1번 선생님의 경우, 현직자이신 것 같진 않고 강의를 위주로 하시는 분 같고 2번 선생님은 현직 개발자로 7년차이세요. 2번 선생님의 경우 함수선언을 영어로 치면 숙어라고 생각하고 배울 수 있을 것 같다고 설명해주셨어요. 리엑트 네이티브에서 사용했던 언어들이 java Script에서 조금 변형된 것들이라고 기억하고 있어서 2번 선생님이 더 속성으로 배울 수 있을 것 같긴 한데(기간은 1년정도 생각합니다) 나중에 혼자 앱 개발을 하는 상황을 생각하면 처음부터 꼼꼼히 배우는게 나을까요?

• 리엑트네이티브
• javascript
• reactnative
• react

프롬프트 내용은 어디서 볼수있나요?

해결됨

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

안녕하세요 강사님 강의 정말 잘 듣고있습니다. 다름이 아니라 프롬프트의 내용이 꽤 긴데 혹시 복붙할 수 있는 페이지는 따로 없는지 궁금합니다..! 제가 못찾은것일수도 있어서 조심스럽게 문의드립니다

• HTML/CSS
• javascript
• react
• node.js
• chatgpt

await를 사용하면 결국 동기와 다른 이유가 뭔가요?

해결됨

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

강의 2.14 비동기작업처리하기, 5:59 비동기는 프로세스의 병렬 처리를 위해 사용하는 것인데 비동기 함수를 await 키워드를 통해서 값이 반환되기를 기다렸다가 사용하면 동기 와 다른 점이 뭔지 궁금합니다. 어떤 경우에 await가 비동기 함수를 사용하면서 중요한 역할을 담당하는지도 궁금합니다.

• javascript
• react
• node.js

개인 팀프로젝트 중에 NextJS + react-query 관련 궁금증입니다.

해결됨

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

먼저 강의와 상관없는 질문 죄송합니다. Next 13 Page Router + React Query v3 사용해서 프로젝트 진행했었고, 이후에 강사님 강의를 수강하고 있습니다. 이전 프로젝트 진행 시 문제를 해결은 했지만 찝찝함이 남아있어 궁금증을 해소하기 위해 질문 남깁니다. getServerSideProps 사용해서 서버사이드에서 데이터를 불러오려고 했습니다. 서버(Spring)에서 쿠키 읽기에 실패해서 클라이언트에서 accessToken을 전달해야만 했습니다. 로그인시 accessToken을 클라이언트에서 쿠키에 직접 저장하고 axios 통신시 쿠키에 저장한 토큰을 꺼내서 header에 추가하여 요청하는 방식으로 구현하였는데, 서버 사이드에서는 브라우저 스토리지에 접근하지 못하므로 토큰을 읽지 못하는 문제가 발생했습니다. 모든 통신에서 토큰이 필요했던 프로젝트였어서 SSR을 포기해야하는건가? 하던 중에 React Query 의 Dehydration 방식을 적용하였더니 getServerSideProps 에서도 토큰을 읽고 전달하는것이 가능해졌습니다. 이러한 경우에도 SSR이 제대로 적용된 것이 맞는지, 그렇다면 React Query는 어떻게 브라우저 스토리지에 저장된 값을 읽을 수 있게 된건지 궁금합니다.

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

[질문X] 로컬에서 build 후 npm start 에러

미해결

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

[auth][error] UntrustedHost: Host must be trusted. URL was: http://localhost:3000/api/auth/session .Read more at https://errors.authjs.dev#untrustedhost 백엔드를 로컬에서 돌리고 Next를 build 후 npm start 로 서버를 돌렸을 경우 발생하는 Next-Auth.js(Auth.js) 에러입니다. 신뢰되지 않은 호스트라 발생하는 에러라고 해서 찾아봤습니다. 방법 1. AUTH_TRUST_HOST=http://localhost:3000 .env 파일에 AUTH_TRUST_HOST 추가하기 [참고] https://github.com/nextauthjs/next-auth/discussions/6071 방법 2. export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ trustHost: true, // ... src\auth.ts 파일에 NextAuth 옵션에서 trustHost: true 옵션 추가하기 [참고] https://github.com/nextauthjs/next-auth/issues/6113

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

컬럼 애너테이션 update property

미해결

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

update 프로퍼티를 false로 작성했는데도 500에러가 발생하지 않네요 response에는 변경된 값이 나옵니다. http://localhost:3000/users/:id { "id": 2, "title": "null0", "createdAt": "2024-03-24T23:59:11.774Z", "updatedAt": "2024-03-24T23:59:11.774Z", "version": 1, "additionalId": "a320e186-a44a-4dda-9af3-9cd52af4155c" } 그런데 DB에 가보면 또 값은 변경되어 있지 않더라구요 2번 user의 title 값은 null이 그대로 찍혀있습니다. 왜 500에러가 발생하지 않는건가요?

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

role 을 추가한 후 컨트롤러의 @Patch 코드에서 에러가 발생합니다.

해결됨

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. role 을 추가하자마자 다음과 같은 에러상황이 발생하였습니다. 강의순서랑 동일하게 따라가서 특별하게 더 한건 없는데요, 기존 entity 파일에서 role 생성하고 column 에서 선언해주고나서 저장하자마자 바로 이런 오류가 납니다. 혹시나 불러오기 에러인가 싶어서 강의를 꼼꼼히 보면서 동일한 위치에 따라하면서 해도 강사님쪽에서는 에러가 안나는데 제쪽에서만 에러가 나네요.. 뭐가 문제일까요? 에러내용만 보면 role 을 엔티티파일에서만 선언하고 컨트롤러 파일에서는 불러오기가 실패해서 나는 오류같기도 한데, export 할때 유저 엔티티 파일의 UserModel 안에서 했기때문에 이 에러가 나는게 좀 이상한거 같은데 왜 오류가 나는지 모르겠네요..

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

JSX에서 CSS파일 연결하는게 안됩니다

미해결

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

안녕하세요 선생님강의 잘 듣고 있습니다! 다름이 아니라 선생님 강의 중 'JSX로 UI 표현하기' 편을 듣고 있는데import를 이용해서 CSS파일을 연결하는 부분에서 막혔습니다 강의와 똑같이 작성했는데 스타일 적용이 안되는 이유가 뭘까요?화면에 오류 표시도 안뜨는데 코드에 문제가 있는지 궁금합니다

• javascript
• react
• node.js

docker-compose up 오류

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

docker-compose up을 사용하면 initdb: error: directory "/var/lib/postgresql/data" exists but is not empty initdb: hint: If you want to create a new database system, either remove or empty the directory "/var/lib/postgresql/data" or run initdb with an argument other than "/var/lib/postgresql/data". 라는 오류가 자꾸 발생합니다. 삭제하고 다시 해도 해결이 안되서 질문남깁니다. 어떻게 해결해야하나요.

• react
• node.js
• postgresql
• docker
• typescript
• 클론코딩
• next.js

VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요

미해결

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

이미지가 왜 안뜨나 했더니 Ctrl + shift + I로 오류 찾았을 때 Not allowed to load local resource가 뜨네요 Html 문서와 같은 장소에 이미지 파일이 있거나 그보다 하위 폴더에 있을 때만 이미지가 뜨고 상위 폴더에 있거나 절대 경로로 접근은 보안상의 이유로 차단되어있는 것 같네요 구글 이미지 링크주소 복붙은 정상적으로 되는데 간혹 안되는 이미지 파일도 있네요

• HTML/CSS
• javascript

fxjs 라이브러리 takeL 관련하여 질문드립니다.

미해결

함수형 프로그래밍과 JavaScript ES6+ 응용편

안녕하세요 기본편 부터 응용편 까지 천천히 학습하고 있습니다. 응용편 부터는 라이브러리를 가져와서 강의를 진행하시는데 강의 수강 중 궁금한 사항이 있어 질문드립니다. github에 올려주신 오픈소스를 참조하는데 takeL 부분이 이해가 되지 않아 문의드립니다. L.take = curry(function* (l, iter) { let prev = null; iter = iter[Symbol.iterator](); for (const a of iter) { if (a instanceof Promise) { yield (prev = a.then((a) => (--l > -1 ? a : Promise.reject(nop)))); prev = prev.catch(noop); } else { yield (--l, a); } if (!l) break; } }); L.take를 이렇게 표현하면 앞선 Promise가 resolve 되길 기다리는 Promise를 그대로 이어가면서 전달 가능한데 yield (prev = (prev || Promise.resolve()) .then((_) => a) .then((a) => (--l > -1 ? a : Promise.reject(nop)))); 이렇게 표현하신 이유가 어떤이유인지 알고싶습니다. 또 제가 작성한 수정한 부분에 문제가 있다면 알려주시면 감사하겠습니다. 또 궁금한 내용이 오픈소스에 for of 아래 a.catch(noop); Promise를 catch 하는 코드가 추가되어 있는데 이 부분 역시도 어떤의도로 구현한 것인지 궁금합니다. 수업내용에서는 비동기/동시성을 통해 한번에 Promise 콜백이 병렬적으로 평가되면서 배열에 담기는 시점에 콜스택에서 에러가 출력되지 않기 위해 사용하는 트릭으로 알고있는데요, L.take 에서 a.catch가 실행되는 시점에는 Promise가 reject로 풀려서 전달될 수 없을것 같은데 이 부분도 설명부탁드립니다.

• javascript
• 함수형-프로그래밍

메모리에 변수 생성과 값을 할당할 때

해결됨

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

지금 변수와 값을 생성하는 부분을 보고있습니다. 그런데 메모리에 변수와 값들의 주소를 가지는 포인터 변수를 가진다고 하신 부분에서 궁금증이 생겼는데 그러면 메모리의 값들은 이미 메모리 셀에 기존부터 가지고 있는 건가요? 아니면 그때마다 임의로 값을 메모리에 생성하는 건가요?

• javascript
• es6
• 객체지향
• es5