묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next.js 풀스택 Github Issue 서비스 만들기
강의 05 디비...질문드려요
강의 05 에서 npx prisma formatnpx migrate 를 하는데, 디비명 에러가나는데요...cmd로 mysql 에서 디비를 생성하려니 하이픈 오류로 나옵니다....env 설정 DATABASE_URL="mysql://root:12341234@@localhost:3306/issue-management"윈도우 mysql에 디비를 만들지않은 상태에서도 마이그레이션이 되는건가요?
-
해결됨Next.js 풀스택 Notion 서비스 만들기
강의철회안내메일을 받았습니다
강의철회 안내메일을 받았습니다.ㅜㅜ그러면 기존 수강생인 경우에는 어떻게 하나요??? 이번 진행중인 프로젝트를 완료 하고나서 열공하려고 했거든요 ㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
AWS 강의 내용대로 했는데 요금 청구가됩니다.
프리티어로 가입해서 강의대로 EC2 로드밸런스 S3 이런거만 했는데 소액씩 요금이 계속 청구되네요 원래 배포하는데 계속 청구 되는건가요?
-
미해결코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
mongodb 및 mongoose 초기 세팅에서 다운로드 질문입니다
mongodb compass 다운 받을때 사이트에서 mongodb shell을 다운로드 하셨는데 다운로드 해도 아무리 봐도 compass가 실행 되지 않는데요 . 그래서 아래에 mongodb compass(gui)를 다운받았더니 실행됩니다.제가 맞게 한건지 혹시 다르다면 답변 바랍니다
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
조회 관련 질문입니다.
안녕하세요 강의 잘 듣고 있습니다. 강의를 듣다가 의문이 생겨 질문 남깁니다. CartServiceImpl 에서 addOrModify() 를 보면 처음에 cino 가 null 값이 아닌 경우 cartItemRepository.findById 를 하시고, null 값인 경우에는 getCart() 후에 getItemOfPno() 를 하셨습니다. cino 가 null 이면 CartItem 이 존재하지 않는다고 생각되어 다시 getItemOfPno() 를 할 필요가 없다고 생각했는데 위와 같이 코드를 작성하신 이유가 궁급합니다. 감사합니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
const [sortType, setSortType] = useState("latest");
const [sortType, setSortType] = useState("latest");강사님 하고 똑같이 useState 초기값을 latest로 했는데새로고침 하거나 페이지 이동하고 돌아오면 저는 5번부터 정렬되는데 왜 강사님은 1번부터 정렬되나요?latest니까 5번부터 정렬돼야 하는거 아닌가요?
-
해결됨[React 1부] 만들고 비교하며 학습하는 React
디버깅 관련질문이 있습니다.
안녕하세요 선생님 질문이 있습니다.제가 자바, 스프링만 해서 intellij ide 로 디버깅만 해보았는데 이런 react같은 경우는 어떻게 해야하나요?현재는 console.log로 디버깅하였습니다. ps) 혹시나 해서 남겨놉니다. (저는 실수해서)this.element.innerHTML이네요 저는 innerHtml인줄알고 왜 랜더링이 안되지 한참 디버깅하였습니다.
-
미해결[React 1부] 만들고 비교하며 학습하는 React
[순수JS2]탭 3(풀이) 질문있습니다.
안녕하세요 선생님 강의 잘 듣고 있습니다.delegate에 관해서 제가 아래처럼[(1),(2)] 이해하고 있는데 이것이 맞게 이해한것인지 궁금합니다. 1) delegate에서emitEvent에 담기는것은 아직 호출되지 않은 함수인데이게 tabView생성자가 호출되는 시점에 렌더링이 되지않은(?) id =tab-view에 delegate 안의 on 메소드에 의해 바인딩이 됩니다. 2) 이후 id=tab-view에 click 이벤트가 발생하면 그제서야 on에 의해 바인딩되었던 이벤트처리기 (emitEvent)가 호출되어서 실제 bindEvents()에서 바인딩하려했던 handleClick 를 호출합니다. 3) 또 쓰다 보니 궁금한것이 아직 TabView의 show가 호출되기 전이긴 한데 constructor에서는 bindEvents() 메소드 안에서 delegate -> on 메소드에서 target.addEventListener를 호출하고 있는데 id=tab-view는 이미 렌더링 되었다고 표현하는것이 맞나요?감사합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
MacOs, PostgreSQL16 설치, pgAdmin 4에서 connection 오류
비번 확실히 틀리지 않았는데 계속 오류 뜨길래, 완전 삭제후 다시 설치해서 비번 쉬운걸로 다시 설정하고 입력해도 계속 비번오류 뜹니다.
-
해결됨Next.js 풀스택 Notion 서비스 만들기
테일윈드 자동정렬
강의를 보니 테일윈드 클래스 자동정렬 기능이 되어있으신거 같은데 prettier-plugin-tailwindcss 쓰시는건가요 아님 다른 방법이 있으신가요?
-
미해결Next + React Query로 SNS 서비스 만들기
react-query를 사용하면서 token을 header에 전달해야 할 때
이런 상황에서는 어떻게 해야할까요?강사님은 queryFn 함수를 별도로 분리하는 방식인데, 해당 함수내에서는 token을 호출할 수 없을것입니다.그렇다면 제가 생각하기에 가능한 방법은 querykey에 포함시켜서 함수에서 호출하는 방법인데...그렇게되면 token이 필요한 모든 함수의 key 배열에 토큰을 추가시켜야 하는 작업을 해야합니다.하지만 이것보다 더 좋은 방법이 있을지 잘 모르겠습니다.axios 같은 경우에는 전역적으로 header에 default로 넣는다거나 하는 방법이 있는데, fetch로 하는 경우에는 위의 방법이 최선일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section 17 useEffect 부분
const [dog, setDog] = useState(""); const res = axios.get("https://dog.ceo/api/breeds/image/random"); console.log(res.data.message); // 사진 주소 setDog(res.data.message);위 코드에서 강사님이 설명 해주실 때, res 값이 변경되고 state 값이 바뀌니까 계속 무한루프로 리렌더링이 된다고 하셨는데, 계속 state 값이 바뀌는 이유가 이 api 자체가 fetch 할 때마다 랜덤으로 사진이 바뀌는 api라서 그런 걸까요 ? ??
-
해결됨Next + React Query로 SNS 서비스 만들기
섹션1. 라우트그룹 강의중에 Hydration 에러 질문이 있습니다
안녕하세요 제로초님 강의 구매해서 따라가고 있는 수강생입니다 해당 강의에 2분44초 경을 보면 루트 레이아웃에 body안에 "루트레이아웃" 문구 넣고 localhost 3000을 보시면 정상적으로 동일하게 바뀌어 있는데 하지만 그 상태에서 브라우저 창을 새로고침을 할 경우 아래와 같은 에러가 뜨더라구요===============Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching text node for "루트 레이아웃" in <body>. See more info here: https://nextjs.org/docs/messages/react-hydration-error=============== 서버와 클라이언트간의 매치가 되지 않아 하이드레이션이 실패했다고 하는데 next dev를 통해 재 실행을 해도 동일합니다브라우저에서 정상적으로 텍스트 변경이 되었지만 왜 이러한 충돌이 나는걸까요 ~?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
sec7 포트폴리오 질문
포트폴리오 sec7에서 게시글을 저장할 때 콘솔 창에 id를 출력해서 확인하는데, 저장한 게시글 정보를 playground에서 확인하는 방법은 무엇인가요? fetchBoard를 이용해서 찾아보려 했는데 잘 되지 않아요ㅜ 그리고 _id 말고 number이나 message 정보는 콘솔창에 출력할 수 없나요?
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
eslint 질문 있습니다.
eslint 저장을 하고 강의처럼 props에 값을 주면 똑같은 메세지가 안나옵니다. jsx로 파일 설정을 안해서 그럴까요?
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
[OneToOne Field Demo] get_user_model() 메서드를 활용해야 하는 이유?
안녕하세요 진석님! 좋은 강의 잘 보고 있는 한 학생입니다!오늘 강의를 보다가 궁금한 점이 생겨서 질문을 남겨봅니다. jupyter로 코드 실습 하시다가 언급하시는 부분(9분 57초) 에서get_uer_model() 메서드를 활용하기를 권장하셨습니다. 혹시 이 부분에 대한 이유를 알 수 있을까요?이전까지 Model 을 작성하실 때에는 settings.AUTH_USER_MODEL을 사용하라고 하셨는데 어째서 해당 부분을 import 하지 않고 get_user_model()을 써야 하는지 이해가 되지 않아서 질문 드렸습니다!이미 settings.AUTH_USER_MODEL 을 settings.py에서 변수에 할당한 상태라고 가정한다면, settings.AUTH_USER_MODEL 을 바로 import 하는게 메모리를 더 효율적으로 사용할 수 있는 방법이 아닌건가 하는 의문점이 있는 상태에서 질문 드린 점 참고 부탁드리겠습니다. (__ __ ) 요약하자면 이렇습니다.Q1. 9:57에서 언급하신 권장방법은 어째서 settings.AUTH_USER_MODEL을 import 하지 않고 get_user_model() 을 사용해야 하는가?Q2. settings.AUTH_USER_MODEL은 Model 이 아닌것인가?Q3. settings.AUTH_USER_MODEL을 import 해서 user.profile한 경우와 get_user_model() 을 import 하여 user.profile을 한 경우의 차이점은 무엇인가? 장고 강의에 항상 애정을 쏟아주셔서 감사합니다.
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
npm create react app
안녕하세요 강사님 제목처럼 react app 만들어도 될까요?큰 차이가 있나요?
-
해결됨Next + React Query로 SNS 서비스 만들기
tanstack query 타입 지정
"use client"; import {useQuery, useQueryClient} from "@tanstack/react-query"; import {getUserPosts} from "../_lib/getUserPosts"; import Post from "@/app/(afterLogin)/_component/Post"; import {Post as IPost} from "@/model/Post"; type Props = { username: string; } export default function UserPosts({ username }: Props) { const { data } = useQuery<IPost[], Object, IPost[], [_1: string, _2: string, _3: string]>({ queryKey: ['posts', 'users', username], queryFn: getUserPosts, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const queryClient = useQueryClient(); const user = queryClient.getQueryData(['users', username]); console.log('user', user); if (user) { return data?.map((post) => ( <Post key={post.postId} post={post} /> )) } return null; }import {QueryFunction} from "@tanstack/query-core"; import {Post} from "@/model/Post"; export const getUserPosts: QueryFunction<Post[], [_1: string, _2: string, string]> = async ({ queryKey }) => { const [_1, _2, username] = queryKey; const res = await fetch(`http://localhost:9090/api/users/${username}/posts`, { next: { tags: ['posts', 'users', username], }, cache: 'no-store', }); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error('Failed to fetch data') } return res.json() } 기존 강의에서의 코드입니다. 제 생각에는 둘 다 타입을 지정해 줘야 할 필요가 있나? 라는 생각이 들어서 getUserPosts의 타입만 설정해봤는데, useQuery부분에서도 data 타입, key에 대한 타입, fn에 타입 모두 정상적으로 적용이 되는 거 같습니다. "use client"; import Post from "@/app/(afterLogin)/_component/Post"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { getUserPosts } from "../_lib/getUserPosts"; type Props = { username: string; }; export default function UserPosts({ username }: Props) { const { data } = useQuery({ queryKey: ["posts", "users", username], queryFn: getUserPosts, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const queryClient = useQueryClient(); const user = queryClient.getQueryData(["users", username]); console.log("user", user); if (user) { return data?.map((post) => <Post key={post.postId} post={post} />); } return null; } import { Post } from "@/model/Post"; import { QueryFunction } from "@tanstack/query-core"; export const getUserPosts: QueryFunction< Post[], [_1: string, _2: string, username:string] > = async ({ queryKey }) => { const [_1, _2, username] = queryKey; const res = await fetch(`http://localhost:9090/api/users/${username}/posts`, { next: { tags: queryKey, }, cache: "no-store", }); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } return res.json(); }; 이런식으로 약간 변형을 줘봤는데 기존의 코드 타입 지정과 차이가 있을까요?바꾼 부분은 UserPost에서 타입 지정은 모두 없애줬고, getUserPosts에서 next tags에 queryKey를 그대로 할당했습니다. (간혹 tags의 규칙상 queryKey에서는 가능해도 안되는 경우도 있다고 강의에서 말씀해주셨는데, 대부분의 경우에는 가능하기 때문에 대부분은 이렇게 충분하고 그런 경우에만 별도로 바꿔주면 될 거라고 생각했습니다.)
-
미해결Next + React Query로 SNS 서비스 만들기
서버 컴포넌트 fetch와 클라이언트 컴포넌트 fetch 구분
이전 질문에서 SEO가 필요없는 경우 보통 클라이언트에서 데이터를 가져오는게 더 좋다. 라는 답변을 받았습니다. 그런데 어떤게 서버에서 데이터를 가져오는거고, 어떤게 클라이언트에서 데이터를 가져오는건지가 매우 헷갈리고 있는 상황입니다. react-query를 사용할 때 query가 있는 컴포넌트에 "use client"가 있다면 클라이언트 데이터 fetch라고 보면 될까요? 그렇다면 수업 내용 중 client 컴포넌트에서 데이터를 가져온건 PostRecommends 부분이 유일한가요? 다른 react-query 부분은 모두 "use client"가 상단에 없습니다. (거기에 signup 정도...?)기존의 서버 컴포넌트에서 데이터를 가져오려고 하는데, SEO가 필요 없어 클라이언트 컴포넌트를 선택하고 싶다면, 위에 "use client"를 일부로 적어서 클라이언트 컴포넌트로 만들면 되는게 맞을까요? (데이터 페치 이전에는 함수 같은 것들이 있어서 반드시 바꿔야 되는 경우에만 "use client"를 썼기에, 필수적인게 아닌 제가 선택적으로 바꾸면 되는것인지 헷갈리네요) 컴포넌트 함수에 async를 쓰는 경우도 안쓰는 경우도 있는데, 이건 서버/클라이언트는 무관하게 단순히 async/await를 쓰기 위해 사용하는걸까요?요즘 질문이 많이 생기네요... 항상 감사합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
좋아요 기능 구현
제로초님의 코드대로 한다라고 하면 게시물 데이터를 받을때 프론트쪽에 postId와 userId를 보내고 프론트에서 계산을 해야하던데 백엔드에서 이 게시물을 로그인한 유저가 좋아요를 눌럿는지 안눌엇는지에 대한 데이터를 바로 내주고 싶어서 이렇게 짜봣는데 자꾸 에러가 납니다.게시물에 대한 코드는 이거구요 const express = require("express") const { Post, Sequelize, User, Like } = require("../models") const router = express.Router() router.get("/",async(req,res,next)=>{ try { const posts = await Post.findAll({ // where:{ // id:lastId // }, limit: 10, // DESC 최신순 ASC 오래된순 order:[["createdAt","DESC"]], // 다른사람도 좋아요를 햇는지를 보여주는데 의미 없어보임 // include: [{ // model: User, // 좋아요 누른 사람 // as: 'Liked', // required: false, // attributes: ['id'], // through: { // attributes: [] // }, // }], attributes:[ "id", "content", "title", "createdAt", // 만든사람 [Sequelize.literal("(SELECT `nickName` FROM `Users` WHERE `Users`.`id` = `Post`.`userId`)"), "nickName"], // 이미지 소스 [Sequelize.literal("(SELECT `src` FROM `Images` WHERE `Images`.`postId` = `Post`.`id`)"), "src"], [ Sequelize.literal(` (SELECT CASE WHEN COUNT(*) FROM Liked WHERE Liked.PostId = Post.id AND Liked.UserId =: userId END) AS isLiked `), "isLiked" ], ], raw: true, }) res.status(201).send(posts) } catch (error) { console.error(error) next(error) } }) module.exports = router 에러는 이렇게 나고 있습니다.sqlState: '42000', sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'FROM Liked\n" + ' WHERE Liked.PostId = Post.id\n' + " ' at line 3",대체 뭐가 문제인건지도 감이 안잡히네요 ㅠㅠ
