강의 19:07까지 따라하다가 오류가 갑자기 많이 뜨는데 어디에서 잘못된 것인지 모르겠습니다...DiaryList.jsximport "./DiaryList.css"; import Button from "./Button"; import DiaryItem from "./DiaryItem"; const DiaryList=({data})=>{ return <div className="DiaryList"> <div className="menu_bar"> <select> <option value={"latest"}>Newest</option> <option value={"oldest"}>Oldest</option> </select> <Button text={"write new diary"} type={"POSITIVE"} /> </div> <div className="list_wrapper"> {data.map((item)=><DiaryItem key={item.id} {...item}/>)} </div> </div>; }; export default DiaryList;DiaryItem.jsximport {getEmotionImage} from "../util/get-emotion-image"; import Button from "./Button"; import "./DiaryItem.css"; const DiaryItem=({id,emotionId,createdDate,content})=>{ return (<div className="DiaryItem"> <div className={`img_section img_section_${emotionId}`}> <img src={getEmotionImage(emotionId)}/> </div> <div className="info_section"> <div className="created_date"> {new Date(createdDate).toLocaleDateString()}; </div> <div className="content">{content}</div> </div> <div className="button_section"> <Button text={"수정하기"} /> </div> </div> ); }; export default DiaryItem;App.jsximport './App.css' import{useReducer,useRef,createContext} from "react"; import {Routes,Route} from "react-router-dom"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Notfound from "./pages/Notfound"; const mockData=[ { id:1, createdDate:new Date("2025-02-18").getTime(), emotionId:1, content:"1번 일기 내용", }, { id:2, createdDate:new Date("2025-02-17").getTime(), emotionId:2, content:"2번 일기 내용", }, { id:3, createdDate:new Date("2025-01-15").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; } } export const DiaryStateContext=createContext(); export const DiaryDispatchContext=createContext(); function App() { const [data,dispatch]=useReducer(reducer,mockData); const idRef=useRef(3); //새로운 일기 추가 const onCreate=(createdDate,emotionId,content)=>{ dispatch({ type:"CREATE", data:{ id: idRef.current++, createdDate, emotionId, content, }, }); }; //기존 일기 수정 const onUpdate =(id,createdDate,emotionId,content)=>{ dispatch({ type:"UPDATE", data: { id, createdDate, 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  

저희가 수업진행하면서 프론트엔드,백엔드에 많은 npm으로 설치하잖아요. 이런 라이브러리들을 매번 새로운 프로젝트마다설정해야할까요??비슷한 작업을 뽑아낸다고할때 기존 지금 폴더를 다시 연 다음에 이미지 및 텍스트 수정할때말고 다시 비슷한 프로젝트 폴더를 만들어서 한다고 하면 반드시 다시 전부 깔아야하는거죠? ㅠㅠ

질문이 많아 죄송합니다 선생님 ㅠㅠ아래와 같이 오류메시지가 발생됩니다,, 

안녕하세요 , 수강 잘 들었습니다 ㅎㅎ강의 커리큘럼을 다 수강 완료 해서 Azure function을 활용한 SaaS 방식의 서비스를 쫌더 깊게 이해하는 시간을 가졌구요 제가 지금 기존 강의 내용에 살을 더 붙여 langChain 기반으로 Rag를 적용 시켜서 개발을 완료한 상태 입니다. 근데 여기서 문제가 되는 부분이 로컬에서는 기능을 잘 수행을 하는데 agent 함수를 배포를 하게 되면 에러가 뜨는지 , 기능을 수행하지 못합니다. 서비스 버스에 메시징은 잘 쌓이는데 agent function 에서 그 메시징 리퀘스트도 받질 못하는거 보니 , 런 타임에서 에러가 난거 같은데 해당 함수 Application Insights 대쉬 보드에서 확인하려니 뭐가 뭔지 알수가 없더라구요 ...  서버 로그를 확인 하고 싶은데 혹시 어떤 방법으로 이런 트러블을 해결할수 있을까요 ...    

한 입 크기로 잘라먹는 리액트 책 잘 보고 있습니다.카운터앱 프로젝트는 완료 후,두 번째 할 일 관리 앱 실행 중에 문제가 발생해서 문의드려요.  1. 문제 : 326쪽까지 문제없이 잘 실행이 되었는데, 327쪽 <div>{it.content}</div> 이 코드를 넣었을때부터 327쪽 책과 동일하게 코드 넣었는데, 에러 문구가 아래처럼 나왔어요. WARNING in [eslint] src\component\TodoList.js Line 1:8: 'TodoItem' is defined but never used no-unused-vars webpack compiled with 1 warning  TodoItem을 import했지만, 코드에서 사용하지 않아서 발생하는 ESLint 경고인 것 같은데, {todo.map((it) => ( <TodoItem key={it.id} content={it.content} /> ))}여기서 TodoItem이 개별 할 일을 나타내는 컴포넌트라고 가정하고 content를 props로 전달했습니다.(이때, key 값으로 it.id를 사용하여 React에서 리스트 렌더링 최적화를 도와야 합니다.)파란색 부분과 같은 조언을 받아 코드를 수정했더니 npm run start 실행하면 서버에서 지금까지 한 모든 화면이 안 보이고 백지화 되었어요. ㅠㅠ 기존에 html5로 이펍3 만들기 조금 배웠고, css개념 어느 정도 이해하는 수준의 초보인데,책 보고 프로젝트1 마치고, 프로젝트2도 거의 다 와가서 재미있게 하는 중에 날벼락이 ㅠㅠ; 혼자서는 도저히 해결이 안 될 거 같아서 강의등록 후 문의드려요.. 초보라 문의도 이렇게 하는게 맞는지 모르겠네요.답변 부탁드릴게요~ 참고 todoeditor.js return 이하App.js import "./App.css"; import Header from "./component/Header"; import TodoEditor from "./component/TodoEditor"; import TodoList from "./component/TodoList"; import { useState, useRef } from "react"; const mockTodo = [ { id: 0, isDone: false, content: "React 공부하기", createDate: new Date().getTime(), }, {id: 1, isDone: false, content: "빨래 널기", createDate: new Date().getTime(), }, {id: 2, isDone: false, content: "노래 연습하기", createDate: new Date().getTime(), }, ]; function App() { const idRef = useRef(3); const [todos, setTodos] = useState(mockTodo); const onCreate = (content) => { const newItem = { id: idRef.current, content, isDone: false, createDate: new Date().getTime(), }; setTodos([newItem,...todos]); idRef.current += 1; }; return ( <div className="App"> <Header /> <TodoEditor onCreate={onCreate} /> <TodoList todos={todos}/> </div> ); } export default App;   

이거는 알아둬야 되는 건가요?공통된 개발 규칙을 위한 표준이란 게 무슨 뜻인가요?

export default function solution(str) { let answer = str.replace(/([a-z])|([A-Z])/g, (_, lower, upper) => lower ? lower.toUpperCase() : upper.toLowerCase(), ); return answer; }속도는 더 빠른거 같은데문제중에 정규표현식 못쓰는 경우는 없는건가요 ?

이런 붉은색 에러가 생기는데요,,,

여기 이 강의를 다듣고 회사 및 기업 홈페이지리를만들고,1. FIREBASE 강의도 들어서 로그인 기능 더 추가하면 되는거죠?2. 결제기능도 넣고 싶은데 강의 만들 계획이 있으신가요? 있다면 언제쯤일까요? 3. 카카오지도 API 끌고와서 호갱노노나 부동산지인 같은 홈페이지도 만들어 보고싶습니다. 한국부동산원 API 이런 API를 들고와서 설정하는 방법도 알고싶어요!아마 1,2,3이 합친다면 웬만한건 다 만들 수 있지않을까요?? 감사합니다

<script> var list =[ { question : "이 중에서 제일 좋아하는 과일을 선택해주세요." options : ["사과", "바나나", "포도", "복숭아", "딸기"] }, { question : "이 중에서 제일 좋아하는 음식식을 선택해주세요." options : ["떡볶이", "짜장면", "파스타", "찌개", "치킨"] }, { question : "이 중에서 제일 좋아하는 반려동물을 선택해주세요." options : ["강아지","고양이","새","토끼","여우"] } ]; console.log(list); </script>작성한 코드에 options에 오류가 나서 코드가 작동이 안되는데 어떤 오류인지 모르겠습니다.

오픈 그래프가 아무것도 적용이 되지 않는데 문제를 못 찾겠습니다..index.html 에서<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>감정일기장</title> <meta property="og:title" content="감정 일기장" /> <meta property="og:description" content="나만의 작은 감정 일기장" /> <meta property="og:image" content="/thumbnail.png" /> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> 으로 작성을 하고 배포를 했는데 오픈 그래프 3가지 중 아무것도 적용이 안되네요..카톡말고도 티 스토리 블로그 글쓰기에서도 적용이 안 되는걸로 보아 캐시 문제는 아닌 것 같은데.. 오타가 있는지도 다른 분들 코드 보면서 비교해봤고 이미지도 public 폴더에 잘 있습니다..뭐가 문제일까요?..배포링크: https://emotion-diary-dfgr3t44x-watnus-projects.vercel.app/배포링크에서 썸네일 확인:https://emotion-diary-dfgr3t44x-watnus-projects.vercel.app/thumbnail.png

문제상황: 수정을 위해 체크박스를 체크해도 아무 변화도 생기지 않는 상황reducer 내용 const reducer = (state, action) => { switch(action.type){ case 'CREATE': return [action.data,...state]; case 'UPDATE': return state.map((item) => { console.log(action, item.id, item.isDone) return item.id === action.targetId ? {...item, isDone: !item.isDone} : item }) case 'DELETE': return state.filter((item) => item.targetId !== action.targetId) default: state } } const onUpdate = (targetId) => { dispatch({ type:"UPDATE", targetId }) } 예상 문제: console.log(action.targetId, item.id, item.isDone)을 해본결과action.targetId가 내가 원하는 id값만 가져오는것이 아닌 저렇게 객체 전체를 가져오기 때문에 action.targetId와 item.id가 일치하지 않아 체크가 되지않는 현상인것 같습니다. 어디를 보면 좋을지 및 무엇을 수정해야하는지 알려주시면 감사하겠습니다. 

인프런 아이디: izim0522인프런 이메일:izim0522@naver.com깃헙 아이디: izim5223@gmail.com깃헙 username: junse11입니다!

import React from 'react'; import { colors } from "@/constants"; import {StyleSheet, TextInput, View,Text, TextInputProps} from 'react-native'; interface InputFieldProps extends TextInputProps{ label?:string; variant?: "filled" | "standard" | "outlined"; } function InputField({label, variant = "filled", ...props }: InputFieldProps) { return ( <View> {label && <Text style={styles.label}>{label}</Text>} <View style={[styles.container, styles[variant]]}> <TextInput style={styles.input} {...props} /> </View> </View> ); } const styles = StyleSheet.create({ container:{ height:44, borderRadius:8, paddingHorizontal:10, justifyContent:"center", alignItems:"center", }, label:{ fontSize:12, color: colors.GRAY_700, marginBottom:5, }, filled:{ backgroundColor: colors.GRAY_100, }, standard: {}, outline: {}, input: { fontSize:16, padding: 0, flex:1, }, }); export default InputField; 도와주세요,,선생님 ㅠㅠ

제가 이해한 내용이 맞는지 궁금하여 질문드립니다!  콜백 함수 없이 비동기 작업을 Web APIs에게 넘겨준다면 비동기 작업이 처리되고 넘겨줄 콜백 함수가 없으므로 아무일도 일어나지 않는다.개발자가 자바스크립트에서 비동기적으로 어떠한 코드를 처리하기 위한 목적으로 비동기 코드와 콜백 함수를 같이 작성한다. 라고 생각해도 될까요?

어떻게 해야할까요 ㅠㅠ

안녕하세요! 질문있습니다.(강의 구간: 10:43초)강사님께서 평소 컴포넌트 파일들을 만들때파일명 첫 번째에는 항상 대문자로 적으셨는데hooks를 만들때는 첫 번째 글자를 소문자로 적어주셨는데hooks만들때는 첫 번째 글자를 소문자로 적는건가요?

Window, node 22 버전 사용중입니다. 4-5 로그인 연동하기에서 회원가입까진 연동이 되는데 로그인 api 요청시 500에러가 발생합니다. [Nest] 22548 - 2025. 02. 15. 오후 10:00:50 ERROR [ExceptionsHandler] "expiresIn" should be a number of seconds or string representing a timespan Error: "expiresIn" should be a number of seconds or string representing a timespan at D:\project\community\server\node_modules\jsonwebtoken\sign.js:56:15 at Array.forEach (<anonymous>) at validate (D:\project\community\server\node_modules\jsonwebtoken\sign.js:47:6) at validateOptions (D:\project\community\server\node_modules\jsonwebtoken\sign.js:62:10) at module.exports [as sign] (D:\project\community\server\node_modules\jsonwebtoken\sign.js:171:5) at D:\project\community\server\node_modules\@nestjs\jwt\dist\jwt.service.js:56:17 [Nest] 22548 - 2025. 02. 15. 오후 10:00:50 LOG [HTTP] [POST] /auth/signin (500) (okhttp/4.12.0)  //axios.ts import axios from "axios"; import {Platform} from "react-native"; const baseUrls = { ios: 'http://localhost:3030', android: 'http://10.0.2.2:3030' } const axiosInstance = axios.create({ baseURL: baseUrls[Platform.OS] ?? 'http://localhost:3030' }); export default axiosInstance //auth.ts import {getSecureStore} from "@/utils/secureStore"; import axios from "@/api/axios"; import {Profile} from "@/types"; interface RequestUser { email: string; password: string } async function postSignup(body: RequestUser): Promise<void> { const {data} = await axios.post('/auth/signup', body); return data; } async function postLogin(body: RequestUser): Promise<{ accessToken: string }> { const {data} = await axios.post('/auth/signin', body); return data; } //useAuth.ts function useLogin() { return useMutation({ mutationFn: postLogin, onSuccess: async ({accessToken}) => { setHeader('Authorization', accessToken) await saveSecureStore('accessToken', accessToken); queryClient.fetchQuery({queryKey: ['auth', 'getMe']}); router.replace('/') }, onError: () => { }, }) }postLogin 에서 엔드포인트만 /auth/signup로 바꾸면 회원가입은 정상적으로 요청이 됩니다.

리액트 버젼이 19.0 이상이라서 안된다고하는데 리액트를 다운그레이드해야하나요??...리액트를 다운그래이드 안하고 사용하는 방법은 없을까요?

인프런 아이디: izim0522인프런 이메일:izim0522@naver.com깃헙 아이디: izim5223@gmail.com깃헙 username: junse11입니다!