#ref

현금 10만원 공짜로 받아가세요

앱 간단설치만 해도 현금, 상품권, 네이버페이 10만원치 꽁짜로 줍니당 (신상요구,본인인증 절대X) 크로만326328님이 100,000원 상당의 포인트를 보냈어요! https://go.kroket.app/hjdpcss?referral=LYLJJKD6 방법1: 링크클릭 or 플레이스토어 kropot 검색후설치 방법2: 추천코드 LYLJJKD6 입력 , 미입력시 지급x 방법3: 10만원 받기 완료, 출금하시면 됩니다 가입만하면 10만원 바로 출금가능, 편의점도되고 상품권도 교환가능 심지어 op코인 전환도 되는 신생개꿀앱테크 추천코드 LYLJJKD6 필수로.입력해야 들어옵니다 왜 안들어오냐 하지마세요ㅠㅠ

kakaotoken 과 JWTtoken

로그인 구동방식을 jwt token으로 사용하고 있는데(관리자페이지) 카카오 로그인을 추가하려니 동일하게 refresh Token으로 access token을 재발급받아 사용하는 방식이던데 이전에 react-kakao-login 라이브러리만 사용해서 직접적으로 하려니 이런 구동방식인지 이번에 알았네요 현재 refresh token을 http only 쿠키와 DB에 저장해서 클라이언트에서 refresh token을 가져와 전달해주면 백에서 DB와 대조하여 동일한지 검증을 한번 더 해주고 있습니다. 그렇다면 DB에 kakaoRefresh column을 하나 더 추가해서 이중으로 검증하는게 나은지 카카오에서 이미 검증을 한 후에 전달해주니 jwt토큰을 무시하고 1회 검증으로 하는게 나은지 의견을 듣고싶습니다

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

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

모바일 앱 UI를 업데이트 순서

모바일 앱을 개발하다가 랜더링 그러니까 UI를 업데이트하는 순서가 궁금해서 질문을 올려봅니다. 예를 들어 사용자가 게시글에 좋아요를 누른다고 했을 때 다음과 같은 방법 중에서 어떤 방법을 사용해야 하는지 궁금합니다..! 특히 현업에서는 어떤 방법을 사용하는지 왜 그렇게 사용하시는지 궁금합니다😄 1) 디바이스 로컬 UI 업데이트, 동시에 서버 데이터 업데이트. 서버 업데이트가 완료 되면 서버 데이터로 UI 반영. 2) 디바이스 로컬 UI 업데이트, 동시에 서버 데이터 업데이트. 그러나 서버 업데이트 데이터는 UI에 바로 반영하지 않음. 사용자가 앱을 다시 실행하거나 refresh되는 상황에서 나중에 서버 데이터를 반영할 것으로 기대. 3) 서버 데이터를 업데이트, 서버 데이터가 업데이트 되면 해당 데이터로 UI 업데이트. 4) 디바이스 로컬 UI 업데이트, 서버 데이터는 바로 업데이트 하지 않음. 나중에 서버 데이터는 업데이트 하기. 제가 이 고민을 하게 된 이유가, 게시물에 좋아요를 누르는 상황에서 비롯되었습니다. 처음에는 (3)번 방법을 사용했습니다. 하지만, 좋아요를 누르고 서버에 업데이트 되는데 약 0.5~1s 정도 UI가 지연되어서 불편하더군요. 그래서 (1)번 방법으로 변경했습니디. 사용자가 일단 좋아요를 누르면 디바이스에서 좋아요를 토클하고, 나중에 업데이트가 완료된다면 반영하는 방식으로요. 그런데 (1)번 방법도 사용자가 빠르게 좋아요를 2번 누른 상황에서, 좋아요가 표시되고 바로 해제가 안되는 (서버에서 좋아요를 눌렀다는 업데이트로 인해서 나중에 해제가 됩니다) 문제가 있습니다 ㅠㅠ. 다른 분들의 의견이 궁금합니다🔥

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

React 리렌더링 질문있습니다.

안녕하세요. React를 사용하는 프로젝트에서 테이블을 생성하여 editable 가능하도록 개발하고 있습니다. 해당 테이블에 input도 있고 switch 기능도 있습니다. editable 테이블의 경우 전체 테이블 값을 다 받아서 업데이트 하는 형식입니다. 원래는 ref를 사용해서 진행하려고 했는데 input 과 switch 가 동시에 있어서 row 단위에 값을 받을 때 문제가 발생됩니다..(rows state 와 ref 와 데이터 불일치가 발생됨) 저는 input 에 1글자 쓸 때마다 리렌더링 되는게 안좋다고 생각해서 ref를 사용한건데 그냥 rows state만 사용하고 memo로 리렌더링을 줄이는게 맞을까요? 고견부탁드리겠습니다(_ _)

Next 서버 컴포넌트와 전역 상태관리

안녕하세요. Next15에서 서버 컴포넌트를 적극적으로 도입하여 프로덕트를 개발하고 있는데, 고민이 되는 부분이 있어 여러 분들의 도움을 얻고자 질문을 남깁니다. 서버 컴포넌트에서 받아온 데이터와 클라이언트 컴포넌트에서 사용하는 zustand가 적절히 사용되고 있는지 고민이 듭니다. 현재 GET 요청의 경우 각각의 서버 컴포넌트에서 fetch를 통해 진행하고, 해당 데이터를 자식 클라이언트 컴포넌트에서 사용할 경우 props로 내려 사용하고 있는데, 이때, 드릴링이 심해질 경우 zustand와 같은 전역 상태관리 라이브러리를 함께 사용하려고 합니다. 예를 들어, 서버 컴포넌트의 첫 번째 자식인 클라이언트 컴포넌트에서 zustand를 사용하고, 이후 자식 클라이언트 컴포넌트에서는 zustand를 통해 상태관리 할 때 자식인 클라이언트 컴포넌트의 업데이트가 진행되는 부분에서 try/catch를 통해 요청을 보내고, router.refresh()를 통해 서버 컴포넌트에서 데이터를 새로 받아옵니다. 이후 클라이언트 컴포넌트에서는 useEffect로 서버 컴포넌트에서 props로 받아온 데이터가 바뀌는 것을 감지하고, 해당 props를 zustand에서 사용하는 데이터로 업데이트하려고 하는데 문제가 될만한 점이 있을까요? 이와 관련된 링크나 답변이 있으시다면 감사히 받겠습니다!

invalidateQueries가 실행되지 않습니다.

mutate 함수 내부에서 onSuccess:()=>{ queryClient.invalidateQueries({ queryKey: ["USERINFO"] }) navigate("/") } 를 실행하는데 mutate함수는 잘 실행되고 이후에 경로 이동도 잘되는데 useQuery훅 네트워크 요청 자체가 가질 않습니다. refetchType, refetchOnMount, enabled, refetchQueries, prefetchQueries등등 다 시도해 봤는데 안됩니다..! 거의 100번 정도 테스트해봤을때 2번정도? 우연치않게 됐던거같은데 이때 빼고는 전부 안됐습니다ㅜㅜ 어떻게 해야할까요??

invalidateQueries가 안먹힙니다.

사진 순서대로 1. 유저 정보 수정 Mutation훅 2. 유저 정보 수정 Mutation훅을 호출하는 컴포넌트 3. 유저 정보를 새로받아오는 Query 훅 입니다. invalidateQueries, refetchQueries, 옵션추가 등등 다해봤는데 쿼리를 무효화하는 요청이 아예안갑니다..ㅜ 쿼리키도 똑같은데 뭐가 문제일까요? 두번째 사진은 흐리게보여서 코드로 올립니다.

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

docker에 redis 오류 질문드립니다

안녕하세요 현재 개인프로젝트를 진행하고있습니다. 문제가 있는데, docker에서 app(springboot) + mysql + redis container를 만들어서 docker-compose.yml로 띄운후 localhost:8080 접속시 <오류 내용> Caused by: io.netty.channel.AbstractChannel$AnnotatedConnectException: Connection refused: localhost/127.0.0.1:6379 Caused by: java.net.ConnectException: Connection refused 이렇게 오류가 발생하는데 자꾸 redis가 localhost로 뜨는데 docker-compose 설정에는 문제가 없어보이는데 한번 봐주시면 감사하겠습니다 1. docker-compose.yml - db 접속정보와 redis 비밀번호는 지우고 코드를 올렸습니다 - redis 비밀번호는 서버에서 확인했습니다. - redis-cli 명령어로 ping-pong 확인했습니다. - app안에 redis와 db(mysql) 같은 네트워크 보고있음 확인했습니다. - 외부 접속 허용하기 위해 redis,.conf 에 bind 0.0.0.0수정 확인했습니다. - 맥 방화벽도 껐습니다. 2. application.properties -redis 설정정보에 ${SPRING_REDIS_PORT:6379} 이렇게 바인딩도 해봤습니다 -db접속 되는지 확인해봤습니다 아래의 코드를 첨부했습니다. 구글 검색과 gpt검색으로 해결방안 전부 시도해봤지만 자꾸 localhost로 뜨니까 진척도 없고 답답합니다... docker를 처음 사용해보는거라 부족한점이 많은데 어떤 부분에 이해도가 필요한지 봐주시면 정말 감사하겠습니다.

이 컴포넌트는 어디 껀가요?

Pull to refresh 같은데서 여기 저기 보이던데 모양도 다 똑같더라구요? mui도 아닌거 같던데 어디일까요?

ReactNative ios build 에러 3일째 해결을 못했습니다.

시뮬레이션을 실행하려고 해도 스크립트 문제, iPhone 버전 범위 문제, 시뮬레이터 문제가 계속 발생합니다. 어떤 도움이라도 감사합니다. ReactNative를 처음 접했습니다. 저희 팀에서 저를 도울 수 있는 사람이 없습니다. #프로젝트 환경 mac M2 ruby -v ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23] node -v v20.10.0 pod --version 1.15.2 package.json { "name": "labts", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-community/async-storage": "^1.12.1", "@react-native-community/cli": "13.6.9", "@react-navigation/bottom-tabs": "^6.6.0", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.10.0", "@tanstack/react-query": "^5.51.5", "@types/react-native-vector-icons": "^6.4.18", "axios": "^1.7.2", "date-fns": "^3.6.0", "immer": "^10.1.1", "react": "18.2.0", "react-native": "0.74.3", "react-native-calendars": "^1.1305.0", "react-native-date-picker": "^5.0.4", "react-native-dotenv": "^3.4.11", "react-native-get-random-values": "^1.11.0", "react-native-image-crop-picker": "^0.41.2", "react-native-image-zoom-viewer": "^3.0.1", "react-native-paper": "^5.12.3", "react-native-permissions": "^4.1.5", "react-native-safe-area-context": "^4.10.8", "react-native-screens": "^3.32.0", "react-native-splash-screen": "^3.3.0", "react-native-tab-view": "^3.5.2", "react-native-vector-icons": "^10.1.0", "react-native-vision-camera": "^4.5.1", "uuid": "^10.0.0", "yarn": "^1.22.22" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.74.85", "@react-native/eslint-config": "0.74.85", "@react-native/metro-config": "0.74.85", "@react-native/typescript-config": "0.74.85", "@types/react": "^18.2.6", "@types/react-native-dotenv": "^0.2.2", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "babel-plugin-module-resolver": "^5.0.2", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } } PodFile require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip platform :ios, '12.0' use_frameworks! #use_modular_headers! prepare_react_native_project! linkage = ENV['USE_FRAMEWORKS'] if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_sym end target 'nexlabts' do config = use_native_modules! use_react_native!( :path => config[:reactNativePath], # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'nexlabtsTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false, # :ccache_enabled => true ) end end 제가 아래 에러 3가지에 대해 제가 해본 방법들입니다. 1. node 재설치 node_module 폴더 삭제, package-rock.json 삭제 후 재설치 npm install --legacy-peer-deps yarn install 2. Xcode가 node 읽을 수 있도록 설정 sudo ln -s "$(which node)" /usr/local/bin/node 3. Podfile 내 platform 설정 수정 platform :ios, '12.0' or platform :ios, '14.0' 4. Pods 재설치 rm -rf ~/Library/Developer/Xcode/DerivedData or rm -rf ~/Library/Developer/Xcode/DerivedData/* rm -rf Pods rm Podfile.lock pod install --repo-update Xcode \> Product \> Clean Build Folder. cd ./ios pod cache clean -all pod install --repo-update cd ../ npx react-native run-ios --no-packager --simulator="iPhone 15" or npx react-native run-ios --simulator="iPhone 15" or yarn start > i(run ios) Err 1. cocoaPods 설치할 때 [!] CocoaPods could not find compatible versions for pod "React-RuntimeHermes": In Podfile: React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) Specs satisfying the React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) dependency were found, but they required a higher minimum deployment target. Err2. iOS 실행할때 run-ios --no-packager --simulator="iPhone 15" Build description signature: fc1341421f84b87c5245d346c2c17b66 Build description path: /Users/nowonjae/Library/Developer/Xcode/DerivedData/nexlabts-argvodqcybjfcybstpulfpghnzvm/Build/Intermediates.noindex/XCBuildData/fc1341421f84b87c5245d346c2c17b66.xcbuilddata /Users/nowonjae/Desktop/project/NeXLabRN/ios/nexlabts.xcodeproj:1:1: error: Unable to open base configuration reference file '/Users/nowonjae/Desktop/project/NeXLabRN/ios/Pods/Target Support Files/Pods-nexlabts/Pods-nexlabts.release.xcconfig'. (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Embed Pods Frameworks' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Copy Pods Resources' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') --- xcodebuild: WARNING: Using the first of multiple matching destinations: { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } ** BUILD FAILED ** ] Err3. Xcode 로 Build 할때 (Any iOS Simulator Device (arm64, x86_64)) Command PhaseScriptExecution failed with a nonzero exit code

Nextjs14 서버 컴퍼넌트 JWT 갱신 방법 문의

안녕하세요 NextJS14 에서 JWT 로그인 방식으로 프로젝트 진행중에 있습니다. 현재 AccessToken 만료시 재 갱신하는 로직을 하면서 해결하지 못하는 내용이 있어서 문의 드리립니다. 서버 컴포넌트와 클라이언트 컴포넌트에서 갱신된 AccessToken 을 공유 하는 법에 대해서 어떻게 처리 하셨나요? - app router 사용 - accessToken, refreshToken 쿠키 사용 - fetch 를 이용하여 API 호출 아래 테스트 내용으로 서버 컴포넌트에서 AccessToken 만료되어 갱신되는 경우 클라이언트로 쿠키를 갱신해줄 방법을 모르겠습니다. 너무 CSR 구조로 생각하는거 같기도해서, 이런 경우 어떻게 토큰을 현행화 해서 사용하는지 문의 드립니다. 별도 가이드 문서를 더 찾아보면 서버 컴포넌트에서는 쿠키를 사용하지 말라는 글도 보여서, 방향성을 잘못잡고 있는 느낌도 들고 있습니다. 많은 조언 부탁드립니다!! 테스트 케이스) 1. 서버 <-> 클라이언트 (에러) - 서버 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출 -> 쿠키 set -> 클라이언트에서 백엔드 API 호출(당연히 클라이언트에서는 쿠키가 갱신안되서 에러) 2. 서버 <-> 서버(성공) - 서버 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출-> 쿠키 set -> 서버 백엔드 API 호출 3. 클라이언트 <-> 클라이언트 (성공) - 클라이언트 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출-> 쿠키 set -> 클라이언트 백엔드 API 호출

인텔리제이 심볼 오류 살려주세요

놀라기 금지..입니다.. 시도해본 방법으로는 • Build >> Rebuild Project • 캐시 비우고 재실행 • Gradle Refresh 왜이러는걸까요.. 정말 저한테 왜그러는건지 정말 알고싶습니다 귀찮구 힘드시더라두 한 번만 살려주세요 제발

웹뷰 auth 처리 질문입니다

안녕하세요, React native에서 각 탭들이 서로 다른 웹뷰를 사용하고 있습니다. 한 탭에서 accesstoken을 refresh를 하고 있는 상태에서 다른 탭에 들어갈 경우 refresh token이 갱신되지 않은 상태에서 요청을 보내 동시성 이슈(race condition)가 발생할 수 있을 거 같은데 어떻게 해결해야 할까요? 그냥 단일 웹일 때에는 axios interceptor에서 큐에 넣어서 해결했는데.. 토큰을 갱신해야 할 때마다 앱단으로 보내준 다음에 거기서 큐로 처리하고 완료되면 각 웹뷰로 뿌려주는 방식으로 가야 하려나요? 현직에 계신 분들 웹뷰 auth 어떻게 처리하시나 궁금합니다.

next14의 next/headers의 cookies를 이용한 쿠키설정

안녕하세요 현재 데이터시각화 사이트 프로젝트를 진행중입니다. next14와 spring boot(리소스와 인증.인가)를 사용하고 있고, 카카오 소셜로그인을 하면 스프링서버에서 jwt(access 토큰)를 발급해주고 refresh 토큰은 redis를 통해 관리되고 있습니다. 받아온 토큰은 cookie를 통해 관리하고 있습니다. seo를 위해 ssr을 사용하고 있는데, ssr과정에서 데이터를 fetch를 할 때 토큰을 같이 보내고, 만약 액세스 토큰이 만료되고 리프레시 토큰이 살아있다면 응답 헤더에 새로운 액세스토큰을 보내주고 있습니다. 그런데 이때 next/headers의 cookies를 사용하여 쿠키를 세팅하는것이 안됩니다. 데이터 페치중, 혹은 ssr과정중에는 Cookies can only be modified in a Server Action or Route Handler. 라는 오류가 뜨며 cookie를 set 하거나 delete하는게 안됩니다. 이럴 경우는 어떻게 해야할까요?

Next.js SSR CSR에서의 캐시 문제

메인 페이지의 컴포넌트는 무한 스크롤을 이유로 SSR안에 CSR이 작동하는 구조입니다. 거기서 제품 상세 페이지를 들어가면 현재 페이지는 RSC + 클라이언트 컴포넌트를 통해 이루어진 SSR 페이지입니다. 구매 또한 RSC / 클라이언트 컴포넌트를 구분 지어놓은 상태입니다. 구매를 하면 메인으로 와지구요. 이 경우 다시 제품 상세 페이지로 들어갔을 때 fetching을 다시 안하는 이슈가 있어(next-server 캐싱 문제) 동적 페이지로 작동해야하기 때문에 force-dynamic과 no-cache header를 달아줬습니다. 그 이후에 제대로 작동하는듯 하였는데 상세 페이지에서 클라이언트 컴포넌트에서 console.log를 찍었을 때 구매 한 이후에도 수량이 변하지 않는 것을 확인하였습니다. 이러한 문제를 해결하기 위해서 구매 페이지에서 onSuccess 됐을 때 router.refresh()를 해줬을 시에는 상세 페이지에서의 클라이언트 컴포넌트 console이 제대로 찍히는걸 확인하였습니다. 이에 대해 궁금점은 메인 페이지로 가는 router 이후 refresh를 하였고 메인에서 변경된 상황만 refresh 되는걸로 알고 있었는데 별개의 페이지인 상세 페이지에서 console이 제대로 찍히는 이유가 뭔지 모르겠습니다. 이러한 전처리를 하지 않으면 새로고침을 하지 않으면 이전의 data가 그대로 console에 찍힙니다. 또한 force-dynamic을 해줬는데도 불구하고 console.log를 SSR 페이지에서 찍었을 때 최초의 접근 할 때는 가져오지만 그 이후에 다시 들어올 때는 메인에서 refresh를 하고 나서도 console이 안찍히는데 왜 이런지 궁금합니다. next-server에서 매번 data를 fetching하지만 ui의 변경이 없다고 판단되면 클라이언트로 데이터를 보내지 않아 찍히지 않는걸까요.

리액트에서 스크롤로 opacity 조절할때, ref vs opacity

안녕하세요. 리액트로 스크롤할 때 opacity를 조절하는 기능을 만들고 있습니다. 이 컴포넌트에는 작성자, 이미지 등 다양한 값들이 존재하는데요. 스크롤할 때는 style의 opacity만 변경됩니다. 그렇다보니.. 굳이 리렌더링을 트리거하는 state로 이걸 관리해야되나 싶긴한데요. 이런 상황이라면 다들 어떻게 개발하시나요?

채팅 디비 설계 질문이요!

안녕하세요:) 저는 ! 웹소켓과 관계형디비+프리즈마 를 이용해서 백엔드를 구성하고, 리액트로 만든 프론트 와 양방향 채팅 서비스를 만들려고 합니다! 채팅방 DB스키마를 작성하는데 어려움을 겪어 질문을 남깁니다. 현재 프리즈마에서 model ChatRoom { id Int @id @default(autoincrement()) name String creatorId Int users ChatRoomUser[] messages Message[] createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } model ChatRoomUser { id Int @id @default(autoincrement()) userId Int // 외부 API에서 가져올 사용자 ID chatRoomId Int chatRoom ChatRoom @relation(fields: [chatRoomId], references: [id]) createdAt DateTime @default(now()) updatedAt DateTime @default(now()) @@unique([userId, chatRoomId]) } model Message { id Int @id @default(autoincrement()) chatRoomId Int senderId Int // 외부 API에서 가져올 사용자 ID receiverId Int? // 선택적 필드, 단체 채팅에서는 null content String timestamp DateTime @default(now()) chatRoom ChatRoom @relation(fields: [chatRoomId], references: [id]) createdAt DateTime @default(now()) updatedAt DateTime @default(now()) } 이런식으로 구현하였는데 조언좀 부탁드립니다.ㅠㅠ

객체 depth가 깊은 경우 ... 연산자로 복사하면 안좋나요?

안녕하세요. react를 공부 중인 초보자입니다. 현재 recoil 사용하여 recoil state에 객체로 state를 사용하고 있습니다. 그런데 input에서 onChange 이벤트로 state를 변경할 때, 객체의 depth가 깊다면 ... 연산자로 복사하면서 가는게 안좋나요? 예를들어 setState(prev => ({ ...prev, [name]: { ...prev[name], data: { ...prev[name].data, value: value } }, })); 이런 식으로 update 할 경우 ... 연산이 너무 많아져서 비효율적 인가요? 해당 input의 data가 다른 페이지에서 사용 되진 않고 다른 페이지를 갔다 와도 (컴포넌트 이동) 입력된 정보가 남아 있도록 recoil state에 관리하고 있습니다. 초보적인 입장에서 input에 입력 할 때마다 이렇게 하는 건 손해 같아서, input value를 컴포넌트에서 ref로 따로 관리를 하고, useEffect에서 clenup 으로 한번만 setState 하는 방식이 어떨까 하는 의문이 생깁니다. 객체 깊이가 깊어 ... 연산이 많아지는 경우 onChange에서 관리하면 성능적으로도, 클린 코드 (가독성) 면에서도 별로 일까요?

Flutter_Secure_Storage 배포 오류 질문드립니다.

안녕하세요. Flutter 주니어 개발자입니다. Flutter secure storage 패키지 사용해서 각종 정보 암호화하여 사용하였는데 해당 패키지가 릴리즈 디버그 에서는 오류를 발생시키지않다가 배포후에 read가 되지않는 오류가 몇몇 기기에 발생하였습니다. 공식문서에는 안드로이드 기종에서 문제가 있을수 잇다는 글이있어 옵션(encryptedSharedPreference : true)을 걸어두었습니다. 그럼에도 오류는 해결되지않았는데, 혹시 해당 오류 경험하셧거나 해결방안 아시는분계실까요?

Spring Unit test @Value

프로젝트 중 외부에 노출되면 안되는 값이 있어 환경변수로 설정한 후 @Value 어노테이션을 사용해서 값을 사용했습니다. 테스트 코드를 작성하며 통합테스트를 진행하기엔 자원소모가 크다 생각하여 유닛테스트로 테스트 코드를 작성했습니다. 그런데 유닛테스트에서는 @Value에 의존성주입이 안되서 해결방법을 찾고있습니다. 제가 찾아본 해결 방법으로는 1. @SpringBootTest 사용 2. Reflection 사용 3. 생성자를 통한 주입 이렇게 3가지 방법이 있는데 2,3번 모두 테스트코드 내에서 직접 값을 입력해줘야해서 환경변수로 값을 보호하는 이점이 사라진다고 생각이 들었습니다. 이런 상황에선 어떻게 하는게 좋을까요? 환경변수가 들어가는 값을 테스트 할때 유닛테스트를 사용하는 접근방식부터 잘못된걸까요..? 현업에선 이런 민감한 정보를 어떻게 처리하는지 궁금합니다!

JWT invaild signature 오류

쿠키에 accessToken이 발급이 되고 있고 데이터 베이스에 refreshToken이 발급 되고 있습니다 근데 사용자 조회를 하려고 api코드를 작성하니 계속 invalid signature 오류가 나오네요 시크릿 키도 확인 해봤지만 그건 문제가 아니였어요... 혹시 몰라 깃허브 코드 남겨둡니다... 문제를 해결해 주실 능력자 찾아요.... https://github.com/LeeWinJun/nikeShop

타입스크립트 타입지정

리액트 쿼리로 OptimisticUpdate 를 구현했는데 onError 에서 context 타입 지정을 어떻게 해야할지 모르겠습니다 ㅠㅠ context : 타입 하면 오류나고, data : 타입 = context 해도 오류나고 as 를 쓰면 해결되긴 하는데 더 좋은 방법 없을까요? ㅠㅠㅠ 'use client'; import { useState } from 'react'; import { toast } from 'react-toastify'; import { usePostLikeCount } from '@/hooks'; interface LikeContextType { previousLikeCount: number; previousIsLike: boolean; } export const useOptimisticLike = ( boardId: number, initialLikeCount: number, initialIsLike: boolean, refetch: () => void ) => { const [optimisticLikeCount, setOptimisticLikeCount] = useState(initialLikeCount); const [optimisticIsLike, setOptimisticIsLike] = useState(initialIsLike); const { mutate: postMutate } = usePostLikeCount(boardId, { onMutate: async (): Promise<LikeContextType> => { setOptimisticLikeCount((prev) => optimisticIsLike ? prev - 1 : prev + 1 ); setOptimisticIsLike((prev) => !prev); return { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, }; }, onError: (err, variables, context) => { const data: LikeContextType = context; if (data) { setOptimisticLikeCount(data.previousLikeCount); setOptimisticIsLike(data.previousIsLike); } toast.error('좋아요 업데이트에 실패했습니다.'); }, onSuccess: () => { refetch(); }, }); const uploadLike = () => { postMutate(); }; return { optimisticLikeCount, optimisticIsLike, uploadLike, }; };

프론트 경력 기술 면접 궁금한 것이 있습니다.

안녕하세요 주니어 프론트엔드 개발자 입니다. 1. 기술면접에서 어떤 프로젝트의 기술적인 부분을 설명해달라고 했을 때 아래와 같이 기본적인 내용도 말할만 한가요? - 리액트의 Suspense 와 Error Boundary 를 사용하여 선언적으로 Data Fetching 을 처리함 Error fallback 에는 refetch 가능한 로직도 포함하여 재시도 할 수 있게끔 함. 2. 제가 도입하지 않은 라이브러리에 대해 도입 이유를 물어본다면 제가 생각한 도입 이유를 말해도 될까요? - 제가 도입했다고 말하지도 않았는데 이런 질문을 종종 받습니다. 기록이 따로 없었기 때문에 회사에서 그 라이브러리를 도입한 이유는 알 수는 없습니다. - 이야기할 때 진짜 이유는 모르지만 저라면 ~해서 도입했을 것 같습니다. 처럼 이야기 하는 편입니다.

firebase pagination

파이어베이스 에서 wherfield를 통해 orderby 와 limit 으로 pagination 기능을 구현하였습니다. wherefield 안에 in 을 통하여 팔로잉 한 상대만 볼 수 있게 구현중에 있는데 배열안에 30개가 넘어가니 작동하지 않더군요.. 모두 불러와서 로직 상에서 구별하는 방법 말고 방법이 있을까요?

React-query로 실시간 데이터 반영

리액트를 통해 버스 위치 데이터를 받아서 버스 위치를 실시간으로 보여주는 앱을 개발하고 있는데요, 리액트 쿼리를 활용해 10초마다 refetch하여 데이터를 업데이트하려고 하는데 계속 자동으로 캐싱되어 처음 가져온 데이터만 10초마다 가져오네요 ㅠ (개발자 도구에서 disable cache를 하면 잘 가져옴) 새로고침를 해도 마찬가지 입니다. const { data, isLoading, error, refetch } = useQuery(["busPos"], getData, { refetchIntervalInBackground: true, refetchInterval: 10000, cacheTime: 10000, }); 어떻게 하면 데이터를 잘 업데이트할 수 있을까요?? Open api 사용 중인데 요청 헤더에 캐시 컨트롤을 노 캐시로 하면 cors 에러가 뜹니다 ㅠ

forwardRef 관련

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

안녕하세요 html,css질문입니다 제발 도와주세요

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>중경삼림</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script> <script> jQuery( function() { jQuery( '#background' ).YTPlayer(); } ); </script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="jb-box"> <div id="background" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=ncT1R2hMpaQ', mute: true, showControls: false, useOnMobile: true, quality: 'highres', containment: 'self', loop: true, autoPlay: true, stopMovieOnBlur: false, startAt: 9.5, opacity: 1 }"></div> </div> <br><br><br> <div id="director"> <br><br><br><br> <h1>왕가위</h1> </div> </body> </html> 이건 html이고, body{ margin: 0; } .jb-box { position: relative; } #background { z-index: -1; } 이건 외부 css파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...