#rect

질문 2

해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

3달 전 · 김혁진 님의 새로운 답변

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

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

개발자

#react

#nextjs

#프론트엔드

#middleware

#token

답변 2

7달 전 · 익명 님의 질문

프론트 배포 netlify 환경변수

리액트에서 백엔드 서버주소를 관리할 때 .env 파일에 환경변수로 관리하고 있습니다. 그런데 netlify로 배포를 할 때, netlify.toml 파일을 작성해주는데, 이때 redirect에 백엔드 주소를 그대로 사용하면 깃허브에 toml파일이 노출되며 .env 파일로 관리해주는게 의미가 없어지는거 같은데 어떻게 해야되나요?

개발자

#netlify

#배포

답변 0

일 년 전 · 이달리 님의 질문

로그인 구현 관련 질문 subdomain.com

안녕하세요 슬랙처럼 로그인을 하면 워크스페이스 리스트가 나오고 해당 워크스페이스를 클릭하면 해당 워크 스페이스로 로그인이 되는 페이지를 구현하려 하는데요. Next.js를 사용중이고 iron-session 라이브러리 통해서 세션을 저장하고 있습니다. ex) app.oursite.com <- 통합 로그인 페이지 워크스페이스 클릭하면 해당 워크스페이스 로그인을 하고 세션을 저장해서 워크 스페이스 사이트로 redirect 시키려 하는데, const session = await getIronSession<Session>(cookies(), { cookieName: 'cookie', password: IRON_SESSION_SECRET_KEY, cookieOptions: { secure: false, // 로컬 테스트에서는 false, 실제 배포에서는 true로 설정 sameSite: 'Lax', // sameSite 옵션을 Lax로 설정 domain: 'localhost', // 로컬 테스트 시 domain 설정을 제거하거나 localhost로 설정 path: '/', }, }); {workspace1}.ourstie.com {workspace2}.ourstie.com 세션 저장이랑 redirect 처리했을때 세션 저장하고 해당 페이지 확인은 하였는데 해당 페이지에서 로그인 인증은 제대로 되지 않고 있습니다. 로그인 페이지로 이동되더라고요 로그인이 안되는 원인으로 짐작가는게 있으면 알려주시면 감사하겠습니다

개발자

#로그인

#통합로그인

#세션

#nextjs

답변 0

보충이 필요해요 2

일 년 전 · 프레드윰 님의 새로운 답변

안녕하세요 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파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

개발자

#html-css-js

#웹디자인

#css

#html

#script

답변 2

일 년 전 · 김하림 님의 답변 업데이트

nextjs styled-component ssr 에러

모든 분들이 격어보셨을 에러에 대해 해결이 되지 않아 질문 드려봅니다. 아래 참고를 통해 nextjs ssr에서 styled-component가 적용되게 시도했습니다 (현재 app router 방식을 사용하고 있습니다) 하지만 동일하게 했을 때 여전히 아래와 같은 오류가 떴습니다. babel, swc 둘 다 시도 했을 때 동일 했고 혹시 제가 놓지고 있는 부분이 있을까요? 4번까지 진행했습니다. nextjs styled-component typescript 오류 : Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component 참고 : https://dev.to/rashidshamloo/using-styled-components-with-nextjs-v13-typescript-2l6m#5

개발자

#nextjs

#styled-component

#ssr

답변 2

일 년 전 · 강병진 님의 새로운 답변

질문) process finished with exit code2

/Users/사용자명/Desktop/Pycharm/시도1/venv/bin/python /Users/사용자명/Desktop/Pycharm/시도1/hello.py /Library/Frameworks/Python.framework/Versions/3.12/Resources/Python.app/Contents/MacOS/Python: can't open file '/Users/사용자명/Desktop/Pycharm/시도1/hello.py': [Errno 2] No such file or directory Process finished with exit code 2 .. 파이참을 실행시키려는데 이렇게뜨네요 코딩초보입니다 도와주세요

개발자

#파이참

#파이썬

답변 1

추천해요 1

보충이 필요해요 1

일 년 전 · 이지우 님의 질문

리액트 네이티브 flatlist 관련 질문 받아주실 분 있으실까요?

제가 리액트 네이티브로, 위아래로 슬라이드 하면 한 달씩 넘어가는 캘린더를 만들고 있습니다. 그래서 전체를 FlatList로 만들고 스크롤 시 y인덱스를 받아와서 한 달씩 랜더하는 식으로 코드를 구현하였습니다. const handlePageChange = (newPage: number) => { if(newPage !=0) { const newDate = new Date(currentDate); newDate.setMonth(newDate.getMonth() + newPage); setCurrentDate(newDate); } }; return ( <FlatList data={[...Array(1).keys()]} keyExtractor={(item) => item.toString()} renderItem={({ item }) => ( <CalendarMonth currentDate={{ currentDate }} ClickedDate={{ ClickedDate }} setClickedDate={setClickedDate} /> )} horizontal={false} pagingEnabled= {true} showsVerticalScrollIndicator={false} scrollEventThrottle={100000} onScrollEndDrag={(event) => { const offset = event.nativeEvent.contentOffset.y; const direction = offset === 0 ? 0 : offset > 0 ? 1 : -1; handlePageChange(direction); }} /> ); 이런 식으로 코드를 구현하였는데 위로 잡아 올렸을 때 빈칸이 보이는데 저는 스크롤 시 모션은 보이지 않고 바로 다음 달력으로 넘어갔으면 합니다. 혹시 스크롤 시에 달력이 움직이지 않고 바로 넘어갈 수 있는 방법이 있을까요?

개발자

#react-native

답변 0

일 년 전 · 상연 님의 새로운 댓글

브라우저 API KEY 노출 관련

안녕하세요 프론트엔드 개발자 취업을 준비 중인 취준생입니다 다름이 아니라 프로젝트를 진행함에 있어 궁금증이 생겼는데 생각보다 답을 찾기가 어려운 것 같아 질문 올려 봅니다 오어스나 지도, open ai 등의 api를 사용할 때, 개발자도구 네트워크 란에 들어가니까 api키가 쉽게 노출되더라구요 인증 토큰까지야 어치피 자신의 것이 노출된다고 생각하긴 하는데 api key나 다른 시크릿 키 등은 위험할 수도 있겠단 생각이 들었습니다 env가 생각보다 쉽게 노출되기 때문에 보안에 중요한 부분은 넣지 않아야 한다고 들었습니다만 위와 같은 경우, 브라우저에서 키를 보이지 않게 하는 방법이 어떤 게 있을까 해서 여쭤봅니다 조금 찾아 봤더니 사실 플랫폼 도메인과 redirect uri 같은 것을 등록하기 때문에 외부 오리진에서 api 키를 이용하는 것은 막혀 있다고 알고 있긴 한데 이렇게 잘 구성되어 있지 않은 부분이 있을 수도 있고, 말 그대로 민감한 정보가 노출될 수도 있다고 생각해서 가릴 수 있는 방법을 알고 싶습니다 FE는 ts vite react에 배포는 vercel로 진행했고 환경 변수는 버셀 프로젝트 세팅 환경 변수에 넣었습니다

개발자

#env

#브라우저

#api

#보안

답변 1

2년 전 · 익명 님의 질문

next.js 로그아웃 기능 (서버/클라이언트 공통 코드 작성 방법)

안녕하세요. 현재 로그아웃 기능을 구현하고 있습니다. 로그아웃 진행 시 다른 서브 도메인을 갖고 있는 사이트로 redirect 시킨 후 다시 돌아와야 합니다. 예) a.example.com에서 로그아웃 시 -> b.example.com?redirect=a.example.com 사이트로 리다이렉트 후 다시 a.example.com 사이트로 이동 해당 로직을 구현 함에 있어 클라이언트에서는 문제가 없습니다. 하지만, 서버 미들웨어에서 정상 동작은 하나 첨부 이미지와 같은 CORS 에러가 발생됩니다. 서버/클라이언트에서 동시에 사용할 수 있는 코드로 로그아웃 버튼을 클릭 하여 로그아웃 처리되는 로직을 만들고 싶은데요. 방법이 있을까요? (서버에서 로그아웃 처리가 필요한 이유는 토큰 만료 시 서버 단에서 로그아웃 시키기 위하여..) 단, b.example.com 사이트에서는 어떠한 설정도 불가능

개발자

#next.js

#logout

#middleware

#app-route

답변 0

보충이 필요해요 1

2년 전 · 김현진 님의 새로운 답변

useEffect 가 끊임없이 돌고있어요. dependency 의 늪에서 벗어날 수 있게 도와주세요..! 🥹

안녕하세요. 소켓 통신을 사용한 채팅 기능 구현중인 주니어 개발자입니다. 아래와 같은 상황에 보통 어떻게 대처하시나요? 문제: useEffect 사용 시 서버에 채팅 방 말풍선 목록을 요청(publish)하고, 요청한 데이터를 state 에 저장하는 과정에서 loop 가 생겨 useEffect 가 끊임없이 돌고 있습니다. 문제 설명: - 서버에 채팅 방 말풍선 목록을 요청할 때 넘기는 값 중에 direction 이라는 변수가 있는데요, 이 direction 변수는 채팅 방 말풍선 개수에 의존적입니다. 따라서 useEffect 의 dependency에 채팅 방 말풍선 목록이 들어가게 됩니다. - 서버로부터 데이터를 받은 즉시 채팅방 말풍선 목록을 state에 저장하게 됩니다. - 위 두 상황(useEffect의 deps 설정, setState) 때문에 loop 가 생기게 됩니다. 생각해본 해결 방안: - useRef 를 사용하여 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. - 말풍선 목록이 배열 데이터이기 때문에, 새로운 배열을 만들지 않고 기존 배열을 계속 사용하여 같은 메모리를 사용합니다. 같은 메모리를 사용하고 있기 때문에 useEffect 의 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. - 말풍선 목록을 링크드리스드 자료구조를 사용하고, 한 번 생성한 자료구조를 새로 만들지 않고 재사용하여 같은 메모리를 이용합니다. 같은 메모리를 사용하고 있기 때문에 useEffect 의 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. 위 해결 방안의 문제점: - useEffect 의 deps 에 등록하지 않는 방법은 anti pattern 이라는 느낌을 받습니다. 아마도 위 방법을 사용한 데이터를 사용하는 컴포넌트의 re-rendering 이 되지 않기 때문에 이런 느낌을 받는 것 같습니다. 참고 자료: [react 문서](https://react.dev/learn/removing-effect-dependencies#are-you-reading-some-state-to-calculate-the-next-state)

개발자

#react

#useeffect

#dependency

답변 2

2년 전 · 최건 님의 질문

firebase authentication

html에서 아래 같이 data를 전송했을 때 백엔드에서 const {createUserWithEmailAndPassword,signInWithEmailAndPassword,signOut,browserSessionPersistence, setPersistence}= require("firebase/auth"); const db = require("../config/firestore"); const {email,password} = req.body; console.log(email,password) await signInWithEmailAndPassword(auth,email,password) res.redirect("/api/home") 로 받으면 첫 번째 로그인시 Cannot POST /auth/login가 뜨면서 로그인이 안되고 뒤로 갔다가 다시 로그인을 하면 로그인이 완료되는 오류가 발생합니다... firestore은 form 데이터를 받아 저장하는 것에 오류가 발생하지 않는데 왜 authentication에서는 이러 오류가 발생하는지 궁금합니다 ㅠㅠ 해결 방안도 궁금합니다 ! ㅠㅠ

개발자

#firebase

#firebase-authentication

답변 0

2년 전 · 김하림 님의 답변 업데이트

개발자 도구의 width와 getBoundingClientRect().width의 길이가 다른 이유...

안녕하세요 개인적으로 만들고 있는 프로젝트에서 getBoundingClient().width의 값과 개발자 도구 상의 width 값이 다른 문제가 나와서 원인을 찾고 있습니다. div의 css는 box-sizing:border-box; padding:5px 10px; border:2px solid white; display:inline-block 입니다. 부모 div는 width 값을 정해주지 않아서 useEffect 안에서 부모 div의 children을 순회하며 자식 노드의 width를 누적해서 width값을 구하려고 하는데 첨부한 사진처럼 js로 구한 width가 개발자도구와 맞지 않는 문제가 발생하고 있습니다. 일단은 임의로 보정값을 넣어서 원하는 결과물은 나왔지만 찝찝한 마음이 들어서요 이 문제의 원인을 찾고 싶습니다. 감사합니다!

개발자

#css

#getboundingclientrect

#width

답변 1

2년 전 · 익명 님의 새로운 댓글

Next.js(13.4.0) 모든 페이지에서 토큰 유/무 판단하기

현재 signup, signin, home, save, mypage 총 5개의 페이지가 있습니다. home, save, mypage에서 refresh-token의 존재 유/무에 따라서 signin 경로로 redirect 시키려고 합니다. 로그인을 하면 localStorage에 access-token 저장, browser cookie에 refresh-token이 저장됩니다. 로그인 후에 임의로 refresh-token 값을 지웠을 때, signin 경로로 redirect 시켜주기 위해 각 페이지에서 getServerSideProps를 사용하여 refresh-token의 존재 유/무를 판단하여 redirect를 시켜주고 있습니다. 현 상황처럼 각 페이지에서 인증을 처리하는 것이 아닌 모든 페이지에서 공통으로 인증을 처리하는 방법이 있는지 궁금하여 질문드립니다.

개발자

#next.js

#typescript

#인증

답변 1

2년 전 · 임태연 님의 답변 업데이트

Next js 공부(버전) 추천

Next js를 배워볼 겸 혼자 사이드 프로젝트로 도전을 해보려고 합니다. 저는 어떤 기술들을 사용하고자 할 때, 강의로 가장 기본적인 것들을 공부한 후에 프로젝트 생성하고 나서 공식문서를 보던 깃허브를 보던 하는 타입입니다. 요새 Next가 많이 언급되는 것 같아서 사용해보려고 하는데, 강의도 그렇고 블로그 글이나 등등 최신 app directory는 자료가 잘 없더라구요. 그래서 어떤 버전으로 사이드 프로젝트를 시작하는게 좋을지 의견을 구하고자 합니다. 1. 구버전(12 이하)에 document방식으로 먼저 공부를 하고 나중에 최신버전에 대한 자료들이 더 많아졌을 때 마이그레이션 하는 방법 2. 맨땅에 헤딩 느낌으로 최신버전으로 악깡버 의견 남겨주시면 감사하겠습니다.

개발자

#next.js

#typescript

#react

답변 2

2년 전 · 제일 님의 새로운 답변

Next.js 13 app directory에서 client component는 사전 렌더링이 되지않는건가요?

제목 그대로입니다. 상단에 'use client'를 선언한 클라이언트 컴포넌트는 사전렌더링이 되지않고 react처럼 클라이언트에서 렌더링이 되는건가요? 아니면 build시에 static generation이 되는건가요?

개발자

#next.js

#next.js-13

#react

답변 1

2년 전 · 김관호 님의 새로운 답변

C언어 과제좀 도와주세요... 부끄럽습니다.

Rectangle 클래스를 상속받은 파생클래스 Cube 클래스를 추가하여 프로그램 완성시켜야 합니다. Cube 클래스는 Rectangle 클래스에서 정의된 멤버와 멤버함수를 사용하여 클래스를 작성 main 함수를 통한 결과는 Volumn : 60 입니다. 일하면서 학점은행제 수업을 듣는데 내용이 점점 어려워지니 집중도 안되고 졸다보니 무슨말이지도 잘 모르겠어요...... 자랑은 아니지만 한번만 살려주세요 ㅠ #include <iostream> using namespace std; class Rectangle { int width, length; protected: Rectangle(int width, int length) { this->width = width; this->length = length; } int getArea() { return width * length; } }; int main() { Cube cube(3, 4, 5); cout << "Volumn : " << cube.getVolumn() << endl; }

개발자

#c언어

#과제

#학은제

#살려주세요...

답변 1

일 년 전 · 서승태 님의 질문 업데이트

게임클라 개발 지망 대학생 2학년입니다.

아직 2학년인지라 배운 언어는 C와 Java뿐이라서 방학 중에 C# 독학을 하고 있습니다. Unreal보다 Unity가 조금 더 처음 배우기 쉽다는 말에 시작한 C#이고 Unity 공부하려고 준비 중입니다. 그러다 문득 인터넷에서 글을 보다가 DirectX나 api 등 배울 것이 많은 듯합니다. 정답은 없겠지만 어떤 것을 먼저 배우는게 좋은지 게임 클라이언트 개발자들은 어떤 식으로 공부해나갔는지 정말 궁금합니다. 잘 모르는 대학생이라 답답한 부분이 많지만 이 질문이 제일 궁금해서 질문드립니다.

개발자

#unity

답변 0

2년 전 · 커리어리 AI 봇 님의 새로운 답변

플랫폼 별 (web, android, ios)별 Google Oauth 로그인 관리

안녕하세요. 현재 저는 nestjs를 사용하여 Google Oauth 로그인을 처리하고 있습니다. 로그인 로직 처리 도중, 궁금증이 하나 생겨 질문을 남깁니다. 현재 Google Oauth의 client ID 생성 방식은 web, android, ios 별로 다릅니다. (web은 redirect_url과 client secret도 있음) 저는 "각기 다른 플랫폼에서 Oauth 로그인 요청 시, 요청을 보낸 플랫폼에 맞게 client ID를 어떻게 설정하여 로그인 처리를 해야 하는가?" 라는 고민을 해결하고자 합니다 이에 대한 경험이나 해결방법이 있으시면 답변주시면 감사하겠습니다.

개발자

#google-oauth

#android

#ios

#web

#nest.js

답변 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

spring boog Oauth2 client 질문 합니다!

react.js (port:3000) srping boot(port: 8080) 각각 배포 한 상황입니다. 인터넷에서 많은 자료를 찾을 수 있지만, 프로덕션에서 사용하기엔 좀 많은 걱정들이 있이서, 해소 되지 않은 부분들을 몇가지 여쭈어봅니다! 1. 많은 예시를 보면, flow 는 이렇더라구요 - 사용자가 구글 로그인을 클릭함 (localhost:8080/oauth2/google?redirect_uri=localhost:3000/ ) 이 링크는 서버에서 사용자를 구글 로그인으로 리다이렉트 시키고, qusery String 으로 작성된 redirect_uri 는 최종 목적지 (login 이 success 되고 난 후 이동 할 )redirect_uri 이다 - 서버(8080)에서는 이용자가 구글로그인을 할 경우 code 를 받아와서 해당 code 로 다시 provider (google) 에게 유저의 정보를 제공 받은 이후 JWT 를 생성하여 사용자가 맨처음 구글로그인을 클릭했을때 redirect_uri 에 작성된 localhost:3000에 쿼리스트링으로 accessToken 을 포함해서 리다이렉션 시킨다 (localhost:3000?accessT=e.....) - 클라이언트는 해당 토큰을 저장하고 후처리를 진행한다 라고 하는 경우가 많았습니다. 그런데 이렇게되면 url 에 accessToken 이 url 에 노출되는게 맞나? 싶더라구요 사실 쿠키로 심어서 보내면 되겠지만 요구사항에는 쿠키를 사용하지 않기로 했습니다. 그러면 어떻게 처리해야할까요? 도저히 클라이언트에서 안전하게 토큰을 받을 수 있는 방법이 떠 오르질 않네요 ... 2. 보통 프로덕션에서는 User table 과 OAuth2 table 을 별도로 두나요 ? ( Oauth2 테이블은 OAuth2 에서 제공받은 id, provider, userFK 정도만 저장 )

개발자

#spring-boot

#oauth2.0

답변 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

express로 service 단에서 예외처리 방법

프로젝트 간단한 설명 저희 회사 프로젝트는 프론트엔드 Rect, 백엔드 Spring 으로 되어 있고 보안 회사여서 프론트 파트는 모노레포로 구성 되어있습니다. React와 NodeJS 가 같은 포트를 사용해서 모든 요청이 NodeJS에서 처리 됩니다. NodeJS는 React와 Spring의 중간 단계라고 생각하시면 되고 구성은 Router(프론트에서 받은 요청, 지금은 Controller 분리한 상황), Api(백엔드 요청 로직)으로 구성 되어있습니다. 궁금한 부분 다른 분들의 프로젝트를 봤을 때 Controller에서는 try~catch로 오류를 체크하는데 Service에서는 Promise 객체를 반환만 할 뿐 체크하는 로직은 없었습니다. 여기 프로젝트에서 Api와 Service의 의미가 다르지만 Promise 그대로 반환하면 return 타입이 Promise<any>로 설정 될 수 밖에 없습니다.(타입 설정 불가) 그리고 Controller에서 데이터를 검증해야 하고 res.data로 받아야 될 수 밖에 없습니다. 이렇게 하면 body와 header 등 응답에 필요한 부분을 받을 수 있지만 과연 이게 맞는 것인지 의문이 들어서 같이 나누고자 글을 남깁니다. 정리 1. Api(NodeJS에서 Spring으로 요청하는 로직)에서 Controller와 동일하게 예외 처리해야 되는지 2. Api에서 검증을 수행하고 res.data를 던져도 되는 부분인지 응답을 어떤 형식으로 처리하는지(만약 header의 값이 필요하면 같이 객체로 묶어서 return 해야 함) 코드 예시(해당 코드는 회사와 관련 없으며 이해를 위한 코드 입니다)

개발자

#express

#예외처리

#모노레포

답변 1

2년 전 · NickSoon 님의 새로운 댓글

Javascript 에서 setTimeout으로 redirect 후 뒤로가기 했을때 이전 페이지가 아닌 전 전 페이지로 돌아가는 이유

크롬 브라우저에서 스크립트 setTimeout으로 이동 후에 이동 된 페이지에서 브라우저 뒤로가기 버튼을 누르면 이전 페이지가 아니라 그 전 페이지로 이동 되는 문제가 있는데 어떻게 해결 할 수 있을까요? 현재 a, b, c html 3개 파일이 있고 a는 누르면 b로 이동하는 버튼 하나를 가지고 있습니다. b는 아무 동작 없이 setTimeout으로 cl로 이동합니다. c는 아무 코드가 없고 코드를 작성할 수 없습니다. a에서 버튼을 눌러서 b로 location.href 로 이동 후 b에서 setTimeout(() => {location.replace('c.html')}, 5000) 으로 c로 이동 한 뒤 c 에서 뒤로가기를 하면 b가 아닌 a로 이동 됩니다. (b에서 유저가 클릭이나 다른 액션을 하면 c에서 뒤로가기 시 b로 오지만 아무런 액션이 없을 때 a로 돌아갑니다.) c를 수정할 수 없을 떄 b를 수정해서 이 이슈를 해결하는 방법이 있을까요? stackoverflow (https://stackoverflow.com/questions/76197884/after-redirect-from-settimeout-chrome-edge-back-button-doesnt-work-well) 에도 비슷한 이슈가 있는데 여기도 해결된 답은 없어서 여기에 질문을 남겨봅니다.

개발자

#javascript

답변 1

2년 전 · 김형준 님의 새로운 답변

next.js에서 페이지 접근 권한 관리 방법

현재 회사에서 next로 개발중인데요! 각 page마다 접근 관리를 개선해보려고 합니다. 현재 각 page에 해당하는 component에 내 정보가 있는지 없는지 확인해서 redirect해주는 custom hook으로 접근을 제한하고 있는데, 이는 한눈에 들어오지도 않고 한눈에 들어오지도 않고 일일히 page마다 hook을 넣어줘야해서 비효율적인거 같습니다! 따라서, react-query key를 관리하는 방식처럼 한 파일에 모든 route를 모아놓고, _app.tsx에서 route 체크를 통해 application 코드는 건들지 않고 route.ts만 수정하는 방법으로 각 route의 접근 설정을 해보려고 하는데 혹시 더 좋은 방법이 있을까요???

개발자

#next.js

#page

#authentication

#redirect

#react-query

답변 2

일 년 전 · ㅇㅇㅇ 님의 새로운 댓글

TailwindCSS가 Next.js Pre-Rendering 에서 동작하지 않아요

Next.js 13.4 에 App directory 를 사용 중입니다. Pre Rendering 된 결과물에서 보면 TailwindCSS 가 적용되어있지 않네요. 원래 동작이 이런건지? 아니면 별도의 설정 방법이 있는건지 궁금합니다. https://shubhamverma.me/blog/server-side-rendering-of-tailwind-css-styles-in-next-js 이 방식을 사용해봤는데 되지 않네요 ㅜ

개발자

#next.js

#tailwindcss

답변 2

2년 전 · 커리어리 AI 봇 님의 새로운 답변

react에서 google oauth redirect 관련해서 좋은 방법이 있을까 해서 질문 드려요~

/pathname-a >> google oauth 로그인 >> redirect to /oauth 위 단계에서 route /oauth에서 다시 route /pathname-a 로 redirect하는 좋은 방법이 있을까요 ? /pathname-a는 언제든 바뀔 수 있는 값이고.. localStorage로 rediret 경로를 저장을 하면 react state가 저장이 되지 않아서 고민이 많네요 ㅠ

개발자

#react

#google-oauth

#redirect

답변 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

media query가 배포환경 mobile에선 작동을 안해요… ㅜㅜ

안녕하세요 ! Nextjs 를 이용해서 프로젝트를 진행하고있습니다 ! 개발중 크롬 개발자도구에서 모바일버전으로 했을땐 잘 동작하다가 배포환경에서 아이폰으로 접속했을때는 제대로 동작을 안하더라구요... // size.ts const MOBILE_PX = '768px' export const MOBILE_MODE = `(max-width: ${MOBILE_PX}) as const` // index.ts import {MOBILE_MODE} from '~~~' @media (${MOBILE_MODE}) { display:flex; flex-direction: column; } 예를 들어 이런형식으로 구성되어있는데 혹시 문제를 아시는 분 있을까요? ㅠㅠ 구글에 가장 많이나오는 글인 <meta name="viewport" ~~~ /> 태그는 예전에 삽입되어있구... 읽어주셔서 감사합니다 !

개발자

#css

#react

#nextjs

답변 2

2년 전 · 커리어리 AI 봇 님의 새로운 답변

next js middleware redirect 질문 있습니다.

안녕하세요, next js middleware를 사용해 로그인 사용별 화면을 분기하고 있습니다. 다름이 아니라 사용하면서 문제가 있어 이리저리 검색하다가 해결방법을 찾지 못해 글 남깁니다. 문제1. 브라우저 뒤로가기시 redirect대상 페이지면 title 미변경 문제. redirect된 페이지의 title이 아닌, redirect대상의 title이 적용되었습니다. redirect가 서버에서 브라우저에 요청하는 것이고 브라우저는 이를 실행은 하나 title은 변경되지 않았습니다. 2. 로그인후 뒤로가기를 계속 진행한후 브라우저 첫 페이지(구글)도달후 앞으로 가기를 하면 무한 리디렉션 문제가 발생. 해당 문제는 로그인후 메인 화면으로 넘어간 후 다시 뒤로가기를 반복하고 첫 페이지 도달시, 다시 앞으로 가기해서(예를 들어 로그인 페이지)면 미들웨어가 화면전환 도중에 리디렉션 요청이 많다고 에러를 발생 시킵니다. 아래는 제가 사용하는 코드를 첨부하겠습니다. 요약하자면 redirect하면 title 변경이 안됨. 뒤로가기후 다시 앞으로 가기하면 리디렉션 에러가 발생함. 만약 다른 방법이 있다면, 현업에선 어떻게 처리하는지 궁금합니다. export const verifyUser = (request: NextRequest, moveUrl: string) => { // const includesPage = ['/', '/auth/login', '/dashboard/customdashboard']; const accessToken = request.cookies.get('accessToken')?.value; const url = request.nextUrl.clone(); if (accessToken && isTokenExpired(accessToken)) { // 로그인 페이지 요청시 사용자 검증이 완료된 상태면 / 페이지로 강제 리다이렉트시킴. if (moveUrl === '/auth/login' || moveUrl.startsWith('/signup')) { url.pathname = '/'; return NextResponse.redirect(url); } return NextResponse.next(); } else { // 일반 페이지 요청시 사용자 검증이 미완료된 상태라면 로그인 페이지로 강제 리다이렉트시킴. if (moveUrl === '/auth/login' || moveUrl.startsWith('/signup')) { return NextResponse.next(); } removeLoginCookie(); url.pathname = '/auth/login'; return NextResponse.redirect(url); } };

개발자

#next.js

답변 3

추천해요 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

Next js에서 소셜 로그인 구현할 때, 발생하는 redirect 문제

사내에서 블로그 어플리케이션을 만들고 있는데 Next js를 처음 적용하다보니 마주하는 문제들이 많아 해당 내용에 대해 아이디어를 얻고자 글을 남깁니다! 현재 로컬에서는 소셜 로그인 과정이 무리없이 동작 했는데 배포 이후 소셜 로그인을 진행할 때 redirect url로 페이지로 오는 과정에서 지정해둔 페이지가 아닌 메인 페이지로 오게 됩니다 도메인을 보면 redirect url로 지정해둔 경로이고 인가코드가 쿼리스트링으로 그대로 있는 상황입니다 이에 이어서 다른 페이지에서 새로고침을 하는 경우 다시 메인 페이지로 오는 에러가 있습니다 해결방법을 찾아봤을때 next.config.js 에서 해결하는 방법이 있다고 했는데 어떤 방식으로 적용해야하는지 감이 잡히질 않습니다.

개발자

#next.js

#redirect

#소셜로그인

#next.config.js

답변 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

데이터 수집 시스템 조언 부탁드립니다..

안녕하세요. 현재 데이터분석가 인턴으로 회사에 들어간지가 한달이 조금 넘었습니다. 현재 회사에서 분석이 아닌, 직접 데이터를 수집하는 작업을 하고 있습니다. 제가 분석만 하다보니, 데이터를 수집하고 저장하는 작업을 처음해보고 사수도 따로 없다보니 조언을 구할 곳이 없어서 이렇게 게시물로 조언을 요청드립니다.. 지식이 부족해 다소 어렵게 설명을 드려도 이해 부탁드리며, 제 글을 보고 “저 친구는 왜 저렇게 비효율적으로 하지? 이렇게 하면 좋을텐데”라는 생각이 드신다면 바로 댓글이나 쪽지 부탁드립니다. 제가 처음 올려봐서 쪽지 기능이 있나 모르겠네요.. 먼저, 간단하게 제가 진행하고 있는 데이터 수집 절차를 설명드리겠습니다. 1. 컬럼이 한개인 4GB가 조금 넘는 데이터를 수집 코드에 불러와야 한다. 해당 데이터에는 도메인 주소가 담겨 있다. 2. 내 수집 코드는 불러온 데이터를 한행씩 조회하면서 수집을 진행한다. 3. 한 행에 있는 도메인 주소에 순서대로 http 접속을 해서 해당 도메인 주소가 사전에 설정한 특정 조건을 만족하면, 해당 도메인 주소와 사이트에 접속해서 추출한 정수형 값을 DB에 저장한다. 4. 즉, 4기가의 데이터를 불러와 한 행씩 조회해가면서 실시간으로 데이터를 db에 수집하는 코드다. 5. 24시간 동안 코드를 돌리는 수집 예상 기간은 3개월 정도이다. 다음으로는 조금 구체적인 진행 사항을 말하겠습니다. 밑에서부터 길어지니, 바쁘신 분들은 위에 주요 절차만 보시고 조언 주시면 감사하겠습니다. 1. 파이썬만 사용할 줄 알기 때문에, 파이썬을 사용하여 class로 만들어 수집 코드를 짰다. 2. 데이터의 양이 많아서 메모리 부족 오류가 빈번하게 나타나, 하둡과 아파치 스파크를 이용해봤다. 내가 조회할 데이터 파일을 하둡 HDFS에 업로드 한다음에, 아파치 스파크 클러스터를 구축했다. 그리고, pyspark 모듈을 이용해 파티션을 나눠 데이터를 불러왔다. 파티션으로 받아온 값을 리스트로 변환하여 순서대로 해당 도메인 주소로 접속하는 반복문을 진행하면서 데이터를 수집했다. 즉 파티션으로 데이터를 쪼개서 1번 파티션부터 n번 파티션까지 각각 파티션 내부에 도메인 주소 리스트가 반복문을 진행된다고 보면 된다. 각 파티션이 다른 파티션으로 전환되는 과정도 반복문으로 처리했다. 하나의 파티션 마다 내가 만든 class(도메인 리스트를 인자로 받는다)가 한번씩 실행된다고 보면 된다. 3. 수집 속도가 너무 느려서 class에 있는 수집 메소드를 멀티 스레드 방식을 이용해서 수정해주었다. 수집 속도가 매우 빨라졌다. 4. 기존에는 aws의 클라우드 db(dynamo db)를 사용했지만, 과금 문제로 인해 로컬에 db를 설치하기로 했다. 쓰기 속도가 매우 빠른 redis db를 선택했다 5. 위에서 설명한 반복문을 돌면서 조건에 일치한 도메인 주소와 정수 값은 한 행씩 redis db에 key(도메인주소) value(정수값) 형식으로 저장하도록 코드를 만들었다. 이 과정도 class 내부에 포함되어 있다. 6. redis는 on memory db이기 때문에 대용량 데이터를 영구적으로 저장하고 분석하기에 적합하지 않다고 판단해서 1시간마다 redis에 있는 데이터를 postgresql db로 옮겨주는 코드를 따로 만들었다. postgresql db에 미리 redis에서 옮겨갈 테이블을 생성해두었다. redis의 key였던 도메인 이름을 첫 번째 필드에 프리이머리 키로 저장했고 value인 정수 값을 2번 째 필드에 값으로 넣어줬다. 그리고, 마지막 필드에는 자동으로 데이터가 저장될 때, 현재 시간이 넣어지게 테이블을 만들었다. 총 3개의 열로 구성된 테이블에 1시간에 한번씩 redis에 저장해두었던 데이터가 옮겨간다고 생각하면 된다. 7. 처음 redis에 데이터를 저장할 때 ttl을 설정해서 1시간 10분이 지나면 redis db에서 데이터가 자동으로 소멸되도록 설정했으며, 만약 postgresql에 중복된 데이터가 들어간다면 자동으로 무시하고 다음 작업을 진행하도록 테이블 설정을 해줬다. 즉, 실시간으로 데이터가 수집되고 자동으로 시간이 지나면 데이터가 소멸되는 redis db에서 1시간마다 한번 postgresql로 옮겨주는 코드를 따로 만들었다. 8. 수집 코드를 spark-submit 명령문으로 실행해주었다. spark-submit 명령어 앞에 nohup을 해줘서 백그라운드에서 코드가 실행되게 해줬고, 로그 결과를 따로 파일을 만들어 저장되도록 했다. 그리고 파이썬 실행 파일 내에서도 로그를 입력하는 코드를 만들어서, 도메인의 http 접속이 성공했는지의 여부를 로그 파일에 실시간으로 입력되도록 했다. 예를 들어, http 접속이 잘 된 도메인 주소는 로그에 “INFO 도메인 주소: success” 이렇게 기록하고, 타임아웃 에러, 접속 에러, redirect 오류, db 저장 오류는 모두 종류별로 예외 처리해서 로그에서 기록되도록 코드를 구성했다. 파이썬에서 자체적으로 로그를 기록한 파일은 수집코드를 실행하면서 파티션이 전환될 때마다 하나씩 생성된다. 이제 이렇게 제가 실행할 코드는 24시간 내내 수집을 진행하는 코드 하나와 1시간에 한번 데이터를 옮겨주는 스케줄러 코드로 총 2개가 됩니다. 저는 이 코드와 수집 환경을 만들기 위해 모두 도커를 활용하였으며, 사용한 컨테이너와 부가 설명은 다음과 같습니다. spark-master: 하둡과 스파크 클러스터를 구축하는 컨테이너로 standalone모드로 spark-summit 명령어로 파이썬 파일을 실행해주었다. --conf 옵션으로 메모리, 하트비트 간격, 파티션 수 를 지정해주었다. 스파크와 하둡을 처음 사용해봐서 약간의 개념만 있는 상태에서 돌려보니 아직도 세부 설정을 제대로 이해하지 못했다. 결국 worker를 1개 생성해서 파이썬 파일을 처리하도록 하였다. 현재 대다수의 오류가 이 컨테이너에서 발생한다. redis: spark-master에서 실시간으로 실행되고 있는 수집 코드에서 선별된 데이터들이 redis 컨테이너에 있는 redis db에 저장된다. postgresql: 1시간에 한번 redis에 있는 데이터를 옮기기 위해 postgresql 컨테이너를 생성했다. schduler: 1시간에 한번 postgresql 컨테이너에서 작동하고 있는 postgresql db에 redis 데이터를 옮겨주기 위한 스캐줄러 코드를 실행할 컨테이너다. redis-monitor: 실시간으로 redis db를 모니터링 하기 위해 redis-monitor 컨테이너를 생성하여 웹에서 모니터링 툴인 Redis-Stat에 접속한다. postgre-monitor: 마찬가지로, 실시간으로 postgresql db를 모니터링 하기 위해 생성한 컨테이너로 웹에서 Pgadmin4를 사용할 수 있다. 이렇게 총 6개의 컨테이너를 생성하여 내 수집 코드를 실행했는데, 여기서 많은 문제가 발생했습니다. 제가 가진 의문과 문제를 나열하자면 다음과 같습니다. 1. 먼저, 수집 코드를 실행한 다음에 스케줄러 코드를 실행해주었는데, (서로 독립된 컨테이너에서 실행) 두 코드가 DB에 동시에 접속할 때, 충돌이 일어날 가능성이 있지 않을까? 2. 수집 코드를 실행하고 몇분이 지나면 터미널이 먹통이 되고, 코드가 더 이상 실행이 안되는 일이 빈번하게 발생한다. 너무 많은 자원을 사용하고 있어서 그런건가.. 컴퓨터 사양이 안좋아서 그런건가 원인을 잘 모르겠다.. 3. spark-submit 로그를 보면 내 노트북에서는 안그러는데, 대용량 파일을 불러오는 과정에서 파티션 별로 데이터를 정리할 때 오류가 빈번하게 발생한다 . executor가 통신이 안된다는 경고 메세지도 자주 나오고, 특히, Remote RPC client disassociated 라는 오류가 가장 많이 나온다. 내 컴퓨터보다 높은 사양의 클러스터를 구축하려고 해서 그런가. 검색해보니 네트워크 문제이거나, 컨테이너에 할당한 자원을 초과해서 그런거라고 한다. 대용량 데이터를 불러오는 다른 방법을 강구해봐야되나 고민하고 있다. “그래서 요점이 뭐야” 라고 물어보신다면, 저는 현직에서 활동하고 계신 데이터 엔지니어, 백앤드 개발자 분들이 제 글을 본다면 “아니 굳이 왜 그렇게 하지? 이렇게 쉬운 방법이 있는데” 또는 “저기서 이렇게도 해봤나?, 이러면 안정적으로 코드를 돌릴 수 있을텐데”라는 반응으로 갈릴 것 같다고 생각합니다.

개발자

#데이터베이스

#데이터수집

#아파치스파크

#redis

#python

답변 2

추천해요 7

2년 전 · 커리어리 AI 봇 님의 새로운 답변

서로다른 프로젝트 컨트롤러끼리 데이터 주고 받을 방법 질문드립니다

안녕하세요 선배님들! 스프링부트로 모놀리식 방식을 써서 프로젝트를 만들었었습니다. 그리고 이 프로젝트로 3tier로 BT PT 각각의 다른 프로젝트로 나누어서 개별 컨테이너로 만들고 도커 컴포즈로 실행하는게 목표입니다 현재 bt pt를 나누기는 했으나 pt(view,controller)에는 html 템플릿과 화면전송 해주는 컨트롤러만 있고 bt(컨트롤러 서비스 레파지토리 엔티티)에서 DB에서 받은 데이터 가공 후 BT 컨트롤러에서 PT 컨트롤러로 데이터를 이동시켜야 하는데 방법을 못찾아서 질문 드립니다 ㅜㅜ redirect로 화면 전환과 redirectattribues로 스트링까지는 전송했지만 유저 리스트 같은건 pt에는 엔티티도 없다보니 옮길 방법이 도저히 떠오르지 않습니다

개발자

#springboot

#3-tier

#controller

답변 3

2년 전 · 익명 님의 새로운 댓글

Detection model RetinaNet 학습 오류

FileNotFoundError: [Errno 2] No such file or directory: '\ufeff/ RetinaNet 학습 돌리려고 했는데 위와 같은 오류가 났습니다.. 어떻게 해결해야 할까요..? 간절합니다.. Python에서 \ufeff/를 없애주려고 했는데 잘 안되서 질문드렸습니다. 해결방법과 코드를 같이 공유해주시면 감사드리겠습니다!!

개발자

#python

#train

#detection-model

답변 2