#login

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단 에서 처리할경우에는 결국에는 한번 그 페이지로 이동했다가 처리되는거라 깜빡이는 이슈가 생겨서 그렇습니다 보통 어떤식으로 처리하는지 궁금해요

iOS NEpacketTunnelProvider https 패킷 감지

안녕하세요! iOS NEPacketTunnelProvider 프로젝트를 진행하며 어려움이 있어 여쭈어봅니다. 터널링을 이용해 vpn 프록시 서버를 로컬로 두고, 해당 터널에 지나가는 네트워크 패킷을 캡쳐해보고 있습니다. https 요청의 경우 암호화가 되어 있다보니 full path(ex. https://google.com/login) 경로를 알아낼 수 없는 것으로 알고 있습니다. 그래서 SNI를 추출하여 도메인(ex. https://google.com) 정도만 출력해보고 싶은데 관련 경험이 있거나 Network Extension을 잘 아시는 분 계신가요?? 도와주신다면 커피 기프티콘으로라도 보답드리겠습니다! 감사합니다.

NavigationContainer 중첩 오류

안녕하세요, RN(Expo)로 React Navigation을 적용하다 오류가 해결되지 않아서 질문드립니다. expo를 통해 다음과 같이 index.js에 React Navigation을 적용했습니다. import { store } from "@/redux/store"; import MainScreen from "./screens/MainScreen"; import { Provider } from "react-redux"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LoginScreen from "./screens/LoginScreen"; export default function HomeScreen() { const Stack = createNativeStackNavigator(); return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Main" component={MainScreen} /> <Stack.Screen name="Login" component={LoginScreen} />{" "} </Stack.Navigator> </NavigationContainer> </Provider> ); } 그러나 다음과 같은 오류가 뜨며 빈화면만 보이더라구요ㅠ Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them. 찾아보니 NavigationContainer가 중첩되었다는 것 같은데, 저는 계속해서 그대로 강의를 따라가고 있었고, 따로 NavigationContainer를 적용한 파일이 존재하지 않습니다 ㅠ 다음 속성을 추가해도 오류가 해결되지 않습니다 ㅠ 아마 어디선가 부모에서 NavigationContainer가 적용된 것 같은데 찾을 수가 없네요 ㅠㅠ independent={true} 조금 더 찾아보니 expo-router랑 충돌이 난 거일 수도 있다는데 정확하게 모르겠네요 ㅠ

토큰 관리, 로그인 유지를 현업에서는 어떻게 진행하는지 궁금합니다

안녕하세요 토이프로젝트로 인증/ 인가 파트를 맡게되었습니다 이전의 프로젝트에서는 로컬스토리지과 전역 상태 관리 라이브러리의 persist를 활용하여 토큰과 로그인상태를 로컬스토리지에 저장하여 진행하였습니다 하지만 이번에 새롭게 진행하는 프로젝트를 위해 다양한 웹사이트를 개발자도구로 참고하였지만 토큰이나 isLogined와 같이 로그인 여부 상태를 로컬, 세션 스토리지에서 관리하는 사이트를 확인할 수 없었고, 검색을 통해 보안을 위해 Http Only 쿠키를 통해 액세스 토큰과 리프레시 토큰을 관리하는 방법이 일반적이란것을 알 수 있었습니다 이러한 방법에서 몇 가지 궁금증이 생겨 질문을 드리고 싶습니다 1. 현업에서는 어떠한 방식으로 토큰을 관리하고 로그인 상태를 유지하나요? 2. 만약 http only 쿠키를 사용하게 된다면, 쿠키에 저장된 토큰을 클라이언트에서 조작할 수 없으니, 매번 페이지를 렌더링 할 때마다 토큰이 유효한지 api 호출을 통해서 로그인 상태를 유지해야하는걸까요? (api를 통해 토큰이 유효하다면 로그인 유지, 아니라면 로그인 페이지 리다이렉션) 3. http only 쿠키 외에 인증 / 인가를 위해서 클라이언트 단에서 보안적으로 신경써야하는 부분은 어떠한것이 있을까요? 가장 기본적이지만 가장 어려운 인증/인가 부분 현업 선배님들께서는 어떻게 진행하시는지 답변해주시면 감사하겠습니다

개인 프로젝트 Git 관리

혼자서 게시판 프로젝트를 하려고 합니다. 국비학원에서 팀플할때는 일반적인 Git flow를 따라서 main - develop - feature (bugfix는 따로 하지 않았음) 이런식으로 진행했었는데 혼자서 할때도 feature까지 필요할까요? 일단 크게 Member와 Board를 develop 브랜치로 나누려고 합니다. 그 안에서 signup, login, logout, list 등 세부적인 기능마다 feature를 만들어야할지 아니면 그냥 develop 정도만 나누고 기능은 구현할 때마다 commit하면 될지 고민입니다. 혹시 너무 복잡해져서 꼬일까봐 걱정도 됩니다. (git 꼬이면 많이 힘들어지잖아요..ㅎ) 지금 이력서에 제출할 포트폴리오 용으로 만드는거라 면접관 관점에서 봐주시면 좋을 것 같습니다. 개인 프로젝트지만 git flow를 열심히 따랐다 vs 굳이 그렇게까지 필요하지 않다(중요하지 않다) 조언해주시면 감사하겠습니다.

React Spring 배포과정 중 의문의 404

react + spring boot로 진행하는 프로젝트가 현재 cloudtype이라는 플랫폼으로 배포중에 있습니다. 문제는 정확한 서버주소를 호출하는 것 같음에 불구하고 404 에러가 발생하여 해결하지 못하고 있습니다. 현재, 아래 사진과 같은 로그가 클라이언트, 서버에 각각 발생합니다. 서버에서는 다음과 같이 구성되어있고 @RestController @RequestMapping("/v1/login") @RequiredArgsConstructor @CrossOrigin(origins = "https://web-secondchance-front-bug-1cupyg2klvnmgdft.sel5.cloudtype.app") public class KakaoController { private final KakaoService kakaoService; private final Logger LOGGER = LoggerFactory.getLogger(KakaoController.class); @PostMapping("/kakao-login") public ResponseEntity<UserDto> kakaoLogin(@RequestBody KakaoLoginDto kakaoLoginDto) { String code = kakaoLoginDto.getCode(); LOGGER.info("Get Code from FrontEnd : {}", code); LOGGER.info("Request getAccessToken()"); kakaoLoginDto = kakaoService.getAccessToken(code); String accessToken = kakaoLoginDto.getAccess_token(); LOGGER.info("access_token : {}", accessToken); if(accessToken != null){ UserDto userDto = kakaoService.getUserInfo(accessToken); return ResponseEntity.ok(userDto); } else { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } // accessToken이 null임에도 getUserInfo를 부름. // 안부르게 끔 위의 방법을 포함하여 // 1. map에서 true, false를 사용하여 해봄 // 2. getAccessToken을 map객체로 반환하게끔 하여 accessToken이 있으면 true, 없으면 false로 하여 isEmpty 함수로 체크하여 부름 // 위의 두 방법 전부 소용없음. 그냥 getUserInfo를 부름. } @PostMapping("/kakao-logout") public String kakaoLogout(){ return "ok"; } } 현재 리액트에서는 다음과 같이 axios.post로 접근하여 code를 전달합니다. 무엇이 문제일까요?

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)

토큰값을 받아오지 못하는 문제 (undefined)

안녕하세요 JWT 토큰을 이용해 로그인 검증하는 로직을 구현하고 있습니다. 로컬스토리지에 토큰을 저장하는 것까지 성공했으나 프론트 측에서 로그인 검증을 요청할때 실제 토큰 값을 받아오지 못하는 문제가 있어 질문 드립니다. login-required에서 토큰 값 유무 로직을 전부 지우고 콘솔로만 찍는 경우 undefined와 실제 토큰값이 나타납니다. 만약 토큰 값 유무 로직을 이용한다면 undefined값만 서버로 들어와 페이지가 무한로딩 되는 현상이 나타납니다. next()처리가 안되기 때문인 것 같습니다. (+ index.html은 test.js를 연결하고 있습니다.) 사진으로 보면 네트워크 요청헤더에서 확인한 결과 1. 처음엔 document 유형의 localhost를, (인증 헤더 x) 이후 js를 불러온다 2. 마지막에 xhr형식인 localhost를 불러옵니다 (인증 헤더 o) (여기서 undefined, 실제 토큰값이 콘솔에 동시에 나타나는 이유라고 생각이 듦) (순서를 보면 document 유형 localhost -> css, js -> xhr 유형 localhost 즉 처음에 document 유형에서 인증헤더를 못가져와서 (js가 로드되기 전이여서) 토큰 유무를 체크하지 못하는 것 같습니다) 결론적으로 제가 생각한 문제 분석 (1) ('/') 에 get 요청을 보낸다. (2) 서버는 loginRequired를 실행한다. (3) 서버로 부터 html을 받지 못한 상태에 loginRequired가 실행되어 토큰 값은 undefined가 된다. (4) next()를 거쳐 서버에서 html을 클라이언트로 부터 응답을 해준다. (5) html을 브라우저에 보여주면서 그 html에 연결된 js를 불러온다. (6) 이때 불러온 test.js에서 get요청 ('/') 로직을 불러와 다시 server.js에서 loginRequired 응답으로 토큰 값을 불러온다. 즉 js가 로드가 되어야 userToken을 로컬스토리지로 부터 받아오고 요청을 하여 토큰 값을 불러올 수 있다. 그런데 get 요청전에 토큰 검증을 하고 허가가 되어야 html을 로드해야 하지 않을까? 그렇다면 서버에서 처리를 해야하는가? 배워가는 학부생으로 많이 부족하다고 생각합니다,, 선배님들의 견해를 받고 싶어 게시물 올립니다..! 핵심 코드는 다음과 같습니다.

사용자 등급에 따라 다른 화면을 보여주고 싶어요.

Next.js 14버전을 사용하고 있습니다. 홈페이지에 접속했을 때, 사용자의 로그인 상태 여부에 따라 각기 다른 컴포넌트를 보여주고 싶습니다. const Main = () => { const isLogin = useRecoilValue(loginStatus); const user = useRecoilValue(userAtom); return ( <> <AuthWrapper> {isLogin && user ? <Login/> : <Logout />} </AuthWrapper> </> ) }; export default Main; isLogin과 user는 로그인 여부와 회원 정보에 대한 전역 변수입니다. isLogin의 default값은 false이고, user의 경우 isLogin이 true일 때만 존재합니다. (로그인 상태일 때 해당 유저 정보를 api로 호출) 그리고 <AuthWrapper>를 통해 해당 전역 변수들을 업데이트 해줍니다. 제가 원하는 건 최초 페이지 접속 시에 AuthWrapper를 통해 state값을 초기화해주고, 이에 알맞게 컴포넌트가 렌더링 되는 것입니다. 하지만 isLogin의 default값이 false이기에 로그인 상태일 경우, 순간적으로 Logout컴포넌트가 출력되었다가 AuthWrapper에서 검증 후 state값이 변경되면 Login컴포넌트가 출력됩니다. 이 순간적인 깜빡임을 없애고 바로 동작할 수 있게 하는 방법이 있을까요? +) 추가로.. 서버 사이드에서 처리하기에는 AuthWrapper 내부에서 storage값을 사용하거나 useEffect등을 사용하기에 불가능했습니다.

리액트쿼리 사용법 이게맞나요?

좀 이상합니다.. 상황이, 1. 로그아웃 후 게시물작성 페이지로 접근하면 프라비잇 라우터 컴포넌트 + 사용자인증 훅 (리액트쿼리) 로 인해 '/' 로 잘 튕겨집니다. 2. 로그인 후 게시물 작성페이지로 접근하면 '/' 로 튕겨집니다. 최소 두번은 게시물 작성 페이지로 접근하던가, 새로고침후 접근해야 접근이 가능합니다. axios header 토큰 및 유저 정보 불러오는 api에서 리턴해주는 값들을 다 콘솔찍어서 확인해봤는데 이상없었습니다. 딱한군데 사용자인증 훅쪽만 이상이있었습니다. 아래 코드에 삽입된거에서 콘솔(userLoginInfo) 하면 언디파인이 나오는데요.. 신기한게 fetchUserInfo에서 콘솔 res.data하면 유저정보가 잘찍힙니다..ㅠㅠ 혹시 뭐떄문에그런걸까요?

Nextjs app router middleware + token 여부에 따른 리다이렉트

안녕하세요, next.js로 팀 프로젝트 진행 중 궁금한 것이 생겨 질문드립니다. next.js의 middleware.ts를 이용하여 모든 라우터에 접근할 때마다 유저 인증 토큰을 확인 후, 토큰이 없으면 /login 페이지로, 토큰이 있다면 원하는 페이지로 이동할 수 있도록 처리하길 원합니다. 유저 토큰은 로그인 시, access token을 body로 내려 받아 전역 utils 파일에 클래스 형태로 저장하고 있고, refresh token은 쿠키로 내려 받아 필요할 때마다 토큰 재발급 요청을 보낼 수 있도록 설계하고 있어요. 그런데 middleware.ts에서 전역으로 관리하는 토큰에 접근이 불가능한 것 같더라구요.. accessToken을 쿠키로 관리하지 않으면 미들웨어에서 토큰에 접근하는 방법이 아예 없는 것일까요? 아니면 제가 뭔가 단단히 착각하고 있는 것이라면 도움을 요청하고 싶습니다! 감사합니다🙇‍♂️

프론트에서 세션으로 로그인 유지 하려는 과정 중 문제가 생겼습니다.

안녕하세요 현재 제가 백엔드(스프링)를 진행하고 있고, 지인이 프론트를 진행하고 있습니다. JWT를 진행하기 전 세션을 통해서 로그인을 해보려고 합니다. 결론부터 말씀 드리자면 쿠키값에 세션id가 저장이 안되어 로그인 유지가 안되는 상황입니다. 사용하고 있는 로그인 방식은 Spring Security FormLogin 방식입니다. 복잡하게지만 백엔드 쪽에서의 문제인지 코드를 한 번 올려드리겠습니다. 생각 1. 인텔리제이 내에서 html을 등록하여 진행하면 같은 도메인, 포트이기 때문에 시큐리티가 자동으로 세션을 만들고 그 세션을 통해 자동으로 유지된다고 생각합니다. 생각2. 하지만, 프론트, 백엔드 서버 포트가 다르기에 successHandler을 통해서 쿠키에 세션ID를 담아서 보내야 된다고 생각했습니다. 하지만, 세션ID는 유지가 되지 않고, 그것에 대해 계속 알아보던 중 해결책을 못찾아 질문을 드립니다. 프론트단에서 따로 처리를 해야되는 걸까요? 아니면 제가 제대로 설정을 못하고 있는 것일까요

flutter 화면 전환

안녕하십니까! Flutter로 졸업 작품 앱 개발 진행 중인 대학생입니다. Splash 화면 구현과, 자동 로그인 및 사용자 초기 정보 입력 페이지를 구현하던 중, 화면 전환에 대해 궁금한 점이 생겼습니다. 1. Navigator.push()를 이용해서 route를 전환 2. route를 구성하는 전체 위젯을 갈아끼움 두 방법 중 사용자에게 또 다른 화면 구성을 제공하는 방법에는 어떤 것이 더 효율적이며, 무슨 차이가 있는지 궁금합니다!! 예시 1번 if (_autoLogin) { Navigator.push(context, (context) => FirstPage()); } else { Navigator.push(context, (context) => SecondPage()); } 2번 Scaffold( body: _autoLogin ? FirstPage() : SecondPage() )

nextjs에서 랜더링 시점 바꾸기

안녕하세요! nextjs 프로젝트 진행중에 궁금증이 생겼습니다. 현재 Sidebar 컴포넌트에서 카카오맵이 불러와져야 작업을 할 수 있는 상태입니다. 카카오 맵은 children 에서 랜더링되기 때문에 아래와 같이 코드작성시, Sidebar 랜더링 시점에 kakao is not defined 라는 오류가 뜹니다. 혹시 Sidebar를 좀 늦게 랜더링 할 수 있을까요? export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className={inter.className}> <div id="login-modal" /> <section className="flex h-screen"> <nav className=" h-full bg-slate-100"> <Sidebar /> </nav> {children} </section> </body> <Script src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${APIKEY}&libraries=services,clusterer`} strategy="beforeInteractive" /> </html> ); }

리액트 재사용 에러 처리 질문 있습니다

import해서 getAccessToken와 loginVerification를 사용중입니다. 그리고 이 코드를 다른 곳에서 import해서 ----중략---- try { const responseData = await sendApiRequest( apiUrl , { --생략-- }, 'POST'); ----Data(responseData.data); } catch (error) { ----중략---- 으로 import해서 사용 중입니다. 에러에 대한 처리 방법이 제대로 되었나요?

react router dom cannot get

const router = createBrowserRouter([ { path: "/", element: <App />, children: [ { index: true, path: "/", element: <Login /> }, { path: "/filelist", element: <FileList /> }, { path: "/fileupload", element: <FileUPload /> }, ], }, ]); 이렇게 작성했는데 빌드후 cannot get이 뜹니다 ㅠㅠ

for문을 이용한 중복체크 방법

public MemberDTO doRegist() { sc.nextLine(); System.out.println("*****************************************************"); System.out.print("아이디를 입력하세요 : "); String id = sc.nextLine(); System.out.print("비밀번호를 입력하세요 : "); String pwd = sc.nextLine(); System.out.print("이름을 입력하세요 : "); String name = sc.nextLine(); System.out.print("나이를 입력하세요 : "); int age = sc.nextInt(); System.out.print("성별을 입력하세요 : "); char gender = sc.next().charAt(0); sc.nextLine(); System.out.print("핸드폰 번호를 입력하세요 : "); String phone = sc.nextLine(); System.out.print("이메일을 입력하세요 : "); String email = sc.nextLine(); System.out.println("*****************************************************"); MemberDTO user = null; if(answer == 'Y') { user = new MemberDTO(id, pwd, name, age, gender, phone, email); }else { System.out.println("로그인 페이지로 돌아갑니다."); mainLogin(); } return user; } 여기에 for 문으로 아이디 중복체크를 넣고 싶은데 어떻게 넣어야 할까요...ㅠㅠ...

예외처리가 더 효율적인 코드

유저 로그인 관련 메서드를 구현하던 중, 예외처리 방법 두가지 중 어느 것이 더 효율적(가독성, 유지보수 측면 등등..)인지 여쭤보고 싶습니다 첫번째 방법: try문에 NotFoundException을 던지고, catch문에서 instanceof를 사용해서 예외의 타입을 확인하고 처리하기 async userLogin(nickname: string, password: string) { try { const user = await this.usersRepository.findOne({ where: { nickname } }); // console.log(user) if (user && (await bcrypt.compare(password, user.password))) { return user; } else { throw new NotFoundException('아이디 또는 비밀번호가 일치하지 않습니다.'); } } catch (e) { console.error(e); if (e instanceof NotFoundException) { throw e; // NotFoundException은 그대로 던지기 } else { throw new InternalServerErrorException('알 수 없는 오류'); } } } 두번째 방법: try문에서는 일반적인 Error객체를 던진 후 catch문에서 error.message를 확인하여 예외 유형을 판단하기 async userLogin(nickname: string, password: string) { try { const user = await this.usersRepository.findOne({ where: { nickname } }); // console.log(user) if (user && (await bcrypt.compare(password, user.password))) { return user; } else { throw new Error('아이디 또는 비밀번호가 일치하지 않습니다.'); } } catch (error) { if (error.message === '아이디 또는 비밀번호가 일치하지 않습니다.') { throw new NotFoundException('아이디 또는 비밀번호가 일치하지 않습니다.'); } else { // 다른 예외 처리 throw new InternalServerErrorException('알 수 없는 오류'); } } }

리액트 내비게이션 초기 데이터값 설정

import React, { useEffect, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { TbArrowBigUpFilled } from "react-icons/tb"; import useScroll from "../utils/useScroll"; import useProductsQuery from "../useProductsQuery"; const Nav = () => { const { isNavFixed } = useScroll(); const [activeButton, setActiveButton] = useState(0); const handleButtonClick = (index) => { setActiveButton(index); }; const categoryNames = { materials: "소재별 품목", purposes: "용도별 품목", }; const [isScrollMenuVisible, setScrollMenuVisible] = useState(false); const handleMouseEnter = () => { setScrollMenuVisible(true); }; const handleMouseLeave = () => { // console.log("마우스 이탈"); setScrollMenuVisible(false); }; const location = useLocation(); const isloginorsignup = location.pathname === "/login" || location.pathname === "/signup"; const { isLoading, isError, errorMessage, materials, purposes } = useProductsQuery(); const [hoveredOnedepth, setHoveredOnedepth] = useState(null); const [onedepthChildren, setOnedepthChildren] = useState([]); const [hoveredDivision, setHoveredDivision] = useState(null); const [twodepthDivision, setTwodepthDivision] = useState([]); const handleOnedepthMouseEnter = (item) => { setHoveredOnedepth(item); // console.log(setHoveredOnedepth) setOnedepthChildren(item.children); }; const handletwodepthMouseEnter = (child) => { setHoveredDivision(child); // console.log(setTwodepthDivision); setTwodepthDivision(child.divisions); // console.log(child.divisions); }; if (isLoading) return <>로딩 중...</>; if (isError) return <>{errorMessage}</>; return ( <> {!isloginorsignup ? ( <> {/* 대메뉴 */} <nav id="nav" className={`nav ${isNavFixed ? "fixed" : ""}`}> <div className="nav_wrap"> <div className="twobutton_wrap"> {["materials", "purposes"].map((category, index) => ( <Link type="button" className={`twobutton ${ activeButton === index ? "active" : "" }`} key={index} onClick={() => handleButtonClick(index)} to={`/${category}`} > {categoryNames[category]} </Link> ))} </div> {/* 내비게이션 1depth */} <div className="scrollnav"> <ul className="materialnav" style={{ display: activeButton === 0 ? "flex" : "none", }} > {materials.map((material) => ( <li key={material.id} className="materialnav_li" onMouseEnter={() => { handleOnedepthMouseEnter(material); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{material.name}</Link> </li> ))} </ul> <ul className="usagenav" style={{ display: activeButton === 1 ? "flex" : "none", }} > {purposes.map((purpose) => ( <li key={purpose.id} className="usagenav_li" onMouseEnter={() => { handleOnedepthMouseEnter(purpose); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{purpose.name}</Link> </li> ))} </ul> </div> <div className="call_wrap"> <div className="call"> <div className="call_title">견적 상담 · 문의 대표전화</div> <div className="top_button"> <TbArrowBigUpFilled className="top_icon" /> <p>TOP</p> </div> </div> </div> </div> </nav> {/* 2&3depth 호버 메뉴 */} <div className={`scrollmenu ${isScrollMenuVisible ? "show" : ""} ${ isNavFixed ? "fixed" : "" }`} style={{ visibility: isScrollMenuVisible ? "visible" : "hidden" }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {activeButton === 0 && ( <div className="scrollmenu_top"> <ul className="depth2_wrap"> {onedepthChildren.map((child) => ( <li key={child.id} className="depth2_menu" onMouseEnter={() => { handletwodepthMouseEnter(child); }} > <div className="depth2_menu_img_wrap"> <div className="depth2_menu_img"> <img src={child.images[0]._links.href} alt={child.name} /> </div> </div> <p>{child.name}</p> </li> ))} </ul> </div> )} <div className="scrollmenu_middle"> <div className="depth3_wrap"> {twodepthDivision.map((division) => ( <Link key={division.id} to="/" className="depth3_menu"> <span className="depth3_menu_img"> {/* images 속성이 없거나 비어 있어도 오류를 방지 */} {division.images && division.images.length > 0 && ( <img src={division.images[0]._links.href} alt={division.division_name} /> )} </span> <p>{division.division_name}</p> </Link> ))} </div> </div> <div className="scrollmenu_bottom"></div> </div> </> ) : null} </> ); }; export default Nav; 현재는 depth2_menu 호버해야만 depth3_menu가 보이는데 초기에 scrollmenu가 보일때부터 depth2_menu가 (onedepthChildren.map의 첫번째 순서의 데이터가) 호버되어있어 그에 매칭되는 division의 내용들이 depth3_menu에 보이게 할수있는 방법 있을까요 ?

카페24 웹호스팅 중 cors에러 관련 질문입니다.

정부 지원사업으로 3개월짜리 인턴십 진행중인 신입개발자 입니다. 현재 회사에는 시니어 개발자나 선임 개발자가 없어서 정말 초짜 백엔드 1명, 프론트 1명이서 프로젝트르 진행중입니다. node.js - react로 구현한 웹페이지를 카페24 웹호스팅을 통해 배포중입니다. (호스팅 : node.js 호스팅 일반형 / 도메인: htcoummunity.cafe24app.com) 배포된 웹페이지를 테스트 도중 cors에러를 만났습니다. 상황= 로그인 버튼을 누르면 로그인 정보를 체크하는 API가 cors에러로 인해 응답을 받아오지 못하고 있습니다.(모든 api가 안됩니다.) 에러메세지= Access to fetch at 'http://localhost:8001/api/signup/checkuser' from origin 'http://htcoummunity.cafe24app.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`. POST http://localhost:8001/api/signup/loginEmail net::ERR_FAILED 자체적인 분석으로는 'http://htcoummunity.cafe24app.com' 가 public IP이기 때문에 로컬호스트로 요청하는 api는 리소스의 Private 수준이 더 높기때문에 cors정책에 의해 막힌 것이라고 해석했습니다. 하지만 적절한 해결책은 찾지 못하고 있습니다. Proxy설정까지는 시도해봤지만 문제가 해결되지는 않았습니다. 인턴십이 이제 3일정도 남아서 배포만이라도 깔끔하게 마무리하고 싶은데 해결이 되지 않고 있습니다. 부디 해결책을 제시해주시면 감사하겠습니다!

exe파일 자동 로그인 보안에 대해서 궁금합니다.

안녕하세요. 간단한 앱을 exe파일로 배포하려고 하는데요. 만약 자동 로그인 서비스를 지원한다고 했을 때 유저의 아이디와 비밀번호 정보를 어딘가에 따로 저장해 놓고 불러와야 하는데 어떤 방식이 보안을 높이는 방법일까요.. 아무리 구글링 해봐도 관련 예제는 없어서 제 PC 카카오톡 exe파일 경로를 조금 뜯어 봤는데 pred(파일명) 파일 안에 "set_auto_login" 변수가 따로 있더군요. 이 변수 값을 통해 유저가 카카오톡을 실행 시켰을 때 자동 로그인 할지 안 할지 결정함을 예상할 수 있었습니다. 이때 자동 로그인을 한다고 가정 했을 때 결국에는 어딘가에 저장되어 있는 제 전화번호와 비밀번호 정보를 불러와야 합니다. 혹시 어떤 방식으로 제 정보를 저장하고 불러오는지 아시는 분 있을까요..?? 저장할 때 암호화는 당연히 진행하겠죠?? 암호화가 진행된다면 exe파일 내부에 public key도 어딘가에 존재하겠죠??? 조금 덧붙이자면 내부 파일 중 connect_conf 라는 파일이 존재했고 여기에 저장되어 있나 생각이 들긴 하는데 파일 형식이 뭔지 모르겠고 메모장으로 열어봐도 encoding이 되지 않은 상태로 뜹니다. 너무 궁금하네요.

react-native xcode build시 발생 에러

``` ld: warning: ignoring file '/Users/heejinroh/Library/Developer/Xcode/DerivedData/OkCeo-abydistjrfwgsufmyimbpydzjpqj/Build/Products/Debug-iphonesimulator/Flipper-Folly/libFlipper-Folly.a[3](Assume.o)': found architecture 'arm64', required architecture 'x86_64' ld: warning: ignoring file '/Users/heejinroh/Library/Developer/Xcode/DerivedData/OkCeo-abydistjrfwgsufmyimbpydzjpqj/Build/Products/Debug-iphonesimulator/Flipper-Folly/libFlipper-Folly.a[2](Addr2Line.o)': found architecture 'arm64', required architecture 'x86_64' ld: Undefined symbols: _OBJC_CLASS_$_RCTBridge, referenced from: in AppDelegate.o _OBJC_CLASS_$_RCTBundleURLProvider, referenced from: in AppDelegate.o _OBJC_CLASS_$_RNKakaoLogins, referenced from: in AppDelegate.o _RCTAppSetupDefaultRootView, referenced from: -[AppDelegate application:didFinishLaunchingWithOptions:] in AppDelegate.o _RCTAppSetupPrepareApp, referenced from: -[AppDelegate application:didFinishLaunchingWithOptions:] in AppDelegate.o clang: error: linker command failed with exit code 1 (use -v to see invocation) ``` xcode 14 버전으로 생성된 프로젝트를 xcode 15버전으로 진행하여 실행했는데 빌드단계에서 에러가 계속 발생해서 혹시 도움좀 주실수있을까요? System: OS: macOS 14.0 CPU: (12) arm64 Apple M2 Pro Memory: 647.83 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm Watchman: 2023.09.25.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /Users/heejinroh/.rvm/gems/ruby-3.2.1/bin/pod SDKs: iOS SDK: Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10671973 Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.8 => 0.70.8 react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found

nextauth 를 이용해 springboot 의 jwt를 받아와서 로그인을 구현중입니다.

안녕하세요. nextauth 를 이용해 로그인 구현중입니다. 흔히 생각하는 소셜 로그인이 아닌 username 과 password를 통해 springboot security 에서 jwt를 반환 받아오려고 합니다. // app/api/auth/[...nextauth]/route.ts CredentialsProvider({ name: 'Credentials', credentials: { username: { label: 'Username', type: 'text', placeholder: '아이디' }, password: { label: 'Password', type: 'password' }, }, async authorize(credentials, req) { const res = await fetch(`${process.env.NEXTAUTH_URL}/auth/login`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ username: credentials?.username, password: credentials?.password, }), }); const user = await res.json(); console.log(user); if (user) { return user; } else { return null; } }, }), 그런데 위의 코드처럼 코드를 구성했을때 .env.local 파일의 NEXTAUTH_URL 이 등록이 되면 authorize 가 작동하지 않습니다 . 에러 log라도 있으면 어떻게라도 해보겠는데.. 그것도 없습니다. 그래서 NEXTAUTH_URL 를 등록하지 않고 const res = await fetch(`http://localhost:8080/auth`, 바꾸면 이것역시 에러 log 없이 브라우저상에서 Error 라는 문구만 보여줍니다. 이렇게 생각했을때 authorize는 값을 내부에서만 가져올수 있는거 같은데요. 실제로 가상의 const user = {....} 를 만들어서 반환하면 로그인이 아주 잘 됩니다. 하지만 제가 원하는 방법은 아니죠..ㅍ 검색해보면 prisma 가 많이 나오는데.. 그것 또한 시스템상 제가 원하는 방식이 아닙니다. springboot security 에서 jwt를 받아와서 nextauth에 로그인을 할수 있는 방법은 없을까요? custom login 페이지를 만들어서 해야 할거 같은데 방법을 잘 모르겠습니다. 현재 springboot 서버에 cors 설정이 정상적으로 허용된 상태입니다.

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에서는 이러 오류가 발생하는지 궁금합니다 ㅠㅠ 해결 방안도 궁금합니다 ! ㅠㅠ

[Nest.js] Kakao, Google Oauth 로그인 CORS 문제 ㅠㅠ (+ React)

안녕하세요 Nest.js 처음부터 공부하면서 혼자 프로젝트를 진행중인데... React(5173 port) + Nest.js(3000 port) 로 Oauth를 구현하고있습니다. ! 현재 Nest.js 쪽에서 @Get('/auth/kakao') @UseGuard(KakaoGuard) @Get('/auth/kakao/callback') @UseGuard(KakaoGuard) 로 요청을 받고있습니다. (Google도 동일) React에서 button click시에 localhost:3000/auth/kakao 로 api요청을 날리면 301 Found가 뜨게되고 'https://accounts.kakao.com/login?continue=~~~~~~~~~~' 로 리디렉션 되지만 CORS 오류가 나옵니다...... ㅠㅠㅠㅠ (구글도 구글 url로 리디렉션) 해당 도메인을 복사하여 브라우저에 직접입력하면 해당 카카오 혹은 구글 로그인 페이지로 접속이 잘되지만... 왜 프론트엔드에선 CORS가 나고있고 어떻게 해결하면 좋을지 모르겠어서 질문 남깁니다 ! 추가로 oauth에 등록하는 리디렉션 url은 http://localhost:3000/auth/kakao/callback 이며, 카카오 웹 플랫폼, 구글 자바스크립트 원본은 http://localhost:5173 입니다 !

다른 브랜치에 최신변경사항을 가져오는법은 어떤게 좋나요?

예를들어 A라는 팀원이 기능을완성하여 dev 브랜치로 머지를 하였습니다. 저는 feat/login 이라는 브랜치에서 작업중이구요 이럴땐 보통 어떤식으로 변경된코드를 가져오나요? git pull origin dev 를 해야될까요 아니면 cherrypick를 써야할까요?

개발한 앱이 play 프로텍트에서 위험한 앱으로 표시됩니다.

안녕하세요, 앱을 기획 후 외주를 통해 개발했었는데요 작년까지는 구글 플레이스토어를 통해 다운받을 수 있었습니다. 그런데 올해 초에 구글 정책이 바뀌면서 구글 회원가입이 필수가 되었더라구요. 앱을 수정할 여유가 없어서... 구글스토어는 포기하고 원스토어에서 다시 출시를 했는데요 원스토어에서 다운받으려하니 개발한 앱이 play 프로텍트에서 위험한 앱으로 표시되는 것입니다. https://support.google.com/googleplay/android-developer/answer/2992033 위 링크를 통해 이의를 제기하라고하여 진행했지만 답변오는 것도없고 2주가 홀랑 지나가버렸습니다. 여전히 play 프로텍트 제제는 있구요. This application could be downloaded from the Google Play Store until last year. The Google Play Store policy is changing, and it is difficult to implement Google login, so we are preparing for distribution through other app stores. However, this is a situation where the download is being compromised by Play Protect. I am attaching the app link, so please review unblocking. 위와 같이 이의를 작성해서 제출했는데요, 마땅히 들어가야하지만 빠진 내용이 있는 것인지 원래 오래걸리는 것인지 같은 문제를 겪어보신 분들의 조언을 부탁드리고자 질문글을 올렸습니다. 꼭 답변을 부탁드립니다 ㅠㅠ

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 정도만 저장 )

getServerSideProps를 모든 페이지에서 공통적으로 사용할 수 있는 방법이 있을까요?

Next.js 에서 loginStatus같은 부분들을 CSR로 처리하다보니 새로고침시 false => true로 변경되면서 깜빡이는 문제가 생겨서 SSR로 처리하고싶은데 app.tsx에서 getIntialProps를 사용하였는데 요즘방식에는 getInitialProps보다 getStaticProps나 getServerSideProps를 권장한다고 들어서 변경할려고 합니다… 매 페이지에 공통적으로 들어가는 getServerSideProps같은 경우는 어떻게 처리를 해야할까요…? ㅜㅜ