묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
쿠키에 accessToken, refreshToken을 담고, 조회 시에 undefined
쿠키안에 accessToken과 refreshToken을 JSON.stringfy()로 문자열로 담아주는데 getCookie()를 할시에 object타입으로 전달되어서 accessToken과 refreshToken이 undefined로 잡혀 갱신이안됩니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
서버액션으로 단순히 조회하는 기능을 만들어서 사용해도 될까요?
지금 강의에서 리뷰 리스트를 조회하는 api를 서버액션으로 작성해도 상관없는건가요?예를 들어 직접 리뷰 리스트 DB에 접근해서 데이터를 가져오고 반환해주고, 페이지 컴포넌트에서는 단순히const data = await getReview();를 작성해서 불러오는 방법처럼 말이죠이 질문의 의도는어떤 상황에서 서버액션을 써야하고,어떤 상황에서 fetch를 써야하는지 아직 감이 잡히지 않아 질문드립니다!강의를 보면서 서버액션은 Form에만 사용해야하는구나..라고 생각이들어서 혼란이 생겼던 것 같습니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
데이터 로딩중입니다... 화면만 계속 뜨네요ㅠ
이런 화면만 계속 뜨는데 뭐가 문제일까요?..
-
미해결React Native with Expo: 제로초에게 제대로 배우기
apk 파일 추출 관련 문의 드립니다.
만들어보고 있는 앱을 실 기기에 설치해서 테스트 해볼 일이 있어 apk 파일을 추출하려 합니다.백엔드 url이 http 라 app.json android 내에 useClearTextTraffic true 도 추가해주었습니다. "usesCleartextTraffic": trueeas.json 내 build 에 release 를 추가하였고, "release": { "android": { "buildType": "apk" } }eas build --platform android --profile release 명령어를 통해 빌드 했습니다.생성된 apk 를 실 기기에 설치 후 실행 했을 때 api 호출을 통해 데이터를 받아와서 뿌려주는 부분에 데이터가 하나도 나오고 있지 않습니다.설치 된 development build 를 에뮬레이터에서 실행해보아도 마찬가지로 데이터가 하나도 나오지 않고, catch 부분에서 에러도 콘솔에 찍히지 않고 있습니다.ㅠㅠnpm run android 실행 후 s > a 입력해서 expo go 환경에서 확인해봤을 땐 데이터도 잘 받아와지는데혹시 어느 부분을 확인해봐야할까요? npm ls react├─┬ @expo/vector-icons@14.1.0│ └── react@19.0.0 deduped├─┬ @react-native-community/datetimepicker@8.4.1│ └── react@19.0.0 deduped├─┬ @react-native-kakao/core@2.4.0│ └── react@19.0.0 deduped├─┬ @react-native-kakao/user@2.4.0│ └── react@19.0.0 deduped├─┬ @react-navigation/bottom-tabs@7.4.6│ └── react@19.0.0 deduped├─┬ @react-navigation/drawer@7.5.7│ ├─┬ react-native-drawer-layout@4.1.12│ │ └── react@19.0.0 deduped│ ├── react@19.0.0 deduped│ └─┬ use-latest-callback@0.2.4│ └── react@19.0.0 deduped├─┬ @react-navigation/elements@2.6.3│ ├── react@19.0.0 deduped│ └─┬ use-sync-external-store@1.5.0│ └── react@19.0.0 deduped├─┬ @react-navigation/native@7.1.17│ ├─┬ @react-navigation/core@7.12.4│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ expo-blur@14.1.5│ └── react@19.0.0 deduped├─┬ expo-font@13.3.2│ └── react@19.0.0 deduped├─┬ expo-image@2.4.0│ └── react@19.0.0 deduped├─┬ expo-linear-gradient@14.1.5│ └── react@19.0.0 deduped├─┬ expo-linking@7.1.7│ └── react@19.0.0 deduped├─┬ expo-router@5.1.4│ ├─┬ @radix-ui/react-slot@1.2.0│ │ ├─┬ @radix-ui/react-compose-refs@1.1.2│ │ │ └── react@19.0.0 deduped│ │ └── react@19.0.0 deduped│ ├─┬ @react-navigation/native-stack@7.3.25│ │ └── react@19.0.0 deduped│ └─┬ react-native-is-edge-to-edge@1.2.1│ └── react@19.0.0 deduped├─┬ expo-status-bar@2.2.3│ ├─┬ react-native-edge-to-edge@1.6.0│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ expo@53.0.20│ ├─┬ expo-asset@11.1.7│ │ └── react@19.0.0 deduped│ ├─┬ expo-keep-awake@14.1.4│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-dom@19.0.0│ └── react@19.0.0 deduped├─┬ react-native-gesture-handler@2.24.0│ └── react@19.0.0 deduped├─┬ react-native-gifted-charts@1.4.63│ ├─┬ gifted-charts-core@0.1.65│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-native-reanimated@3.17.5│ ├─┬ react-native-is-edge-to-edge@1.1.7│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-native-safe-area-context@5.4.0│ └── react@19.0.0 deduped├─┬ react-native-screens@4.11.1│ ├─┬ react-freeze@1.0.4│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped├─┬ react-native-svg@15.11.2│ └── react@19.0.0 deduped├─┬ react-native-web@0.20.0│ └── react@19.0.0 deduped├─┬ react-native-webview@13.13.5│ └── react@19.0.0 deduped├─┬ react-native@0.79.5│ ├─┬ @react-native/virtualized-lists@0.79.5│ │ └── react@19.0.0 deduped│ └── react@19.0.0 deduped└── react@19.0.0 npm ls react-native├─┬ @expo/vector-icons@14.1.0│ └── react-native@0.79.5 deduped├─┬ @react-native-async-storage/async-storage@2.1.2│ └── react-native@0.79.5 deduped├─┬ @react-native-community/datetimepicker@8.4.1│ └── react-native@0.79.5 deduped├─┬ @react-native-kakao/core@2.4.0│ └── react-native@0.79.5 deduped├─┬ @react-native-kakao/user@2.4.0│ └── react-native@0.79.5 deduped├─┬ @react-navigation/bottom-tabs@7.4.6│ └── react-native@0.79.5 deduped├─┬ @react-navigation/drawer@7.5.7│ ├─┬ react-native-drawer-layout@4.1.12│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ @react-navigation/elements@2.6.3│ └── react-native@0.79.5 deduped├─┬ @react-navigation/native@7.1.17│ └── react-native@0.79.5 deduped├─┬ expo-apple-authentication@7.2.4│ └── react-native@0.79.5 deduped├─┬ expo-blur@14.1.5│ └── react-native@0.79.5 deduped├─┬ expo-constants@17.1.7│ └── react-native@0.79.5 deduped├─┬ expo-image@2.4.0│ └── react-native@0.79.5 deduped├─┬ expo-linear-gradient@14.1.5│ └── react-native@0.79.5 deduped├─┬ expo-linking@7.1.7│ └── react-native@0.79.5 deduped├─┬ expo-router@5.1.4│ ├─┬ @expo/metro-runtime@5.0.4│ │ └── react-native@0.79.5 deduped│ ├─┬ @react-navigation/native-stack@7.3.25│ │ └── react-native@0.79.5 deduped│ └─┬ react-native-is-edge-to-edge@1.2.1│ └── react-native@0.79.5 deduped├─┬ expo-status-bar@2.2.3│ ├─┬ react-native-edge-to-edge@1.6.0│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ expo-symbols@0.4.5│ └── react-native@0.79.5 deduped├─┬ expo-system-ui@5.0.10│ └── react-native@0.79.5 deduped├─┬ expo-web-browser@14.2.0│ └── react-native@0.79.5 deduped├─┬ expo@53.0.20│ ├─┬ expo-asset@11.1.7│ │ └── react-native@0.79.5 deduped│ ├─┬ expo-file-system@18.1.11│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ react-native-gesture-handler@2.24.0│ └── react-native@0.79.5 deduped├─┬ react-native-gifted-charts@1.4.63│ ├─┬ gifted-charts-core@0.1.65│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ react-native-reanimated@3.17.5│ ├─┬ react-native-is-edge-to-edge@1.1.7│ │ └── react-native@0.79.5 deduped│ └── react-native@0.79.5 deduped├─┬ react-native-safe-area-context@5.4.0│ └── react-native@0.79.5 deduped├─┬ react-native-screens@4.11.1│ └── react-native@0.79.5 deduped├─┬ react-native-svg@15.11.2│ └── react-native@0.79.5 deduped├─┬ react-native-webview@13.13.5│ └── react-native@0.79.5 deduped└─┬ react-native@0.79.5└─┬ @react-native/virtualized-lists@0.79.5└── react-native@0.79.5 deduped npm ls expo├─┬ @react-native-community/datetimepicker@8.4.1│ └── expo@53.0.20 deduped├─┬ @react-native-kakao/core@2.4.0│ └── expo@53.0.20 deduped├─┬ expo-apple-authentication@7.2.4│ └── expo@53.0.20 deduped├─┬ expo-blur@14.1.5│ └── expo@53.0.20 deduped├─┬ expo-build-properties@0.14.8│ └── expo@53.0.20 deduped├─┬ expo-constants@17.1.7│ └── expo@53.0.20 deduped├─┬ expo-dev-client@5.2.4│ ├─┬ expo-dev-launcher@5.1.16│ │ └── expo@53.0.20 deduped│ ├─┬ expo-dev-menu-interface@1.10.0│ │ └── expo@53.0.20 deduped│ ├─┬ expo-dev-menu@6.1.14│ │ └── expo@53.0.20 deduped│ ├─┬ expo-manifests@0.16.6│ │ └── expo@53.0.20 deduped│ ├─┬ expo-updates-interface@1.1.0│ │ └── expo@53.0.20 deduped│ └── expo@53.0.20 deduped├─┬ expo-font@13.3.2│ └── expo@53.0.20 deduped├─┬ expo-haptics@14.1.4│ └── expo@53.0.20 deduped├─┬ expo-image@2.4.0│ └── expo@53.0.20 deduped├─┬ expo-linear-gradient@14.1.5│ └── expo@53.0.20 deduped├─┬ expo-router@5.1.4│ └── expo@53.0.20 deduped├─┬ expo-splash-screen@0.30.10│ └── expo@53.0.20 deduped├─┬ expo-symbols@0.4.5│ └── expo@53.0.20 deduped├─┬ expo-system-ui@5.0.10│ └── expo@53.0.20 deduped├─┬ expo-web-browser@14.2.0│ └── expo@53.0.20 deduped└─┬ expo@53.0.20├─┬ expo-asset@11.1.7│ └── expo@53.0.20 deduped├─┬ expo-file-system@18.1.11│ └── expo@53.0.20 deduped└─┬ expo-keep-awake@14.1.4└── expo@53.0.20 deduped
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
UI 뎁스에 관한 질문이 있습니다
중첩된 라우팅에서 다른 레이아웃 혹은 레이아웃을 사용하고싶지 않을 때 어떻게 제어할 수 있는지 궁금합니다. 현재 소스를 보면(with-searchbar) searchbook... 와 같은 형태로 되어있는 것을 알 수 있는데요만약에 search가 1 depth 라고 했을 때,search 페이지 아래에 예를 들어 detail-search 라는 주소를 가진 페이지가 있다고 가정할 때(with-serachbar)serachdetail-search파일 구조 및 중첩된 라우터 구조가 위와 같이 되잖아요? 이 때 detail-search는 with-searchbar 대신가령 with-detail-serachbar 라던가,아예 with-searchbar 레이아웃을 사용하고 싶지 않을 수 있잖아요? 이럴 때 어떻게 해야하는지 궁금합니다 😀
-
미해결실무 중심! FE 입문자를 위한 React
13-1, 13-2 질문
강의에서 나온대로 다 따라 갔는데 아무것도 안됩니다.콘솔창에서는 const [surveyData, setSurvey] = useRecoilState(surveyState).questions; 에서Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) 라는 에러 뜹니다
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의에서 사용하는 api 접속 불가
안녕하세요~강의에서 사용하는 api 2개 다 접속이 안되네요1번은 외부 서버라 안될수 있는데,2번은 서버가 죽은 건가요? koreanjson.comhttp://main-example.codebootcamp.co.kr/graphql
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
기본 셋팅과 관련하여
settings/ts 폴더 front로 바꿔서 진행할 경우 셋팅 강의 하나도 들을 필요없이 바로 섹션2부터 진행해도 되는건가요?
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
revalidateTag 에 대해서 질문이 있습니다.
안녕하세요! 좋은 Next.js 강의 덕분에 열심히 배워나가고 있는 학생입니다. 😀다름이 아니라 revalidateTag를 사용했을 때, 첫 번째 인수로 전달한 태그 값을 가지는 데이터 캐시가 재검증된다고 이해했는데요!제가 revalidateTag의 인수와 data fetch에 사용되는 옵션의 태그 값을 다르게 세팅해봤는데도 갱신이 되어서요. 제가 잘못 이해한 걸까요..?? 이 부분이 이상해서 질문 남깁니다.아래는 제가 작성한 코드입니다! createReviewActionexport async function createReviewAction(formData: FormData) { const bookId = formData.get('bookId')?.toString(); const content = formData.get('content')?.toString(); const author = formData.get('author')?.toString(); if (!bookId || !content || !author) { return; } // JSON.stringify 객체를 문자열 형태로 직렬화 해서 보내줘야 함 try { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review`, { method: 'POST', body: JSON.stringify({ bookId, content, author }), }, ); revalidateTag(`revew-${bookId}`); // 일부로 오타 냄 } catch (error) { console.error(error); return; } } ReviewList 컴포넌트async function ReviewList({ bookId }: { bookId: string }) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review/book/${bookId}`, { next: { tags: [`review-${bookId}`] } }, ); if (!response.ok) { throw new Error(`Review fetch faild: ${response.statusText}`); } const reviews: ReviewData[] = await response.json(); return ( <section> {reviews.map((review) => ( <ReviewItem key={`review-item-${review.id}`} {...review} /> ))} </section> ); }
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의 커리큘럼에 대해 질문이 있습니다.
안녕하세요 강의를 구매 후 듣다가 일이 생겨서 오랜만에 다시 공부하려고 하는데 커리큘럼을 다시 보니 처음에 html, css 강의 순서대로 나오다가 js가 나오고 또 섹션04부분에서 다시 css가 나오고 또 js가 나오더라구요 그래서 이 부분이 헷갈리는데 그냥 처음부터 순서대로 강의를 들으면 될까요?
-
미해결따라하며 배우는 리액트 네이티브 기초
svg질문
안녕하세요 react-navie 강의중 18강 보고 있는데요 svg 잘 설치 되어있고, 이미지도 잘 넣었는데 저는 이미지 스타일 편집하는게 안보이고 svg 파일 클릭을 하면 svg 파일 모양만 보이고 있어서 svg 테스트시 화면에 이미지 너무 크게 보입니다. 툴에서 어떻게 설정하면 svg 스타일이 보일까요?
-
해결됨React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!
Github repository는 없나요?
Notion에 있는 코드말고, Github Repository는 따로 없나요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
윈도우 -> 맥 파일 옮기기 / 실행
안녕하세요! 지금까지 수업을 윈도우 노트북으로 듣고 있었습니다. 그런데 노트북에 문제가 생겨 새로운 노트북으로 구매 후 파일을 옮기려고 하는데 이번에 구매한 노트북 운영체제 맥os입니다. 간편하게 옮기고 빠르게 실행 할 수 있는 방법이 있을까요?? 일단 node, npm, yarn까지 다운 받은 상태 입니다.
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
커서 유료버전 써야하나요?
현재 2주 free같은데claude3.5 3.7 4 등등 모든 버전에서 코드짜는게 안되고 Anthropic's latest models are currently only available to paid users. Please upgrade to a paid plan to use these models.(Request ID: aec9ae0d-5eb4-4514-a54e-478383ef2f0a)라고 뜹니다.Free users can only use GPT 4.1 or Auto as premium models(Request ID: 849c6230-8e63-4751-9b03-9def2bab9e86)라고 뜰 때도 있고요
-
미해결Slack 클론 코딩[실시간 채팅 with React]
초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법
강좌에서 언급한대로 직접 세팅하기보다는 그냥 settings/ts 폴더 클론받아서 하시는 것을 추천드립니다. 직접 세팅하기에는 버전이 자꾸 달라져서 세팅법이 바뀌고, 입문자분들한테는 버겁습니다. 폴더가 많아서 헷갈리니 back 폴더는 백엔드 용으로 남겨두시고, setting/ts 폴더를 front 폴더로 바꾼 뒤 나머지 폴더는 전부 지워버리세요. 라는 말씀에 따라다음과 같이 세팅을 했는데,alecture 폴더로 들어가 npm init 을 하라고 하시는 부분이 이해가 어렵습니다.
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
Object.assign 문법
function create(baseURL, options) { const instance = axios.create( Object.assign({ // baseURL: baseURL, baseURL, // key 와 값이 같으면 생략 가능 }), options, ); return instance; }제가 사용한 코드입니다.(강의 내용 그대로 담았습니다. 주석 빼고 보면 강의 시 사용한 코드와 동일합니다.제가 궁금한 것은, 인터넷으로 관련 문법을 찾아 본 결과 Object.assign(A,B,C)같은 형식으로 하여, A,B,C 각각의 객체를 merge한다고 알고 있는데,강의에서는 Object.assign({baseURL}),options으로 options객체를 object.assign 함수 바깥에 위치하더라구요?이러면 아무 의미 없는 코드가 되어 버리는것 아닌가요?Object.assign({baseURL,},options)를 해야 되는거 같은데,제가 놓친 부분이 있는걸까요?(코딩이 전공이 아니라 제가 잘 모르는 걸수도 있습니다. 알려주시면 감사하겠습니다)
-
해결됨React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!
백엔드 도커 실행 에러가 뜹니다 ㅠ
에러 로그는 아래와 같아요File "<frozen importlib._bootstrap_external>", line 999, in exec_module File "<frozen importlib._bootstrap>", line 488, in callwith_frames_removed File "/app/main.py", line 6, in <module> from app.db.database import Base, async_engine File "/app/app/db/database.py", line 1, in <module> from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine ModuleNotFoundError: No module named 'sqlalchemy' WARNING: WatchFiles detected changes in 'app/db/crud/user.py'. Reloading... Process SpawnProcess-2: Traceback (most recent call last): File "/usr/local/lib/python3.12/multiprocessing/process.py", line 314, in _bootstrap self.run() File "/usr/local/lib/python3.12/multiprocessing/process.py", line 108, in run self._target(*self._args, **self._kwargs) File "/usr/local/lib/python3.12/site-packages/uvicorn/_subprocess.py", line 80, in subprocess_started target(sockets=sockets) File "/usr/local/lib/python3.12/site-packages/uvicorn/server.py", line 67, in run return asyncio.run(self.serve(sockets=sockets)) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/local/lib/python3.12/asyncio/runners.py", line 195, in run return runner.run(main) ^^^^^^^^^^^^^^^^ File "/usr/local/lib/python3.12/asyncio/runners.py", line 118, in run return self._loop.run_until_complete(task) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "uvloop/loop.pyx", line 1518, in uvloop.loop.Loop.run_until_complete File "/usr/local/lib/python3.12/site-packages/uvicorn/server.py", line 71, in serve await self._serve(sockets) File "/usr/local/lib/python3.12/site-packages/uvicorn/server.py", line 78, in _serve config.load() File "/usr/local/lib/python3.12/site-packages/uvicorn/config.py", line 436, in load self.loaded_app = import_from_string(self.app) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/local/lib/python3.12/site-packages/uvicorn/importer.py", line 22, in import_from_string raise exc from None File "/usr/local/lib/python3.12/site-packages/uvicorn/importer.py", line 19, in import_from_string module = importlib.import_module(module_str) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/local/lib/python3.12/importlib/__init__.py", line 90, in import_module return bootstrap.gcd_import(name[level:], package, level) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "<frozen importlib._bootstrap>", line 1387, in gcdimport File "<frozen importlib._bootstrap>", line 1360, in findand_load File "<frozen importlib._bootstrap>", line 1331, in findand_load_unlocked File "<frozen importlib._bootstrap>", line 935, in loadunlocked File "<frozen importlib._bootstrap_external>", line 999, in exec_module File "<frozen importlib._bootstrap>", line 488, in callwith_frames_removed File "/app/main.py", line 6, in <module> from app.db.database import Base, async_engine File "/app/app/db/database.py", line 1, in <module> from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine ModuleNotFoundError: No module named 'sqlalchemy' 위 에러 때문인지 코드에서 아래 에러? 도 뜨네요 uvicorn main:app --reload도 당연 에러 뜨구요..어떤 부분을 확인하면 될까요? ㅠ
-
미해결Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
next Request Memoization과 react cache
next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요.만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요?axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!
-
미해결Next + React Query로 SNS 서비스 만들기
next Request Memoization과 react cache
next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요.만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요?axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
ch5-1 관리자 페이지 IP블랙리스트 기능구현 관련
안녕하세요..아래와 같이 에러가뜨는데요;; code: 'MODULE_NOT_FOUND', requireStack: [ '/Users/sungwon/Desktop/Project/Web/company_website/backend/index.js' ]}Node.js v24.4.0[nodemon] app crashed - waiting for file changes before starting....backend > index.js코드 입니다.require("dotenv").config(); const express = require("express"); const mongoose = require("mongoose"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const app = express(); const PORT = 3000; const userRoutes = require("./routes/user"); app.use(express.json()) app.use(express.urlencoded()) app.use(cookieParser()); app.use(cors({ origin: "*", credentials: true, })); app.use("/api/auth", userRoutes); app.get("/", (req, res) => { res.send("Hello world"); }); app.get("/api/check-ip", (req, res) => { const clientIP = req.ip || req.connection.remoteAddress; const blacklistedIPs = JSON.parse(process.env.IP_BLACKLIST || '[]'); console.log("Client IP:", clientIP); console.log("Blacklisted IPs:", blacklistedIPs); if (blacklistedIPs.includes(clientIP)) { return res.status(403).json({ allowed: false, message: "Access denied - IP is blacklisted" }); } res.json({ allowed: true }); }); mongoose .connect(process.env.MONGO_URI) .then(() => console.log("MongoDB와 연결이 되었습니다.")) .catch((error) => console.log("MongoDB와 연결에 실패했습니다: ", error)); app.listen(PORT, () => { console.log("Server is running"); });