#page

nextjs middleware 에서 protected route 처리 하는 방법이 궁금합니다

middleware 에서 토큰 인증에 따른 redirect 를 구현 할려고 합니다 제가 생각한 로직은 인증이 필요한 페이지는 accesstoken을 쿠키에서 받아오고 토큰이 없거나, 인증이 실패하면 login 페이지로 이동, 토큰이 만료된 경우에는 refresh 요청이후 accesstoken,refreshtoken 재발급 이후 원래 이동할려는 페이지로 이동 이렇게 생각중인데 다만 하나 걸리는게 middleware에서 refresh api 요청을 하는게 과연 올바를까? 궁금합니다 그럼에도 굳이 middleware 에서 할려는 이유는 page단 에서 처리할경우에는 결국에는 한번 그 페이지로 이동했다가 처리되는거라 깜빡이는 이슈가 생겨서 그렇습니다 보통 어떤식으로 처리하는지 궁금해요

부트캠프 고민이 있습니다..

안녕하세요 두가지 부트캠프중 선택에 어려움이 있어서 질문드립니다. 1. 멀티캠퍼스 백엔드 자바 스프링, https://multiit.co.kr/pages/ewbKpC240704?mediaCode=site 2. 멋쟁이사자처럼 백엔드 자바 https://bootcamp.likelion.net/school/kdt-backendj-17th 두가지 교육과정중에 비전공자 노베이스 상태에서 교육받기에 어떤 곳이 더 괜찮은지 조언 부탁드립니다. 후기를 찾아보는데 찾아볼수록 생각보다 결정이 어렵더라구요..

php + NestJS(Express) 백엔드 개발자를 찾습니다.

안녕하세요  저희 회사에서 php + NestJS(Express) 개발자를 찾고 있는데 적합자를 찾아내기가 쉽지 않아 가입하게 되었습니다. 관심 있으시다면 공고 한 번 봐주셨음 좋겠어요!!!!!! 그리고 저희 기술스택에 맞는 개발자를 찾을 수 있는 팁?이 있으신분들 댓글 남겨주시면 감사하겠습니다 ㅠㅠㅠㅠ https://www.saramin.co.kr/zf_user/jobs/relay/view?isMypage=no&rec_idx=49757484&recommend_ids=eJxVjrkNAzEMBKtxTi6%2FZexCrv8uTPuAowxFg5FG610dTr%2Bo%2Bqq3d8NK7WrBDxltsMeWQSMG87bmEnwwlfBamzTqk6rpav5ZOy3C9yNOGDIoN3YYYmekw0%2FsOXvZINabIqC1mDpDD%2FQk9q2GlxxlkN9V%2BQGdzkCp&view_type=search&searchword=%EB%B9%84%ED%81%AC%EC%BD%94%ED%8D%BC%EB%A0%88%EC%9D%B4%EC%85%98&searchType=search&gz=1&t_ref_content=generic&t_ref=search&relayNonce=4558130b90d1e71342c4&paid_fl=n&search_uuid=c2ac4cf3-f5ad-42fb-9011-3bf856e40282&immediately_apply_layer_open=n#seq=0

useInfiniteQuery 사용해 무한스크롤 구현 중 궁금한 점이 있습니다.

응답값에 page로 구분할 수 있는 데이터들로 구현할땐 어렵지 않았는데, 이렇게 배열 묶음으로 응답받는 경우에는 어떻게 무한스크롤 구현을 할 수 있을까요?.. 도저히 머리를 굴려보아도 해답을 못찾겠습니다.... api 응답값을 수정하는게 불가능한 상황인데 그럼 이 엔드포인트로는 구현하기가 어려울까요?..

FE 화면 디렉토리 어떤 구조로 생성하나요?

BE 개발자입니다. 어쩌다보니 테스트용 화면을 만들게됬는데 백엔드에서 RESTFull 하게 호출할 수 있게 하고 싶다보니 각 path별 디렉토리에 html을 넣어주다보니 구조가 많이 복잡해지는 감이 있네요. 다른 분들은 어떤 방식으로 구조를 만드시는지 궁금해서 질문드립니다. 1. 방법 각 path에 맞는 디렉토리 생성 - test - page - user - edit.html - item.html - equip.html - status.html - home - account - money.html 2. 기능에 맞는 디렉토리 - page - user.html - home.html - component - user-edit.html - user-item.html - user-equip.html - user-status.html - home-account-money.html

피우다 프로젝트 (공모전)에 참여하실 다자이너분을 모집합니다!

관련 링크: https://www.ictcoc.kr/04_com_n/com02_view.asp?idx=960&page=1&params=

피우다 프로젝트 (공모전)에 참여하실 프론트엔드 2분 모집합니다!

관련 링크: https://www.ictcoc.kr/04_com_n/com02_view.asp?idx=960&page=1&params=

연합자산관리 IT 인력 모집중

개발자 정규직 채용하는데 급여복지는 은행권 수준이라고 함. 관심있으면 아래 공고 확인 https://www.uamco.co.kr/recruit/view?seq=43&page=1

안녕하세요 github-page관련 질문인데용

제가 gatsby로 GitHub-page에 블로그 및 이력서를 올렸는데요 혹시 용량제한이 있다고 하는데 블로그를 작성도중 추후에 용량이 부족해서 못쓰는 경우는 어떤방법으로 처리하는게 좋을까요? 무료로 어떻게 추가하는방법은 없을까요?

Next.js Dynamic Routing 관련 질문

현재 ./pages 폴더에서 page router로 라우팅 관리 중에 있습니다! id별 post 상세창 조회를 위해 ./pages/post-detail/[id].tsx 와 같이 작성했으나 Whitelabel Error Page This application has no configured error view, so you are seeing this as a fallback. Fri Aug 30 21:08:21 KST 2024 [67199a4f-4509] There was an unexpected error (type=Not Found, status=404) 만 발생합니다 참고로 ./pages/post-write.tsx 와 같은 파일은 정상 작동합니다 혹시 무엇이 문제일까요? 추가+) 혹시 Next.js 14에서 page router 방식을 사용하는것이 문제일지 궁금합니다

리액트 lazy와 Suspense질문있습니다.

Spa를 만들면서 lazy와 suspense로 로딩처리하는것을 너무 남발하는거같단 생각이 들었습니다. 하나의 잘못된 예시로는.. 모든 라우트경로를 lazy로 처리해주고 전체 라우트를 suspense로 감싸고 로딩처리를 해주는경우인거같은데요.. 아래 코드는 실제로 제가 적용한 코드입니다. 이렇게 하니까 새로고침하면 로딩컴포넌트가 잠깐 반짝하고 사라지는데.. 아무래도 반짝하고 사라지면 사용자 경험측면에서 문제가 될거같단 생각이 들었습니다. 최초 페이지 이동시에도 순식간에 로딩이 떳다 사라지긴하지만 이건 그러려니 하고있습니다. 혹시 다른분들은 어떤식으로 사용중이신가요? useTransition라는 선택지가 있기는하지만 이거는 지금 제 상황과는 맞지않다는 생각입니다. (페이지네이션같은곳에 적용하면 좋을거같단 생각중..) lazy처리해주기에는 라우터 페이지 수가 적으니 걷어내는것도 정답이긴 하겠지만 lazy를 한번 꼭 적용시키고싶습니다. 아니면 메인페이지인 Homepage만 lazy를 걷어낼까요?

next.js의 캐시와 react query 캐시 질문

next.js와 react query를 사용해 프로젝트를 진행하다가 이해가 안되는 현상이 있어서 질문드립니다. 어떤 A 라는 페이지에 들어오면 포스트와 포스트의 댓글들이 보이는 상황입니다. 첨부한 코드는 A 페이지를 담당하는 page.tsx 코드와 page 에서 사용중인 컴포넌트중 댓글 컴포넌트인 Comments 컴포넌트, 그리고 Comments 에서 useQuery의 queryFn으로 지정한 getComments 함수의 코드입니다. Comments 컴포넌트의 useQuery의 staleTime은 10초로 해두었고, queryFn인 getComments 함수의 fetch는 revalidate를 60초로 해둔 상황입니다. useQuery의 staleTime보다 fetch의 revalidate 시간을 길게 한건 react query로 인한 클라이언트측의 캐시와, next.js의 fetch에 의한 서버 측의 캐시의 차이점을 확인해보려고 그런것입니다. A 페이지에 처음 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리로 인해 받아온 댓글(comments) 데이터가 화면에 보입니다. 이 댓글에는 랜덤으로 생성된 이미지가 있습니다. 우선 10초가 지나기 전에는 새로고침에도 기존의 데이터 그대로 보이고, fetch 요청을 받는 백엔드 api에도 요청이 들어오지 않습니다. react query로 인해 쿼리가 실행되지 않아서 그런 것이겠죠? 그러고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale 상태가 된 후에 A 페이지를 새로고침하면 ['posts', id, 'comments'] 쿼리는 다시 fresh 해지는데 백엔드 api에는 요청이 들어오지 않았더라구요. 화면상의 댓글의 이미지들도 이전과 동일하게 나옵니다. 저는 이게 "A 페이지에 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리가 실행되어 fetch 요청이 실행되는데 이 ['posts', id, 'comments'] 쿼리는 서버 컴포넌트에서 프리패치 되는 거니까, 즉 fetch가 서버쪽에서 실행되는 거니까 react query의 캐시가 아닌 fetch의 캐시 설정을 따른다. 그렇기 때문에 ['posts', id, 'comments'] 쿼리가 실행되어 fetch가 실행되지만 fetch의 캐시는 남아있으니까 캐싱된 값을 사용해서 백엔드 api에는 요청이 안들어온것이다." 라고 생각했고 이걸 확인하기위해 새로고침을 해본것이었기 때문에 이 결과에 대해 납득하긴 했는데요.. 이 생각이 맞는건지가 일단 궁금합니다. 그리고 진짜 이해가 안되는건 이겁니다. A 페이지에 들어오고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale해지면 이번에는 다른 페이지로 이동했다가 A 페이지로 다시 돌아옵니다. A 페이지에서 새로고침을 하지 않고 사이트 내에서 페이지 이동으로 A 페이지에 다시 들어오는거죠. 이러면 백엔드 api에 요청이 들어오더라구요. 이게 왜 그런건지 모르겠습니다. 10초가 지나 ['posts', id, 'comments'] 쿼리는 stale 해졌지만 60초는 안지나서 fetch의 캐시는 유효한... 위의 새로고침 경우와 동일한 상황인데 새로고침 시에는 api로 요청이 안들어오고, 다른 페이지로 이동했다가 다시 돌아온 경우는 api로 요청이 들어오네요. A 페이지에서 새로고침을 하나, 다른 페이지에서 A 페이지로 페이지 이동을 하나, 둘 다 page 컴포넌트가 실행되고 ['posts', id, 'comments'] 쿼리가 서버에서 프리패치되니까 fetch가 서버에서 실행되는거 아닌가요? 근데 왜 새로고침하면 fetch의 캐싱이 적용되는것처럼 백엔드 api로 요청이 안들어오고 페이지 이동 시에는 들어올까요... 이걸 아무리 생각해도 모르겠습니다. 60초가 지난 후에는 새로고침 시에도 백엔드 api로 요청이 들어오더라구요. 이것으로보아 60초 전에는 새로고침 시 요청이 안들어오는게 fetch의 캐시 때문인것도 맞는 거 같은데, 왜 페이지 이동 시에는 60초 전에도 캐싱값을 안쓰고 api로 요청을 보내는지 모르겠습니다. 어떤 메커니즘으로 이렇게 되는것일까요? 아직 Next.js의 캐싱과 react query에 대해 잘 알지 못해서 이해가 안됩니다.. ㅠ 도와주십쇼..!

NextJs 확장 fetch로 서버 컴포넌트에서 동적으로 api를 받는 방법

안녕하세요. 선배 개발자 선생님들. 오늘도 한 단계 성장하기 위해 질문을 남겨봅니다. 저는 NextJs, App router 방식으로 코드를 구현중이며, 서버 상태는 React-Query로 상태값을 관리하고 있었습니다. 왜 리액트 쿼리를 사용했는가? why? 1. Optimistic update, 무한스크롤에 대해 공부하고 적용해보고 싶었습니다. 2. 클라이언트 상태, 서버 상태를 나눈다는 개념이 너무 좋아서 서버 상태는 React-Query로 다뤘습니다. 3. statleTime, gcTime을 조정하여 캐싱기능이 좋았습니다. 갑자기 문득 나는 NextJS를 잘 쓰고 있는건가? 리액트랑 폴더 구조 말고는 다른게 없는거 아닌가? 라는 생각이 들었고, NextJs의 기능을 최대한 활용하고 나머지 불편한 부분이 생긴다면 외부 라이브러리를 사용하자! 라는 생각이 들었습니다. 그래서 저는 React-Query로 상태를 관리하던걸 NextJs의 확장 fetch로 바꿀려고 합니다. Optimistic update, 무한스크롤 기능을 제외하고 나머지 모든 서버 상태는 확장 fetch로 바꿀려고 합니다. 페이지네이션 페이지네이션 처럼 사용자와 상호 작용하는 부분, 즉 동적으로 데이터를 받아오게 하기 위해 url을 변경한 뒤, [id]/page.tsx에서 param로 받던지 혹은 header()를 통해 params를 받아서 처리를 할 수 있다고 생각하고, 저는 header()로 params를 받아서 처리를 했습니다. 모달에서의 페이지네이션 그런데 문제는 모달을 띄우고, 모달 내부에서 페이지네이션이 있는 경우 어떻게 데이터를 동적으로 받아오는지 고민을 해봐도 방법이 없는 것 같습니다. 1. 모달에서 다음 페이지 클릭시 url을 변경한다. -> 안해봤지만 동작을 할 수 있더라도 뭔가 느낌적으로 아닌 것 같습니다. 2. 클라이언트 컴포넌트에서 상태값을 서버 컴포넌트로 전달한다 -> 불가능 궁금한 점 1. 모달 내부에서 페이지네이션을 처리할때 url을 변경해서 서버 컴포넌트에서 확장 fetch로 데이터를 관리하는 게 적절할까요? 2. 모달 내부에서는 페이지네이션을 처리할 때는 react-query로 데이터를 관리하는 걸 확장 fetch로 바꿀 수 없는 건가요?? 바꿀 필요가 없는 건가요? 3. 더 좋은 방법이 있는 건가요?

react 컴포넌트 작게 쪼갤경우에 파일을 분리하는게 좋나요?

현재 공통으로 사용되지않고, 하나의 page에서만 사용되는 컴포넌트들의 경우 pages폴더의 signUp 폴더에서 (회원가입 페이지의 경우) 계층으로 작성하고있습니다. 단일책임원칙에 따라 하나의 컴포넌트가 하나의 일만 하도록 작게 쪼개고있는데, 폴더의 뎁스도 늘어나고 파일이 너무 많아지는거같아 이렇게 하는 방식이 옳은것인가? 라는 의문이 들어 질문을 작성합니다. 이처럼 컴포넌트를 하나의 일만 하도록 최대한 작게 쪼개는게 옳은 방식인지... 그렇다면 폴더를 계층으로 쪼개는게 맞는건지... 알려주시면 감사하겠습니다 ! 한가지 예시 signUp/content /form / buttonGroup.tsx 요런식입니다

data fetching은 어디서 하는 게 좋은 것일까요?

안녕하세요. 저는 프론트엔드 개발자가 되기 위해 공부중인 취준생입니다. 피드백을 적극 환영하기에 많은 피드백 혹은 의견을 많이 남겨주시면 감사하겠습니다. 저는 데이터 페칭을 어디서 하는 게 좋을지 고민 중이라 글을 남깁니다. 아래와 같이 3개로 글을 구성해봤습니다. 1. 현재 개발상황 2. 현재 저의 데이터 페칭 위치 3. 궁금한 점 1. 현재 개발상황 저는 개인 프로젝트로 Next.js와 React Query를 사용하여 개발하고 있습니다. 현재 Next.js의 App Router를 사용 중이며, 프로젝트 구조는 아래와 같습니다. app: page.tsx, layout.tsx components: 최소 2번 반복 사용되는 재사용 가능한 컴포넌트 container: 일반적인 컴포넌트 (조합 등) hook, service 등 2. 현재 저의 데이터 페칭 위치 현재 데이터 페칭은 최상단의 app -> page.tsx에서 수행하고 있으며, 자식 컴포넌트에는 데이터를 props로 전달하고 있습니다. 이러한 이유는 prop drilling이 발생하더라도 데이터 페칭을 한 곳에서 처리하면 코드 이해가 쉬울 것 같아서입니다. 현재로서는 전역 상태 라이브러리를 사용하지 않아 최대 4단계까지 prop drilling이 발생하고 있지만, 전역 상태 라이브러리를 도입하면 prop drilling 문제는 해결될 것으로 생각하고 있습니다. 추가적으로 현재 이렇게 구현하면서 data fetch할때 필요한 query값들도 최상단에서 관리해야하는 불편함이 있었습니다. -> 최상단에서 관리해야 하는 상태값이 늘어남 3. 궁금한 점 3-1. 아래의 2가지 data fetching 방법 중 어느것이 적절한지? 합리적인지 의견이 궁금합니다. - 최상단에서 Fetching - 장점 : 한 곳에서 Fetching하기에 코드 일관성, 가독성, 코드를 이해하는데 좋다고 생각 - 단점 : prop drilling, 추가적인 전역 상태 관리 해야한다고 생각 - 필요한 컴포넌트에서 Fetching - 장점 : 필요한 컴포넌트에서 fetching 하기에 prop driling과 같은 불필요한 코드 작성 할 필요 x - 단점 : 어떤 컴포넌트에서 fetching 했는지 파악하기 힘들어짐 3-2. 현재 최상단에서 모든 데이터 페칭을 하고 props로 전달하는 방식 vs 필요한 컴포넌트에서 데이터 페칭을 하는 두 가지 방식 중 어느 것이 더 많이 사용되는 패턴인지 궁금합니다. 3-3. React Query는 서버 상태 관리, 캐싱, Optimistic Update와 같은 기능을 위해 도입했습니다. 그러나 prop drilling을 해결하기 위해 React Query에서 가져온 서버 데이터를 전역 상태 라이브러리에 담게 되면 서버와 클라이언트 상태를 구분하는 의미가 없어지는 것 같다는 생각이 듭니다. 제가 잘못 사용하고 있는것인지 궁금합니다.

webview_flutter 안드로이드 cookie 질문이요...

회사에서 부득이하게 앱개발자 없이 앱개발을 해야하는 상황이라 웹으로 만들고 flutter 웹뷰를 만들었습니다. iOS에서는 쿠키에 jwt가 저장되서 자동로그인 기능이 잘 작동되고 있는데요, 안드로이드에서는 cookie를 따로 관리를 해줘야 한다고 하더라구요... 그래서 webview_cookie_manager 와 flutter_secure_storage를 이용해서 onPageFinished가 될 때 main page이면 cookieManager.getCookies로 jwt를 가져오고 storage.write로 쿠키를 저장해 주고 있습니다. 그리고 initState()할때 Future<void> _loadStoredCookies() async { final jwt = await storage.read(key: 'jwt'); print('jwt : $jwt'); if (jwt != null) { final cookieManager = WebviewCookieManager(); await cookieManager.setCookies([ Cookie('jwt', jwt) ..domain = "메인페이지" ..path = "/" ..secure = true ..httpOnly = true ]); bool hasCookies = await cookieManager.hasCookies(); print('쿠키가 존재하는가? $hasCookies'); } } 이렇게 쿠키를 확인하고 쿠키를 set해주는데 백그라운드에서 앱을 완전히 종료시키고 다시 실행하면 쿠키가 사라지더라고요... 왜 그런건가요...??

웹폰트 나눔스퀘어네오 윈도우 크롬 적용안되는 현상

React 프로젝트이며, 웹폰트로 나눔스퀘어네오 cdn방식으로 가져오고 있습니다. 맥에서는 잘 적용되는데, 윈도우 크롬 콘솔에 에러 뜨고 네트워크탭 - 폰트 확인 시 404가 뜨는데, 혹시 저와 같은 현상인 분 있으신가요?? 콘솔 에러 OTS parsing error: Unable to instantiate font face from font data. ``` @font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff') format('woff'); font-weight: normal; font-style: normal; } ``` 나눔스퀘어네오 폰트 https://noonnu.cc/font_page/1053

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

next socket.io 연결, 제가 어떤 부분을 놓치고 있을까요?

https://github.com/hyubbb/socket-test-app 안녕하세요. 간단하게 채팅방을 만들어서 유저의 입장/퇴장, 채팅 기능을 구현해볼려고 하는데요. 통신이 됬다 안됬다 하더라구요? 그래서 계속 새로고침을 누르거나 해야하는 현상이 있습니다. 서버와의 연결은 계속 되어있다고 하는데 , socket.on 이나 socket.emit 이 동작을 안하는데 정말 이해가 안됩니다. 콘솔을 찍어봤을땐, next가 캐싱처리를 해서 실시간으로 응답하는게 문제가 발생한게 아닐까 생각했는데, 정확하게 갈피를 잡지 못하겠습니다. 3일을 헤매고 있는데요. 제가 어떤 부분을 놓치고 있는지 알려주시면 너무 감사하겠습니다. 코드가 길어서 github에 업로드 하였습니다. 클릭 라우트 처리 components/chat/chat-list socket.emit 발생장소 components/chat/chat-room 소켓 프로바이더 components/providers/socket-provider socket서버사이드 설정 pages/api/socket/io.ts

신입 개발자 포트폴리오 관련 질문드립니다!

안녕하세요! 개발자 지망생입니다. 현재 취업을 위해 포트폴리오를 준비중인데, git pages를 통해 웹 포트폴리오를 배포한 상태입니다. 사람인이나 점핏에서 이력서를 제출할 때, 웹 포트폴리오 주소만 링크로 올려도 괜찮을까요?? 아니면 따로 포트폴리오를 PDF로 같이 첨부해야 할까요?? 저는 면접을 봤었을 때, PDF로 뽑아놓고 면접 당시되어서야 조금씩 봤었던것 같은 느낌을 받았어서 링크로만 걸어놔도 될지 잘 모르겠습니다. 자바 SI쪽으로 취업할 예정입니다.

Paging 관련 질문 있습니다.

jpa, pageable 활용하면 findall로 페이지에 속하는 데이터를 가져올 수 있다고 알고 있는데요. 1. repository 데이터가 변경돼서 예전 1페이지가 시간이 흐른 뒤 1페이지를 호출하면 다른 데이터가 나오게 돼서 데이터베이스 상태가 바뀌지 않도록 해야 된다고 GPT가 가르쳐 주는데 DATE 타입의 컬럼을 활용해서 소팅 하는 알고리즘의 경우는 어떻게 데이터베이스 상태가 바뀌지 않도록 하나요? 2. 유저1(최신순)과 유저2(추천순)가 서로 다른 알고리즘으로 Paging을 수행 할 때 Paging 객체를 유저 객체에 넣어서 기억 하나요?

파이썬 오류 좀 고쳐주세요 ㅠㅠ

import time import requests import streamlit as st API_BASE_URL = "http://localhost:8000/qna" # Fastapi로 api 생성 def request_chat_api(user_message: str) -> str: url = API_BASE_URL resp = requests.post( url, json={ "user_message": user_message, }, ) resp = resp.json() print(resp) return resp["answer"] def init_streamlit(): st.set_page_config(page_title='Dr. KHU', page_icon='🩺') if "messages" not in st.session_state: st.session_state.messages = [{"role": "assistant", "content": "안녕하세요! Dr.seo입니다🩺"}] # Initialize chat history if "messages" not in st.session_state: st.session_state.messages = [] # Display chat messages from history on app rerun for message in st.session_state.messages: with st.chat_message(message["role"]): st.markdown(message["content"]) def chat_main(): if message := st.chat_input(""): # Add user message to chat history st.session_state.messages.append({"role": "user", "content": message}) # Display user message in chat message container with st.chat_message("user"): st.markdown(message) # Display assistant response in chat message container assistant_response = request_chat_api(message) with st.chat_message("assistant"): message_placeholder = st.empty() full_response = "" for lines in assistant_response.split("\n"): for chunk in lines.split(): full_response += chunk + " " time.sleep(0.05) # Add a blinking cursor to simulate typing message_placeholder.markdown(full_response) full_response += "\n" message_placeholder.markdown(full_response) # Add assistant response to chat history st.session_state.messages.append( {"role": "assistant", "content": full_response} ) if __name__ == "__main__": init_streamlit() chat_main() 이 코드를 실행시키면 자꾸 AttributeError: st.session_state has no attribute "messages". Did you forget to initialize it? More info: https://docs.streamlit.io/library/advanced-features/session-state#initialization 라고 뜨네요..

Next.js에서 모든 컴포넌트를 dynamic import하는건 별로인가요?

안녕하세요. Next.js page router 방식으로 프로젝트 진행 중 질문이 있어 글 남깁니다. 현재 프로젝트의 크기가 커져서 최적화 작업을 진행중에 컴포넌트의 import 방식을 정적에서 동적으로 바꾸어 주려고 합니다. 그런데 만약 A 컴포넌트를 X컴포넌트에서 dynamic으로 import하고, Y컴포넌트에서는 정적으로 import하면 그만큼 중복된 코드를 불러온다고 이해하고 있는데, 그럼 프로젝트에서 사용되는 컴포넌트 중 2개 이상의 컴포넌트에서 사용되는 것들은 모두 dynamic import로 선언 해주어야 하나요? 만약 그렇다면 모든 파일에 import문을 dynamic으로 바꾸어 주어야 하나요 아니면 next.config.js에서 일괄적으로 설정하는 방법이 존재하나요?

Next.js 에서 fluent-ffmpeg 사용 시 에러 해결 가능할까요?

Next.js 에서 puppeteer를 사용해서 특정 url에 접속하여 애니메이션을 png로 100장 정도 캡처하여 생성하고, fluent-ffmpeg를 사용해서 해당 png 이미지들을 mp4 영상으로 만들려고 하는데요. yarn add puppeteer fluent-ffmpeg @ffmpeg-installer/ffmpeg yarn add --dev @types/fluent-ffmpeg 위와 같이 라이브러리들을 설치했구요. 아래 page.tsx 파일에서 코드를 구현했는데요. dev로 실행해서 해당 페이지에 접속을 하면 아래와 같은 에러가 발생하는데요. 해결이 가능할까요?? 다른 라이브러리를 써야할지 구현한 코드가 문제가 있는지 모르겠네요. 도움 부탁드립니다!! # 에러 코드 # 1 of 1 error Next.js (14.2.3) Server Error Error: Cannot find module '/Users/.../animation-capture/node_modules/@ffmpeg-installer/darwin-arm64/package.json' This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack webpackEmptyContext file:///Users/.../animation-capture/.next/server/app/capture/page.js (22:10) eval node_modules/@ffmpeg-installer/ffmpeg/index.js (40:27) (rsc)/./node_modules/@ffmpeg-installer/ffmpeg/index.js file:///Users/.../animation-capture/.next/server/vendor-chunks/@ffmpeg-installer.js (20:1) Next.js eval /./src/app/capture/page.tsx (rsc)/./src/app/capture/page.tsx file:///Users/.../animation-capture/.next/server/app/capture/page.js (286:1) Next.js # 코드 구현부 # import { NextApiRequest, NextApiResponse } from 'next'; import puppeteer from 'puppeteer'; import fs from 'fs'; import path from 'path'; import ffmpeg from 'fluent-ffmpeg'; import ffmpegInstaller from '@ffmpeg-installer/ffmpeg'; ffmpeg.setFfmpegPath(ffmpegInstaller.path); .... 중략.... const outputFilePath = path.resolve("./screenshots/video.mp4"); ffmpeg() .addInput(`${folderPath}/screenshot-%d.png`) .inputFPS(10) .output(outputFilePath) .on("end", () => { res.status(200).send(`Video created successfully at ${outputFilePath}`); }) .on("error", (err) => { console.error("Error generating video:", err); res.status(500).send("Failed to generate video"); }) .run(); } catch (error) { console.error("Error capturing screenshots:", error); res.status(500).send("Failed to capture screenshots"); }

Next.js 질문

아직 next의 개념을 잘 몰라서.. 혼란스러움에 질문드립니다..ㅠㅠ 전역상태에서 state를 꺼내서 사용하거나 react-query, pagination같은것들은 모두 csr로 변경해서 코드를 짜야하던데 그러다보니 page가 거의 use client로 도배되었는데요… 그럼 SSR의 장점들을 모두 잃어버리는건가요…? getStaticProps나 getServerSideProps들을 사용해서 이러한 문제들을 해결할 수 있다는데, 이것들로 해결해야하는걸까요..? 🥲

forwardRef 관련

안녕하세요. 질문이 있습니다! 현재 dynamic import 와 forwardRef를 사용하는 과정에서 forwardRef가 적용이 안되는 상황입니다. Canvas 컴포넌트에서는 ref값이 제대로 출력이 되는데 dynamic import와 forwardRef를 사용해 부모 컴포넌트 (DrawingPage)에서 ref값을 콘솔에 찍어보니 전달이 안됩니다. 정보를 찾아보고 수정을 해봐도 오랫동안 제자리 걸음이라 질문남깁니다! 하단은 코드입니다

리액트 쿼리 에러 핸들링 이슈

react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

Flutter firebase stream 채팅 데이터다 불러와서 팅기는 문제

Flutter에 firebase stream으로 실시간 채팅 앱을 만들었는데 데이터가 많아지면서 앱이 팅기는 문제가 생기고 있습니다 limite 말고 다른 방법이 있을까요? Future는 data page가 있는데 stream은 없는거 같아서 다른 분들은 어떻게 하나요? 아니면 로컬에 저장하고 사용하나요?

리액트 깃허브 연결

리액트 프로젝트를 깃허브에 올리고 싶은데 vs코드로 저장소 연결해서 파일을 올리면 vs코드에서 작성된 파일들이 다 올라갑니다. 그런데 gh-pages 를 사용하여 연결하는 방법도 있던데 이건 파일들은 올라가지 않고 페이지 배포만 해주는거 같습니다. 1) 원래 gh-pages로 연결하면 파일들은 커밋되지 않는건가요? 2) 두 방법의 차이는 무엇이고 뭐가 올바른 방법인가요..?

react-navigation navigate 파라미터 type

안녕하세요, @react-navigation의 useNavigation을 통해 페이지 이동을 하는 함수를 만들던 중 타입 설정이 되지 않아서 질문 드립니다. navbar와 같은 곳에서 사용할 목적으로 navigateTo와 params 를 받아 스크린을 이동시켜주는 함수를 만들고 싶지만 params의 타입에서 에러가 나고 있어서 이 부분에서 어떻게 해줘야 하는지 질문드려요.. 에러 내용을 보면 아래와 같이 나오는게 각 페이지 별 type이 일치하지 않아서 그런걸로 보이는데 각 메뉴마다 navigation.navigate('Login', {~~}); navigation.navigate('Foo'); 이런식으로 하게되면 동작은 하지만 너무 중복된 코드가 되는 것 같아 pgae를 받는 함수로 만드려고 하는 중인데 잘 안되네요..! Argument of type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to parameter of type '[screen: "Login"] | [screen: "Login", params: { page: string; data?: object | undefined; } | undefined] | [screen: "Foo"] | [screen: "Foo", params: undefined] | [screen: "Bar"] | [screen: "Bar", params: undefined]'. Type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to type '[screen: "Login", params: { page: string; data?: object | undefined; } | undefined]'. Type at position 0 in source is not compatible with type at position 0 in target. Type 'keyof RootStackParamList' is not assignable to type '"Login"'. Type '"Foo"' is not assignable to type '"Login"'.ts(2345)