inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

176만명의 커뮤니티!! 함께 토론해봐요.

특정 API, 특정 IP 허용 (단일경로에 CORS 활성화)

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

https://github.com/expressjs/cors?tab=readme-ov-file#enable-cors-for-a-single-route 참고하여 작성 해 보았습니다. * 제일 하단부에는 전체 코드 첨부 하였습니다. * 문제는 2가지 입니다. 1. 단일 경로에 CORS 활성화를 구현하고 싶었으며 corsOptions 에 methods 를 'POST, OPTIONS'만 추가하였음에도 get은 호출시 허용이 되었습니다. app.get('/users/', cors(corsOptions), function (req, res) { 제가 구현하고 싶었던 코드의 의도는 특정 IP만 사용 허용 이기 때문에 위와 같이 구현하고 싶었습니다. 하지만 아래와 같이 호출하여도 허용이 되었습니다. app.get('/users/', (req, res) => { 나머지 문제는 위와 반대로 POST의 경우에는 app.post('/token/phone', cors(corsOptions), (req, res) => { 위처럼 작성 옵션도 적용되었음에도 불구하고 CORS 가 계속 발생합니다. 아래는 작성한 node 코드입니다. import express from 'express' import { createTokenOfPhone } from '../../../section01/01-03-token-api-facade/index.js' import { swaggerUi, specs } from "./swagger/swagger.config.js"; import cors from 'cors' const app = express() app.use(express.json()) // Swagger API app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(specs, { explorer: true })); // 허용할 IP WhiteList const whitelist = [ 'http://127.0.0.1:5500' ]; const corsOptions = { origin: (origin, callback) => { if (whitelist.indexOf(origin) !== -1 || !origin) { // !origin은 로컬 요청을 허용 callback(null, true); } else { callback(new Error('Not allowed by CORS')); } }, origin: whitelist, methods: 'POST, OPTIONS', }; //CORS 설정 // app.use(cors()) // app.use(cors(corsOptions)) // 특정 IP 허용 app.get('/users/', cors(corsOptions), function (req, res) { // app.get('/users/', (req, res) => { res.json({msg: 'getdms 왜 됨?'}) }) // OPTIONS 요청에 대한 응답 처리 app.options('/users/', cors(corsOptions), (req, res) => { res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.setHeader('Access-Control-Allow-Credentials', 'true'); res.sendStatus(204); // No Content }); // app.post('/token/phone', (req, res) => { app.post('/token/phone', cors(corsOptions), (req, res) => { const {phoneNo} = req.body; console.log(`phoneNo ${phoneNo}`) const requestToken = createTokenOfPhone(phoneNo); const resultData = { data: requestToken }; res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.send(resultData); }); app.listen(3000); // 포트번호 아래는 get , options, post 를 호출하는데 사용한 코드입니다. 주석 되어있는 get 호출시에는 호출안되게 옵션 설정해도 호출되고 주석 안한 post 호출시에는 정상 호출되어야 할 것 같은데 안됩니다.... <script> let resultToken = ''; const certification = () => { let myPhoneNo = document.getElementById("phoneNo").value; // let api = axios.options("http://localhost:3000/users"); // let api = axios.get("http://localhost:3000/users"); let api = axios.post("http://localhost:3000/token/phone", {phoneNo: myPhoneNo}); }; </script> <body> <div>휴대폰번호: <input type="text" id="phoneNo"> <button onclick="certification()">인증하기</button> <br/> <div>인증상태</div> <button>회원가입하기</button> </div> </body>

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
gkdlsb1234 댓글 2 좋아요 0 조회수 352

강사님의 계획?

미해결

맛집 지도앱 만들기 (React Native & NestJS)

선생님 준비중인 강의가 혹시 있으실까요? 선생님같은분이 강의를 안한다는건 정말 재능 낭비인것 같습니다. 만족도가 이렇게 높은 강의는 첨음이거든요 그래서 혹시 다른 준비중인 강의가 있는지 묻고싶습니다. 계속 기다리고 있어서 두통이 생깁니다. ㅎㅎ 개인적으로는 next 실무강의를 해주시면 좋겠지만 ㅎㅎ

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
호갱 댓글 1 좋아요 1 조회수 152

오류ㅠㅠ

미해결

맛집 지도앱 만들기 (React Native & NestJS)

윈도우-안드로이드로 수강하는 중인데 이전 강의까지 잘 되다가 navigation 설치하고나서 이런 오류가 떠서 구글링도 해봤는데 해결이 잘 안되네요 (yarn이 잘 안돼서 npm 설치과정 따라서 설치했습니다.) 이런 오류가 뜨길래 구글링을 통해 android { ... compileOptions { sourceCompatibility JavaVersion.VERSION_11 targetCompatibility JavaVersion.VERSION_11 } kotlinOptions { jvmTarget = "11" } } 이렇게 해보라길래 해봐도 오류가 뜨네요 ㅠㅠ node -v : v20.18.1 java --version : openjdk 11.0.25

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 2 좋아요 0 조회수 237

npm start (android) 에러

미해결

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다 . IOS는 잘 동작합니다. android 에뮬레이터 실행을 위해 'a'를 누르면 아래와 같은 에러가 발생합니다. . android studio에서 gradle 버전을 8.9로 올리라고 해서 올린후 실행한 결과입니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
박경수 댓글 2 좋아요 0 조회수 259

yarn start 오류

미해결

맛집 지도앱 만들기 (React Native & NestJS)

제가 윈도우라서 열심히 1-5과정 따라가고 있는데 밑에 과정까지는 완료했는데 yarn start부분에서 오류가 뜨네요(안드로이드,ios 다 오류떠요) 정말 죄송하지만 해결법을 알려주실 수 있으실까요? yarn start - a눌렀을때 yarn start - i 눌렀을때 doctor 2가지 문제가 있는 것 같네요..

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 2 좋아요 0 조회수 243

useAuth logout 401에러

미해결

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세요 강사님! 강사님께서 해당 강의에서 작성해주신대로 우선 Database와 백엔드서버를 구동시킨 채로 프론트엔드 서버를 npx react-native run-ios 로 어플을 빌드하고 로그아웃 버튼을 클릭했을때 위의 이미지와 같이 401에러가 발생합니다. 제가 작성한 코드를 보여드리면 src/hooks/queries/useAuth.ts function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: logout, onSuccess: () => { console.log('useLogout onSuccess'); removeHeader('Authorization'); removeEncryptStorage(storageKeys.REFRESH_TOKEN); }, onSettled: () => { // auth에 해당하는 쿼리들을 캐시 무효화해서 업데이트 queryClient.invalidateQueries({queryKey: [queryKeys.AUTH]}); }, ...mutationOptions, }); } function useAuth() { const logoutMutation = useLogout(); return { logoutMutation, }; } export default useAuth; src/api/auth.ts const logout = async () => { console.log('logout API call'); try { await axiosInstance.post('/auth/logout'); } catch (err) { console.error(`logout api err :::: ${err}`); } }; export { logout }; 3. src/api/axios.ts import axios from 'axios'; const axiosInstance = axios.create({ baseURL: 'http://localhost:3030', withCredentials: true, }); export default axiosInstance; src/utils/header.ts import axiosInstance from '../api/axios'; function setHeader(key: string, value: string) { axiosInstance.defaults.headers.common[key] = value; } function removeHeader(key: string) { if (!axiosInstance.defaults.headers.common[key]) { return; } delete axiosInstance.defaults.headers.common[key]; } export {setHeader, removeHeader}; src/screens/map/MapHomeScreen.tsx import React from 'react'; import {Button, StyleSheet, Text, View} from 'react-native'; import useAuth from '../../hooks/queries/useAuth'; const MapHomeScreen = () => { const {logoutMutation} = useAuth(); return ( <View> <Text>맵 스크린</Text> <Button title="로그아웃" onPress={() => logoutMutation.mutate(null)} /> </View> ); }; const styles = StyleSheet.create({}); export default MapHomeScreen;

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
gga01075 댓글 2 좋아요 0 조회수 191

모듈이 더 이상 지원하지 않는답니다

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

@types/bcrypt는 다운 가능 합니다

  • node.js
  • mongodb
  • express
  • nestjs
  • ssr
yoo차니 댓글 1 좋아요 0 조회수 269

useAuth

미해결

맛집 지도앱 만들기 (React Native & NestJS)

22:41 타임을 보시면 src/hooks/queries/useAuth.ts파일에서 리액트 쿼리를 이용하여 선언한 것을 useAuth라는 함수로 만들어서 반환해주고 있는데요 function useAuth() { const signupMutation = useSignup(); const refreshTokenQuery = useGetRefreshToken(); const getProfileQuery = useGetProfile({ enabled: refreshTokenQuery.isSuccess, // true일떄 쿼리가 실행 }); const isLogin = refreshTokenQuery.isSuccess; const loginMutation = useLogin(); return { signupMutation, refreshTokenQuery, getProfileQuery, isLogin, loginMutation, }; } src/navigations/root/RootNavigator.tsx 파일에서 위의 함수를 호출할때 const isLogin = useAuth(); 로 반환받고있습니다. 구조분해할당이 아니라 객체 그 자체로 받는 이유가 있을까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
gga01075 댓글 2 좋아요 0 조회수 249

[!] Error installing boost

미해결

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 다시 따라해보는중인데 npx react-native@0.72.6 init ykservice --version 0.72.6 로 할경우 cocoapods 설치시 boost 설치 실패에러가 발생합니다. 0.72.6 으로 진행하려면 아래 링크 참조하여 수정하면 가능합니다. https://github.com/boostorg/boost/issues/843#issuecomment-1872943124 근데 인퍼런은 수업별로 질문게시판이 있으면 좋겠네요.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
안호민 댓글 2 좋아요 0 조회수 584

오류가 있습니다

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

이 코드를 실행하면 이렇게 data가 undefind가 나오는데 이유가 뭔가요 (data:body하면 정상적인 결과가 도출됩니다)

  • node.js
  • mongodb
  • express
  • nestjs
  • ssr
yoo차니 댓글 1 좋아요 0 조회수 145

import 에서 오류가 납니다

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

깃허브에서 배꼇는데 오류가 발생합니다

  • node.js
  • mongodb
  • express
  • nestjs
  • ssr
yoo차니 댓글 1 좋아요 0 조회수 163

이런 오류가 나옵니다

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

이런 오류가 나옵니다

  • node.js
  • mongodb
  • express
  • nestjs
  • ssr
yoo차니 댓글 1 좋아요 0 조회수 152

에러가 발생합니다

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

이것 외에는 단서가 없습니다

  • node.js
  • mongodb
  • express
  • nestjs
  • ssr
yoo차니 댓글 1 좋아요 0 조회수 147

timezone 관련

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요 선생님. 질문이 있습니다! @CreateDateColumn({ name: 'mb_regs_tm', type: 'timestamp', comment: '등록일시', }) regs_tm: Date; @UpdateDateColumn({ name: 'mb_mod_tm', type: 'timestamp', nullable: true, comment: '수정일시', }) mod_tm: Date; 위 데코레이션으로 만든 컬럼은 따로 시간을 지정해주지 않다보니 자동으로 UTC로 값이 설정되는데요. 문제는 @Column({ name: 'mb_exp_tm', type: 'timestamp', nullable: true, comment: '만료일시', }) exp_tm: Date; 이 컬럼의 경우 export function getExpirationDate(days: number): Date { const now = new Date(); return new Date(now.setDate(now.getDate() + days)); } 위의 함수를 사용하여 데이터가 생성된 날로부터 90일을 더한 값으로 만료일을 설정하거든요. 근데 mb_exp_tm 컬럼만 KST로 설정되고 나머지 mb_regs_tm, mb_mod_tm는 UTC로 데이터가 저장됩니다. https://github.com/typeorm/typeorm/issues/5841 위 이슈에서도 제가 현재 고민하고 있는 부분에 대해 얘기하고 있지만 명확한 답은 아직 찾질 못해서요. 혹시 위 문제에 대한 해결책을 들을 수 있을까요?

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
댓글 2 좋아요 0 조회수 141

배포 질문인데요

미해결

맛집 지도앱 만들기 (React Native & NestJS)

오류에 관련된 질문은 아니고 일반적인 질문 입니다 . 개발을 완료후 안드로이드에 배포를 하려고 하는데 테스트를 꼭 거쳐야 배포가 가능 한가요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
David Lee 댓글 2 좋아요 0 조회수 162

특정 post의 특정 코맨트 조회 API 관련 질문

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

@Get(':commentId') getComment(@Param('commentId', ParseIntPipe) commentId: number) { return this.commentsService.getCommentById(commentId); } 안녕하세요 코드팩토리님해당 강의 듣는중 CommentController의 getComment 메서드에서 분명 특정 post의 특정 comment를 가져와야할거같은데 보면 commentId로만 조회하는걸로 보여집니다.제가 이해하지 못하고 의도를 파악하지 못한건지 반대인지 확인이 필요해보입니다. 상기는 해당 문제되어 보여지는 코드입니다. 강의에서는 postman을 사용해 해당 엔드포인트로 요청하는 장면이있는데 postId에 152? 게시글ID 값을 넣어서 조회하는데 코드대로면 의미가 없어보입니다. 감사합니다.

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
민혁 댓글 2 좋아요 0 조회수 158

[세션 10] FindOne 함수 이용해서 하나의 데이터만 찾기에서

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

http://localhost:3000/posts/:id 를 send하게되면 NotFoundException()이 실행이 되야하는데 이런 에러가 나옵니다 async getPostById(id: number) { const post = await this.postsRepository.findOne({ where: { id, }, }); if (!post) { throw new NotFoundException(); } return post; } 잘 입력한 것 같은데 . 왜그런가요?

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
함지현 댓글 2 좋아요 0 조회수 150

css에서 <View>가 없다면 왜 두 버튼 크기가 달라지는 지 궁금합니다.

미해결

맛집 지도앱 만들기 (React Native & NestJS)

<Pressable disabled={inValid} style={({pressed}) => [ styles.container, styles[size], pressed ? styles[`${variant}Pressed`] : styles[variant], inValid && styles.inValid, ]} {...props}> {/* <View style={styles[size]}> */} <Text style={[styles[`${variant}Text`], styles.text]}>{label}</Text> {/* </View> */} </Pressable> 강의 내용대로 수정을 진행하면 만들어주신대로 코드가 정상작동합니다. 그런데, 저는 강의 3:49초에서 <View/>를 넣기 전에도 동일한 width여야 된다 생각하는데, 왜 여기서 두 버튼의 크기가 다르고 view를 넣으면 어째서 고쳐지는 지를 잘 모르겠습니다. ( text 크기 따라서 달라지는 거 같은데, pressable이 100%이니 view가 없어도 같은 크기여야하는 거 같은데 이해를 잘 못하겠습니다.)

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
윤세일 댓글 1 좋아요 0 조회수 128

카카오 어드민 세팅 이슈

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

카카오에 로그인하면 이런 오류가 뜨는데 어떡하죠?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
맛선 댓글 1 좋아요 0 조회수 105

인기 태그

인프런 TOP Writers

주간 인기글