next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요. 만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요? axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!
next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요. 만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요? axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!
강사님의 강의들을 잘듣고 있습니다. 정말 실무에 도움이 될까하고 듣고있는데 아직 다듣지는 못하고 있지만 도움이 될것 같습니다. 하지만 실무에서 접하는 내용은 또 강의와 깊이가 다를수 있기에 이렇게 실례를 무릅쓰고 문의 드립니다. 제가 있었던 기업에서 전에 쓰던 기법이였는데 그때는 그냥 그렇게 넘어갔지만 강사님의 강의를 듣고 그때 그런 것이 맞았나 복기하고 공부하고 싶어서 질문드립니다. 먼저 대략은 머신러닝 알고리즘을 두개를 돌리는데 하나는 기초 속성을 가지고 lightgbm으로 분류 작업 (1,0) 속성으로 예측을 합니다. 그리고 그 결과중 y_proba를 가지고 k-means 군집화를 하여 군집 클러스트링을 만들려고 합니다. 0) 여러 학습을 할 속성을 전처리해서 가지고 옵니다. 속성을 많은데 뒤에 예측을 하는 20개의 결과 값을 속성과 함께 자지고 온뒤 나중에 원본값은 대략 저렇고 속성 1----- 속성30 , y_test 1, ... y_test 20 . . . 나중에 y_test 1 부터 y_test20 까지 20개의 예측을 하려고 모델을 만듧니다. 1) LightGBM 으로 분류작업을 합니다. (for 문을 돌아 20개의 예측 즉 모델을 만듭니다.) x_tr1 속성1 속성2 속성3 ...... 속성30 y_test1 0 1 1 ..... 0. 1 . . . x_tr15 속성1 속성2 속성3 ...... 속성30. y_test20 1 0 1 ..... 1 . . . 2) Y_test1. y_pred1 y_proba1 0 1 0.91 1 1 0.43 1 1 0.73 0 1 0.80 . . . Y_test15. y_pred20 y_proba20 0 1 0.34 1 1 0.35 1 1 0.73 0 1 0.91 . . . 3) 군집화(k-means) 를 위한 데이터를 만듭니다. Y_proba1. ......... Y_proba20 0.91 .... 0.34 0.43. .... 0.35 0.73 .... 0.73 0.80 .... 0.91 4) 제가 재기하는 문제는 다음입니다. 군집화를 위한 데이터를 분류의 결과값중 하나인 y_proba를 써도 되는 건지? 왜냐하면 y_proba는 그 맞는지에 대한 확률 값이 아니고 그 값을 예측하기 위한 신뢰도 아닐까요? ( 예전 현업들은 그 값(y_proba)들을 최종 확률 [즉 맞는 확률 예를 든다면, 암에 걸릴 최종 확률] 로 알고 있더군요. ) 즉 1 = 예측 0 = 정답 y_proba = 0.9 라는 의미는 0.9의 신뢰혹은 확신으로 예측을 했으니 결과로 틀렸다. 라는 개념인데 이것을 마치 (암에 걸릴 확율이 90% 야)의미 있는 값의 나열로 보고 군집을 하려는게 과연 의미있는 결과로 군집이 될지 의문입니다. 저희가 붓꼿꽂데이터로 클러스트링으로 군집을 하지만 그 속성들로는 너비같은 관련이 있는 속성을 쓰잖아요. 하지만 제가 보내드린 예는 속성이 0.91이라는게 예측이 틀리건 맞건 그냥 그 예측을 위한 신뢰확률성인데 말이죠. 즉 군집화를 위한 기초 값들이 y_proba1. y_proba2 .... y_proba 20 0.91 0.43 0.80 . . . y_proba1. y_proba2 .... y_proba 20 0.32 0.62 0.65 있다면 의 값의 의미는 예를 들어 하나의 로의 하나의 로 의 의미가 0.91 이라 한다면 이건 앞서 lightgbm 예측이 틀린 경우와 맞는 경우를 구분할수 없는 숫자들의 나열 아닌가요? 물론 열로 쭉 늘어 놓은 패턴으로서의 군집을 하려는 의미는 있을지는 모르겠으나... 전문가의 선생님의 의견을 꼭 듣고 싶네요. 주말에 이렇게 질문드려서 죄송해요. 그냥 열정이라고 생각해 주시면 좋겠어요, 더운데 몸 조심하세요.
//app\login.tsx import { initializeKakaoSDK, getKeyHashAndroid } from "@react-native-kakao/core"; const onKakaoLogin = async()=>{ console.log(await getKeyHashAndroid()); try{ const result = await kakaoLogin(); // 로그인 완료될 때까지 대기 console.log("로그인 결과:", result); } catch (error) { console.error("로그인 실패:", error); } }; 코드를 이렇게 작성해서 콘솔창에 출력된 키 해시를 kakao dev 홈페이지에도 등록했습니다. 이 화면까지는 잘 뜨는데, accept and continue를 눌러도 다시 앱으로 돌아가지도 않고 콘솔창에도 access token과 같은 로그인 여부 로그가 안뜹니다..
제목과 같이 npm i react-router-dom@6.25.1로 해서 package.json 에도 "react-router-dom": "^6.25.1", 라고 뜨는데, 레이아웃을 만들수가 없습니다 ㅠㅠ 처음의 App 컴포넌트는 나오는데, home, about, contact 가 그 밑에 나와야 하는데 나오질 않습니다. ㅠㅠ ㅠ
react router 사이트에서 최신 스펙에 대한 튜토리얼을 보면, framework mode, data mode, declarative mode 3가지로 나뉘어 있습니다. 여기서 이 3가지 방식은 각각의 tutorial 에서 보여주는 install하는 방법도 다르고, 그 안에서 route 생성하고 layout 만드는것도 코드 방식이 다 갈리는 것 같습니다. 제가 react router 강의를 거의 시작하지 못한 상태이고, 자세히 몰라서 확실하게 말을 할순 없지만, router 를 만드는 방식을 보면, 강좌의 버전과 지금 현재 버전은 달라도, data mode의 튜토리얼에서 설명하는 코드 방식이 강좌와 매우 비슷한것 같습니다. ex) import {createBrowserRouter, RouterProvider} from 'react-router-dom' 으로 시작하는 것이 똑같습니다. 이 3가지 모드는 뭐가 다른건가요? 강좌에서 나온 홈페이지에서도 이런 형식은 아니었던것 같은데 혼란스럽습니다. 일단 저는 npm i react-router-dom 으로 설치했고, 강좌에 나온 코드를 일단 따라가고는 있는데, 최신스펙과 차이를 어떻게 받아들여야 할지 모르겠습니다. 예를 들어, 최신 스펙에서는 설치코드 부터 'npm i react-router'로 뒤에 '-dom'이 붙지 않습니다. 그럼에도 router생성 과정에서 import {createBrowserRouter, RouterProvider} from 'react-router-dom' 과 같이 코드가 거의 똑같은데 어떻게 받아들어야 하나요? 혹시 강사님은 최신스펙의 react router를 사용하시나요? 그렇다면 강좌에 나온 코드 그대로 최신스펙에서 가져다 써도 문제가 없는지 알 수 있을까요?(경험이 있으시다면, 변경된점에 대해도 알고 계실것 같아서요)
그랩님, 강의 잘 듣고 있습니다. 다름이 아니라, 상품 상세 페이지 에러와 의문점이 있어서 어떻게 해결해야 하는지 궁금한 사항이 있어 질문 드리게 되었습니다. 일단 src/main/index.js 소스 코드를 첨부합니다. import './index.css'; import axios from "axios"; import React from 'react'; import {Link} from 'react-router-dom'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("제 mock 서버 주소 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <Link className="product-link" to={`/products/${product.id}`}> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <div className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </div> </div> </Link> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 2.src/product/index.js 소스 첨부합니다. import {useParams} from 'react-router-dom'; import axios from "axios"; import { useEffect, useState } from 'react'; function ProductPage(){ // const params=useParams(); const {id} = useParams(); const [product, setProduct] = useState(null); useEffect(function(){ axios.get('제 mock 서버 주소 넣었습니다/products/${id}' ) .then(function (result) { setProduct(result.data); // console.log(result); }).catch(function(error){ console.error(error); } ); },[]); console.log(product); // console.log(params); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; -->여기서부터 의문점과 문제점이 발생하게 되니 읽어주시고 해결할 수 있는 방법을 알려주시면 좋겠습니다. 위 소스에서 axios.get('제 mock 서버 주소 넣었습니다/products/ ${id}') 처럼 소스를 달러 중괄호 아이디 입력하면 , 아래와 같은 첨부 사진처럼 에러 가 납니다. --> 위 에러 첨부 사진은 어떻게 해결해야 할까요? 3. 하지만, 위 소스대로 입력 안하면 axios.get('제 mock 서버 주소 넣었습니다 /products/1 ') 하면 제대로 데이터를 오류 없이 아래 첨부 사진처럼 받아 오는 것 을 알 수 있습니다. 3-1. 그랩님, 강의 소스에서 처럼 axios.get('제 mock 서버 주소 넣었습니다/products/ ${id} ')해서 하면 위 첨부 사진 처럼 에러가 나는데요, 성공적으로 오류 없이 불러오고 싶은데요 , 어떻게 해야 하나요? 단계별로 어떻게 소스를 수정해야하는지 알려주시면 좋겠습니다. 확인하시면 답변 부탁 드립니다.
73강 7분 50초 내용입니다. 투두리스트 프로젝트의 List.jsx에서 TodoItem.jsx로 prop을 넘길 때 강의에서는 todos.map((todo) => {return (<TodoItem key={todo.id} {...todo} />;} 위 처럼 작성하고 있습니다. 저는 props를 spread syntax가 아닌 객체 자체로 한 번에 전달해보려고 아래와 같이 작성했습니다. todos.map((todo) => {return <TodoItem key={todo.id} todo={todo} />;} 그런데 이렇게 작성하면 다음과 같은 에러가 발생합니다: Each child in a list should have a unique "key" prop. todos 배열의 각 요소에는 고유한 id가 있다는 것을 확인했고, 동일한 코드에서 todo={todo}를 {...todo}로 변경하면 경고 없이 정상적으로 동작합니다. 저는 단순히 {...todo}는 객체 속성을 각각 개별 props로 넘기고, {todo}는 하나의 객체로 넘기는 차이만 있다고 생각했는데, 이 두 방식의 어떤 차이로 인해 이런 경고가 발생하는지 궁금합니다.
📤 before request jwtUtil.ts:30 ✅ Response Received jwtUtil.ts:34 📦 Content-Type: application/json jwtUtil.ts:35 🧾 typeof res.data : string content-type은 json 형식으로 맞춰 주었는데 정작 데이터가 String으로 와서 list에 뿌려주지를 못하고 있습니다. Postman으로 확인했을 때는 정상적으로 JSON 데이터를 반환받는데 리액트에서 확인할려면 res.data가 "{\"dtoList\":[{\"tno\":115,\"title\":\"123zzzㅋㅋㅋㅋ\",\"content\":null,\"complete\":false,\"dueDate\":\"2025-08-07\",\"writer\":\"123\"} 위와 같이 스트링 형식으로 변환되어서 들어와서 오류가 생깁니다. 어디가 문제일까요..ㅠㅠ
안녕하세요, 강사님. 아래와 같이 End-Point에 생성이 안되어서 문의드립니다. 강사님처럼 Legacy serving 창이 뜨지도 않을 뿐더러 [use model for inference]를 클릭해서 생성하려고 해도 아무런 반응이 없더라구요. 제가 설정에서 뭔가를 잘못한 것일까요?? 아니면 현재 구독이 무료 계정이라서 그런걸까요..? 마지막 강의까지 다 와서 막혀버렸네요 ㅠ
1. 앱 라우터에서는 왜 페이지 이동 전에 프리패칭(prefetching)이 이뤄지지 않는 것처럼 보일까요? 페이지 라우터(Page Router) 방식에서는 링크가 뷰에 등장하면 해당 링크의 JS 번들이 자동으로 프리패칭되는 것으로 알고 있습니다. 그런데 앱 라우터의 동작 구조를 설명한 도식(2번 사진)에서는, 사용자가 실제로 페이지 이동을 요청한 이후에 JS 번들과 RSC Payload를 받는 것으로 표현되어 있습니다. 페이지 라이팅과 달라진 점이 RSC payload를 보내주는 것이라 하셨는데 도식에서는 언제 JS 번들을 보내주는지에 차이가 있어보여서 질문드립니다. 2. 앱라우터 방식에서 클라이언트 컴포넌트만 JS 번들에 포함된다는 설명과 관련해서, 다음 내용이 맞는지 확인 부탁드립니다. 초기 접속 시 서버에서 서버컴포넌트를 RSC 페이로드로 해석하고 완성된 HTML을 보내준다. 초기 접속 시 브라우저는 해당 페이지의 클라이언트 컴포넌트 JS Bundle만 받는다. 이후, JS Bundle과 HTML을 하이드레이션 한다. 페이지 전환 시, 새로 이동하는 페이지의 JS Bundle과 함께 서버 컴포넌트에 대한 RSC Payload도 함께 받아 브라우저에서 조합된다. 즉, 페이지 전환 전에 프리패칭이 없다. 이렇게 이해하는게 맞을까요?
