묻고 답해요
137만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
메세지 보내고 백엔드에 저장하는 부분이 어디인지 궁금합니다.
안녕하세요 선생님완강하고 채팅을 구현해보려고 합니다.그런데 강의와 깃헙을 보면soket으로 보내는 내용,쿼리에 데이터 추가하는 내용은 있는데소켓으로 보낸 내용이 백엔드에 저장되는 부분이 보이질 않더라구요,클라이언트에서 소켓으로 데이터를 보내면 그걸 받고 백엔드에서 저장해주는 로직이 따로 있는걸까요?
-
미해결Next + React Query로 SNS 서비스 만들기
react-query key 관련해서 궁금한게 있습니다.
// 1번 - A 컴포넌트 useQuery({ queryKey: ['user'], queryFn: () => getUser(user), staleTime: 6000 }) // 2번 - B 컴포넌트 useQuery({ queryKey: ['user'], queryFn: () => getUser(user), })StaleTime 덮어 써지는지 질문1번이 A 컴포넌트에서 실행되고, 1분이 지나기전에 B 컴포넌트에 선언한 2번이 실행 될 경우1번에 선언한 키값이 같기 때문에 1분이 지나지 않았다면 실제 fetching 없이 캐싱된 데이터를 가져온다키가 같더라도 useQuery로 선언했기 때문에 fetch되고 1번에 선언한 staleTime은 2번으로 덮어써져서 추후 무시된다1번이 A 컴포넌트에서 실행되고, 1분이 지난 후 B 컴포넌트에 선언한 2번이 실행 될 경우1분이 지났기 때문에 다시 2번에서 fetching이 일어나고 1번에 선언한 staleTime은 유지된다1분이 지났기 때문에 다시 fetching이 일어나고 2번으로 덮어써져서 추후 staleTime은 2번에 정의된 대로 없어진다(기본값 0으로 세팅된다)getQueryData 정확하게 사용 하는 방법// 1번 - A 컴포넌트 useQuery({ queryKey: ['user'], queryFn: () => getUser(user), staleTime: 6000 })// 2번 - B 컴포넌트 const data = queryClient.getQueryData(['user'])위 처럼 선언했을 경우 A 컴포넌트 -> B 컴포넌트가 순차 실행되면 getQueryData를 잘 가져 오겠지만 만약 B 컴포넌트가 먼저 실행될 경우 어떻게 해야 할까요?있는지 검사하고 없으면 1번처럼 다시 선언해야 할까요?순차 보장이 안된다면 B컴포넌트도 동일하게 useQuery로 staleTime 동일하게 작성해야 할까요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
저만 나오는 오류인지 모르겠으나, Android 빌드 실패 관련 기록남겨드립니다.
npx react-native run-android를 진행할 떄, Android APK를 빌드하면서 react-native-reanimated 의 DevMenuUtils클래스에서 문제가 발생하는것 같아요. 해당 Java파일에서 호출하는 패키지의 문제로 보입니당.package.json은 아래와 같이 설정되어 있습니다. "dependencies": { "@react-native-masked-view/masked-view": "^0.3.1", "@react-navigation/drawer": "^6.6.15", "@react-navigation/native": "^6.1.17", "@react-navigation/stack": "^6.3.29", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.17.1", "react-native-reanimated": "^3.12.1", "react-native-safe-area-context": "^4.10.7", "react-native-screens": "^3.32.0" },node_module의 패키지를 직접 수정하는 방법이라 좋은것은 아닌 걸로 보이나, 실행해보는게 더 중요한것 같아서용~원본DevMenuUtils Classpackage com.swmansion.reanimated; public class DevMenuUtils { private void addDevMenuOption(ReactApplicationContext context, DevOptionHandler handler) { // In Expo, `ApplicationContext` is not an instance of `ReactApplication` if (context.getApplicationContext() instanceof ReactApplication) { final DevSupportManager devSupportManager = ((ReactApplication) context.getApplicationContext()) .getReactNativeHost() .getReactInstanceManager() .getDevSupportManager(); devSupportManager.addCustomDevOption( "Toggle slow animations (Reanimated)", handler); } } } 변경한 DevMenuUtils Classpackage com.swmansion.reanimated; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.ReactApplication; import com.facebook.react.devsupport.interfaces.DevOptionHandler; import com.facebook.react.devsupport.interfaces.DevSupportManager; public class DevMenuUtils { public static void addDevMenuOption(ReactApplicationContext context, DevOptionHandler handler) { // In Expo, `ApplicationContext` is not an instance of `ReactApplication` if (context.getApplicationContext() instanceof ReactApplication) { final DevSupportManager devSupportManager = ((ReactApplication) context.getApplicationContext()) .getReactNativeHost() .getReactInstanceManager() .getDevSupportManager(); devSupportManager.addCustomDevOption( "Toggle slow animations (Reanimated)", handler); } } }참고한 이슈 : https://github.com/software-mansion/react-native-reanimated/issues/6076
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
윈도우: react navigation 강의 듣다가 생긴 오류
Invariant Violation: "matzipApp" has not been registered. This can happen if:* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.* A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes react navigation 강의에서 react-native-gesture-handler를 설치하고 나서 계속 위와 같은 오류가 납니다. 개발환경은 윈도우이구요. 아무리 gesture-handler의 버전을 조정해봐도 같은 오류가 계속 나고 구글링을 해서 issue들을 살펴봐도 정말 명확한 해결책도 없구요.. 빨리 다음 강의 듣고싶은데 답답하네요..
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
eslintrc.js와 prettierrc.js 파일 코드 알려주시면 감사하겠습니다.
너무 거슬리는 prettier 오류가 뜨는데, 코드 주시면 적용해보겠습니다 감사합니
-
미해결Next + React Query로 SNS 서비스 만들기
Next.js 14 배포 후 액세스토큰 업데이트 안되는 문제
안녕하세요 제로초님강의 잘 듣고 있습니다. 사실 이 문제가 몇개월동안 계속 해결이 안되어서 강의를 수강한거나 마찬가지인데요. 아무리 스택오버플로우나, next.js issue에 직접 글을 올려도 해결이 안되어서 이렇게 질문 글 올립니다.일단 Next.js 14 + Express 조합으로 배포를 한 상황이고 jwt 토큰을 쿠키에 담아서 로그인 기능을 구현했습니다.또한 next.js Middleware 내부에서 액세스토큰을 재발급 받아주고 있습니다.순서는 이렇습니다. 로그인 시에 사용자가 아이디 + 비밀번호를 입력해서 서버에게 요청한다.서버에서 해당 아이디 값을 받아서 조회 후, 새로운 리프레시 토큰 + 액세스 토큰을 클라이언트로 보내준다.백엔드 내부 코드는 다음과 같습니다. const newAccessToken = createNewAccessToken(existingUser); const newRefreshToken = createNewRefreshToken(existingUser); const hashedToken = await hashValue(newRefreshToken); await deleteRefreshTokenData(existingUser.id); await createRefreshTokenData(hashedToken, existingUser.id); return res.json({ success: true, accessTokenValue: newAccessToken, refreshTokenValue: newRefreshToken, }); Next.js 측에서 액세스 토큰과 리프레시 토큰을 받아서 API ROUTE로 POST 요청을 날려서 set cookie를 해준다.const sendTokenCookieToHandler = async (accessTokenValue: string, refreshTokenValue: string) => { await fetch('/api/token', { method: 'POST', body: JSON.stringify({ accessTokenValue, refreshTokenValue }), headers: new Headers({ 'Content-Type': 'application/json', }), cache: 'no-store', }); }; export default sendTokenCookieToHandler; ```그 후 액세스 토큰이 만료 되면, Next.js 미들웨어 단에서 리프레시 토큰을 다시 백엔드로 보내서 새로운 액세스 토큰을 받아온다.Next.js 미들웨어 코드는 이렇습니다. export async function middleware(request: NextRequest) { const { accessToken, refreshToken } = getTokenValues(request); if (!accessToken && refreshToken) { const res = await getNewAccessToken(refreshToken); if (res && res.newAccessToken) { const response = NextResponse.next(); const { newAccessToken } = res; response.cookies.set('accessToken', newAccessToken, { expires: new Date(Date.now() + 24 * 60 * 60 * 1000), }); return response; } } return NextResponse.next(); } ``` 받아온 액세스 토큰 값을 아예 middleware 단에서 set cookie 를 통해 쿠키로 설정해준다.근데 여기서 문제는 초기에는 정상적으로 잘 작동합니다.액세스 토큰이 만료 된 후에도 정상적으로 새로운 액세스토큰을 받아오기도 하고요근데 문제는 일정 시간 후에(제가 생각했을때 리프레시토큰이 만료 된 후, 다시 로그인 요청을 보냈을때 같습니다.) 아예 새로운 리프레시 토큰과 액세스 토큰을 제대로 받아오지 못하는거 같습니다.근데 F12 를 켜서 확인해보면 백엔드로 api 콜은 정상적으로 가고 있습니다.. 그래서 현재 다시 재배포를 할때마다 초기 상태로 돌아가서 로그인이 정상적으로 작동 하게 되는데요.어디가 문제인걸까요 ? 여러 오픈톡이나 커뮤니티에 물어봤지만, 어떤분은 Next.js 내부에서 같은 라우트 그룹이면 미들웨어를 거치지 않아서 발생하는 문제라고도 하시는데 초기 배포 당시에, 리프레시 토큰을 처음에 잘 받았을때 일부러 액세스 토큰을 삭제하고 다시 새로고침하면 액세스 토큰을 제대로 잘 받아오고 있습니다.. 도저히 아무리 이리저리 수정해봐도 몇개월 동안 고치지 못해서 이렇게 글 남깁니다. 읽어주셔서 감사합니다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
프로젝트 생성 시 npm start를 하고 a를 눌러 안드로이드 에뮬레이터를 키려면 오류가 납니다.
프로젝트 생성 시 npm start를 하고 a를 눌러 안드로이드 에뮬레이터를 키려면 오류가 납니다.info Dev server readyi - run on iOSa - run on Androidd - open Dev Menur - reload appinfo Opening app on Android...info A dev server is already running for this project on port 8081.info Launching emulator...info Installing the app...> Task :gradle-plugin:checkKotlinGradlePluginConfigurationErrors> Task :gradle-plugin:compileKotlin UP-TO-DATE> Task :gradle-plugin:compileJava NO-SOURCE> Task :gradle-plugin:pluginDescriptors UP-TO-DATE> Task :gradle-plugin:processResources UP-TO-DATE> Task :gradle-plugin:classes UP-TO-DATE> Task :gradle-plugin:jar UP-TO-DATE5 actionable tasks: 1 executed, 4 up-to-dateinfo 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor FAILURE: Build failed with an exception.* Where:Build file 'C:\Users\kimch\Documents\MatzipApp\android\app\build.gradle' line: 1* What went wrong:A problem occurred evaluating project ':app'.> Failed to apply plugin 'com.android.internal.application'. > Android Gradle plugin requires Java 17 to run. You are currently using Java 11. Your current JDK is located in C:\Program Files\Microsoft\jdk-11.0.23.9-hotspot You can try some of the following options: - changing the IDE settings. - changing the JAVA_HOME environment variable. - changing org.gradle.java.home in gradle.properties.* Try:> Run with --stacktrace option to get the stack trace.> Run with --info or --debug option to get more log output.> Run with --scan to get full insights.> Get more help at https://help.gradle.org.BUILD FAILED in 6sinfo Run CLI with --verbose flag for more details.
-
미해결Next + React Query로 SNS 서비스 만들기
서버컴포넌트, 클라이언트 컴포넌트
안녕하세요 . 아직 리액트에 빠져살아서 서버컴포넌트와 클라이언트 컴포넌트 사용 구분이 잘 가지 않아 질문드립니다. 1번 질문.예를들어 3개의 페이지가 존재한다고 했을때, 각 페이지는 navbar(하위컴포넌트)를 가지려고 하는데요 navbar의 버튼은 각 페이지 마다 다 다른 함수로 동작하게 된다고 가정하면, 3개의 페이지 컴포넌트는 'use-client'를 사용하여 클라이언트 컴포넌트가 되어야 하는게 맞나요? 그렇다면 페이지의 하위컴포넌트를 서버컴포넌트로 만들면 서버컴포넌트로 사용하면 ssr을 사용하는 이유가 충분할까요? 2번질문. after_login 폴더 안에 _lib폴더에서 'getTrends'함수로 패치를 했는데요, 결국에는 클라이언트 컴포넌트에서 usequery로 데이터를 패치해오고 있습니다. 그러면 데이터 패치도 클라이언트컴포넌트에서 진행하는것인데, 1번상황에 패치도 2번과 같이 한다면 서버사이드렌더링의 장점은 어떤것이라고 볼 수 있을까요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
css gap 속성 질문
view 컴포넌트에서만 gap이 사용가능하길래찾아봤더니 원래 react-native에서는 gap을 사용할 수 없던데 혹시 왜 view에서는 사용가능한지 알 수 있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
인터셉팅 라우트에서 메타데이터를 적용할수 없는가요?
안녕하세요 선생님유저정보를 모달창으로 보여주게 하기위해아래와같이 user를 사용해서 적용했었습니다.처음 만들었을때 메타데이터도 유저정보에 맞게 변경시켜줘야하는데 인터셉팅 라우터를 사용하면 메타데이터를 적용하지 못한다는 걸 어디서 본거같아서 테스트해보고 적용했었습니다. (user 폴더)그리고나서 테스트를 하던중에 ux가 어색한거같아서 다시 검색해보니 인터셉팅라우트에서 메타데이터 적용하는 부분을 했다는 사람도 있는것 같더라구요 그래서 (.)tester 폴더를 만들어서 실험해봤는데 메타데이터가 적용 안되서혹시 선생님은 인터셉트 라우트에서 메타데이터를 적용하는 방법을 아실까해서 여쭤봅니다! 📦@modal ┣ 📂(.)promise ┃ ┗ 📂form ┃ ┃ ┗ 📜page.tsx ┣ 📂(.)tester ┃ ┣ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getSingleUser.ts ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┣ 📜layout.tsx ┃ ┃ ┗ 📜page.tsx ┃ ┗ 📜default.tsx ┣ 📂user ┃ ┗ 📂[userId] ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getSingleUser.ts ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┗ 📜page.tsx ┗ 📜default.tsx시도했던 방법은 1. page.tsx에서 직접 generateMetadata를 사용.layout.tsx를 만들고 거기에 generateMetadata를 사용후 page.tsx를 children으로 받기여유되실때 확인해주시면 정말 감사하겠습니다!
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
다른 Navigation 에서 같은 screen 을 사용하는 경우도 있나요?
❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!질문이 있습니다 강사님 오류는 아니고 궁금한점이있어서 문의드립니다보통 다른 네비게이터의 자식 페이지로 이동할때StackNavigator 1- Screen A- Screen BStackNavigator 2- Screen C- Screen Dnavigation.navigate('StackNavigator2', {screen: 'Screen C'}); 이렇게 이동한다고 하지만, 이게 엄청 복잡하거나 screen 안에 param 안에 screen 즉 아래와 같은 경우에는 어떻게 작업해야할까요?navigation.navigate(MAIN_NAVIGATIONS.MAP, { screen: MAP_NAVIGATIONS.LOCATION_FEED_TAB, params: { screen: LOCATION_TAB_NAVIGATIONS.LOCATION_FEED_HOME, params: { screen: LOCATION_NAVIGATIONS.LOCATION_DETAIL, params: {id}, }, }, }); [ex) 상세 페이지(detail)를 list를 통해 이동했을 경우와 calendar 에서 바로 상세페이지로 이동했을 경우 goBack()의 히스토리가 잘못되어 calendar에서 바로 상세페이지(detail)로 이동하였을경우 goBack() 올바르게 작동하지 않는 경우]3가지 방안으로 생각하였지만..(1) goBack()을 사용하지 않고 어떤 경로로 접속하였든 List로 이동시키는 방법(2) 아니면 흐름을 위하여 동일한 screen을 다른 navigation 에 각각 등록하여 따로 흐름(?)을 관리screen을 다른 navigation 에 각각 사용하는 경우도있나요?(3) 전역상태 push 관련 history를 직접 관리하여 작업해야하는 지어떤게 맞는 방법인지 혹시 다른 방법이 있는지 궁금하여 문의드립니다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
Expo SDK 적용?
최근 Expo SDK 51이 릴리즈 되면서 React Native 공식 문서에서도 Expo를 권장하도록 수정되었던데, Bare CLI를 계속 사용해야 할까요? 개발 경험 또한 Bare CLI보다 Expo를 사용했을 때 훨씬 빠르고 편했고 빌드하면 Native Module도 사용할 수 있으니 그리 큰 차이도 없는 것 같아서요. 선생님의 생각이 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
Infinite Scroll: pageParam 질문
제로초님 안녕하세요! 제가 개발중인 프로젝트에서 최신순, 조회순 정렬과 키워드 검색을 통해 도서 목록을 출력하고 있는데요.Infinite scroll을 적용하려다 보니 강의에서 처럼 cursor로 전달할 postId 같은 값이 없고, 도서 데이터의 키 값은 uuid로 되어있습니다.커서 기반으로 개발하려면 백엔드에서 별도 값을 내려준다거나, 조회 SQL을 변경 해야 할까요? 어떤 적절한 방법이 있을지 궁금합니다. 감사합니다!
-
미해결맛집 지도앱 만들기 (React Native + NestJS)
react-native-maps 적용시 안드로이드 빌드 에러
❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요! 환경 : 맥, 안드로이드에뮬 : Pixel 3a API 34 | Android 14.0버전 : react-native 0.72.6 node 22.2 gradle 8.0.1 openjdk version "17.0.11"강의[4-0] GoogleMap 연동하기에서 ios는 정상적으로 구글맵이 적용되었습니다. 그런데 android는 빌드할 때 아래와같은 오류가 나왔습니다.Task :react-native-maps:compileDebugJavaWithJavac FAILED시도해본것android 폴더에서 ./gradlew clean 빌드node_modules 폴더 삭제 후 yarn install 빌드 https://github.com/react-native-maps/react-native-maps/issues/5095참고해서 react-native-maps, 1.14.0 다운그레이드다운그레이드 후task ':react-native-reanimated:buildCMakeDebug[arm64-v8a]위 에러 발생시 react-native-reanimated 를 2.2.0으로 다운그레이드 후 시도하라는 글을 보고 다시 해보았지만 Task :app:checkDebugAarMetadata FAILED와 같은 에러가 나왔습니다. Task :app:checkDebugAarMetadata FAILED 관련 에러와 react-natvie-maps 에러 관련된 다른 대처들도 해보았지만 잘 감이 잡히질 않아서 글남깁니다 ㅠㅠ
-
미해결Next + React Query로 SNS 서비스 만들기
nextjs 배포 방식
next14에서 배포 시 페이지는 클라이언트 컴포넌트를 명시한 상태에서 next build를 실행시에 fetch 에러가 나오는데 next를 배포시에는 백엔드서버가 항상 켜져있어야되나요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
react-native-reanimated:compileDebugJavaWithJavac FAILED
❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요! 윈도우 / 안드로이드yarn add @react-navigation/draweryarn add react-native-gesture-handler react-native-reanimatedbabel.configplugins: ['react-native-reanimated/plugin']npm start --reset-cache에러 발생 "dependencies": { "@react-native-masked-view/masked-view": "^0.3.1", "@react-navigation/drawer": "^6.6.15", "@react-navigation/native": "^6.1.17", "@react-navigation/stack": "^6.3.29", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.17.1", "react-native-reanimated": "^3.12.1", "react-native-safe-area-context": "^4.10.5", "react-native-screens": "^3.32.0" },> Task :react-native-reanimated:compileDebugJavaWithJavac FAILED > Task :app:processDebugResources FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-reanimated:compileDebugJavaWithJavac'.현재 reanimated 라이브러리를 설치하면 3.12.1 버전이 설치됩니다.시도해 본 것교안 버전과 같은 reanimated 3.5.4 버전 설치reanimated 3.13 버전 설치추가로 rn 버전부터 모든 라이브러리 버전을 강의와 같은 버전으로 했는데도 지난번 질문과 같은 gesture handler 등 왜 오류가 발생하는지 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
배포테스트할때 클라이언트에서 api호출하면 쿠키가 전달되지 않고있습니다.
안녕하세요 선생님배포테스트할때 클라이언트에서 api호출하면 쿠키가 전달되지 않고있습니다. 클라이언트에서는credentials: 'include'를 적용했고const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/user/setting`, { method: 'PATCH', credentials: 'include', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(userSettingObj), }); if (response.ok) { const sessionUpdateInfo = await response.json(); await updateSession(sessionUpdateInfo); router.push('/'); } 서버에서는const express = require('express'); const cors = require('cors'); const passport = require('passport'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const morgan = require('morgan'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const usersRouter = require('./routes/users'); const db = require('./models'); const passportConfig = require('./passport'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('db 연결 성공') }) .catch(console.error); passportConfig(); if (process.env.NODE_ENV === 'production') { app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); } else { app.use(morgan('dev')); } app.use( cors({ origin: ['http://localhost:3000', 'whatisyourmbti.com', 'http://43.201.56.221'], // true or * // access-control-allow-origin가 true된다. --> 다른 도메인끼리 api 요청 credentials: true, // access-control-allow-credential가 true된다. --> 다른 도메인끼리 쿠키 전달 method: '*', }) ); // 프론트에서 보낸 정보를 req.body에 넣어준다. 순서 중요! app.use(express.json()); // json 형식으로 보냈을때 데이터 처리해줌 app.use(express.urlencoded({ extended: true })); // form submit으로 보냈을 때 데이터 처리해줌 app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, } })); app.use(passport.initialize()); app.use(passport.session()); app.use((req, res, next) => { console.log('Session ID:', req.sessionID); console.log('Cookies:', req.cookies); console.log('Signed Cookies:', req.signedCookies); next(); }); app.get('/', (req, res) => { res.send('hello express'); }); app.get('/api', (req, res) => { res.send('hello api'); }); app.use('/post', postRouter); app.use('/posts', postsRouter); app.use('/user', userRouter); app.use('/users', usersRouter); app.listen(80, () => { console.log('서버 실행 중!'); });credentials: true, 쿠키옵션을 설정해주었는데0|app | Session ID:---------------------------- U8DRuillNv2DBRmexmO1mZZ7fGJeWXCw0|app | Cookies:------------------------------- [Object: null prototype] {}0|app | Signed Cookies:------------------------ [Object: null prototype] {}이런식으로 쿠키값이 전달되고 있지 않아서유저 정보가 필요한(로그인 확인)로직에서 401에러가 떨어지게 됩니다.app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, } }));위부분들을 검색해보고 바꿔보기도 했는데, 잘안되더라구요.클라이언트의 ip는 http://43.201.56.221입니다. 쿠키는 로그인 후 프론트서버에서 브라우저에 삽입해주고 있습니다.console.log(`${process.env.NEXT_PUBLIC_BASE_URL}/user/login ---------------------login api`); const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/user/login`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ ...credentials }), } ); // 프론트서버에서 백엔드서버의 로그인 토큰을 받아온것. 토큰은 문자열이라서 // cookie라이브러리로 객체로 만들어준다. let setCookie = authResponse.headers.get('Set-Cookie'); console.log('set-cookie', setCookie); if (setCookie) { const parsed = cookie.parse(setCookie); console.log(parsed, '---------------parsed cookie'); // 브론트서버에서 브라우저에 쿠키를 심어준다. // 프론트서버에 쿠키를 심으면 안된다! 왜냐하면 프론트서버는 서버라서 공용이다. // 여러 브라우저가 전부 프론트서버르 바라본다. 개인정보 유출 문제 발생할 수 있다. cookies().set('connect.sid', parsed['connect.sid'], parsed); // parsed = 나머지 옵션들 } console.log(authResponse, '--------------------------------authResponse'); let user = await authResponse.json(); console.log(user, '--------------------------------user'); // console.lo(authResponse); if (!authResponse.ok) { return null; } // return user object with the their profile data return { ...user, email: user.email, name: user.nickname, image: user.image, id: user.id, } } catch (err) { console.error('로그인 에러', err); } 그리고 cors에러는 발생하지 않고있습니다. 혹시 수정해야할 코드나, 참고해야할 부분이 있다면 알려주시면 감사하겠습니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
next server action, client fetch 관련 질문입니다.
안녕하세요 제로초님 저는 react app 개발만 조금 해봤는데, next 강의에서 server action을 처음 접하면서 헷갈려서 질문 드립니다.예를 들어서 게시판 목록을 불러올 때 server fetch를 통해 화면에 출력하고 있고, 무한스크롤이나 add, edit, delete 동작 등을 server action으로 할 수 있다는 것을 알았는데요.그렇다면 next app을 개발할 때는 client fetch는 전혀 필요가 없는 건가요? 아니면 어떤 필요에 따라 client fetch와 server fetch를 혼용해서 사용해야 하는 건지.. 궁금합니다. 감사합니다!
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
flipper가 deprecated된 이후로 계속 flipper관련 에러가 나는거 같습니다.
이걸 해결하기 위해선 ios/podfile에서 플리퍼 관련 코드를 없애야됩니다. podfile 통째로 복사해서 지피티에게 준 다음에 'flipper 안 사용하게 코드 수정해줘.' 라고 해서 깔끔하게 제거된 podfile 코드를 받아 pod install해서 해결은 했습니다.. 다른 분들은 어떻게 해결하시는지 궁금하네요.
-
미해결Next + React Query로 SNS 서비스 만들기
Parallel Routes에 대하여 질문있습니다.
안녕하세요 제로초님.Parallel Routes에 대하여 질문있습니다 (공식문서 폴더구조)우선 공식문서대로 위와같은 폴더구조로 한 후 export default function Layout({ children, team, analytics, }: { children: React.ReactNode analytics: React.ReactNode team: React.ReactNode }) { return ( <> {children} {team} {analytics} </> ) }Layout에 team과 analytics를 props로 주게되면team과 analytics에 있는 page.js가 잘 렌더링 되는 것을 확인하였습니다. 그래서 이것을 강의에 응용해보려고 했습니다. (강의 폴더구조 및 응용) src/app/(afterLogin)/@team(afterLogin)폴더에 @team 폴더를 만들고 그 안에 default.tsx랑 page.tsx파일을 만들었습니다. default.tsx파일이 없으면 404 not found 가 뜹니다. 그 후 AfterLoginLayout에 team을 props로 두어 렌더링하였습니다. 결과는 default.tsx가 렌더링 되었습니다. src/app/(afterLogin)/layout.tsx type Props = { children: ReactNode; team: ReactNode}; export default async function AfterLoginLayout({ children, team }: Props) { return ( <> {children} {team} </> ); } 공식문서에서 default.tsx는 "초기 로드 또는 전체 페이지 다시 로드 중에 일치하지 않는 슬롯에 대한 폴백으로 렌더링할 default.js 파일을 정의할 수 있습니다." 즉 파일을 찾지 못하여 default.tsx를 렌더링 한다는 말이라고 이해했습니다. 즉 궁금한 것은 공식문서 폴더구조에서는 @team폴더의 page.tsx를 렌더링하는 반면 강의 폴더구조에서는 page.tsx를 렌더링하지 않고 default.tsx를 렌더링하는지 궁금합니다.해당 강의에서 설명해주신 것 같아 여러번 보았지만 저의 이해력이 안좋아 질문드립니다. ㅜㅜ 항상 좋은강의 감사드립니다!