묻고 답해요

searchParams props

미해결

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

안녕하세요 search 페이지 props에서 searchParams props가 기본적으로 제공된다고 알고있는데 저는 콘솔로 찍어보니 나오지 않습니다..! 혹시 제가 잘못적용한건지 아니면 다시한번 확인해야 될곳이 있을까요?/ import SelectBox from "@/components/common/SelectBox"; import SelectStack from "@/components/common/SelectStack"; import Peoples from "@/components/people/Peoples"; import SearchForm from "@/components/common/SearchForm"; type Props = { searchParams: { page: string; size: string; sort?: string; keyword?: string; position?: string; teckStack?: string; }; }; export default function Page({ searchParams }: Props) { console.log("??", searchParams); return ( <div> <div className="relative flex items-center gap-4"> <h1 className="text-[36px] font-bold">People</h1> </div> <div className="flex justify-between"> <div className="flex gap-3"> <SelectBox options={option} title="포지션" /> <SelectStack /> </div> <SearchForm keyword={searchParams.keyword as string} /> </div> <Peoples searchParams={searchParams} /> </div> ); }

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

프리즈마로 api만드시는 강의는 언제쯤 나올지 알 수 있을까요?

미해결

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

안녕하세요 선생님 프리즈마로 api만드시는 강의는 언제쯤 나올지 알 수 있을까요? 직접만든 api랑 이번수업에서 배울next로 플젝을 만들고 싶은데 궁금합니다.

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

header_logo

미해결

따라하며 배우는 HTML, CSS

header.css 에서 header_logo class 에 margin-top: 5px를 해줬는데 html에서 header_logo클래스는 보이지 않아서요..어디 있는거죠?

• HTML/CSS

css 안먹어요

미해결

1. 웹개발 기초 [HTML, CSS]

main에 잘 적어줬는데 css가 먹질 않아요..링크도 몇번이나 확인했는데 잘 먹지를 않아요

• HTML/CSS

문법관련 질문입니다

해결됨

[코드캠프] 시작은 프리캠프

수업내용에 let classmates = ["철수", "영희", "훈이"] 여기서 classmates.push("맹구")를 넣으면 마지막에 추가기능있는것을 배웠습니다. 그런데 여기서 궁금한게 마지막이 아닌 철수와 영희 사이 또는 영희와 훈이 사이에 넣을수 있는 문법(?)기능이 있을까요? 아 또 pop기능에서는 마지막값 삭제인데 그것말고 원하는 값을 삭제하는 기능이 있을까요?

• HTML/CSS
• javascript

폼테그 안에 메소드

미해결

1. 웹개발 기초 [HTML, CSS]

메소드를 적어서 요청을 보내면 index2 화면으로 넘어가져야 하는데 안되어서 메소드를 지우니까 화면이 index2로 넘어가지던데 혹시 메소드 없이 넘어가져도 괜찮은걸까요?

• HTML/CSS

Access Token과 Refresh Token을 어디에 저장해야 할까요?

미해결

현재 프로젝트를 진행중인데, Access Token과 Refresh Token을 헤더에 담아 로컬스토리지에 저장하는 방법을 사용중입니다. 그런데 로컬 스토리지는 보안에 취약하다는 글을 보았습니다. 로컬 스토리지에 담아도 jwt 정책으로 대응이 가능하다는 글도 있었습니다. Access Token과 Refresh Token을 어디에 저장해야 할까요? 만약 로컬 스토리지나 쿠키에 저장한다면 어떻게 관리해야하나요?

• java
• spring
• accesstoken
• refreshtoken
• localStorage
• cookies

화면 출력에서 이상해요

미해결

떠먹는 Three.js

화면 출력 부분 강의에서 window.addEventListener('resize', () => { // 카메라의 종횡비 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); // 렌더러의 크기 renderer.setSize(window.innerWidth, widow.innerHeight); }); 이 코드에서 창 크기를 바꿀시 box의 크기가 줄어드는 것이 아닌 box가 늘어나는 현상이 발생합니다 별의 별짓을 다해도 못고칠것 같아서 질문드려요 <canvas id="result" style="border:1px solid red; width: 100%; height: 100vh"></canvas> 혹시몰라 html코드도 첨부합니다

• HTML/CSS
• javascript
• three.js

섹션 6. 순수 jbdc

해결됨

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

이 부분이 임포트가 아예 안 됩니다ㅠㅠ import org.springframework.jdbc.datasource.DataSourceUtils; 그래서 DataSourceUtils .getConnection(dataSource); 이렇게 인텔리제이에서 빨간 불이 들어오구요ㅠㅠ DataSourceUtils에만 빨간 불이 들어옵니다!! 어떻게 해결해야 할까요!! private Connection getConnection() { return DataSourceUtils.getConnection(dataSource); } private void close(Connection conn, PreparedStatement pstmt, ResultSet rs) { try { if (rs != null) { rs.close(); } } catch (SQLException e) { e.printStackTrace(); } try { if (pstmt != null) { pstmt.close(); } } catch (SQLException e) { e.printStackTrace(); } try { if (conn != null) { close(conn); } } catch (SQLException e) { e.printStackTrace(); } } private void close(Connection conn) throws SQLException { DataSourceUtils.releaseConnection(conn, dataSource); }

• java
• spring
• mvc
• spring-boot

next-auth로 다시 한번 질문을 올립니다...

해결됨

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

공지의 올려주신대로 auth.ts 를 수정하였으며 loginModal 의 redirect:true export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, callbacks: { // async signIn() // async authorized({ auth }) { // if (!auth) { // // 쿠키가 없으면 로그인 페이지로 돌리기 // return NextResponse.redirect("http://localhost:3000/i/flow/login"); // } // return true; // }, }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, // NEXT_PUBLIC_BASE_URL=http://localhost:9090 { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), } ); // 여기 주목!!! 서버에서 에러가 발생할 때 그 에러 내용이 서버에 담겨 있을 겁니다. console.log(authResponse.status, authResponse.statusText); if (!authResponse.ok) { const credentialsSignin = new CredentialsSignin(); if (authResponse.status === 404) { credentialsSignin.code = "no_user"; } else if (authResponse.status === 401) { credentialsSignin.code = "wrong_password"; } throw credentialsSignin; } const user = await authResponse.json(); console.log("user", user); // id, name, image, email만 허용 return { id: user.id, name: user.nickname, image: user.image, }; }, }), ], }); 아래와 같은 오류가 계속 해서 발생하고 있습니다. TypeError: next_dist_server_web_exports_next_request__WEBPACK_IMPORTED_MODULE_0__ is not a constructor pakage.json 의 버젼은 아래와 같이 사용하고 있고요 "@auth/core": "^0.27.0", "next-auth": "^5.0.0-beta.16", 혹시 이 부분의 같은 에러가 나오신 분들 중 해결 하신 분들이 있을까요?

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

설명 감사합니다!

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.

• HTML/CSS
• jquery
• 웹-디자인

프로젝션 'new 명령어로 조회' 질문 입니다.

해결됨

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 안녕하세요? 프로젝션 쿼리에 new 명령어 관련 헷갈리는 부분이 있어서 질문 드립니다! try{ Member member = new Member(); member.setUsername("member1"); member.setAge(10); em.persist(member); em.flush(); em.clear(); List<MemberDTO> result = em.createQuery("SELECT new jpql.MemberDTO(m.username, m.age) FROM Member m", MemberDTO.class) .getResultList(); MemberDTO memberDTO = result.get(0); System.out.println("memberDTO = " + memberDTO.getAge()); System.out.println("memberDTO = " + memberDTO.getUsername()); tx.commit(); } 위와 같은 쿼리를 실행하게 되면 상위에서 생성한 member 객체에 있는 값을 result 로 복사하고 result 값을 memberDTO List의 인덱스 0으로 들어 간 값을 조회하라는 뜻이 맞는건가요..? 수업듣다가 제가 이해한게 맞는지 헷갈려서 질문 드립니다.. 답변 부탁드립니다!! 감사합니다.

• java
• jpa

섹션 7 GraphQL 관련 질문 드립니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 섹션 04-05-graphql-mutation-product 따라하고 있는데 도중에 저런 에러 메세지가 떴습니다. 디버깅 하려고 해도 Network 부분에 message 부분이 안 뜨네요ㅠ 검색해보니 쿠키 및 인터넷 기록 삭제해보라고 나오는데.. 삭제해도 해결이 안 되고요ㅠㅠ 어떻게 해야 해결될까요? 도움 부탁드립니다

• react
• node.js
• seo
• graphql
• next.js

SpinLock & Busy Waiting 강의 질문입니다.

미해결

자바 동시성 프로그래밍 [리액티브 프로그래밍 Part.1]

안녕하세요! 강의 너무 잘 듣고 있는 수강생입니다. 이전 동기화와 CPU의 관계 강의에서는 CPU가 두 개 이상의 명령어를 처리하면 원자성이 보장이 안된다고 설명을 하셨는데, SpinLock & Busy Waiting 강의에서 test_and_set(int *lock) 메서드는 CPU 하드웨어 계층에서 원자성이 보장된다는 게 이해가 잘 가지를 않습니다. test_and_set(int *lock) 이 메서드는 하나의 명령어만 처리하는 건가요??

• java
• 동시성
• multithread
• synchronisation

크로스브라우징-크롬

미해결

반응형 웹사이트 포트폴리오(Architecture Agency)

선생님 안녕하세요. 서브페이지 모바일로 변환하기를 마치고 마지막으로 크로스 브라우징을 하는 과정에서 크롬으로 서버를 바꿔서 해봤는데 엣지로 했을 때 보다 웹페이지가 엄청 확대되어서 나옵니다. 어떻게 해야 하나요? 제가 일일이 수정 해야 하나요? (저는 평소 엣지가 편해서 서버를 엣지로 설정하고 연습했어요. ) 선생님! 그리로 서버를 크롬으로 설정하고 연습하는게 오히려 낫나요? 그리고 마지막 질문이요! 포토폴리오 만들 때 웹사이트를 해외사이트로만 만들면 별로 보기 안 좋나요??

• HTML/CSS
• jquery
• 웹-디자인
• 크롬
• 엣지
• 크로스브라우징

8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다.

해결됨

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

8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다. 깃허브에는 7.7 챕터가 따로 있던데... 혹시 그 브랜치에 site안의 page파일을 그대로 사용하면 될까요??

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

is not valid JSON 에러 ..!

미해결

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

import { http, HttpResponse } from "msw"; const testData = [ { result: "success", userId: 2, nickname: "닉네임", favoriteCount: 223, viewCount: 336, position: "Backend", userFileUrl: "/Users/user/Desktop/pictures/userPicture.jpg", year: "경력없음", techStack: "react, java, ---", softSkill: "소통, 적극성, ---", links: "http://블로그주소", alarmStatus: true, content: "안녕하세요 구인 중입니다", }, ]; export const handlers = [ http.post("/api/post", () => { return HttpResponse.text(JSON.stringify("ok")); }), http.get("/api/get", ({ request }) => { console.log("request", request); return HttpResponse.json(testData); }), ]; export default handlers;"use client"; import { redirect } from "next/navigation"; export default function Home() { const handleClick = () => { fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/get`, { method: "get", }) .then((res) => console.log("res", res.json())) // JSON 형식으로 변환된 데이터를 가져옴 .then((data) => console.log("res?", data)); // JSON 데이터를 로그에 출력 }; return ( <> <div> <button onClick={handleClick}>test btn</button> <p>계정을 생성하세요</p> <form> <div> <> <label htmlFor="id">아이디</label> <input type="text" id="id" name="id" required /> </> <> <label htmlFor="name">이름</label> <input type="text" id="name" name="name" required /> </> <button type="submit">가입하기</button> </div> </form> </div> </> ); } browser.ts, handlers.ts, http.ts, MSWComponent.tsx, server.ts 는 제로초님과 다 동일하게 설정하였고 get부분에서 위와같이 하였는데 Unexpected token '<', "<!DOCTYPE "... is not valid JSON 라는 에러가 계속 발생합니다 ㅠㅠ 어떤부분이 문제일까요.. ! console.log("res", res.json())) 이부분에서 res만 콘솔로 확인하면 이렇게 나옵니다..!

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

섹션6 질문입니다

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

스크롤 내렸을 때는 문제가없는데 스크롤 올릴 시 .con02의 .worklist와 .title이 높이 올라갔다가 다시 원위치되는 현상이 발생합니다.

• HTML/CSS
• 포트폴리오
• 반응형-웹
• gsap
• scrolltrigger

reset.css 와 style.css 에 넣을 문장들 구분하기 질문드립니다.

미해결

모바일 웹 퍼블리싱 포트폴리오 with Figma

강의에서 h1, h2, h3 의 폰트사이즈는 reset.css 파일에 들어가고 body의 폰트사이즈는 style.css 파일에 들어가고 *의 box-sizing: border-box 는 reset.css 파일에 들어가는데 body의 margin 0은 style.css에 들어가는데 body의 폰트사이즈나 margin:0도 reset.css 파일에 넣어도 되나요? 개인별로 스스로 편한대로 넣어도 되는지 아니면 혹시 body에 주는 css들은 style.css에 넣는게 권장되는건지 궁금합니다.

• HTML/CSS
• jquery
• 모바일-디자인
• figma
• 포트폴리오

무한 스크롤 prefetch SSR 로그인 쿠키 관련 질문

해결됨

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

안녕하세요 제로초님, api/users/{id} 에서 Followers 데이터는 제가 상대방을 팔로잉 했고 로그인 정보 쿠키가 잘 전달되면 상대방의 팔로워 수와 관계없이 제가 팔로우 했다면 저의 userId만 배열에 담겨서 돌아오기 때문에 api/posts/followings 혹은 api/posts/recommends의 Comments 데이터도 이와 동일할 것이라고 생각했습니다. 추천 포스트는 prefetch를 진행하고( Suspense를 적용하지 않음) 팔로잉 포스트는 SSR을 할 때 서버에서 로그인 여부를 판단하는 쿠키를 함께 보내야 하기 때문에 prefetch에서는 next의 cookies를 사용해서 쿠키를 전달했습니다 . 하지만 Comments 배열에 로그인 유저가 아닌 다른 유저의 id도 함께 날라옵니다. 추천 포스트가 아닌 팔로잉 포스트는 useSuspenseInfiniteQuery를 사용했는데 로그인 유저의 id만 잘 전달받았습니다. 이게 Suspense 내부에 있어서 그런가 싶어서 Suspense를 걷어내고 prefetch만 사용했을 때도 동일하게 로그인 유저가 아닌 다른 유저의 id도 확인할 수 있었습니다. 왜 로그인 쿠키를 보내는데도 다른 유저의 정보도 날라오는지 궁금합니다. 어디가 잘못된 것일까요? useSuspenseInfiniteQuery를 사용한 팔로잉 포스트는 추천 포스트와 어떤점이 달라서 정상 작동한 것일까요? 추가) 이 글 작성하고 추천 포스트에도 useSuspenseInfiniteQuery를 적용했는데 팔로잉 포스트처럼 안 나오고 이전과 동일하게 다른 유저의 id도 함께 날라오는데 왜 그럴까요? 추천 포스트 결과 현재 로그인 한 유저의 id는 'jihwan3' Comments에 'jihwan2'도 함께 날라오는중 팔로잉 포스트 결과 현재 로그인 한 유저의 id는 'jihwan3' Comments에 'jihwan3'만 날라오는 중 Hearts도 jihwan3가 좋아요를 안 눌러서 비어있는 모습 page.tsx import { Suspense } from "react"; import { auth } from "@/auth"; import { Container } from "./_component/styled"; import HomeTab from "./_component/HomeTab"; import HomeTabProvider from "./_component/HomeTabProvider"; import PostForm from "./_component/PostForm"; import SuspenseDecider from "./_component/SuspenseDecider"; import Loading from "../_component/LoadingUI"; export default async function Home() { const session = await auth(); return ( <Container> <HomeTabProvider> <HomeTab></HomeTab> <PostForm me={session} /> <Suspense fallback={<Loading />}> {/* @ts-expect-error Server Component */} <SuspenseDecider /> </Suspense> </HomeTabProvider> </Container> ); } SuspenseDecider.tsx import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getRecommendPosts from "../_lib/getRecommendPosts"; import getRecommendPostsServer from "../_lib/getRecommendPostsServer"; import PostDisplay from "./PostDisplay"; export default async function SuspenseDecider() { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ["posts", "recommends"], queryFn: getRecommendPostsServer, initialPageParam: 0, getNextPageParam: (lastPage, pages) => lastPage.at(-1)?.postId, pages: 1, }); return ( <HydrationBoundary state={dehydrate(queryClient)}> <PostDisplay /> </HydrationBoundary> ); } getRecommendPostsServer.ts import { QueryFunction } from "@tanstack/query-core"; import { Post as IPost } from "@/model/Post"; import { cookies } from "next/headers"; type Prop = { pageParam: number; }; const getRecommendPostsServer: QueryFunction<IPost[], [_1: string, _2: string], number> = async ({ pageParam }: Prop) => { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { method: "get", headers: { Cookie: cookies().toString(), }, }); if (response.ok) return response.json(); else throw new Error(); }; export default getRecommendPostsServer; postDisplay.tsx "use client"; import { use } from "react"; import { TabContext } from "./HomeTabProvider"; import RecommendPosts from "./RecommendPosts"; import FollowingPosts from "@/app/(afterLogin)/home/_component/FollowingPosts"; export default function PostDisplay() { const { selectedMenu } = use(TabContext); if (selectedMenu === "recommend") { return <RecommendPosts />; } return <FollowingPosts />; } RecommendPosts.tsx "use client"; import { useEffect, Fragment } from "react"; import { InfiniteData, useInfiniteQuery } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import getRecommendPosts from "../_lib/getRecommendPosts"; import Post from "../../_component/Post"; import { Post as IPost } from "@/model/Post"; export default function RecommendPosts() { const { isFetching, fetchNextPage, hasNextPage, data } = useInfiniteQuery<IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number>({ queryKey: ["posts", "recommends"], queryFn: getRecommendPosts, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, }); const { ref, inView } = useInView({ /* Optional options */ threshold: 0, delay: 100, }); useEffect(() => { if (inView) !isFetching && hasNextPage && fetchNextPage(); }, [inView, isFetching, hasNextPage, fetchNextPage]); if (!data) return null; // 이거 에러는...? type error인데.. -> InfiniteData로 해결 return ( <> {data.pages.map((ele: IPost[], idx: number) => ( <Fragment key={idx}> {ele.map((post: IPost) => ( <Post key={post.postId} post={post}></Post> ))} </Fragment> ))} <div ref={ref} style={{ height: "50px" }}></div> </> ); } getRecommendPost.ts import { QueryFunction } from "@tanstack/query-core"; import { Post as IPost } from "@/model/Post"; type Prop = { pageParam: number; }; const getRecommendPosts: QueryFunction<IPost[], [_1: string, _2: string], number> = async ({ pageParam }: Prop) => { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { method: "get", credentials: "include", }); if (response.ok) return response.json(); else throw new Error(); }; export default getRecommendPosts; FollowingPosts.tsx "use client"; import { Fragment, useEffect } from "react"; import { useSuspenseInfiniteQuery, InfiniteData } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import getFollowingPosts from "../_lib/getFollowingPosts"; import Post from "../../_component/Post"; import { Post as IPost } from "@/model/Post"; export default function FollowingPosts() { const { isFetching, fetchNextPage, hasNextPage, data } = useSuspenseInfiniteQuery<IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number>({ queryKey: ["posts", "followings"], queryFn: getFollowingPosts, initialPageParam: 0, getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => lastPage.at(-1)?.postId, }); const { ref, inView } = useInView({ threshold: 0, delay: 100, }); useEffect(() => { if (inView) !isFetching && hasNextPage && fetchNextPage(); }, [inView, fetchNextPage, hasNextPage, isFetching]); if (!data) return null; return ( <> {data.pages.map((ele: IPost[], idx: number) => ( <Fragment key={idx}> {ele.map((ele) => ( <Post key={ele.postId} post={ele}></Post> ))} </Fragment> ))} <div ref={ref} style={{ height: "100px" }}></div> </> ); }

• react
• next.js
• react-query