--ignore 공백 ./client' ", 에서공백을 해놨는데도 왜 에러가 뜨는지 그 이유를 잘 모르겠습니다

iOS로 구글 로그인하는거는 잘됩니다!근데 aos로 로그인하면 이런 에러가 떠요,,, 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

이 에러는 무슨 에러인가요?  학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

개발하면서 제가 불필요한 렌더링을 줄이기 위한 기법이 아니라, 리액트를 사용하게 되면 자연스럽게 얻을 수 있는 성능 최적화 효과라고 보면 되나요?

이런식으로 실제 앱에서만 사용이 가능하다고 뜹니다ㅠ찾아보니까 디버깅을 끄라는데 개발자 도구를 켜봐도(ctrl+m /cmd+m켜서 들어가는,,) Debugging을 끄는 부분이 안보여요,,,+ Debug JS Remotely라는 부분을 끄라고 구글링을 하니까 나오는데 이 부분이 아예 개발자도구에서 안보입니다.. 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

app-91cf9a3….js:2 Uncaught (in promise) Error: We couldn't find the correct component chunk with the name "component---src-pages-index-tsx" at t.loadComponent (app-91cf9a3….js:2:25195)해당 오류가 나며 하얀화면만 뜹니다. 블로그 글로 url작성해서 들어가면 정상적으로 뜹니다.

최대한 자료를 찾아봐서 이해해보려고 했는데, 너무 헷갈려서 도움을 구하고자 질문을 올립니다.강의에서 search page에는 페이지 이동 시 javascript bundle로써 전달 될 client component가 없기 때문에 그냥 rsc payload만 전달되는 것이라고 하셨는데, searchpage만 보면 client component가 없는 것이 맞지만, (with-searchbar)폴더 안에 layout으로 Searchbar component를 포함시킨 것은 어떻게 되는 것인지 궁금합니다.Searchbar component가 client component이므로 search page에서 직접적으로 import를 하지는 않았지만, 레이아웃으로써 사용되었기에 어쨌든 search page안에 client component가 포함되는 것은 아닌가요?이해가 명확하게 되지 않아 질문조차 조금 난해하게 쓴 것 같아서 죄송합니다!감사합니다.

'12.11) Home 페이지 구현하기 2. 기능' 강의의 9분 17초에서 App 컴포넌트의 context를 Home 컴포넌트로 보내주기 위해 DiaryStateContext와 DiartDispatch를 익스포트 해주는데요.문제 1) 저는 익스포트하게 되면 아래 사진과 같이 오류가 뜨고 [문제 2]에서 설명드린 부분도 실행이 되지 않습니다. (Home 컴포넌트에서 임포트 후 다시 App 컴포넌트로 돌아와 익스포트를 작성해주긴 했습니다 => 작성 순서 바뀜)이미지의 오류 문구 (refresh only works when a file exports components. Move your react context to a separate file.) 문제 2) 그리고 강의 영상에선 익스포트 후 Home 컴포넌트에 App 컴포넌트에서 익스포트한 것 들을 import 해주고 필터를 통해 각 달에 해당하는 일기 데이터를 추출 후 콘솔창에 출력해줍니다. (강의 16:07)하지만 저는 아래 사진과 같이 콘솔창에 현재 월에 대한 데이터가 아무것도 뜨지 않습니다. 위에서 설명드린 익스포트가 제대로 되지 않은 문제로 인해 안 뜨는 것일까요? + 추가로 context들을 파일을 따로 만들고 App 컴포넌트에 임포트하고 새로고침해봤더니 아무것도 뜨지 않았습니다.. 이 내용은 깃허브에 업로드 되어있습니다.App과 Home 컴포넌트의 코드는 아래에 남겨두었습니다.(깃허브 : https://github.com/hsyo830/Section12.git )[App.jsx]import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Routes, Route } from "react-router-dom"; // /입력 시 Home, /new new, /diary diary 각각의 페이지를 가져오도록 하기 위함 import Diary from "./pages/Diary"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Notfound from "./pages/NotFound"; const mockData = [ { id: 1, createDate: new Date("2025-03-14").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createDate: new Date("2025-03-13").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createDate: new Date("2025-02-25").getTime(), emotionId: 3, content: "3번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); case "DELETE": return state.filter((item) => String(item.id) !== String(action.id)); default: return state; } } // 일기 데이터를 공급할 Context export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); // 여러가지 일기 데이터를 가져야해서 []와 같이 빈 배열 const idRef = useRef(3); // 새로운 일기 추가 const onCreate = (createDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createDate, emotionId, content, }, }); }; // 기존 일기 수정 const onUpdate = (id, createDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createDate, emotionId, content }, }); }; // 기존 일기 삭제 const onDelete = (id) => { dispatch({ type: "DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; [Home.jsx]import { useState, useContext } from "react"; import { DiaryStateContext } from "../App"; import Header from "../components/Header"; import Button from "../components/Button"; import DiaryList from "../components/DiaryList"; import { data } from "react-router-dom"; const getMonthlyData = (pivotDate, data) => { const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear, pivotDate.getMonth() + 1, 0, 23, 59, 59 ).getTime(); return data.filter( (item) => beginTime <= item.createdDate && item.createdDate <= endTime ); }; const Home = () => { const data = useContext(DiaryStateContext); const [pivotDate, setPivotDate] = useState(new Date()); const monthlyData = getMonthlyData(pivotDate, data); console.log(monthlyData); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1)); }; const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1)); }; return ( <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"} />} rightChild={<Button onClick={onIncreaseMonth} text={">"} />} /> <DiaryList /> </div> ); }; export default Home;  

typescript 버전 코드를 보고 있는데 package.json에 module:common.js로 되어있는데 어떻게 Import 구문을 사용할 수 있는지 궁금합니다

zustand에 저장과 cookie 저장에 대해 보안적으로는 cookie가 더 안전하다고 들었습니다. xss 공격에는 HttpOnly를 통해 해결할 수 있지만 반환된 accessToken을 js로 접근하지 못하다 보니 저장을 할 수 없는 문제가 있지만secure을 통해 https에서만 요청가게 할 수 있으며, sameSite를 통해 csrf의 공격에 방어할 수 있다 해서 secure, sameSite를 사용해 accessToken을 쿠키에 저장하는게 더 좋은 방법이라 생각 했는데 어떤 방식을 주로 사용하나요?

added 153 packages, and audited 154 packages in 2s 32 packages are looking for funding run `npm fund` for details found 0 vulnerabilities leeman01@idong-geon-ui-noteubug mall % npm list tailwindcss mall@0.0.0 /Users/leeman01/frontend2/mall └── (empty) leeman01@idong-geon-ui-noteubug mall % npm cache clean --force npm warn using --force Recommended protections disabled. leeman01@idong-geon-ui-noteubug mall % npm install -D tailwindcss postcss autoprefixer added 2 packages, and audited 156 packages in 772ms 32 packages are looking for funding run `npm fund` for details found 0 vulnerabilities leeman01@idong-geon-ui-noteubug mall % npm run dev > mall@0.0.0 dev > vite VITE v6.2.2 ready in 392 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help ^C leeman01@idong-geon-ui-noteubug mall % npm list tailwindcss mall@0.0.0 /Users/leeman01/frontend2/mall └── tailwindcss@4.0.14 leeman01@idong-geon-ui-noteubug mall % npx tailwindcss init -p npm error could not determine executable to run npm error A complete log of this run can be found in: /Users/leeman01/.npm/_logs/2025-03-18T07_59_35_501Z-debug-0.log leeman01@idong-geon-ui-noteubug mall %  이런 알수 없는 오류가 뜨는데 원인이 뭔지 궁금합니다

실습을 잘 따라하여 코드도 모두 동일합니다.그런데 왜 글 작성하기 버튼 클릭이 안되는지 오류도 없어서 문의드립니다.또한 버튼 간격도 코드가 동일한데 떨어지지 않고 제 것은 붙어있습니다.어떻게 해결해야할 지 모르겠네요 ㅎㅎ 

안녕하세요. 새로 올려주신 강의를 흥미롭게 듣고 있습니다. 저는 아이폰을 이용해서 테스트 중인데, 안드로이드와는 좀 다른 움직임이 있어서 질의드립니다. 권한 설정화면 Link되면 저희가 구성한 하이브리드 앱이 웹뷰로 더 이상 연결되지 않는것처럼 보입니다. 이 부분 어떻게 해결할수 있을까요?그리고 권한 설정화면으로 이동하여 권한을 수정한 후 제거하고 ( 해당 화면은 권한을 설정한다고 해서 사라지거나 하지 않습니다 ) expo로 돌아오면 active가 들어와야 하는데 그렇지 않습니다. 코드에 setInterval을 줬으니 뭔가 주기적으로 수행하지 않을까 싶어서 로그를 줘봤으나 전혀 구동하지 않았습니다. 여러가지 테스트를 해보았는데, 앱권한 설정페이지로 이동하는 쿼리인 openDeviceSystemForSettingSet을 호출하면 앱의 권한 화면이 Link되고, 그러면서 기존의 하이브리드 앱이 웹뷰로 연결되지 않는것 같습니다. 제 코드가 잘못되었나 싶어서 setInterval을 없애고 fetch의 순서를 바꿔봤습니다. openDeviceSystemForSettingSet을 맨뒤에 배치해봤을때는 모든 결과가 잘 들어왔습니다. 그러나 6-2와 같이 openDeviceSystemForSettingSet를 먼저 호출하고 이후에 fetchDeviceLocationforPermissionSet이나 fetchDeviceSystemForAppStateSet의 fetch를 수행하려 하면 작동하지 않습니다. 인공지능에게 문의하니 상태 구독을 하라고 하여 아래와 같이 구독을 mobile의 index.tsx에 추가하였습니다. React.useEffect(() => { const subscription = AppState.addEventListener("change", (nextAppState) => { if (nextAppState === "active") { console.log("✅ 앱이 다시 활성화됨. WebView에 메시지 전송!"); webviewRef.current?.postMessage("APP_ACTIVE"); } }); 그리고 page.tsx에는 app이 active가 되면 이를 받아올수 있도록 함수를 구성하고 그 안에서 fetchDeviceLocationforPermissionSet이나 fetchDeviceSystemForAppStateSet를 받아오도록 변경했습니다.  useEffect(() => { const handleMessage = (event) => { if (event.data === "APP_ACTIVE") { console.log( "🔄 WebView에서 APP_ACTIVE 메시지 수신! fetchApp 다시 실행" ); checkPermissions(); } }; window.addEventListener("message", handleMessage); return () => { window.removeEventListener("message", handleMessage); }; }, []); const checkPermissions = async () => { try { console.log("📡 위치 권한 상태 확인 요청"); const result = await fetchApp({ query: "fetchDeviceLocationforPermissionSet", }); const status = result.data.fetchDeviceLocationforPermissionSet.status; webviewlog(` 위치 권한 상태: ${status}`); const appStateResult = await fetchApp({ query: "fetchDeviceSystemForAppStateSet", }); const isForeground = appStateResult.data.fetchDeviceSystemForAppStateSet.isForeground; webviewlog(` 앱 활성화 상태: ${isForeground}`); } catch (error) { console.error(" fetch 요청 실패:", error); } }; 이렇게 하니 앱이 활성화되면 이벤트 리스너를 통해 결과가 전달되어져 오기는 합니다.강의에서 해주셨던 setInterval설정이 훨씬 간편하지라 아이폰에서 구성하려면 어떻게 해야할지 어떤 이유로 이렇게 되는지 궁금하여 질의드립니다. 2. 그리고, 원두님이 안드로이드를 통해 보여주신 것과 같이 허용함을 다시 묻지 않는데 이런 설정을 별도로 추가해야 하는걸까요? 제가 뭔가 누락한 건지 모르겠습니다. 원두님은 관련코드를 구성하지 않으셔도 사용에 대한 질의가 나타나는데, 저의 경우는 권한 설정기능이 바로 띄워집니다. 일반적인 앱들을 사용하다보면 권한 허용 질의 이후(모달창??)에 허용을 누르고 , 권한설정을 한 후 지도로 들어가고 그렇게 구성되는데 그런 구성이 누락되어 , 웹뷰 연동이 안되는것일까

현재 Ch4-6. 관리자 계정 로그아웃, 삭제 강의를 듣고 있는 학생입니다! 다름이 아니라 로그아웃 코드에서 토큰 검증 오류 시에 res.send()를 안하는 이유가 있나요?!토큰 검증 중 오류가 발생하게 된다면, isLoggedIn 상태는 true이고 토큰은 지워진 상태가 되는건데 그러면 로그인도 못하고 로그아웃도 못하는 상태인거 같아서요!궁금해서 여쭤봅니다!!

안녕하세요! 우선 좋은 강의를 제공해주셔서 정말 감사합니다!하지만 불편한 점이 있습니다.강의 자료를 일일이 다운받으니 번거롭고 파일 병합하기도 힘드네요..타 강의와 비교하는 것은 죄송하지만, 다른 강의들은 모두 zip파일로 강의자료를 병합하여 업로드해주십니다.본 강의도 강의자료를 병합하여 한번에 올려주시면 감사하겠습니다!

개발 20년차, 원론적으로 제대로 구조를 배워보고 싶어 영상강의를 듣는데, 정말 오랜만에 제대로 된 강의를 듣는것 같군요. 정말 강의 퀄리티 좋습니다.  잡설이 길었는데~~다름이 아니라, 현재 강이 백엔드API 서버를 NEST.JS 프레임웍을 이용해서 개발하신것 같은데, 다음번 강의는 NEST.JS 어떤 지요? 기다리겠습니다. ㅎ

코드는 아래와 같습니다. 다른 버튼들은 모두 클릭 이벤트 핸들러가 작동하는데, 월 변경 버튼에만 이벤트 핸들러가 작동하지 않습니다. 혹시 Date 객체를 잘 못 생성한 것일까요..? import { useContext, useState } from "react"; import { DiaryStateContext } from "../App"; import Header from "../components/Header"; import Button from "../components/Header"; import DiaryList from "../components/DiaryList"; const getMonthlyDate = (pivotDate, data) => { const beginTime = new Date(pivotDate.getFullYear(), pivotDate.getMonth(), 1,0,0,0).getTime(); const endTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth()+1, 0, 23, 59, 59 ).getTime(); return data.filter((item)=> beginTime<= item.createdDate && item.createdDate <= endTime) } const Home = () => { const data = useContext(DiaryStateContext); //날짜 보관 const [pivotDate, setPivotDate] = useState(new Date()); const monthlyData = getMonthlyDate(pivotDate, data); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth()+1)); } const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth()-1)); } return <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth()+1}월`} leftChild={<Button onClick={onDecreaseMonth} title={"<"}/>} rightChild={<Button onClick={onIncreaseMonth} title={">"}/>} /> <DiaryList data={monthlyData}/> </div> }; export default Home;

onclick이벤트 처리는 SCR이라 상단에 'use client";라고 정의해줘야 하는게 아닌지요? 자동으로 CSR로 처리되나요?

Vercel signup이 안되요,, 계속 제 깃허브 계정은 추가 인증이 필요하다며 registration@vercel.com에 문의를 하라고 하네요,,, 이럴땐 진행을 어찌해야할까요,,,

인텔리제이 구동시 아래로그가 출력욉니다.Database JDBC URL [Connecting through datasource 'HikariDataSource (HikariPool-1)'] Database driver: undefined/unknown Database version: 10.11.11 Autocommit mode: undefined/unknown Isolation level: undefined/unknown Minimum pool size: undefined/unknown Maximum pool size: undefined/unknown 특이사항 없는 것인지 확인부탁드립니다.