#pm

RAG 를 짜는 중에 도무지 어떤 부분이 문제인지 모르겠습니다.

# JSON 파일에서 FAQ 데이터를 로드하는 함수 def load_faq_data_from_json(file_path): with open(file_path, 'r', encoding='utf-8') as f: faq_data = json.load(f) return faq_data # FAQ 데이터 로드 json_file_path = '' faq_data = load_faq_data_from_json(json_file_path) # ChromaDB 클라이언트 및 Embedding 설정 chroma_client = chromadb.Client() # ChromaDB 클라이언트 생성 # 고유한 컬렉션 이름 생성 collection_name = "faq_data_" + datetime.datetime.now().strftime("%Y%m%d_%H%M%S") collection = chroma_client.create_collection(collection_name) # LangChain의 Text Splitter 설정 text_splitter = RecursiveCharacterTextSplitter( chunk_size=512, chunk_overlap=50 ) # OpenAI 임베딩 설정 openai_api_key = '' embedding_function = OpenAIEmbeddings( model="text-embedding-ada-002", openai_api_key=openai_api_key ) # 텍스트 스플리팅 및 임베딩 생성 함수 def split_and_embed_text(text): splitted_texts = text_splitter.split_text(text) print(f"Splitted texts: {splitted_texts}") try: # OpenAIEmbeddings는 embed_documents를 사용합니다. embeddings = embedding_function.embed_documents(splitted_texts) except Exception as e: print(f"임베딩 생성 중 오류 발생: {e}") return None # 임베딩이 제대로 생성되었는지 확인합니다. if embeddings is None or len(embeddings) == 0: print("임베딩 생성 실패") return None # 임베딩을 numpy 배열로 변환 embeddings = np.array(embeddings) print(f"Embeddings shape: {embeddings.shape}") # 임베딩 벡터의 차원을 확인하고 처리합니다. if embeddings.ndim == 1 and embeddings.shape[0] == 1536: # 임베딩이 1차원 배열이고 길이가 1536인 경우 final_embedding = embeddings elif embeddings.ndim == 2 and embeddings.shape[1] == 1536: # 임베딩이 2차원 배열이고 두 번째 차원이 1536인 경우 final_embedding = np.mean(embeddings, axis=0) else: print("임베딩 벡터의 차원이 예상과 다릅니다.") return None print(f"Final embedding shape: {final_embedding.shape}") return final_embedding # FAQ 데이터를 Vector DB에 저장 def store_faq_data_in_vector_db(faq_data, collection): for faq in faq_data: # 'question'과 'answer'가 있는지 확인하고, 'answer'가 None이 아닌지 확인 if 'question' not in faq or 'answer' not in faq or faq['answer'] is None: print(f"누락된 'question' 또는 'answer'로 인해 항목을 건너뜁니다: {faq}") continue # 다음 항목으로 넘어감 # 텍스트 스플리팅 및 임베딩 생성 question_embedding = split_and_embed_text(faq['question']) if question_embedding is None: print(f"Embedding generation failed for question: {faq['question']}") continue # 임베딩이 없으면 다음 질문으로 넘어감 print(f"Generated embedding for question '{faq['question']}': {question_embedding}") # 각 질문에 고유한 ID 생성 faq_id = str(uuid.uuid4()) # 메타데이터에서 None 값을 제거 metadata = {k: v for k, v in {"answer": faq['answer']}.items() if v is not None} # Vector DB에 저장 collection.add( documents=[faq['question']], metadatas=[metadata], ids=[faq_id], embeddings=[question_embedding] ) # 추가 후 임베딩 확인 (저장된 후 곧바로 확인) stored_results = collection.get(ids=[faq_id], include=["embeddings"]) if stored_results['embeddings'] is not None and len(stored_results['embeddings']) > 0: print(f"Embedding for question '{faq['question']}' successfully stored.") else: print(f"Failed to store embedding for question '{faq['question']}'") # FAQ 데이터를 JSON에서 로드하고 저장 store_faq_data_in_vector_db(faq_data, collection) 이렇게 데이터를 저장하고 # 환경 변수에서 API 키 로드 openai_api_key = os.getenv("OPENAI_API_KEY") if not openai_api_key: raise ValueError("OpenAI API 키가 설정되지 않았습니다. 환경 변수 OPENAI_API_KEY를 설정하세요.") # OpenAI 임베딩 설정 embedding_function = OpenAIEmbeddings( model="text-embedding-ada-002", openai_api_key=openai_api_key ) # LangChain의 Text Splitter 설정 (일관성 유지) text_splitter = RecursiveCharacterTextSplitter( chunk_size=512, chunk_overlap=50 ) # ChromaDB 클라이언트 및 컬렉션 설정 chroma_client = chromadb.Client() collection_name = "faq_data_collection" try: # 이미 존재하는 컬렉션인지 확인하고, 있으면 가져옴 collection = chroma_client.get_collection(name=collection_name) except chromadb.errors.CollectionNotFoundError: # 컬렉션이 존재하지 않을 경우에만 생성 collection = chroma_client.create_collection(name=collection_name) # Vector DB에서 유사 질문 검색 (ChromaDB) def find_similar_question_in_vector_db(new_question_embedding, collection, k=5): results = collection.query(query_embeddings=[new_question_embedding], n_results=k, include=['documents', 'metadatas', 'embeddings']) best_similarity = 0 best_question = None best_answer = None # 검색 결과에서 각 질문의 유사도와 답변을 처리합니다. if 'documents' in results and 'metadatas' in results: documents = results['documents'][0] metadatas = results['metadatas'][0] embeddings = results['embeddings'][0] for i in range(len(documents)): stored_embedding = embeddings[i] metadata = metadatas[i] if stored_embedding is not None: # 코사인 유사도를 통해 유사도를 계산합니다. similarity = cosine_similarity([new_question_embedding], [stored_embedding])[0][0] print(f"유사도: {similarity} for {documents[i]}") # 유사도가 가장 높은 결과를 선택하며, 임계값 이상일 경우에만 선택 if similarity > best_similarity and similarity >= SIMILARITY_THRESHOLD: best_similarity = similarity best_question = documents[i] if isinstance(metadata, list): metadata = metadata[0] best_answer = metadata.get('answer') if isinstance(metadata, dict) else None return best_question, best_answer # Fine-tuned GPT를 사용해 새로운 답변 생성 def gpt_generate_response_from_finetuned_gpt(question, style="의사 A 말투"): prompt = f"다음은 환자의 질문입니다: \"{question}\". 아래 말투를 사용하여 질문에 대해 성실하고 정확한 답변을 작성해주세요.\n\ 말투: {style}" response = client.chat.completions.create( model="", # Fine-tuned된 GPT 모델 ID messages=[ {"role": "system", "content": "You are a helpful medical assistant."}, {"role": "user", "content": prompt}, ], max_tokens=300, temperature=0.7, # 답변의 다양성을 조절합니다. ) return response.choices[0].message.content.strip() # 새로운 질문 처리 및 최종 응답 생성 def generate_final_response(new_question, collection): # 텍스트 스플리팅 및 임베딩 생성 splitted_texts = text_splitter.split_text(new_question) new_question_embedding = np.mean(embedding_function.embed_documents(splitted_texts), axis=0) # ChromaDB에서 유사 질문 검색 similar_question, answer = find_similar_question_in_vector_db(new_question_embedding, collection) if similar_question and answer: final_response = f"질문: {new_question}\n유사 질문: {similar_question}\n기본 답변: {answer}" else: generated_answer = gpt_generate_response_from_finetuned_gpt(new_question) final_response = f"질문: {new_question}\nGPT로 생성된 답변: {generated_answer}\n(이 답변은 벡터데이터에서 유사한 답변을 찾을 수 없어 GPT에 의해 생성되었습니다.)" return final_response # 사용자로부터 새로운 질문 입력 받기 new_question = input("새로운 질문을 입력하세요: ") # 최종 응답 생성 response = generate_final_response(new_question, collection) print(response) 로 데이터베이스에서 유사한 질문-답변 쌍을 끌어오려는데 정확히 같은 질문을 넣어도 (이러면 유사도가 1인데) 저장되어있는 답변이 끌어와지질 않네요...

ReactNative ios build 에러 3일째 해결을 못했습니다.

시뮬레이션을 실행하려고 해도 스크립트 문제, iPhone 버전 범위 문제, 시뮬레이터 문제가 계속 발생합니다. 어떤 도움이라도 감사합니다. ReactNative를 처음 접했습니다. 저희 팀에서 저를 도울 수 있는 사람이 없습니다. #프로젝트 환경 mac M2 ruby -v ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23] node -v v20.10.0 pod --version 1.15.2 package.json { "name": "labts", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-community/async-storage": "^1.12.1", "@react-native-community/cli": "13.6.9", "@react-navigation/bottom-tabs": "^6.6.0", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.10.0", "@tanstack/react-query": "^5.51.5", "@types/react-native-vector-icons": "^6.4.18", "axios": "^1.7.2", "date-fns": "^3.6.0", "immer": "^10.1.1", "react": "18.2.0", "react-native": "0.74.3", "react-native-calendars": "^1.1305.0", "react-native-date-picker": "^5.0.4", "react-native-dotenv": "^3.4.11", "react-native-get-random-values": "^1.11.0", "react-native-image-crop-picker": "^0.41.2", "react-native-image-zoom-viewer": "^3.0.1", "react-native-paper": "^5.12.3", "react-native-permissions": "^4.1.5", "react-native-safe-area-context": "^4.10.8", "react-native-screens": "^3.32.0", "react-native-splash-screen": "^3.3.0", "react-native-tab-view": "^3.5.2", "react-native-vector-icons": "^10.1.0", "react-native-vision-camera": "^4.5.1", "uuid": "^10.0.0", "yarn": "^1.22.22" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.74.85", "@react-native/eslint-config": "0.74.85", "@react-native/metro-config": "0.74.85", "@react-native/typescript-config": "0.74.85", "@types/react": "^18.2.6", "@types/react-native-dotenv": "^0.2.2", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "babel-plugin-module-resolver": "^5.0.2", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } } PodFile require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip platform :ios, '12.0' use_frameworks! #use_modular_headers! prepare_react_native_project! linkage = ENV['USE_FRAMEWORKS'] if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_sym end target 'nexlabts' do config = use_native_modules! use_react_native!( :path => config[:reactNativePath], # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'nexlabtsTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false, # :ccache_enabled => true ) end end 제가 아래 에러 3가지에 대해 제가 해본 방법들입니다. 1. node 재설치 node_module 폴더 삭제, package-rock.json 삭제 후 재설치 npm install --legacy-peer-deps yarn install 2. Xcode가 node 읽을 수 있도록 설정 sudo ln -s "$(which node)" /usr/local/bin/node 3. Podfile 내 platform 설정 수정 platform :ios, '12.0' or platform :ios, '14.0' 4. Pods 재설치 rm -rf ~/Library/Developer/Xcode/DerivedData or rm -rf ~/Library/Developer/Xcode/DerivedData/* rm -rf Pods rm Podfile.lock pod install --repo-update Xcode \> Product \> Clean Build Folder. cd ./ios pod cache clean -all pod install --repo-update cd ../ npx react-native run-ios --no-packager --simulator="iPhone 15" or npx react-native run-ios --simulator="iPhone 15" or yarn start > i(run ios) Err 1. cocoaPods 설치할 때 [!] CocoaPods could not find compatible versions for pod "React-RuntimeHermes": In Podfile: React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) Specs satisfying the React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) dependency were found, but they required a higher minimum deployment target. Err2. iOS 실행할때 run-ios --no-packager --simulator="iPhone 15" Build description signature: fc1341421f84b87c5245d346c2c17b66 Build description path: /Users/nowonjae/Library/Developer/Xcode/DerivedData/nexlabts-argvodqcybjfcybstpulfpghnzvm/Build/Intermediates.noindex/XCBuildData/fc1341421f84b87c5245d346c2c17b66.xcbuilddata /Users/nowonjae/Desktop/project/NeXLabRN/ios/nexlabts.xcodeproj:1:1: error: Unable to open base configuration reference file '/Users/nowonjae/Desktop/project/NeXLabRN/ios/Pods/Target Support Files/Pods-nexlabts/Pods-nexlabts.release.xcconfig'. (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Embed Pods Frameworks' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Copy Pods Resources' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') --- xcodebuild: WARNING: Using the first of multiple matching destinations: { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } ** BUILD FAILED ** ] Err3. Xcode 로 Build 할때 (Any iOS Simulator Device (arm64, x86_64)) Command PhaseScriptExecution failed with a nonzero exit code

리액트 내비게이션 초기 데이터값 설정

import React, { useEffect, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { TbArrowBigUpFilled } from "react-icons/tb"; import useScroll from "../utils/useScroll"; import useProductsQuery from "../useProductsQuery"; const Nav = () => { const { isNavFixed } = useScroll(); const [activeButton, setActiveButton] = useState(0); const handleButtonClick = (index) => { setActiveButton(index); }; const categoryNames = { materials: "소재별 품목", purposes: "용도별 품목", }; const [isScrollMenuVisible, setScrollMenuVisible] = useState(false); const handleMouseEnter = () => { setScrollMenuVisible(true); }; const handleMouseLeave = () => { // console.log("마우스 이탈"); setScrollMenuVisible(false); }; const location = useLocation(); const isloginorsignup = location.pathname === "/login" || location.pathname === "/signup"; const { isLoading, isError, errorMessage, materials, purposes } = useProductsQuery(); const [hoveredOnedepth, setHoveredOnedepth] = useState(null); const [onedepthChildren, setOnedepthChildren] = useState([]); const [hoveredDivision, setHoveredDivision] = useState(null); const [twodepthDivision, setTwodepthDivision] = useState([]); const handleOnedepthMouseEnter = (item) => { setHoveredOnedepth(item); // console.log(setHoveredOnedepth) setOnedepthChildren(item.children); }; const handletwodepthMouseEnter = (child) => { setHoveredDivision(child); // console.log(setTwodepthDivision); setTwodepthDivision(child.divisions); // console.log(child.divisions); }; if (isLoading) return <>로딩 중...</>; if (isError) return <>{errorMessage}</>; return ( <> {!isloginorsignup ? ( <> {/* 대메뉴 */} <nav id="nav" className={`nav ${isNavFixed ? "fixed" : ""}`}> <div className="nav_wrap"> <div className="twobutton_wrap"> {["materials", "purposes"].map((category, index) => ( <Link type="button" className={`twobutton ${ activeButton === index ? "active" : "" }`} key={index} onClick={() => handleButtonClick(index)} to={`/${category}`} > {categoryNames[category]} </Link> ))} </div> {/* 내비게이션 1depth */} <div className="scrollnav"> <ul className="materialnav" style={{ display: activeButton === 0 ? "flex" : "none", }} > {materials.map((material) => ( <li key={material.id} className="materialnav_li" onMouseEnter={() => { handleOnedepthMouseEnter(material); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{material.name}</Link> </li> ))} </ul> <ul className="usagenav" style={{ display: activeButton === 1 ? "flex" : "none", }} > {purposes.map((purpose) => ( <li key={purpose.id} className="usagenav_li" onMouseEnter={() => { handleOnedepthMouseEnter(purpose); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{purpose.name}</Link> </li> ))} </ul> </div> <div className="call_wrap"> <div className="call"> <div className="call_title">견적 상담 · 문의 대표전화</div> <div className="top_button"> <TbArrowBigUpFilled className="top_icon" /> <p>TOP</p> </div> </div> </div> </div> </nav> {/* 2&3depth 호버 메뉴 */} <div className={`scrollmenu ${isScrollMenuVisible ? "show" : ""} ${ isNavFixed ? "fixed" : "" }`} style={{ visibility: isScrollMenuVisible ? "visible" : "hidden" }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {activeButton === 0 && ( <div className="scrollmenu_top"> <ul className="depth2_wrap"> {onedepthChildren.map((child) => ( <li key={child.id} className="depth2_menu" onMouseEnter={() => { handletwodepthMouseEnter(child); }} > <div className="depth2_menu_img_wrap"> <div className="depth2_menu_img"> <img src={child.images[0]._links.href} alt={child.name} /> </div> </div> <p>{child.name}</p> </li> ))} </ul> </div> )} <div className="scrollmenu_middle"> <div className="depth3_wrap"> {twodepthDivision.map((division) => ( <Link key={division.id} to="/" className="depth3_menu"> <span className="depth3_menu_img"> {/* images 속성이 없거나 비어 있어도 오류를 방지 */} {division.images && division.images.length > 0 && ( <img src={division.images[0]._links.href} alt={division.division_name} /> )} </span> <p>{division.division_name}</p> </Link> ))} </div> </div> <div className="scrollmenu_bottom"></div> </div> </> ) : null} </> ); }; export default Nav; 현재는 depth2_menu 호버해야만 depth3_menu가 보이는데 초기에 scrollmenu가 보일때부터 depth2_menu가 (onedepthChildren.map의 첫번째 순서의 데이터가) 호버되어있어 그에 매칭되는 division의 내용들이 depth3_menu에 보이게 할수있는 방법 있을까요 ?

리액트로 스프링과 웹소켓 채팅방을 구현했는데 자동 랜더링이 안됩니다..

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 A가 B한테 보냈을 때 B가 페이지를 새로고침 하지 않으면 채팅이 자동 랜더링이 되지 않는 상황인데 여러 방법을 참고하고 해봤지만.. 성공하지 않았습니다 어떻게 풀어나가야 할지 잘 모르겠습니다 ㅠㅠ 코드가 길지만 ... 혹시 답변이 가능할까해서 참고해봅니다 좋은 키워드도 추천해주시면 감사하겠습니다!!... export const ChatRoomPage = () => { //메뉴 모달 const [isModalOpen, setIsModalOpen] = useState(false); const [isExitModalOpen, setIsExitModalOpen] = useState(false); const [backgroundPosition, setBackgroundPosition] = useState('static'); const location = useLocation(); const params = location.pathname; const segments = params.split('/'); const RoomUniqueId = segments[4]; const RoomId = segments[5]; const [messageData, setMessageData] = useState([]); const [messageList, setMessageList] = useState([]); const [message, setMessage] = useState(''); const accesskey = Cookies.get('Access_key'); // 채팅방 입장시 안내 문구 기능 const [showModal, setShowModal] = useState(false); const client = useRef({}); useEffect(() => { console.log('유즈이펙트 쉴행'); setShowModal(true); connect('L'); return () => disconnect(); }, []); const connect = type => { client.current = new StompJs.Client({ brokerURL: 'ws://222.102.175.141:8081/ws-stomp', connectHeaders: { Access_key: `Bearer ${accesskey}`, }, debug: function (str) { console.log('str ::', str); }, onConnect: () => { if (type === 'L') { subscribe(); publish(); } else { subscribe1(); publish1(); } }, }); client.current.webSocketFactory = function () { return new SockJS('http://222.102.175.141:8081/ws-stomp'); }; client.current.activate(); return () => disconnect(); }; const subscribe = () => { client.current.subscribe(`/sub/chat/messageList/${localStorage.memberUniqueId}`, message => { // console.log('messageData11 : ', JSON.parse(`${message.body}`)); setMessageData(JSON.parse(`${message.body}`)); const data = JSON.parse(`${message.body}`); setMessageList(data.data.chatMessageList); }); }; const publish = () => { client.current.publish({ destination: `/pub/chat/messageList/${localStorage.memberUniqueId}`, body: JSON.stringify({ chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, page: 0, }), }); }; const closeModal = () => { setIsModalOpen(false); setBackgroundPosition('static'); }; const openModal = () => { setIsModalOpen(true); setBackgroundPosition('fixed'); }; const handleBackdropClick = e => { console.log('e ::', e); if (e.target === e.currentTarget) { closeModal(); } }; const ExitopenModal = () => { setIsExitModalOpen(true); }; const ExitcloseModal = () => { setIsExitModalOpen(false); }; const ReportButtonHandler = () => { alert('곧 업데이트 예정입니다!'); }; // 채팅 보내기 const sendMessage = message => { console.log('message :: ', message); connect(); setMessage(''); return () => disconnect(); }; const subscribe1 = () => { client.current.subscribe(`/sub/chat/message/${RoomUniqueId}`, message => { setMessageData({ ...messageList, message }); }); }; const publish1 = () => { client.current.publish({ destination: `/pub/chat/message/${RoomUniqueId}`, body: JSON.stringify({ memberId: `${localStorage.memberId}`, memberName: `${localStorage.memberName}`, memberUniqueId: `${localStorage.memberUniqueId}`, memberProfileImage: `${localStorage.profileImage}`, chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, message: message, }), }); }; const disconnect = () => { client.current.deactivate(); }; console.log('messageList :: ', messageList); return ( <> <div style={{ width: '100%', height: '100%', position: backgroundPosition, }} > <Background> <Topbar> <Link to={`${PATH_URL.PARTY_CHAT}/${localStorage.memberUniqueId}`}> <TopBackDiv> <LeftBack /> </TopBackDiv> </Link> <TopbarName>모임이름</TopbarName> <ModalBtn onClick={() => { openModal(); }} > <RoomMenuIcon /> </ModalBtn> </Topbar> <Container> <Contents> <ParticipantDiv>ㅇㅇㅇ님이 참여했습니다.</ParticipantDiv> {messageList?.map((data, index) => { return ( <OtherDiv key={index}> <div style={{ position: 'relative', }} > <OtherImg> <OtherProfile> <img src={data.memberProfileImage} alt="profile" style={{ width: '100%', height: '100%', borderRadius: '8px', }} /> </OtherProfile> <OtherHostIcon> <PartHostIcon /> </OtherHostIcon> </OtherImg> <OthertInfo> <OtherName>{data.sender}</OtherName> <OtherContents> <OtherChatText>{data.message}</OtherChatText> <OtherChatTime>12:19 pm</OtherChatTime> </OtherContents> </OthertInfo> </div> </OtherDiv> ); })}

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

Gmail이 안 보내져요 ㅠㅠ 퇴근하고 싶어요

서버 비용 잇슈로 이관 진행 중에 있습니다. 그런데 이전 서버인 AWS에서는 Gmail이 정상적으로 전송이 됬는데 카페24로 이관을 하고선 Gmail 전송이 안되고 있습니다. 차이는 Nginx를 안사용하다가 사용하게된 차이가 있습니다. 방화벽 인바운드, 아웃바운드 설정을 해줬고요 로그를 확인해 보니 이런 에러만 나오는데 스택오버에서는 같은 질문에 답변이 안 달려 있더라고요 0|npm | [0] info: chet createShowhostChat updateMember {"timestamp":"2023-04-17 18:28:50"} 0|npm | [0] [2023-04-17 09:28:50] DEBUG Sending mail using SMTP/6.8.0[client:6.8.0] 0|npm | [0] 0|npm | [2023-04-17 09:28:50] DEBUG [SDdf79wZJFg] Resolved smtp.gmail.com as 74.125.23.109 [cache hit] 0|npm | [0] [2023-04-17 09:28:50] ERROR [TSzLl35tpQ] Connection timeout 0|npm | [0] 0|npm | [2023-04-17 09:28:50] DEBUG [TSzLl35tpQ] Closing connection to the server using "destroy" 0|npm | [0] 0|npm | [2023-04-17 09:28:50] ERROR Send Error: Connection timeout 소스는 이렇게 구성되어 있습니다. 예상은 SMTP 587 Port가 활성화가 아니구나라고 생각을 했는데 잘 안되더라고요 선배님들 도와주세요 ㅠㅠ 추가 로그 입니다. 0|npm | [0] [2023-04-17 11:51:32] DEBUG Sending mail using SMTP/6.8.0[client:6.8.0] 0|npm | [0] [2023-04-17 11:51:32] DEBUG [4tmiO0CAyPQ] Resolved smtp.gmail.com as 64.233.188.109 [cache hit] 0|npm | [0] POST /showhost/approval/approve - - - - ms 0|npm | [0] 0|npm | info: request url : /root/path/to/custom/error/path/500.html {"timestamp":"2023-04-17 20:52:32"} 0|npm | [0] error: app.js/404 {"timestamp":"2023-04-17 20:52:32"} 0|npm | [0] GET /root/path/to/custom/error/path/500.html 404 9 - 3.101 ms 0|npm | [0] [2023-04-17 11:53:02] ERROR [m98HJ7ZDhGM] Connection timeout 0|npm | [0] [2023-04-17 11:53:02] DEBUG [m98HJ7ZDhGM] Closing connection to the server using "destroy" 0|npm | [0] [2023-04-17 11:53:02] ERROR Send Error: Connection timeout 0|npm | [0] error: app.js/500 {"timestamp":"2023-04-17 20:53:02"} 왜 저에게 이런 시련이 ㅠㅠ 원인조차 모르겠습니다. ㅠㅠ 빨리 해결해 퇴근하고 싶습니다.

react-native xcode build시 발생 에러

``` ld: warning: ignoring file '/Users/heejinroh/Library/Developer/Xcode/DerivedData/OkCeo-abydistjrfwgsufmyimbpydzjpqj/Build/Products/Debug-iphonesimulator/Flipper-Folly/libFlipper-Folly.a[3](Assume.o)': found architecture 'arm64', required architecture 'x86_64' ld: warning: ignoring file '/Users/heejinroh/Library/Developer/Xcode/DerivedData/OkCeo-abydistjrfwgsufmyimbpydzjpqj/Build/Products/Debug-iphonesimulator/Flipper-Folly/libFlipper-Folly.a[2](Addr2Line.o)': found architecture 'arm64', required architecture 'x86_64' ld: Undefined symbols: _OBJC_CLASS_$_RCTBridge, referenced from: in AppDelegate.o _OBJC_CLASS_$_RCTBundleURLProvider, referenced from: in AppDelegate.o _OBJC_CLASS_$_RNKakaoLogins, referenced from: in AppDelegate.o _RCTAppSetupDefaultRootView, referenced from: -[AppDelegate application:didFinishLaunchingWithOptions:] in AppDelegate.o _RCTAppSetupPrepareApp, referenced from: -[AppDelegate application:didFinishLaunchingWithOptions:] in AppDelegate.o clang: error: linker command failed with exit code 1 (use -v to see invocation) ``` xcode 14 버전으로 생성된 프로젝트를 xcode 15버전으로 진행하여 실행했는데 빌드단계에서 에러가 계속 발생해서 혹시 도움좀 주실수있을까요? System: OS: macOS 14.0 CPU: (12) arm64 Apple M2 Pro Memory: 647.83 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm Watchman: 2023.09.25.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /Users/heejinroh/.rvm/gems/ruby-3.2.1/bin/pod SDKs: iOS SDK: Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10671973 Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.8 => 0.70.8 react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found

리액트 네이티브 릴리즈로 배포 시 build.gradle 설정대로 동작 안하는 이유가 뭔지 궁긍합니다.

안녕하세요. 현재 리액트 네이티브로 프로젝트를 진행하고 있습니다. 막바지 단계에 거의 도달해서 이제 배포 준비를 하려고 하는데요, 마지막으로 테스트를 하기 위해 stagingRelease 로 apk 를 만들어서 테스트를 하려고 하니, .env.staging 을 읽지를 못하고 있네요. 이상한건 stagingDebug 로 할 때에는 이런 문제가 없었습니다. 지금 환경변수는 루트 디렉토리에 env 폴더가 있고, 해당 폴더 내에는 3개의 환경변수 파일이 존재합니다. .env.development .env.staging .env.production 이렇게 3개 입니다. project.ext.envConfigFiles = [ productiondebug: "env/.env.production", productionrelease: "env/.env.production", developmentrelease: "env/.env.development", developmentdebug: "env/.env.development", stagingrelease: "env/.env.staging", stagingdebug: "env/.env.staging" ] 위의 코드는 제가 설정한 환경변수 매핑하는 부분입니다. 실제로 stagingrelease 로 빌드 시에 flavor 값이 stagingrelease 로 뜨는 걸 확인했습니다. node_modules 에서 react-native-config 폴더를 찾아서 dotenv.gradle 에서 찍으니까 확인이 가능하더라고요. 제가 궁금한 점은 왜 루트에서 .env 파일만을 읽어서 BuildConfig.java 에서 사용하려고 하는걸까요? .env.staging 을 참조하지 않는 이유가 궁금합니다. 아래는 dotenv.gradle 파일입니다. import java.util.regex.Matcher import java.util.regex.Pattern def getCurrentFlavor() { Gradle gradle = getGradle() def pattern = Pattern.compile("(?:.*:)*[a-z]+([A-Z][A-Za-z0-9]+)") def flavor = "" gradle.getStartParameter().getTaskNames().any { name -> Matcher matcher = pattern.matcher(name) if (matcher.find()) { flavor = matcher.group(1).toLowerCase() return true } } println "Current flavor: $flavor" return flavor } def loadDotEnv(flavor = getCurrentFlavor()) { def envFile = project.hasProperty("defaultEnvFile") ? project.defaultEnvFile : ".env" if (System.env['ENVFILE']) { envFile = System.env['ENVFILE'] } else if (System.getProperty('ENVFILE')) { envFile = System.getProperty('ENVFILE') } else if (project.hasProperty("envConfigFiles")) { project.ext.envConfigFiles.any { pair -> if (flavor.startsWith(pair.key.toLowerCase())) { envFile = pair.value return true } } } println "Reading env from: $envFile" def env = [:] File f = new File("$project.rootDir/../$envFile"); if (!f.exists()) { f = new File("$envFile"); } if (f.exists()) { println "Found env file: $f" f.eachLine { line -> def matcher = (line =~ /^\s*(?:export\s+|)([\w\d\.\-_]+)\s*=\s*['"]?(.*?)?['"]?\s*$/) if (matcher.getCount() == 1 && matcher[0].size() == 3) { env.put(matcher[0][1], matcher[0][2].replace('"', '\\"')) // 각 환경 변수 키-값 쌍 출력 println "Loaded env variable: ${matcher[0][1]} = ${matcher[0][2]}" } } } else { println("**************************") println("*** Missing .env file ****") println("**************************") } project.ext.set("env", env) } loadDotEnv() android { defaultConfig { project.env.each { k, v -> def escaped = v.replaceAll("%","\\\\u0025") buildConfigField "String", k, "\"$v\"" resValue "string", k, "\"$escaped\"" println "Set buildConfigField and resValue: $k = $v" } } } 안드로이드 스튜디오 터미널에서 ./gradlew assembleStagingRelease 명령어를 치게 될 경우, Current flavor: stagingrelease Reading env from: .env.staging ************************** *** Missing .env file **** ************************** 이런 로그가 뜨고 있습니다.

"react-native doctor"에서 에러 반복 (Adb, Android Studio)

"npx react-native doctor"를 실행하여 문제를 찾고, F(fix)를 눌러 에러 해결을 진행하였습니다. ---------------------------------------------------------- Common ✓ Node.js - Required to execute JavaScript code ✓ npm - Required to install NPM dependencies ● Metro - Metro Bundler is not running Android ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device. ✓ JDK - Required to compile Java code ✖ Android Studio - Required for building and installing your app on Android ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation ✓ Android SDK - Required for building and installing your app on Android Errors: 2 Warnings: 1 Attempting to fix 3 issues... Common ✖ Metro Could not start the bundler. Please run "npx react-native start" command manually. Android ✖ Adb √ Select the device / emulator you want to use » Emulator s24u (disconnected) ✔ Adb ✔ Android Studio installed successfully in "C:\Users\OOO\AppData\Local\Android". ---------------------------------------------- 그러나 여전히 에뮬레이터는 작동하지 않으며, 다시 "npx react-native doctor"를 실행하면 다시 같은 오류가 발생합니다. --------------------------------------------- Common ✓ Node.js - Required to execute JavaScript code ✓ npm - Required to install NPM dependencies ● Metro - Metro Bundler is not running Android ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device. ✓ JDK - Required to compile Java code ✖ Android Studio - Required for building and installing your app on Android ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation ✓ Android SDK - Required for building and installing your app on Android Errors: 2 Warnings: 1 Usage › Press f to try to fix issues. › Press e to try to fix errors. › Press w to try to fix warnings. › Press Enter to exit.

우분투에서 pip install 시, 다음과 같은 오류가 발생합니다.

안녕하십니까 선배님들. 현재 AWS EC2에서 안드로이드 어플리케이션 용으로 백엔드 서버를 구축하는 도중, 다음과 같은 오류를 맞이했습니다. 현재 사용하는 ubuntu는 24.04 LTS 버전입니다. 도무지 해결 방안을 찾지 못해서 이렇게 조언을 구하고 싶습니다. 감사합니다. pip install git error: externally-managed-environment × This environment is externally managed ╰─> To install Python packages system-wide, try apt install python3-xyz, where xyz is the package you are trying to install. If you wish to install a non-Debian-packaged Python package, create a virtual environment using python3 -m venv path/to/venv. Then use path/to/venv/bin/python and path/to/venv/bin/pip. Make sure you have python3-full installed. If you wish to install a non-Debian packaged Python application, it may be easiest to use pipx install xyz, which will manage a virtual environment for you. Make sure you have pipx installed. See /usr/share/doc/python3.12/README.venv for more information. note: If you believe this is a mistake, please contact your Python installation or OS distribution provider. You can override this, at the risk of breaking your Python installation or OS, by passing --break-system-packages. hint: See PEP 668 for the detailed specification.

mediasoup를 ELB 환경에 적용하여 배

안녕하세요 mediasoup를 이용해서 웹개발 프로젝트를 진행중인 백엔드 개발자 (초보자/갓 배우는중) 입니다. 말그대로 1:N 화상채팅이 포함된 기능을 구현중인데, mediasoup가 ELB배포환경에서 작동하고 있지않아서 여기에 질문올려봅니다ㅜㅠ 아래, 시도해본것과 상황 등을 정리해본 내용을 첨부합니다! 제가 뭘 더 확인해볼수있을까요ㅜㅠㅠ?? 답변주시면 정말감사합니다!! (현재 nodejs로 express이용해서 백서버 구성하고있습니다!) -------------------------------------------------------------------------------- [상황] -> 1:N 화상통화 구현을 위하여 mediasoup를 이용 -> local에서 잘 작동 -> docker 로 local에서 돌리면 잘 작동 (announceIP를 도커 기본 IP "127.17.0.1"로 작동) -> front-vercel배포, server-local 잘 작동 -> server에서 비디오와 오디오를 보내주고 있지 않는 상황 [예상하고있는 문제] -> mediasoup는 연결이 완료되면 2000-2020 포트로 video를 보내주는데, 이부분 포트가 안열리는게 아닐까? -> announceIP에 적절한 IP를 넣지 않아서 안열리는게 아닐까? [배포환경] alb application loadbalance + docker [열어본 port 2000-2100; 2000-2100/udp] - EC2 - Elastic beanstalk 리스너 - proxy (nginx) - docker [시도해본 예상 announce Ip] - EC2 publicIP - dockerIp [mediasoup 공식문서] https://mediasoup.org/documentation/ [참고한 mediasoup영상 및 깃헙] => 유트브 https://www.youtube.com/watch?v=oCzq82xVnkU => 깃허브 https://github.com/jamalag/mediasoup3 [현재 깃허브] https://github.com/4simsimhae/Back - mediasoup4 branch 입니다! [배포된 server 링크] https://simsimhae.store/ [mediasoup test URL] https://simsimhae.store/sfu/:roomId (같은 roomId면 화면이 공유되어야합니다)

안녕하세요 html,css질문입니다 제발 도와주세요

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>중경삼림</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script> <script> jQuery( function() { jQuery( '#background' ).YTPlayer(); } ); </script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="jb-box"> <div id="background" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=ncT1R2hMpaQ', mute: true, showControls: false, useOnMobile: true, quality: 'highres', containment: 'self', loop: true, autoPlay: true, stopMovieOnBlur: false, startAt: 9.5, opacity: 1 }"></div> </div> <br><br><br> <div id="director"> <br><br><br><br> <h1>왕가위</h1> </div> </body> </html> 이건 html이고, body{ margin: 0; } .jb-box { position: relative; } #background { z-index: -1; } 이건 외부 css파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

스프링 mvc와 jpa 중 뭐를 먼저 배워야 할까요?

** 아는 게 많이 없다 보니 고민만 더 많아져서 질문글이 두서 없이 길어졌는데 한번만 읽어주시면 감사하겠습니다!!ㅜㅜ 선배님들의 의견 하나만 남겨주셔도 큰 도움이 될 것 같습니다🥺 안녕하세요. 이제 갓 스프링을 배우기 시작한 컴공과 학생입니다. 웹 개발은 이번이 처음 접하는 거고, 인프런 김영한님 강의를 보면서 배우고 있으며 현재는 스프링 기본편을 보며 전반적인 기능을 훑었습니다. 참고로 스프링을 이용해 제 스스로 뭔가를 만들어보진 않았고, 단순히 강의만 보며 코드를 따라쳐본 수준입니다 .. 우선 제 목표는 한달 뒤에 개인 토이 프로젝트를 할 만한 실력을 갖추는 겁니다! (대외활동/인턴 지원을 위한 포트폴리오 용도입니다) 한달 동안 김영한님의 스프링 MVC 강의와 JPA 활용편(+기본편) 강의를 모두 들을 예정이긴 한데, mvc와 jpa 중 뭐를 먼저 배워야 하나 고민입니다 .. 스프링에 대해 아는 것이 많이 없어서 그러는데, mvc와 jpa 둘 중에 필수인 것과 선택사항(?)인 것이 있을까요? 물론 둘 다 현업에서 중요한 것 같긴 하지만 당장 실무 투입이 목표는 아닌지라, 단순 토이 프로젝트를 진행하는 데 있어 굳이 따지자면 둘 중 뭐가 더 중요한지 궁금합니다. 그리고 둘을 배우는 데 있어 하나를 먼저 배우면 다른 하나를 배우기 쉽고 이런 선후관계가 있을까요?? 완전히 다른 기능이라고 이해하고 있긴 한데 혹시나 싶어 여쭤봅니다..! 뭔가 머릿속으로는 mvc를 먼저 하는 게 낫지 않나 싶으면서도, jpa 활용편 강의에서 jpa를 사용하여 (mvc강의의 예제보다 훨씬 복잡한)웹 애풀리케이션 예제를 전반적으로 개발해본다고 해서,, jpa 활용 강의를 먼저 들으면서 웹애플리케이션에 좀 익숙해진 다음에 mvc를 들어야 하나 싶기도 합니다.. 그런데 jpa 활용편 강의를 듣고 나서 jpa에 대한 자세한 설명을 다룬 jpa 기본편 강의도 들을 예정이라, 두 강의를 이어서 들으려고 하는데요. 처음 생각했던 순서는 mvc->(혼자 진짜 간단한 프로그램 만들어보기)->jpa활용->jpa기본 인데, 만약 jpa활용을 먼저 듣는 순서로 바꾼다면 jpa기본과 mvc 중에 뭘 먼저 들어야 하나 싶기도 합니다..ㅠㅠ 혹시 답변해주시는 데 도움이 될까 싶어 제가 고민 중인 두 강의의 설명 적어놓겠습니다! mvc 강의: “자바 웹 기술과 스프링 MVC의 핵심 개념을 다지고, 스프링 MVC의 기본 기능을 이해합니다. 자바 백엔드 웹 기술을 소개하고, 서블릿, JSP, MVC 패턴, MVC 프레임워크까지 웹 기술 전반을 학습합니다. 이렇게 웹 기술의 배경을 이해한 다음에 스프링 MVC의 핵심 개념을 단단히 다집니다. 이후 스프링 MVC의 기본 기능 기능을 학습하고, 스프링 MVC를 사용해서 기본 CRUD가 가능한 웹 페이지도 개발합니다.” jpa 활용 강의: “이 강의는 게시판 같은 단순한 예제를 넘어서, 실무의 복잡한 상황을 재현할 수 있는 난이도 있는 예제를 사용합니다. 그리고 요구사항 분석부터 설계, 개발, 테스트, 성능 최적화까지 이 모든 과정을 순서대로 진행합니다. 이렇게 실무에 가까운 예제로 웹 애플리케이션을 처음부터 끝까지 함께 설계하고 개발해보면, 이 과정 속에서 스프링 부트와 JPA를 활용하는 올바른 방법을 자연스럽게 익힐 수 있습니다. 그리고 실무에서 이 기술들을 어떻게 활용해야 하는지 이해하게 됩니다.” 물론 이런 글 올릴 시간에 뭐 하나라도 먼저 시작하는 게 낫다는 건 정말 잘 알고 있지만 .. 아직 아는 게 정말 많이 없다 보니 확신도 안 서고 계속 고민만 하느라 혼자 땅굴만 깊이 파고 들어가게 되더라구요ㅜㅜ 이럴 바에야 얼른 다른 분들 조언 받는 것이 더 낫다고 생각해서 이렇게 글 쓰게 되었습니다 ,, 읽어주셔서 감사합니다!!

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

프론트 앤드 미디어쿼리를 사용한 ios반영

프론트 앤드 신입입니다 미디어 쿼리를 사용해서 모바일과 pc 버전을 구현하고 있습니다. pc와 안드로이드로 보면 제가 의도한대로 잘 보이는 것이 ios는 뭔가 달라서 고생 야무지게 하고있습니다.... d 😭😭😭😭😭 문제점 네모칸이 정사각형이어야하는데 직사각형이된다. 백그라운드 색상이.. 구분이 안갈정도로 옅다 코드는 간략하게 아래와 같습니다 ```ts <table className="order-2 border-separate border border-solid border-crossline-gray w-fit md:mx-0 md:row-span-4 md:col-span-2"> <tbody> {map.map((cols: string[], colIndex: number) => { return ( <tr key={uuidv4()}> {cols.map((space: string, rowIndex: number) => { return ( <td className={`relative border-2 md:border-[3px] border-solid border-crossline-gray `} > <p className="absolute m-1 md:m-2"> {crosswordIdx()} </p> <input className={`m-0 w-10 h-10 xs:w-11 xs:h-11 sm:w-12 sm:h-12 md:w-16 md:h-16 text-center `} } /> </td> ); })} </tr> ); })} </tbody> </table> ``` 읽어봐주셔서 감사하고 도움 주시면 감사하겠습니다

html form태그에서 action속성 오류

html 중에서 <form aciton="/signup" method ="POST">이 부분엔서 /signup부분에 하이퍼링크처럼 줄이 생기고 페이지를 로드했을 때 404오류가 뜨는데 혹시 어떤 부분이 잘못되서 그런지 알 수 있을까요..? 그리고 언더바가 생기는 이유도 알고 싶습니다! 구글링을 해도 제가 원하는 답이 없어서 조언 부탁드립니다 ㅜㅜ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form action="/signup" method="POST"> <div> <label for="id">아이디</label> <input type="text" id="id" name="id" /> </div> <div> <label for="password">패스워드</label> <input type="text" id="password" name="password" /> </div> <div> <button type="submit">회원가입하기</button> </div> </form> </body> </html>

display:-webkit-box 왜 적용이 안될까요?

1. p태그에 말줄임css(display:-webkit-box 포함)를 적용했습니다만 적용이 되지 않고 overflow:hidden처리만 되더라구요... display:box 나 display:block를 적용하거나 display속성을 아예 지워버리면 나오는데 webkitbox가 먹히지 않는 이유가 있을까요? (개발자도구에는 찍힙니다) display:flex로 코드를 짜고 있는데 이것도 영향이 있을까요? 2. 그리고 css에서 display: box와 display: block 두 가지의 차이점이 무엇인가요?? html, css구조 같이 올릴게요! -webkit-box 적용이 안되는 이유 알려주세요 html구조 <section> <div> <div> <div> <div> <p></p> <span></span> </div> </div> </div> </div> </section> css구조(scss) @mixin shortening($line, $lineHeight){ overflow: hidden; text-overflow: ellipsis; @if($line == 1){ white-space: nowrap; }@else{ line-height: $lineHeight; max-height :$lineHeight * $line; -webkit-line-clamp: $line; -webkit-box-orient: vertical; display: -webkit-box; } } section { margin-bottom: 160px; div { div { display: flex; justify-content: space-between; div { width: 200px; div { p { margin: 20px 0 10px; font-size: 18px; color: $titleColor; @include shortening(2, 18px); } div { display: flex; justify-content: space-between; align-items: center; p { font-size: $subTextFont; color: #ff4e43; } span { //아이콘 font-size: 20px; color: #efd942; cursor: pointer; } } } } } } }

POST Body 가 간헐적으로 잘려서 들어옵니다.

App (react-native) 에서 RNFS 로 여러장의 이미지를 base64로 변환하여 post body 에 넣어 요청을 보냅니다. 하지만 간헐적으로 서버 (spring boot) 에서 post body 가 잘려서 들어오고 EXCEPTION : org.springframework.http.converter.HttpMessageNotReadableException ERROR MESSAGE : JSON parse error: java.io.EOFException 아래와 같은 에러가 발생합니다. 동일 이미지들을 다시 base64로 변환하여 요청하면 대부분 성공합니다. 어떤 문제일까요? spring boot yml 에는 아래와 같이 설정해두었습니다. server: port: tomcat: connection-timeout: 1800000 max-http-post-size: 100MB max-swallow-size: 100MB threads: max:

백엔드 개발자로 1년간 취준했던 신입입니다. IT 쪽 개발 전망에 대해 몇가지 궁금한 점이 있습니다.

현재 개발 외 직군으로 입사해서 개발자로 이직을 준비하려고 합니다. stack : java spring 인프라 경험 : aws ec2, mysql 학습내용 인프런 김영한 spring 완전정복코스(https://tinyurl.com/23s6uonc)에서 스프링 입문, 스프링 핵심 원리, HTTP, MVC1, MVC2 김영한의 스프링 부트와 JPA 실무 완전 정복 로드맵(https://tinyurl.com/2dzrelgr)에서 ORM, JPA 활용1, JPA활용2 포트폴리오 1(팀 / 앱개발 프로젝트) - https://github.com/heoeuntaek/capstone-spring 포트폴리오 2(개인/ 웹게시판 프로젝트) - https://github.com/heoeuntaek/project-post 이 정도까지 준비를 했습니다. 서울, 부천 등 인천과 가까운 100개 넘는 자바스택의 백엔드, SI 회사에 지원 - 5개만 서합, 1개 코테, 4개 면접 모두 탈락 2022~2023년 동안 개발자 붐이 일어나 현직 개발자, 개발자 취준생이 많고 AI가 발전함에 따라 어느 정도의 개발을 대체하기에 기업이 신입에게 요구하는 역량이 더 커져 신입 개발자의 문턱이 커진 것 같은데요, 1. IT 업계 전반적으로 전망이 궁금합니다. 2. 구체적으로 백엔드 개발 쪽의 전망이 궁금합니다. 3. 개발자 준비를 계속해서 한다면 신입으로서 Spring, 인프라, 알고리즘 등 분야마다 어느정도의 역량은 갖춰야 한다고 생각하시나요? 4. 케바케겠지만 개발자가 수명이 짧다고 들었는데 어떻게 생각하시나요?

첫 커리어로 PM과 AI연구개발 중에 고민 중입니다ㅠ

안녕하세요. 지금 저의 첫 커리어로 PM과 AI연구개발자 중에 뭘로 시작하면 좋을까 고민중입니다.. 우선 저는 인공지능 전공으로 석사를 졸업한지 1년 정도 되었는데요.. 대학원에서 연구하는 동안 너무 힘들고..적성에 잘 맞지도 않는 것 같아 자퇴생각도 많이 했는데 어떻게 꾸역꾸역 버티다가 석사 졸업을 했습니다! 졸업을 하고 번아웃이오고, AI연구개발은 별로 하고싶지 않은 마음에 이것저것 도전해보다가 현재는 PM부트캠프를 듣고, 지금 부트캠프 내에서 진행하는 프로젝트를 하고있습니다..! 그러는 와중에, 취업 관련해서 교수님께서 꽤 괜찮은 회사에 주선을 해주신다고 하셔서 다시 또 고민이 됩니다... 부트캠프를 하면서 솔직히 배우는 게 너무 재밌었고, 지금 하고있는 프로젝트도 너무너무 재밌습니다. 대학 때 사이드 프로젝트를 할 때도 기획단계를 제일 재밌어하기도 했구요.. 그래서 궁극적으로는 PM을 직업으로 삼고 싶은데요. 제가 고민인 부분은 1. AI연구개발자로 실무를 경험해보지 않았다. 즉, 제가 대학원때의 경험만으로 판단을 하는게 맞을까? 싶습니다.. 2. 원xx에서 진행하는 취업챌린지 강의를 들었을 때, PM의 경우 개발이면 개발, 디자인이면 디자인.. 이렇게 자신의 베이스를 가지고 일을 하는 사람들이 많다.. 즉, 처음부터 PM으로 취직하는 것보다 어느정도 베이스를 갖추고 회사내에서 부서이동을 해서 경력을 쌓거나, 이직을 해라.. 라는 취지로 말씀을 해주시더라구요. 실무자분들은 어떻게 생각하시는지 궁금합니다 3. 개발 -> PM 전환은 어느정도 가능하지만, PM->개발 전환은 거의 불가능할 것 같다. 그리고 아무래도 초봉에 있어 차이가 꽤 난다.. 이런 상황인데 일단 AI연구개발로 첫 커리어를 시작하는게 맞을까요?? 아니면 PM으로 첫 커리어를 시작하고 차곡차곡 PM 경험과 이력을 쌓는게 맞을까요? 진로 고민때문에 머리가 터질 것 같아요! 도와주세요!!

pm으로 취업하려는데, 주변 지인들이 강의가 괜찮다고 해서 한 번 들어볼까 하는데 괜찮을까요??

강의가 전반적으로 괜찮다고 하던데 들어도 괜찮을까요???? [항해99 PM코스] 1기 사전 알림 모집] IT 기업 PM으로 취업을 꿈꾸시나요? IT 기본 지식이 없더라도 치열한 몰입만 있다면!! 여러분도 9주 후 IT기업 PM으로 취업 성공! https://bit.ly/45ZXyyT * 사전 알림 신청 혜택 ＊ 수강료 10만원 할인 ＊PM 실무 3종 템플릿 ＊사전과정 프리캠프 우선 참여 [현업 역량을 갖춘 PM 취업 코스, 항해99PM 코스] ＊개발자와 협업할 기회 ＊가장 짧은, 9주 교육 과정 ＊기획-운영-개선 실무 사이클 그대로 진행 ＊IT 업계에서 그로스 PM으로 취업을 목표! * 취업 지원 프로그램 PM 수료 이후에도 수료생이 취업할 수 있도록! 1. 커리어 매니저의 맞춤관리 - 수강생과 커리어 로드맵 구상 - 맞춤 기업 추천 2. 서류 전형 코칭 - 채용 담당자 특강 - 현직 PM 채용 담당자의 서면 피드백 3. 서류 피드백 및 면접 트레이닝 - 현직 PM과 모의 면접 진행 - 모여서 각자 지원, 피드백 진행 4. 스파르타 코딩 클럽 인턴 채용 연계 혜택 - 팀스파르타 PM 서류 지원 면제 - 가산점 부여를 통한 채용의 기회 * 일시 -PM 코스 1기 모집 : 10월 초 모집 시작 -강의 일정 : 9주간 월~금 오전 9시~오후 9시 -1기 개강 : 11월 중순 -1기 수료 : 24년 1월 중순

React 환경 변수 설정 파일 사용 (.env 파일) 관하여

환경에 따라서 경로를 다르게 설정하기 위해서 다음과 같이 .env 파일을 정의하였습니다. 하지만 사용하는 곳에서 console.log 확인해 보니 정의한 주소로 나오지 않습니다. 무엇이 잘못 되었을까요? // .env.development API = https://m.j-sone.com:6420 URL_BASE = https://m.j-sone.com:6420/game_down/fgt-game // .env.production API = https://w.j-sone.com:6421 URL_BASE = https://jsonecdn.j-sone.com/fgt-game // common.ts export const API = process.env.API; export const URL_BASE = process.env.URL_BASE; console.log(API) => http://localhost:3000/undefined

Docker compose 컨테이너 구성을 어떻게 될까요?

저는 prisma nextjs postgresql을 사용하고 있습니다 Docker compose에서 컨테이너를 local용postgresql, deploy용postgresql, nextapp 이렇게 3개로 구성하려고 합니다 이렇게 해서 npm run dev로 app을 local로 실행한다고 하면 local용 postgresql과 연결되게 하고 Build를 하고 deploy된것은 deploy용postgresql과 연결되게 하려고합니다 해당 프로젝트가 포폴용이라 상관은 없지만, 정말 서비스를 진행하려고하면 서버를 늘리는 일이 일어날텐데 이런경우 위에서 생성했던 docker이미지를 이용해서 docker compose up을 할텐데요 그러면 새로운 서버가 생길때마다 local용 db를 생성할 수 밖에 없을 것 같은데 제가 아직 배포도 안해보고 프론트라서 제가 지금 생각하는 방식이 맞는지 잘 모르겠습니다 혹시 제가 말한게 맞나요?

DBCP에서 Unclosed JDBC Connection 발생원인

안녕하세요. spring 에서 DB : mariaDB DBCP 의존성 : commons-dbcp:1.3.jar 이렇게 DBCP 설정 사용하고있습니다. mariaDB 연결 옵션으로 allowMultiQueries=true 커넥션풀 관련옵션으로 initalSize=10 maxActive=150 두개만 설정되어있구요. 문제는 *APM 에서 "Unclose JDBC Connection" 이슈 로그가 하루 몇만 건씩 찍히고 있어서 보니 쿼리 실행할때마다 전부다 unclose 라고 나오고 있는데 원인을 모르겠습니다. 뭐때문에 이럴까요? jboss서버의 로그를 봐도 에러없이 들어오는 요청을 잘 처리하고 있고 그 외 소스상에서 직접 xxx.getConnection() 형태로 사용하고 있는 부분들도 connection.close() 하고있는지 확인했습니다. 한켠으로는 커넥션풀을 사용하고있으니 당연히 커넥션을 닫지 않고 사용한 커넥션을 다시 풀로 반환될 뿐이니 Unclose 는 당연한것이 아닌가? 싶기도 합니다. 이에 조언 구해봅니다 🤔 로그내용을 첨부할수없어 대신 링크하겠습니다. https://stackoverflow.com/questions/75693648/unclosed-jdbc-connection-issue-in-spring-dbcp-environment *APM: application performance manager

Pm,po,기획자가 되고싶습니다

현재 소프트웨어학과 4학년에 재학중인 대학생입니다 It계열에서 기획을 하고싶은데 유튜브에서는 대략적으로 개발자나 디자이너로 경력을 쌓아서 결과물을 만들어내는 경험을 하고 포폴로 도전을 하라고 하십니다. 나중에 자바/스프링 백엔드 개발자로 커리어 쌓다가 (최소 2~3년) Pm으로 도전해보고 싶습니다. Pm으로써 역량으로는 1. 문제정의 2. 커뮤니케이션 3. 우선순위 선정 4. 데이터 분석 이라고하십니다. 제가 궁금한것은 다음과 같습니다 1. 소심하고 낯가리는 성격인데 적성이 맞을지 2. 지방사립대 출신도 대기업 pm이 될수있는지 3. 개발자 커리어를 쌓은 후 마케팅 대학원을 다닐생각인데 이게 도움이 되는일 일지? 4.pm 관련되서 커뮤니티나 더 자세하게 알아볼수있는 사이트가 있는가? 입니다.

firebase 호스팅 첫 화면이 세팅화면만 나와요

npm run start 를 할 땐 리액트 결과가 잘 나오는데 public/index.html 파일에 root 잘 연결되어있는 거 확인하고 npm run build를 해보면 build/index.html파일이 root 가진 채로 잘나와요 그래서 잘된거라고 생각하고 firebase hosting으로 연결 쭉 하고 json 파일 내 hostring: public 부분 build 폴더 설정도 했는데 firebase deploy로 호스팅 주소를 받아 테스트를 해보면 " welcome firebase hosting seoup complete" 라는 firsebase 세팅 초기 화면만 반복해서 뜨네요.. 혹시 몰라 새로운 리액트 폴더를 만들어서 다시 연결도 해보고 npm run start로 정상결과 확인 후 다시 npm run build 하고 firsebase deploy다시 치고 할 수 있는건 전부 다 해본것같은데 추가로 여기저기 블로그와 유튜브 까지 모두 검색해봤는데 firsebase init 순서까지 똑같이 했고 다른점이 없어서 더 멘붕이에요 ㅠ 계속 첫번째 화면만 보여요... 도와주세요 ㅠ

package.json 파일에 대해 질문있습니다.

프론트엔드 공부하고 있는 초보자입니다. 공부를 하다 몇가지 궁금한점이 있어 질문을 드립니다. 1. 처음에 html, css, js 파일로만 만들어 코드 작성을 하고 필요한 패키지들은 cnd 코드를 복붙해서 이렇게 사용을 했었는데 npm init -y 이 명령어를 작성하는 이유는 무엇인가요? 2. npm install 로 패키지를 설치하면 node_modules폴더가 생성되는데 이 폴더는 설치된 패키지 관련 폴더들이 들어있는건가요? 3. package.json에서 설치한 패키지를 사용할때 아래 이미지 처럼 코드를 수정해서 npm run 명령어를 이용해서 실행을 하던데 경로를 작성을 한건가요? 첫번째 이미지는 parcel ./index.html 을 작성했고 두번째는 sass인데 sass는 styles/main.scss 로 했는데 inex.html로 할지 main.scss로 할지 이건 어떻게 알 수있나요? 그리고 두번째 이미지에서 "node-sass": "node-sass" 이건 뭔지도 알고싶습니다. 초보자라 어려운 설명보다 정말정말 쉽게 설명해주시면 너무 감사드리겠습니다.

mvc, flux 패턴의 차이점

flux 아키텍쳐에 대해 공부를 하던 중 제가 이해한 바가 맞는지 궁금하게 되어 질문드립니다. 처음 서치를 시작했을 때는 각 장단점을 얘기하였을 때 mvc 패턴 : 양방향 데이터 플로우로 인해 큰 규모의 프로젝트에서는 다수의 model, view 가 뒤섞여 어디서 데이터가 수정되었는지 추적이 어렵고 의도하지 않은 사이드 이펙트가 발생할 수 있다. flux 패턴 : 단방향 데이터 플로우를 강제하여 상호작용으로 인해 어떤 데이터가 수정되고 그로 인해 영향을 받는 view 를 파악하기가 쉽다. 는 것이 제가 얻은 중론이였습니다. 하지만 mvc 패턴 또한 view 상호작용 > controller > model 수정 > view 데이터 반영 으로 단방향 플로우를 가지는 것이 아닌가? 라는 생각이 들었습니다. 추가적인 서치 후 최근 mvc 패턴은 초기 아키텍쳐를 그대로 반영하지 않으며, 그 이름으로 불리는 mvp, mvvm 패턴을 뜻하는 경향이 있다. 해당 파생 아키텍쳐에서는 model < - > view 사이 양방향 데이터 플로우가 만들어져 규모가 커질수록 복잡도가 증가하게 되었다는 정보를 알게되었습니다. flux 패턴은 오히려 초기 mvc 패턴의 단방향 플로우를 강제하여 데이터 추적 및 이해를 쉽게하였다고 보는 것이 맞는 것인지 앞서 말한 것들이 제가 제대로 이해한 것인지 선배님들이 답변을 주시면 정말 감사하겠습니다.

코딩 초보 인터넷 강의 질문드려요!

프론트엔드라는 직군에 도전을 해보고 싶어서 공부를 하려고하는데 비전공자라서 어디부터 어떻게 해야할지 잘 모르던중에 유데미에 강의를 두 개 발견했는데 어떤게 더 좋을지 몰라서 혹시 괜찮으시면 만약에 친구가 코딩 초보인데 시작을 하려고 한다! 고 했을때 어떤걸 더 추천해주실지 궁금합니다. The Web Developer 부트캠프 2024 - https://www.udemy.com/course/the-web-developer-bootcamp-2021-korea/?couponCode=LEADERSALE24A 100일 코딩 챌린지 - Web Development 부트캠프 - https://www.udemy.com/course/100-2022-web-development/?couponCode=LEADERSALE24A 두 강의중에서 엄청 고민하고 있는데 어떤걸 골라야 할지 잘 모르겠습니다. 혹시 시간 괜찮으시면 추천 부탁드립니다!

SSAFY(싸피) vs LG DX School vs 네이버 부스트캠프

인서울 대학의 전자공학과에서 생성형 AI 관련 연구(이미지 생성)로 석사를 졸업 후 29살이지만 자신감이 부족해서 부트캠프를 고려하고 있습니다. (이미지 생성 개발자를 찾는 사람도 없고... 참 연구주제 선택이 후회되네요) 1. SSAFY: 데이터 트랙 / https://www.ssafy.com/ksp/jsp/swp/swpMain.jsp 2. LG DX School / https://dxschool.co.kr/ 3. 네이버 부스트캠프 AI 테크 / https://boostcamp.connect.or.kr/program_ai.html 위 세 가지 중 선배님들은 어떤 부트캠프를 추천하시나요? 그저 바람이지만 데이터사이언티스트 쪽이면 좋겠네요,,, 정보 및 고민: 1. 싸피의 데이터트랙은 이번이 첫 기수입니다. 따라서 정보가 전혀 없는데, 데이터사이언티스트 교육이 아닌 데이터엔지니어 교육일까 걱정이네요. 2. LG DX School또한 첫 기수인데, Java, Spring, jsp/servlet, Flutter이 커리큘럼에 있어 망설여지네요. 3. 부스트캠프는 AI 전문코스이며 CV, NLP, RecSys의 세 가지 선택지가 있습니다. 이미지 생성쪽이 없는게 아쉽네요,,