173만명의 커뮤니티!! 함께 토론해봐요.
미해결
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
미해결
[왕초보편] 앱 8개를 만들면서 배우는 안드로이드 코틀린(Android Kotlin)
<intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> 위 문장을 붙여 넣기 한 직후 안드로이드 스튜디오 미어캣 버전이나 돌핀 버전 모두에서 에러가 나며 실행되지 않습니다. 돌핀에선 "Nullpointer exception error"가 나타나고 미어캣에선 "Element intent-filter is not allowed here: 18"이라고 에러가 뜨며 실행되지 않습니다. 아마도 인텐트 문장을 쓰는게 문제인 듯 한데 강사님의 안드로이드 스튜디오 버전과 설정사항을 알려주시면 해결할 수 있지 않을까 합니다. 답변 부탁드립니다.
2025-04-13T18:43:40.116Z
댓글 2
좋아요 0
조회수 103
해결됨
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
조회수 1164
미해결
[Level 1] Qt를 이용한 Python 프로그래밍: 입문편
Re-entrancy를 만족하는 Thread 예제 구현 Part2 를 듣는중에 갑자기 mutex, incNumber는 global 안붙여도 제대로 동작하길래 무슨 원리일까요?
padohy
2025-04-13T16:34:45.822Z
댓글 2
좋아요 1
조회수 135
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
js 공부중인데 여기서 aa 와 "aa"결과값이 다르게 나오는데 1.이유가 뭔가요? 2.둘 차이점이 뭔가요? 자세하게 부탁드립니다 ㅠㅠ
react react-native 하이브리드-앱 graphql next.js
H Hun
2025-04-13T16:31:51.208Z
댓글 1
좋아요 0
조회수 68
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
X y = new Y(); 여기서 태어날때 생성자가 없어서 무시해도 된다는게 생성자가 있는지 없는지 보는 기준 모르겠어요 헷갈려서 ..
민혁
2025-04-13T12:51:54.608Z
댓글 2
좋아요 1
조회수 69
해결됨
350개의 개인 앱을 만들어 월급의 7배 수익을 달성한 방법
앱을 제작했는데, 배포 전에 궁금해서 여쭤봅니다. 구글 플레이에 앱을 출시하려면 테스트 계정 20명을 등록해줘야한다고 하는데요 이건 기준이 어떻게 되나요? 매번 앱을 초기 배포할 때마다 테스트 계정 20명을 등록해야한다. 개발자 계정 당 한 번만 테스트 계정 20명을 등록해야한다. 개발자 계정과는 무관하고 구글 계정만 있으면 테스트 계정 20명 등록은 한 번만 하면 된다. 셋 중에 어느 것이 실제 해당하게 되나요? 예전에 만든 개발자 계정은 관련 없다는데 미리 개발자 계정을 만들어 두지 않은 것을 후회합니다 ㅜ
android Google-Ads admob 수익화 구글 플레이스토어 테스트계정 앱출시 테스트 비공개
bascat
2025-04-13T12:51:19.590Z
댓글 2
좋아요 0
조회수 1785
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
어디서 받을수 있나요~
박현서
2025-04-13T12:43:27.875Z
댓글 2
좋아요 0
조회수 148
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수업 노트 보기에서 노션에 들어가면 따로 즐겨찾기를 할 수 있는 기능이 없는데 어떻게 해야 되나요?
react react-native 하이브리드-앱 graphql next.js
0요
2025-04-13T12:42:28.214Z
댓글 2
좋아요 0
조회수 473
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
단순한 java 질문인데 만약 부모, 자식 class가 있고, 자식이 부모를 상속받고 생성할때 오직 업캐스팅 형태에서만 자식 생성자를 생성할 때 부모 생성자를 만들고 생성하는 건가요? 아니면 업캐스팅이 아닌 일반적으로 자식 생성자를 생성할때도 부모 생성자를 불러서 생성해야 하나요?
gudwls5225
2025-04-13T12:21:14.805Z
댓글 2
좋아요 0
조회수 83
미해결
파이썬 알고리즘 트레이딩 파트2: Interactive Brokers API를 활용한 실시간 알고리즘 트레이딩
data_1d_1y 변수 미생성 섹션4 : 실시간 거래 준비... 시간 (2:22) get_positions_summary(...)함수 사용시, data_1d_1y = yf.download (tickers = stocks, period="1y",interval="1d", progress = False)['Close'] 변수가 생성되어 있지않아 애러가 발생합니다. *추가 1파트에서는 말씀을 한번해주셨는데 'Adj Close' -> 'Close'로 변경된 걸 한번 말씀해주셔도 좋을 것같습니다.
seoya0106
2025-04-13T10:13:42.304Z
댓글 1
좋아요 0
조회수 122
미해결
코드로 배우는 React 19 with 스프링부트 API서버
동영상 강의에 있는 내용대로 ProductController에서 @GetMapping("/list")에 @PreAuthorize("hasAnyRole('ROLE_USER','ROLE_ADMIN')")를 작성하고나서 postman에 login 후 accessToken을 가져와서 get방식으로 토큰을 넣어서 입력하면 status : 500, "error": Interner Server Error가 뜹니다.. @PreAuthorize부분을 주석처리하고 실행해보면 list값이 잘 나오네요.. 어디부분이 잘못 된걸까요?? 참고로 CustomSecurityConfig클래스에 @EnableMethodSecurity추가도 했습니다. @PreAuthorize("hasAnyRole('ROLE_USER','ROLE_ADMIN')") @GetMapping("/list") public PageResponseDTO<ProductDTO> list(PageRequestDTO pageRequestDTO){ return productService.getList(pageRequestDTO); } 여기가 ProductController 클래스 package org.zerock.apiserver.security.filter; import com.google.gson.Gson; import jakarta.servlet.FilterChain; import jakarta.servlet.ServletException; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import lombok.extern.log4j.Log4j2; import org.springframework.security.authentication.UsernamePasswordAuthenticationToken; import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.web.filter.OncePerRequestFilter; import org.zerock.apiserver.dto.MemberDTO; import org.zerock.apiserver.util.JWTUtil; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import java.util.Map; @Log4j2 public class JWTCheckFilter extends OncePerRequestFilter { @Override protected boolean shouldNotFilter(HttpServletRequest request) throws ServletException { //true == not check String path = request.getRequestURI(); log.info("------check uri---------"+path); if(path.startsWith("/api/member/")){ return true; } //false == check return false; } @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { log.info("----------------------"); log.info("----------------------"); log.info("----------------------"); String autoHeaderStr = request.getHeader("Authorization"); //bearer // 7개 후 JWT 문자열 try { String accessToken = autoHeaderStr.substring(7); Map<String, Object> claims = JWTUtil.validateToken(accessToken); log.info("JWT claims: " + claims); // filterChain.doFilter(request, response); String email = (String) claims.get("email"); String pw = (String) claims.get("pw"); String nickname = (String) claims.get("nickname"); Boolean social = (Boolean) claims.get("social"); List<String> roleNames = (List<String>) claims.get("roleNames"); MemberDTO memberDTO = new MemberDTO(email, pw, nickname, social.booleanValue(), roleNames); log.info("---------------------------------"); log.info(memberDTO); log.info(memberDTO.getAuthorities()); UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(memberDTO, pw, memberDTO.getAuthorities()); SecurityContextHolder.getContext().setAuthentication(authenticationToken); filterChain.doFilter(request, response); }catch(Exception e){ log.error("JWT Check Error --------------------"); log.error(e.getMessage()); Gson gson = new Gson(); String msg = gson.toJson(Map.of("error", "ERROR_ACCESS_TOKEN")); response.setContentType("application/json"); PrintWriter printWriter = response.getWriter(); printWriter.println(msg); printWriter.close(); } //destination filterChain.doFilter(request, response); } } 여기가 JWTCheckFilter부분입니다.
react spring-boot jpa jwt redux-toolkit
tobot222
2025-04-13T10:08:19.075Z
댓글 2
좋아요 0
조회수 177
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
혹시 문제 중에 // 천원짜리 4장 출력 등의 설명까지 같이 기출이 된 부분일까요? 아님 주말코딩님께서 우리 이해하기 쉬우라고 설명을 적어주신걸까요?
남찬우
2025-04-13T10:04:15.503Z
댓글 1
좋아요 0
조회수 69
미해결
Slack 클론 코딩[실시간 채팅 with React]
npm run dev시 새로운 에러가 발생하여 재질문 드립니다. http://localhost:3090/Login 연결시, 크롬에서 Failed to compile. 가 발생하였습니다. Module not found: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/layouts' layouts/workspace.tsx 터미널 메세지입니다. ERROR in ./pages/Login/index.tsx 17:0-39 Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login' @ ./layouts/App.tsx 7:9-31 @ ./client.tsx 9:0-32 12:95-98 ERROR in ./pages/Login/index.tsx 19:0-37 Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login' @ ./layouts/App.tsx 7:9-31 @ ./client.tsx 9:0-32 12:95-98 ERROR in ./pages/SignUp/index.tsx 17:0-39 Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp' @ ./layouts/App.tsx 11:9-32 @ ./client.tsx 9:0-32 12:95-98 ERROR in ./pages/SignUp/index.tsx 23:0-37 Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp' @ ./layouts/App.tsx 11:9-32 @ ./client.tsx 9:0-32 12:95-98 ㅡ tsconfig.json 파일입니다 "paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@pages/*": ["pages/*"], "@utils/*": ["utils/*"], "@typings/*": ["typings/*"] } ㅡ webpack.config.ts 파일입니다 resolve: { extensions: ['.js', '.jsx', '.front', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), '@typings': path.resolve(__dirname, 'typings'), // 경로 폴더들 }, }, ㅡ 현재 터미널 경로입니다 /Desktop/study/react/zerocho/sleact/setting/front ts 폴더에서 설정 후, front 라는 폴더명으로 바꾸어서 진행중입니다. 감사합니다
react 웹팩 typescript socket.io babel 클론코딩
taei
2025-04-13T09:49:22.220Z
댓글 3
좋아요 0
조회수 181
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
오른쪽 코드에서 s가 포인터 변수로 선언이 되었으면 값을 출력할 때 *s[0]으로 써야하지 않나요?
dbndus0024
2025-04-13T09:43:20.717Z
댓글 2
좋아요 0
조회수 77
해결됨
(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
제공해주신 수업을 잘 들었습니다. 마지막 수파베이스 강의에서 구글 Oauth와 연동할때 이용 약관 코드를 제공해 주신다는 언급이 있었던것 같은데, 어디에 올라가 있는지 여쭤보고 싶습니다.
react aws Google-Analytics cloudflare adsense 수익화
서재원 Seo
2025-04-13T09:15:37.147Z
댓글 1
좋아요 0
조회수 146
미해결
머신러닝/딥러닝 소개 및 학습을 위한 파이썬 속성 과정
mac 환경 설정 하려고 하는데 커널 설정하라는데 둘중에 뭘 선택해야 하나요?
python 머신러닝 딥러닝 pandas numpy matplotlib
noortwrk
2025-04-13T09:14:54.268Z
댓글 2
좋아요 0
조회수 120
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
강의소개에 있는 pdf파일을 찾으려는데, 암만 찾아도 보이지 않습니다. 인프런 아이디(이메일)에도 없는데 어디서 다운로드 가능한가요?
직녀
2025-04-13T09:14:31.007Z
댓글 3
좋아요 0
조회수 106
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
코드 파트는 잘 이해하고 공부 진행 했는데 이론파트 첫 강의부터 영상이 아닌 페이지라서 어떻게 공부를 해야될지 길을 잃은 느낌입니다. 이론 섹션에 들어갈때 첫 영상으로 어떻게 공부해야되는지 설명이라도 해주셨으면 좋았을 거 같습니다.. PDF랑 페이지랑 안에 내용은 또 다른 내용이라 더 혼란스럽습니다. 페이지를 가볍게 이해하고 PDF 파일을 외우라는 의도인지 아니면 둘 다 외우라는 의도인지 궁금합니다. 첫 페이지를 들어가보면 "요구사항 분석 챕터에서 중요한 부분 정리" 라고 적혀있으나 받아들이는 입장에서 중요한 부분인데 왜 PDF에는 이거에 관한 내용이 없는거지? 이 두개의 차이점은 뭐지? 라는 생각이 듭니다.
sbd
2025-04-13T09:08:25.570Z
댓글 2
좋아요 0
조회수 230
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 설치된 익스텐션이 궁금하여 질문드립니다. 17:20에 return문에 h1태그를 추가하고 저장하시니까 ()가 자동으로 감싸지는데 어떤 익스텐션을 설치해야하나요? 아니면 어떤 설정을 해야하나요?
김보섭
2025-04-13T08:14:37.953Z
댓글 1
좋아요 0
조회수 114
