inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

좋아요 기능 구현

미해결

[리뉴얼] 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", 대체 뭐가 문제인건지도 감이 안잡히네요 ㅠㅠ

  • react
  • redux
  • node.js
  • express
  • next.js
GI P 댓글 1 좋아요 0 조회수 342

MSW 사용 대신에 Next에서 제공하는 라우트 핸들러 사용?

미해결

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

https://nextjs.org/docs/app/building-your-application/routing/route-handlers 궁금한 점이 있어 의견 여쭈어 보려고 글 남깁니다! 공식 문서를 읽어보니 route handlers로도 백엔드를 구현할 수 있는데 MSW 사용 이유는 배포 모드일때는 라우트 핸들러를 적용한 폴더를 삭제를 해줘야하니까 번거롭기 때문에 사용하는 이유도 있다? 라고 봐도 될까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
욱둥이 댓글 1 좋아요 0 조회수 648

chilrdren, modal의 보여지는 원리가 제가 이해한 것이 맞을까요?

미해결

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

안녕하세요 제로초님. 인터넷창에 직접 주소를 입력하거나 새로고침 시 뒤에 배경화면이 사라지는 것에 대하여 질문있습니다. 먼저 <Link href='/i/flow/signup' className={styles.signup}> 를 클릭 시에는 인터셉터 라우팅이 트리거 되어 src/app/(beforeLogin)/layout.tsx 에 있는 children으로 인해 배경화면에 main컴포넌트가 보여지며 인터셉터된 @modal 은 modal부분에 보여집니다. 그런데 직접 주소창에 /i/flow/signup' 를 입력하여 접근하거나 새로고침하면 배경화면에 main컴포넌트가 사라지게 되는데 이것의 이유는 직접 접근할 때 인터셉에 걸리지 않게되고, childrend에는 i/flow에 있는 폴더들이 보여지며 defalut.tsx가 배경화면으로 보여지기 때문인가요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김건희 댓글 1 좋아요 0 조회수 494

클라이언드 fetch와 suspense를 이용한 fetch

미해결

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

CSR에서의 data fetch와 suspense 안에 있는 서버컴포넌트의 data fetch는 어떤 차이가 있을까요? SSR이 아닌 CSR을 써야 하는 상황은 위처럼 데이터가 큰 상황들인데, 어차피 suspense를 이용하면 서버에서 fetch가 끝나야 렌더링이 되는게 아니라 로딩으로 되다보니 CSR 대신 suspense를 이용하면 되는거 아닌가 싶습니다. 어떤 차이가 있는지 잘 모르겠어요. CSR을 써서 더 좋은 상황이 어떤게 있을지 모르겠습니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
j44s11 댓글 2 좋아요 0 조회수 315

Suspence를 이용한 useSuspence(InfiniteQuery,Query) 부분 질문있습니다.

미해결

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

제로초님 저는 home경로에 Suspence로 감싼 <TabDeciderSuspence/>컴포넌트 안에 <PostRecommends/>, <FollowingPosts/>이 두개의 컴포넌트를 infiniteQuery 적용했습니다. 근데 useSuspenceInfiniteQuery를 적용해보려고 했는데, 적용하지 않아도 강의내용에서 말한 Suspence의 fallback 로딩이 적용되는거 같아요. Suspence가 감싼 하위 컴포넌트는 useSuspence(Query, InfiniteQuery)적용안해도 Suspence적용되나요? const Home = async () => { return ( <main className={style.main}> <TabProvider> <Tab /> <PostForm /> <Suspense fallback={<Loading />}> <TabDeciderSuspense /> </Suspense> </TabProvider> </main> ); };

  • react
  • next.js
  • react-query
  • next-auth
  • msw
라푼젤 댓글 1 좋아요 0 조회수 265

nextjs의 hook을 사용할 때

해결됨

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

상위 컴포넌트에서도 useSearchParam을 사용해야 하고, 하위 컴포넌트에서도 useSearchParam을 사용해야 하는 이러한 상황에서, 해당 값을 prop으로 전달할지, 독립적으로 호출할지 고민이 됩니다. 이 정도의 요소는 굳이 prop으로 전달하지 않고 다시 호출해도 유의미한 리소스 차이는 없겠죠?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
j44s11 댓글 1 좋아요 0 조회수 474

다이나믹 라우트 안의 폴더

미해결

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

안녕하세요. /product/[slug]/edit 이런 파일 구조를 가지고 있는데, edit 페이지에서 어떻게 하면, 현재 slug의 dynamic route 값을 가지고 올수 있을까요? edit 에서는 params가 빈 객체로 찍힙니다. 미리 감사합니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
K1 댓글 1 좋아요 0 조회수 228

로그인 로그아웃 문제

해결됨

Next.js 풀스택 Github Issue 서비스 만들기

똑같이 코드를 구현해봤는대요! 해당문제에서 오류가 발생하고있습니다. 로그인은 잘됐지만 로그아웃에서 아무런 반응이 없다가 쿠키랑 캐시를 지워야지만 로그아웃이 되는 현상이 생겨서 질문을 해봅니다! const AuthStatus = () => { const { status, data: session } = useSession(); if (status === "loading") return <Skeleton width="3rem" />; if (status === "unauthenticated") return <Link href="/api/auth/signin">Login</Link>; return ( <Box> <DropdownMenu.Root> <DropdownMenu.Trigger> <Avatar src={session!.user!.image!} fallback="?" size="2" radius="full" className="cursor-pointer" referrerPolicy="no-referrer" // 이미지 불러오기 이슈 /> </DropdownMenu.Trigger> <DropdownMenu.Content> <DropdownMenu.Label> <Text size="2">{session!.user!.email}</Text> </DropdownMenu.Label> <DropdownMenu.Item> <Link href="/api/auth/signout">Logout</Link> </DropdownMenu.Item> </DropdownMenu.Content> </DropdownMenu.Root> </Box> ); }; 특별히 더 봐야할 부분이 있을까요?

  • react
  • typescript
  • next.js
  • prisma
  • vercel
황정연 댓글 2 좋아요 1 조회수 486

파라미터로 받은 form을 어떻게 엔터티로 반환하는지 모르겠어요...

해결됨

실전! 스프링 데이터 JPA

현재 실전 데이터 JPA수강 중인데요.. 독학 중이라 토이프로젝트로 연습하는데 오늘까지 배운 JpaRepository 상속과 관련하여 회원가입 기능 구현하려 하려는데 어디 물어볼곳이 없고 뒤죽박죽이라 정리가 필요해서 장문의 질문을 남깁니다.. 일단 제가 머릿속에 정리가 안되는 것은 영한선생님께서 최대한 컨트롤러에 엔터티를 노출하지 말고 비지니스 로직을 서비스에서 최대한 구현하라고 해서 따라하는 중인데 Member를 기준으로 파라미터를 받을 MemberForm을 생성했습니다. 여기서 질문이.. MemberForm을 생성했으면 MemberDto는 따로 생성 안해도 될까요? 컨트롤러를 그림과 같이 작성하였고 서비스는 아래와같이 하였는데... 뭔가 서비스에서 엔터티를 직접 만지니까 찝찝한데 실무에서도 이렇게 하는지 궁금합니다..

  • java
  • spring
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 291

객체 질문

미해결

김영한의 실전 자바 - 기본편

수업 내용을 토대로 질문하겠습니다 Student student1 = new Student() 에서 객체는 student1 이 아닌거죠? student1 은 단순히 변수인거고 객체는 new Student() 라고 알면 될까요?

  • java
  • 객체지향
ghuhan18 댓글 1 좋아요 0 조회수 398

서버에서 세션은 어떻게 불러오나요?

해결됨

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

클라이언트에서는 useSession인데, 서버에서는 어떻게 불러오나요? getSession이나 getServerSession을 쓰면 되는거 같은데, 그냥 서버 컴포넌트 페이지에서 const A=await getSession()으로 해버리면, 그 다음 console.log(A)에서 pending이 나오더라구요... 서버에서 세션을 호출해서 특정 동작을 하기 위해서는 어떻게 조작해야 할까요? api에 따로 만들어서 route handler을 써야 할까요...? 이 방법도 어려움을 겪고 있긴해서 가장 좋은 방법이 뭔지 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
j44s11 댓글 1 좋아요 1 조회수 326

서버는 어떻게 socket을 받는건가요??

해결됨

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

좋은 강의 잘 보고 있습니다! 혹시 웹소켓을 사용하면서 서버쪽은 어떻게 코드가 구성되는지 알 수 있을까요??

  • react
  • next.js
  • react-query
  • next-auth
  • msw
oridori2705 댓글 2 좋아요 0 조회수 394

로딩 페이지, 에러 페이지 질문

미해결

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

React뿐만 아니라 NextJS에서도 <ErrorBoundary fallback={<Error/>}> <Suspense fallback={<Loading/>}> <Page /> </Suspense> </ErrorBoundary> 이렇게 컴포넌트 계층 구조를 작성해야 한다는 것인가요? 아니면 그냥 error.tsx, loading.tsx파일만 만들면 알아서 적용이 된다는 것인가요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
roider2316 댓글 1 좋아요 0 조회수 284

msw 서버가 작동 안되요

해결됨

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

window환경이고 회원가입을 하려고 해도 message가 넘어오지 않아 보니 위 메세지도 콘솔에 뜨지않았습니다. Mock server자체가 연결이 안되는 것 같은데 뭐가 문제인지 잘 모르겠습니다. /mocks 폴더안에 파일들은 제로초님 깃헙에서 그대로 복붙하고 signup 관련 파일도 다 복붙했습니다. /_lib/signup.ts 는 ts오류가나서 함수 이름만 넣었습니다. "use server"; import { redirect } from "next/navigation"; const Submit = async (prevState: any, formData: FormData) => { if (!formData.get("id") || !(formData.get("id") as string)?.trim()) { return { message: "no_id" }; } if (!formData.get("name") || !(formData.get("name") as string)?.trim()) { return { message: "no_name" }; } if ( !formData.get("password") || !(formData.get("password") as string)?.trim() ) { return { message: "no_password" }; } if (!formData.get("image")) { return { message: "no_image" }; } let shouldRedirect = false; try { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", body: formData, credentials: "include", }, ); console.log(response.status); if (response.status === 403) { return { message: "user_exists" }; } console.log(await response.json()); shouldRedirect = true; } catch (err) { console.error(err); return; } if (shouldRedirect) { redirect("/home"); // try/catch문 안에서 X } }; export default Submit; 아래는 제 package.json입니다. .env.local submit 눌렀을 때 네트워크

  • react
  • next.js
  • react-query
  • next-auth
  • msw
현창이 댓글 2 좋아요 0 조회수 698

creactStore질문이요

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

미들웨어에서 rootReducer 하나만 넣었을 땐 문제 없는데 2번째 인자 넣을때부터 에러가 계속 나는데 이유를 모르겠습니다.

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
악보-Designer Park 댓글 2 좋아요 1 조회수 313

Amazon S3에서 파일 업로드 시 "Unzipped size must be smaller than 262144000 bytes" 에러가 발생합니다!

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요! 제로초님!! [리뉴얼] React로 NodeBird SNS 만들기 섹션 6. AWS에 배포하기: Lambda로 이미지 리사이징 하기 강의까지 수강한 수강생 입니다! Lambda로 이미지 리사이징 강의의 20:00분 까지 그대로 잘 진행하고 있었습니다! 그런데 Amazon S3에서 파일 업로드 시 아래 사진과 같은 에러가 발생합니다! "Unzipped size must be smaller than 262144000 bytes" "압축 해제된 크기는 262144000바이트보다 작아야 합니다." 해당 문제를 해결하기 위해 구글링 해보니 serverless로 '/nodemodules' 같이 용량이 큰 것들을 package exclude로 제외 시키는 것 같습니다! 혹시 방법을 아시면 공유 부탁 드립니다! 질문 글 읽어주셔서 감사합니다! 항상 강의 잘 보고 있습니다. +++ 혹시 모르니 저의 런타임 설정과 버킷 사진을 같이 첨부합니다! 제로초님이 사용하신 Node.js 12.x가 항목에 없어서 Node.js 20.x을 사용하였습니다.

  • react
  • redux
  • node.js
  • express
  • next.js
이가은 댓글 2 좋아요 0 조회수 806

PK를 외부로 노출하지 않고 게시물 수정/삭제?

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

는 어떻게 하는 것이 좋은 건가요? PK이자 글 번호인 boardSeq를 가지고 와서 수정과 삭제를 진행하고 있었는데, PK는 최대한 외부로 노출하지 않는 것이 좋다고 하여서 문득 생각이 들었습니다. PK Seq를 따로 두고 UniqueKey로 똑같이 AutoIncrement해서 생성하게 된다면 결국 무슨 차이인가 싶어서 아닌 거 같기도 하고... 어떤 식으로 처리 해야 되는지 궁금하여 질문 남기게 되었습니다.

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 265

소스 코드

해결됨

Next.js 필수 개발 가이드 3시간 완성!

현재 API 부분까지 잘 들었습니다. 내용이 길지 않은데 핵심 부분을 잘 이야기 해주셔서 너무 좋습니다. 그런데 소스 코드가 없다는 것이 너무 아쉽습니다. 내용이 정말 좋지만 소스 코드가 없으면 이해하기까지 시간이 많이 걸리기 때문에 강의를 듣는 것이 쉽지가 않습니다. 혹시 깃허브나 소스 코드가 제공될 수 있을까요?

  • react
  • typescript
  • next.js
  • ssr
asuralord 댓글 1 좋아요 1 조회수 341

다대다 양방향관계를 풀어낼 때

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

회원 A테이블과 팀C 테이블의 다대다 양방향 관계를 풀기 위해 중간 테이블을 도입하여 A, B(중간테이블), C 와 같이 일대다/다대일 관계로 풀어낼 때 A와 C 양 쪽 모두 addTemMember와 같은 메소드를 만들어주고, 회원이 팀에 들어갈 때 A.addTeamMember와 C.addTeamMember()둘 다 호출해줘야 하는 게 맞나요? 다대다 양방향 관계를 풀 때 중간 테이블을 설정하는데 이것은 따로 외부에 노출할 필요 없이, 내부적으로 회원 A가 어떤 팀에 속해있는지, 팀C에 어떤 회원이 속해있는지 확인할 때만 사용하는 것이 맞나요?

  • java
  • jpa
댓글 1 좋아요 0 조회수 286

DB PK 를 화면에 직접 노출 시켰을 때 문제점

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

강의 내용을 보면 상품 목록 화면에서 item.id 값을 뿌려주고 있습니다. 이건 DB 에 저장된 item 테이블의 PK 값 일텐데, 문득 이런 생각이 들었습니다. DB 데이터 관리를 위한 PK 를 클라이언트 단에 노출시켜도 되나요? (가급적 엔티티 객체를 클라이언트 단에 직접 노출시키지 말라고 하셔서, 이것도 비슷한 맥락으로 숨겨야되지 않을까 해서요)

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
김정배 댓글 1 좋아요 1 조회수 571

인기 태그

인프런 TOP Writers

주간 인기글