172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 질문드릴게 있습니다. '/compose/tweet' 모달창은 인터셉팅 라우트 + 페럴렐 라우트로 CSR 통한 접속은 잘 모달이 뜹니다. ->(버튼을 클릭해서 모달창 뜨는 것을 말합니다.) 하지만 만약 바로 URL직접 입력했을 때 (혹은 새로고침) 할 때는 뜨지 않습니다. 인터셉팅이 되지 않으니 import Home from "@/app/(afterLogin)/home/page"; // (afterLogin)/compose/tweet export default function Page() { return <Home />; } 아마 여기서 Home에서 구현한 것만 뜨고, 모달로 구현한 것은 뜨지 않는 것 같습니다. 하지만 실제 트위터에서는 바로 모달창이 뜨는 형태로 됩니다. 어떻게 하면 새로고침/바로URL접속 에도 compose/tweet/ 모달창이 뜨게 할 지 조언을 구해봅니다. (직접 뒤에 배경 + 별도의 모달창을 바로 띄우는 생각은 했지만 다른 방식이 있는지 궁금합니다) import Home from "@/app/(afterLogin)/home/page"; import TweetModal from "../../@modal/(.)compose/tweet/page"; export default function Page() { return ( <> <Home /> <TweetModal /> </> ); } 버전은 15.3.0 입니다. 현재 사용하고 있는 폴더 구조는 아래와 같습니다. 📦src ┣ 📂app ┃ ┣ 📂(afterLogin) ┃ ┃ ┣ 📂@modal ┃ ┃ ┃ ┣ 📂(.)compose ┃ ┃ ┃ ┃ ┗ 📂tweet ┃ ┃ ┃ ┃ ┃ ┣ 📜modal.module.css ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┣ 📂[username] ┃ ┃ ┃ ┃ ┣ 📂status ┃ ┃ ┃ ┃ ┃ ┗ 📂[id] ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂photo ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂[photoId] ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜photoModal.module.css ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜default.tsx ┃ ┃ ┃ ┃ ┗ 📜default.tsx ┃ ┃ ┃ ┗ 📜default.tsx ┃ ┃ ┣ 📂[username] ┃ ┃ ┃ ┣ 📂status ┃ ┃ ┃ ┃ ┗ 📂[id] ┃ ┃ ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📜CommentForm.tsx ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜commentForm.module.css ┃ ┃ ┃ ┃ ┃ ┣ 📂photo ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂[photoId] ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┃ ┃ ┗ 📜singlePost.module.css ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┗ 📜profile.module.css ┃ ┃ ┣ 📂_components ┃ ┃ ┃ ┣ 📜ActionButtons.tsx ┃ ┃ ┃ ┣ 📜BackButton.tsx ┃ ┃ ┃ ┣ 📜FollowRecommand.tsx ┃ ┃ ┃ ┣ 📜LogoutButton.tsx ┃ ┃ ┃ ┣ 📜NavMenu.tsx ┃ ┃ ┃ ┣ 📜Post.tsx ┃ ┃ ┃ ┣ 📜PostArticle.tsx ┃ ┃ ┃ ┣ 📜PostImages.tsx ┃ ┃ ┃ ┣ 📜RightSearchZone.tsx ┃ ┃ ┃ ┣ 📜SearchForm.tsx ┃ ┃ ┃ ┣ 📜Trend.tsx ┃ ┃ ┃ ┣ 📜TrendSection.tsx ┃ ┃ ┃ ┣ 📜followRecommend.module.css ┃ ┃ ┃ ┣ 📜logout.module.css ┃ ┃ ┃ ┣ 📜navMenu.module.css ┃ ┃ ┃ ┣ 📜post.module.css ┃ ┃ ┃ ┣ 📜rightSearchZone.module.css ┃ ┃ ┃ ┣ 📜trend.module.css ┃ ┃ ┃ ┗ 📜trendSection.module.css ┃ ┃ ┣ 📂compose ┃ ┃ ┃ ┗ 📂tweet ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂explore ┃ ┃ ┃ ┣ 📜explore.module.css ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂home ┃ ┃ ┃ ┣ 📂_components ┃ ┃ ┃ ┃ ┣ 📜PostForm.tsx ┃ ┃ ┃ ┃ ┣ 📜Tab.tsx ┃ ┃ ┃ ┃ ┣ 📜TabProvider.tsx ┃ ┃ ┃ ┃ ┣ 📜postForm.module.css ┃ ┃ ┃ ┃ ┗ 📜tab.module.css ┃ ┃ ┃ ┣ 📜home.module.css ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂messages ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂search ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┗ 📜Tab.tsx ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┗ 📜search.module.css ┃ ┃ ┣ 📜layout.module.css ┃ ┃ ┗ 📜layout.tsx ┃ ┣ 📂(beforeLogin) ┃ ┃ ┣ 📂@modal ┃ ┃ ┃ ┣ 📂(.)i ┃ ┃ ┃ ┃ ┗ 📂flow ┃ ┃ ┃ ┃ ┃ ┣ 📂login ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┃ ┃ ┗ 📂signup ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┗ 📜default.tsx ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜LoginModal.tsx ┃ ┃ ┃ ┣ 📜Main.tsx ┃ ┃ ┃ ┣ 📜SignupModal.tsx ┃ ┃ ┃ ┣ 📜login.module.css ┃ ┃ ┃ ┣ 📜main.module.css ┃ ┃ ┃ ┗ 📜signup.module.css ┃ ┃ ┣ 📂i ┃ ┃ ┃ ┗ 📂flow ┃ ┃ ┃ ┃ ┣ 📂login ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┃ ┗ 📂signup ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂login ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📜layout.tsx ┃ ┃ ┣ 📜page.module.css ┃ ┃ ┗ 📜page.tsx ┃ ┣ 📜favicon.ico ┃ ┣ 📜globals.css ┃ ┣ 📜layout.tsx ┃ ┗ 📜not-found.tsx ┣ 📂components ┃ ┗ 📜RecordChangePathComponent.tsx ┗ 📂util ┃ ┗ 📜getBeforePath.ts
react next.js interceptingroute parallelroute
피곤한개발자
2025-04-13T23:04:37.126Z
댓글 2
좋아요 0
조회수 151
해결됨
Next.js와 yolov11로 화재감지 시스템 구축하기
훤@□□□□ MINGW64 /c/LeeHwon/FlameGuard/FlameGuard/frontend (main) $ pnpm install bash: pnpm: command not found 이렇게 안 뜨는 이유가 무엇일까요..
react python next.js FastAPI yolo
2025-04-13T17:49:26.681Z
댓글 2
좋아요 0
조회수 1143
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
js 공부중인데 여기서 aa 와 "aa"결과값이 다르게 나오는데 1.이유가 뭔가요? 2.둘 차이점이 뭔가요? 자세하게 부탁드립니다 ㅠㅠ
react react-native 하이브리드-앱 graphql next.js
H Hun
2025-04-13T16:31:51.208Z
댓글 1
좋아요 0
조회수 68
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
안녕하세요. 강의와 강의 자료를 보는 도중, 강의 자료에 있는 고아객체 - 주의 부분에서, @OneToOne, @OneToMany만 가능한 이유 에 대해서는 특별히 설명을 안해주신거 같아서요.. 혹시 @OneToOne, @OneToMany만 가능한 이유가 무엇인지 알 수 있을까요? 감사합니다.
오리쉐리
2025-04-13T15:27:59.043Z
댓글 2
좋아요 0
조회수 128
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
X y = new Y(); 여기서 태어날때 생성자가 없어서 무시해도 된다는게 생성자가 있는지 없는지 보는 기준 모르겠어요 헷갈려서 ..
민혁
2025-04-13T12:51:54.608Z
댓글 2
좋아요 1
조회수 69
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
어디서 받을수 있나요~
박현서
2025-04-13T12:43:27.875Z
댓글 2
좋아요 0
조회수 146
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수업 노트 보기에서 노션에 들어가면 따로 즐겨찾기를 할 수 있는 기능이 없는데 어떻게 해야 되나요?
react react-native 하이브리드-앱 graphql next.js
0요
2025-04-13T12:42:28.214Z
댓글 2
좋아요 0
조회수 470
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
단순한 java 질문인데 만약 부모, 자식 class가 있고, 자식이 부모를 상속받고 생성할때 오직 업캐스팅 형태에서만 자식 생성자를 생성할 때 부모 생성자를 만들고 생성하는 건가요? 아니면 업캐스팅이 아닌 일반적으로 자식 생성자를 생성할때도 부모 생성자를 불러서 생성해야 하나요?
gudwls5225
2025-04-13T12:21:14.805Z
댓글 2
좋아요 0
조회수 83
미해결
토비의 스프링 6 - 이해와 원리
13:39에 28라인에 return new WebApiExRateProvider(apiTemplate()); 가 아니라 return new WebApiExRateProvider(apiTemplate()); 로 작성되야지 의도대로 코드가 작동하는 것이 아닌지 문의드립니다.
2025-04-13T11:32:39.338Z
댓글 2
좋아요 0
조회수 120
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
혹시 문제 중에 // 천원짜리 4장 출력 등의 설명까지 같이 기출이 된 부분일까요? 아님 주말코딩님께서 우리 이해하기 쉬우라고 설명을 적어주신걸까요?
남찬우
2025-04-13T10:04:15.503Z
댓글 1
좋아요 0
조회수 69
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
오른쪽 코드에서 s가 포인터 변수로 선언이 되었으면 값을 출력할 때 *s[0]으로 써야하지 않나요?
dbndus0024
2025-04-13T09:43:20.717Z
댓글 2
좋아요 0
조회수 77
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
강의소개에 있는 pdf파일을 찾으려는데, 암만 찾아도 보이지 않습니다. 인프런 아이디(이메일)에도 없는데 어디서 다운로드 가능한가요?
직녀
2025-04-13T09:14:31.007Z
댓글 3
좋아요 0
조회수 106
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
코드 파트는 잘 이해하고 공부 진행 했는데 이론파트 첫 강의부터 영상이 아닌 페이지라서 어떻게 공부를 해야될지 길을 잃은 느낌입니다. 이론 섹션에 들어갈때 첫 영상으로 어떻게 공부해야되는지 설명이라도 해주셨으면 좋았을 거 같습니다.. PDF랑 페이지랑 안에 내용은 또 다른 내용이라 더 혼란스럽습니다. 페이지를 가볍게 이해하고 PDF 파일을 외우라는 의도인지 아니면 둘 다 외우라는 의도인지 궁금합니다. 첫 페이지를 들어가보면 "요구사항 분석 챕터에서 중요한 부분 정리" 라고 적혀있으나 받아들이는 입장에서 중요한 부분인데 왜 PDF에는 이거에 관한 내용이 없는거지? 이 두개의 차이점은 뭐지? 라는 생각이 듭니다.
sbd
2025-04-13T09:08:25.570Z
댓글 2
좋아요 0
조회수 227
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 설치된 익스텐션이 궁금하여 질문드립니다. 17:20에 return문에 h1태그를 추가하고 저장하시니까 ()가 자동으로 감싸지는데 어떤 익스텐션을 설치해야하나요? 아니면 어떤 설정을 해야하나요?
김보섭
2025-04-13T08:14:37.953Z
댓글 1
좋아요 0
조회수 114
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
안녕하세요 선생님 섹션2 마지막 강의 3개(함수 선언과 호출, 연산자와 기출문제, switch-case문) 강의자료가 없는데 원래 없는건지 문의드립니다.
knh6765
2025-04-13T08:08:58.840Z
댓글 2
좋아요 0
조회수 62
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
선생님 최근까지 시험 계속 본 사람인데요ㅜ 요즘 문제가 예를 들어서, 문제 : 입력 자료에 초점을 맞춰 테스트 케이스를 만들고 검사하는 방법 설명 보기 : ㄱ. Equivalence Partitioning, ㄴ. Boundary Value Analysis 답 : ㄱ 이렇게 보기가 영어로 나올때가 있는데 블랙박스테스트는 영어로 단어가 설명 안되어있어요ㅠ 근데 지피티한테 물어봐도 영어를 모르겠어서여ㅜㅜ 제가 책은 없고 선생님 자료로 수강중이라 이론 자료에 영어 단어도 부탁드립니다ㅜㅜ
2025-04-13T07:26:34.277Z
댓글 2
좋아요 0
조회수 127
해결됨
한 입 크기로 잘라먹는 Next.js
import style from "./page.module.css"; // 변경 후: import Image from 'next/image'; import { notFound } from "next/navigation"; import { BookData } from "@/types"; export const dynamicParams = true; export async function generateStaticParams() { return [{id: "1"}, {id: "2"}, {id: "3"}]; } async function BookDetail({bookId}:{bookId:string}){ // params가 Promise이므로 먼저 await로 해결(resolve)해야 합니다 const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${bookId}`) ; if (!response.ok){ if (response.status === 404) { notFound(); } return <section>Failed to fetch books</section>; } const book = await response.json(); const { id, title, subTitle, description, author, publisher, coverImgUrl } = book; return ( <section> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} alt={title || "책 표지"} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </section> ); } function ReviewEditForm() { async function createReviewAction(formData: FormData) { "use server"; //console.log("server action called"); const content = formData.get("content")?.toString(); const author = formData.get("author")?.toString(); console.log("server action called", { content, author }); } return ( <section > <h2>리뷰 작성</h2> <form action={createReviewAction}> <textarea name="content" placeholder="리뷰를 작성해주세요" ></textarea> <input name="author" placeholder="작성자" /> <button type="submit">리뷰 작성</button> </form> </section> ); } export default function Page({ params }: { params: { id: string } }) { // const bookId = params.id; // 미리 params 처리 return ( <div className={style.container}> <BookDetail bookId={params.id}/> <ReviewEditForm/> </div> ) } 에서 Error: Route "/book/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at Page (src\app\book\[id]\page.tsx:79:33) 77 | return ( 78 | <div className={style.container}> > 79 | <BookDetail bookId={params.id}/> | ^ 80 | <ReviewEditForm/> 81 | </div> 82 | ) 이에러가 계속 나는데 chatgpt랑 계속 풀어 보려고 해도 쉽지 않네요 params 쓰는 시점 문제인거 같은데 강의 내용을 봐서는 잘모르겠네요 export default function Page({ params }: { params: { id: string } }) { // const bookId = params.id; // 미리 params 처리 return ( <div className={style.container}> <BookDetail bookId={params.id}/> <ReviewEditForm/> </div> ) } bookId 이 부분이 계속 async 어쩌구 하는데
Ming
2025-04-13T03:08:42.208Z
댓글 2
좋아요 0
조회수 166
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
안녕하세요 강사님 이제 이론 파트로 넘어왔는데 PDF 파일이랑 수업자료 파일이랑 내용이 달라서 어떤걸 기준으로 봐야되는걸까요? 같은 내용인줄 알았는데 제목만 같고 안에 내용이 좀 달라서 질문 드립니다.
sbd
2025-04-12T19:13:25.880Z
댓글 2
좋아요 0
조회수 172
해결됨
스프링부트로 직접 만들면서 배우는 대규모 시스템 설계 - 게시판
학습 관련 질문을 최대한 상세히 남겨주세요! 고민 과정도 같이 나열해주셔도 좋습니다. 먼저 유사한 질문이 있었는지 검색해보세요. 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 거의 막바지에 이르러서 테스트 부분을 들으려 하고 있습니다 테스트 부분에서 강의 코드와 같이 맞춰 보아도 에러가 발생하여 어떤 에러인지 감이 잘 잡히지 않아 질문드립니다. 최하단에 에러 로그를 첨부합니다. 저장소의 완성 코드 파라미터대로 하면 성공하지만, 강의대로 하면 에러가 납니다 이것은 저장소의 완성본 코드이고 @Test void readAllTest() { ArticleReadPageResponse response1 = articleReadRestClient.get() .uri("/v1/articles?boardId=%s&page=%s&pageSize=%s".formatted(1L, 3000L, 5)) .retrieve() .body(ArticleReadPageResponse.class); System.out.println("response1.getArticleCount() = " + response1.getArticleCount()); for (ArticleReadResponse article : response1.getArticles()) { System.out.println("article.getArticleId() = " + article.getArticleId()); } ArticleReadPageResponse response2 = articleRestClient.get() .uri("/v1/articles?boardId=%s&page=%s&pageSize=%s".formatted(1L, 3000L, 5)) .retrieve() .body(ArticleReadPageResponse.class); System.out.println("response2.getArticleCount() = " + response2.getArticleCount()); for (ArticleReadResponse article : response2.getArticles()) { System.out.println("article.getArticleId() = " + article.getArticleId()); } 이것은 에러가 발생하는 강의의 코드입니다. @Test void readAllTest(){ ArticleReadPageResponse response1 = articleReadRestClient.get() .uri("/v1/articles?boardId=%s&page=%s&pageSize=%s".formatted(1L, 1L, 5)) .retrieve() .body(ArticleReadPageResponse.class); System.out.println("response1 = " + response1); for (ArticleReadResponse article : response1.getArticles()) { System.out.println("article.getArticleId() = " + article.getArticleId()); } ArticleReadPageResponse response2 = articleRestClient.get() .uri("/v1/articles?boardId=%s&page=%s&pageSize=%s".formatted(1L, 1L, 5)) .retrieve() .body(ArticleReadPageResponse.class); System.out.println("response2 = " + response2); for (ArticleReadResponse article : response2.getArticles()) { System.out.println("article.getArticleId() = " + article.getArticleId()); } } 이것은 에러 로그입니다 (본문 제한으로 부득이하게 이미지로 첨부합니다)
java mysql spring-boot kafka redis
woo
2025-04-12T17:32:40.904Z
댓글 2
좋아요 0
조회수 174
해결됨
한 입 크기로 잘라먹는 Next.js
3.5) 리액트 서버 컴포넌트 주의사항 강의의 12분 쯤 - 서버 컴포넌트를 클라이언트 컴포넌트의 children props로 사용하면, 브라우저에서 서버컴포넌트가 렌더링 되지 않는 걸 보여주는 예시에서요. (with-searchbar)/page.tsx1 (with-searchbar)/client-component.tsx (with-searchbar)/server-component.tsx 현재 잘 따라한거 같은데, 서버 컴포넌트가 브라우저에 출력이 되더라구요. 서버 컴포넌트로서 출력이 된거 같긴한데. 브라우저에서 서버 컴포넌트가 보이면 안되는 거 아닌가 싶은데, 현재 next 15.3 이라서 그런건가 싶기도 하구요!
파미에스테이션
2025-04-12T13:12:29.991Z
댓글 2
좋아요 1
조회수 220
