173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
안녕하세요 선생님 자바스크립트 처음 입문한 학생인데 선생님 강좌로 많은 도움을 받고 있습니다. 감사합니다. 오늘 2-14.else,else if,switch 를 듣던 중 선생님께서 알려주신 예제를 실행시키고 switch 문을 변형하여 입력을 하였는데 예제는 무사히 실행되었지만 변형한 switch문은 콘솔도 나오지 않고 오류도 나오지 않아 어떤 부분으로 인한 문제인지 전혀 몰라 질문 남깁니다...ㅠ 뭐가 문제였는지 알 수 있을까요? .
미해결
따라하며 배우는 자바스크립트 A-Z
8분즈음에 buttons 선언한 것을 주석처리하고 buttonList만 남겼는데 왜 buttons.addEventListener가 작동하는지 궁금해요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
채찍피티에게 물어보니 try/catch로 처리하라고 하는데 이게 최선일까요..?
해결됨
백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편
안녕하세요. 백엔드 개발자를 목표로 공부하면서, 최소한의 프론트엔드 지식도 익히고 싶어 강의를 수강 중인 학생입니다:) 이번 Ajax 강의를 듣고 처음에는 잘 이해되지 않아 여러 번 반복해서 학습했습니다. 그 결과 왜 직렬화와 역직렬화를 하는지, 그리고 Ajax가 전체적으로 어떤 원리로 동작하는지에 대한 감은 조금 잡을 수 있었습니다. 하지만 코드를 보면 해석은 가능하지만, 직접 작성해보라고 하면 아직 어려운 상태입니다. 강의의 예제 정도는 직접 구현할 수 있을 정도로 습득하는 것이 가장 좋겠지만, 익히는 데 시간이 꽤 걸릴 것 같아 동작 방식만 이해하고 넘어가도 괜찮을지 고민이 됩니다.
해결됨
LangGraph를 활용한 AI Agent 개발 (feat. MCP)
안녕하세요. 저는 이번에 pdf를 입력하고 그것을 기반으로하는 멀티모달 graph를 streamlit을 통해 구현했습니다. 근데 제가 이번에 Langchain 관련 코드를 몰라서 완성 된 것과는 별개로 너무 투박하게 코드가 작성된 것 같아서 질문드립니다. 질문 요약 : hub.pull("rlm/rag-prompt")한 프롬포트 str로 뽑기 or 이미지 추가해서 메세지만드는 방법 GPT 모델은 message_content = [] message_content.append({"type": "text", "text": prompt}) message_content.append( {"type": "image_url", "image_url": {"url": f"data:{image_type};base64,{image_data}"}} ) message = HumanMessage(content=message_content) # 응답받기 client = ChatOpenAI(model='gpt-4o') response = client.invoke([message]) response.content ## str임! 해당 모양대로 메세지를 만들고 invoke하면 이미지포함 메세지가 되는 것을 알았습니다. 이를 통해 이미지에 보이는것은 ~~문서에있니? 이런식으로 구현하고자 했습니다. generate 함수(노드) 에서 이미지와 텍스트를 같이 메세지로 전달하고 싶은데 조금 어려움을 겪었습니다. generate 함수 코드입니다. 해당 함수는 sate['context']의 내용을 프롬포트에 넣고 이를 이미지와 함께 보내고자합니다. # 허브에서 RAG 프롬프트를 가져옵니다 generate_prompt = hub.pull("rlm/rag-prompt") # 지정된 매개변수로 언어 모델을 초기화합니다 generate_llm2 = ChatOpenAI(model='gpt-4o') def generate(state: AgentState) -> AgentState: """ 주어진 state를 기반으로 RAG 체인을 사용하여 응답을 생성합니다. Args: state (AgentState): 사용자의 질문과 문맥을 포함한 에이전트의 현재 state. Returns: AgentState: 생성된 응답을 포함하는 state를 반환합니다. """ context = state['context'] query = state['query_message'] make_massage = [] massage = generate_prompt.invoke({'question': query, 'context': context}) messages = massage.to_messages() # print(massage) # print("--------------------------------") # print(messages) # print("--------------------------------") # print(messages[0]) # print("--------------------------------") # print(messages[0].content) # print("--------------------------------") make_massage.append({"type": "text", "text": messages[0].content}) if state['query_img'] != "": make_massage.append({"type": "image_url", 'image_url': {"url": state['query_img']}}) final_massage = HumanMessage(content=make_massage) response = generate_llm2.invoke([final_massage]) answer = { "type" : "RAGtext", "message" : response.content} print(f"call : generate") return {'answer': answer} 처음에는 prompt에서 str을 추출하려고 했는데 조금 어려웠습니다; from langchain_openai import ChatOpenAI from langchain import hub # 허브에서 RAG 프롬프트를 가져옵니다 generate_prompt = hub.pull("rlm/rag-prompt") print(generate_prompt.messages[0]) print(generate_prompt.messages[0].content) # 'HumanMessagePromptTemplate' object has no attribute 'content' 오류 print(generate_prompt.messages[0].invoke({"context" : "test", "question" : "test22" })) # 오류;; 그렇기에 일단 invoke 를하고 완성된 text를 찾아 넣어주었습니다. make_massage.append({"type": "text", "text": messages[0].content}) 이런식으로 텍스트를 추출해서 다시 메세지를 구성하는게아니라. 이미지 url을 알고있으니 추가로 더 넣어주는 뭔가 그런 세련된 방법이 없었을까요? 분명 HumanMessagePromptTemplate 클래스나 그런것들다루는거라 기초 문법인거 같은데 조금 많이 헤매서 더 좋은 코드가 있을까 싶어 이렇게 질문을 드립니다.
미해결
TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
안녕하세요, React 환경에서 다음 강의를 보며 예제연습중인 수강생입니다. 먼저, 함수형 컴포넌트가 주류가 된 현대 React 생태계에서도 클래스형 디자인 패턴이 많이 활용되는지 궁금합니다. 특히 싱글톤, 팩토리, 빌더와 같은 클래스 기반 디자인 패턴들이 여전히 실무에서 많이 사용되고 있는지 알고 싶습니다. 또한 이러한 클래스 기반의 디자인 패턴 사용 시, React의 재렌더링 측면에서 성능 이슈가 발생하지는 않는지, 실제 개발 경험에서 어떤 장단점이 있는지 궁금합니다.
해결됨
LangGraph를 활용한 AI Agent 개발 (feat. MCP)
해당 위 사진은 GitHub에 올려주신 3.5 강 노트북이미지입니다. 강의에서 요약 프롬포트를 summary로 하고 요약 메세지는 response의 content로 저장하는데 혹시 오타인건가요? 아니면 MessagesState 클래스는 자동으로 메세지를 저장해준다고 이야기해주신 그거랑 연관이있는걸까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
최근 취업시장이 리액트와 스프링부트나 넥스트같은 백엔드 기술을 모두 할줄아는 사람을 뽑는 추세가 강해져 저도 리액트 관련기술을 익히고자 강의를 신청했고 현재 수강중입니다. 백엔드쪽은 스프링부트로 확고히 가져가서 만약 이후에 둘을 연동할때 DB의 데이터를 가져오거나 서버와 연동해서 데이터를 가져오거나 통신할때 next.js 기술이 필수인지 아닌지 궁금해서 질문 남깁니다. 필수가 아니라면 도움이 되는 지 궁금합니다. 제가 강사님 next,js 소개글을 봤는데 node.js가 필요기술에 있어서 node.js만을 위한 ssr기술인지 궁금합니다.
해결됨
아바타 커뮤니티앱 만들기 (React Native Expo)
안드로이드 버전 14 해당 강의 자료를 받아서 실행해봤는데, 로그인 텍스트가 왼쪽으로 쏠려있고 홈화면 버튼이 동작하지 않습니다. 왜이러는걸까요 ???
해결됨
LangGraph를 활용한 AI Agent 개발 (feat. MCP)
안녕하세요! section3을 듣고나서 제 나름대로 langgraph를 만들고 이걸.. streamlit으로 구현을 해봤는데요. 이번 강의에서와 같이 chat-history를 checkpointer를 사용해서 연결하려고하면 Checkpointer requires one or more of the following 'configurable' keys: ['thread_id', 'checkpoint_ns', 'checkpoint_id'] 이런 오류 가 뜨고 있는 상태입니다. chat-gpt와 구글 서치를 통해 나름대로 아래와 같이 해보았지만(간략하게 서술하면 CustomMememorySaver라는 클라스를 통해 ['thread_id', 'checkpoint_ns', 'checkpoint_id'] 를 checkpointer에 넣는 것입니다.) 이 역시 제대로 동작하지 않습니다. system_message_template = SystemMessagePromptTemplate.from_template("You are a helpful assistant.") chat_prompt = ChatPromptTemplate.from_messages([system_message_template]) # 세션 키 생성 (세션 관리) def generate_session_key(): if 'session_key' not in st.session_state: st.session_state['session_key'] = str(uuid.uuid4()) return st.session_state['session_key'] # Checkpointer 설정 (세션 상태 관리) class CustomMemorySaver(MemorySaver): def __init__(self, session_key): super().__init__() self.session_key = session_key def get_checkpoints(self): # 필요한 체크포인트 정보 반환 return { "thread_id": self.session_key, # session_key를 thread_id로 사용 "checkpoint_ns": "default", # 기본 네임스페이스 "checkpoint_id": f"checkpoint_{self.session_key}" # 고유한 checkpoint_id } # 시스템 메시지와 메모리 체크포인터 설정 session_key = generate_session_key() checkpointer = CustomMemorySaver(session_key=session_key) # LangGraph만을 사용한 에이전트 생성 (tools는 빈 리스트로 설정) agent_executor = create_react_agent(llm, [], state_modifier=chat_prompt, checkpointer=checkpointer) 또, 예전 langchain 강의에서 알려주셨던 chat-with-history 코드를 활용하려는 시도도 해봤는데요. (가독성을 위해 프롬프트 내용이나 중간 중간 선언 내용은 지웠습니다.) 하지만 이거 같은 경우에는 langgraph를 사용하는 입장에서, rag-chain을 ai_response에 넣는 과정을 어떻게 처리해야될지 모르겠어서 중도포기한 상태입니다. ㅠㅠ;; store = {} def get_session_history(session_id: str) -> BaseChatMessageHistory: if session_id not in store: store[session_id] = ChatMessageHistory() return store[session_id] def get_rag_chain(): llm = get_llm() retriever = get_retriever() contextualize_q_system_prompt = ("생략") contextualize_q_prompt = "생략" history_aware_retriever = create_history_aware_retriever( llm, retriever, contextualize_q_prompt ) system_prompt = ("생략") qa_prompt = ChatPromptTemplate.from_messages("생략") question_answer_chain = create_stuff_documents_chain(llm, qa_prompt) rag_chain = create_retrieval_chain(history_aware_retriever, question_answer_chain) conversational_rag_chain = RunnableWithMessageHistory( "생략" history_messages_key="chat_history", output_messages_key="answer", ).pick('answer') return conversational_rag_chain def get_ai_response(user_message): rag_chain = get_rag_chain() loan_chain ={"input": dictionary_chain} | rag_chain ai_message = loan_chain.stream( { "question": user_message }, config={ "configurable": {"session_id": "abc123"} }, ) return ai_message 결론적으로 말하면 langgraph로 어떻게해야 langchain에서 했던것처럼 streamlit상에서 구현할 수 있을지 궁금합니다! 질문 읽어주셔서 감사합니다!
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
eas와 notification 설정 후에는 로그인 시에 android emulator 상에서 코딩해주신 대로 '실제기기를 사용해주세요' 문구가 나옵니다. ios 는 개발자모드 설정을 구매해야 한다고 해서 기기는 안드로이드로 진행하려고 하는데 android 기기가 따로 없고 emulator 로는 실행이 안되는 걸까요? expopushToken만 보내고 로그인이 되지는 않습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의내용에 보면 todos가 변경될 때 Editor는 변경이 않되야하는 것 같은데 리렌터링이 됩니다. 소스는 같은데 머가문제인지 알 수있을까요? <Editor.jsx> const Editor = () => { const { onCreate } = useContext(TodoDispatchContext); const [content, setContent] = useState(""); const contentRef = useRef(); const onChangeInput = (e) => { setContent(e.target.value); }; const onKeyDown = (e) => { if (e.keyCode === 13) { onSubmit(); } }; const onSubmit = () => { if (content === "") { contentRef.current.focus(); return; } onCreate(content); setContent(""); }; return ( <div className="Editor"> <input ref={contentRef} value={content} onKeyDown={onKeyDown} onChange={onChangeInput} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default Editor; <App.jsx> import "./App.css"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; import { useState, useRef, useReducer, useMemo, useCallback, createContext, } from "react"; const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Date().toLocaleDateString(), }, { id: 1, isDone: false, content: "빨래하기기", date: new Date().toLocaleDateString(), }, { id: 2, isDone: false, content: "청소하기", date: new Date().toLocaleDateString(), }, ]; const reducer = (state, action) => { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((todo) => todo.id === action.data.id ? { ...todo, isDone: !todo.isDone } : todo ); case "DELETE": return state.filter((todo) => todo.id !== action.data.id); default: return state; } }; export const TodoStateContext = createContext(); export const TodoDispatchContext = createContext(); function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", data: { id: targetId } }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", data: { id: targetId } }); }, []); const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); return ( <div className="App"> <Header /> <TodoStateContext.Provider value={{ todos }}> <TodoDispatchContext.Provider value={memoizedDispatch}> <Editor /> <List /> </TodoDispatchContext.Provider> </TodoStateContext.Provider> </div> ); } export default App;
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
매강좌마다 깃허브 링크가있던데요 매강마다 소스코드를 일일히 다운받아야하나요??? 아니면 한번에 다운받아도되는걸 제가 착각하고있는건가요??? 강의가 진행되어질수록 그만큼 코드변경된흐름을 깃허브 트리로 펼쳐놓으신것같은데.... 하나만받아도되는건지 매강마다 깃허브가서 소스코드를 매강마다 다운받아야하는건지 궁금합니다.
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
안녕하세요! 선생님 글쓰기 누르고, 제목, 내용 밑에 카메라 모양 눌러서 사진을 추가하면 사진이 매우 느리게 뜹니다... 혹시 이건 왜 그런건가요??
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vercel 빌드를 했는데, 이렇게 에러 메시지가 나오는데 뭐가 문제인지 찾지 못했습니다. vercel 페이지에서도 빌드로그를 보면 아래와같이 나오는데요. npm run build 했을때 정상적으로 노출되고, 오류 메시지가 없어서 정상배포될 줄알았는데 안되네요.ㅠ x Build failed in 181ms 18:15:46.529 error during build: 18:15:46.530 Could not resolve "./pages/NotFound" from "src/App.jsx" 18:15:46.530 file: /vercel/path0/src/App.jsx 18:15:46.530 at getRollupError (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:397:41) 18:15:46.530 at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:393:42) 18:15:46.530 at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21111:24) 18:15:46.530 at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21071:26 18:15:46.544 Error: Command "npm run build" exited with 1
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
안녕하세요! 마지막 프로젝트 적용만 남았는데 manifest.json 파일 만들고 저렇게 작성했는데 확장 프로그램 로드를 못하는 상황입니다..!
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
🚨 질문 작성법 및 안내사항 질문 작성법 - 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문) - 질문은 최대한 구체적으로 작성해주세요. - 비슷한 질문이 올라와있는지 확인해주세요. - 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요. body { margin: 0 auto; width: 100%; font-family: 'Hi Melody'; background-image: url("https://source.unsplash.com/user/hanjw3288/likes"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; /* color: white; */ /* overflow: hidden; */ } 강사님 안녕하세요! 마지막 프로젝트 적용하기 전에 background-image 적용할때 unsplash가 적용이 안되는데 어떻게 해결해야 할까요..? 저 url 타고 들어가면 404페이지가 뜹니다..
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Emotion Diary</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> New.jsx import Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useNavigate } from "react-router-dom"; import { useContext, useEffect } from "react"; import {DiaryDispatchContext} from "../App"; import usePageTitle from "../hooks/usePageTitle"; const New=()=>{ const{onCreate}=useContext(DiaryDispatchContext); const nav=useNavigate(); usePageTitle(`${useParams.id}번 일기 수정`); const onSubmit=(input)=>{ onCreate( input.createdDate.getTime(), input.emotionId, input.content ); nav('/',{replace: true}); }; return ( <div> <Header title={"write new diary"} leftChild={<Button onClick={()=>nav(-1)} text={"< back"}/>} /> <Editor onSubmit={onSubmit}/> </div> ); }; export default New; usePageTitle.jsx import { useEffect } from "react"; const usePageTitle=(title)=>{ useEffect(()=>{ const $title=document.getElementByTagName("title")[0]; $title.innerText=title; },[title]); }; export default usePageTitle; 이전 과정까지는 문제없었는데 12.18에 있는 새일기 쓰기 페이지에 들어왔을 때 페이지에 아무것도 뜨지 않는 문제가 발생하는데 어떤게 문제일까요
미해결
처음 만난 리액트(React)
안녕하세요 감사하게도 강의 잘 듣고있습니다. 혹시 실습한 코드를 받을 수 있는 git 있을까요? 개발환경 버전이 달라서 그런지 챕터6하는데 원치않게 동작하는게 있어서요
해결됨
아바타 커뮤니티앱 만들기 (React Native Expo)
onError: (err, variables, context) => { queryClient.setQueryData( [queryKeys.POST, queryKeys.GET_POST, context?.newPost.id], context?.previousPost, ) }, queryKey array index 2에 context 말고, context?.newPost.id 가 들어가야할 것 같아요 context 안에 newPost previousPost 객체가 들어있어서 다른 key 가 생성됩니다. REF 링크
