#input

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

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인데) 저장되어있는 답변이 끌어와지질 않네요...

개발자 선생님들 도와주세요..

안녕하세요 초보개발자입니다 지금 구글로 코드 복붙하며 게시판 수정중인데 아예 똑같이 복붙 하였는데 저는 왜 이런 식으로 나올까요 도와주세요 .. ㅠㅠ 프로젝트 발표가 코앞인데.. 1번째사진은 작성자의 사진이고 2번째 사진이 제 출력 화면입니다... 코드는 댓글에 적어두겠습니다..도와주세요.. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--부트스트랩은 어떤device로 접속하더라도 해상도에 맞게 알아서 설정되는 탬플릿이다. --> <meta name="viewport" content="width=device-width" , inital-scale="1"> <!--스타일시트를 참조, 주소는 css안에 부트스트랩.css--> <link rel="stylesheet" href="css/bootstrap.css"> <title>JSP 게시판 웹 사이트</title> </head> <body> <!-- 네비게이션 구현 네비게이션이라는 것은 하나의 웹사이트의 전반적인 구성을 보여주는 역할 --> <nav class="navbar navbar-default"> <!-- header부분을 먼저 구현해 주는데 홈페이지의 로고같은것을 담는 영역이라고 할 수 있다. --> <div class="navbar-header"> <!-- <1>웹사이트 외형 상의 제일 좌측 버튼을 생성해준다. data-target= 타겟명을 지정해주고--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-exmaple="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 여긴 웹페이지의 로고 글자를 지정해준다. 클릭 시 main.jsp로 이동하게 해주는게 국룰 --> <a class="navbar-brand" href="main.jsp">JSP 게시판 웹 사이트</a> </div> <!-- 여기서 <1>에만든 버튼 내부의 데이터 타겟과 div id가 일치해야한다. --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- div 내부에 ul은 하나의 어떠한 리스트를 보여줄때 사용 --> <ul class="nav navbar-nav"> <!-- 리스트 내부에 li로 원소를 구현 메인으로 이동하게만들고--> <li><a href="main.jsp">메인</a></li> <!-- 게시판으로 이동하게 만든다. --> <li><a href="bbs.jsp">게시판</a></li> </ul> <!-- 리스트 하나 더 생성 웹페이지 화면에서 우측 부분--> <ul class="nav navbar-nav navbar-right"> <!-- 원소를 하나 구현해 준다. 네비게이션 우측 슬라이드메뉴 구현 --> <li class="dropdown"> <!-- 안에 a태그를 하나 삽입한다. href="#"은 링크없음을 표시한다. --> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">접속하기<span class="caret"></span></a> <!--접속하기 아래에 드랍다운메뉴 생성 --> <ul class="dropdown-menu"> <!-- li class="active" 현재 선택된 홈페이지를 의미 --> <li><a href="login.jsp">로그인</a></li> <li class="active"><a href="join.jsp">회원가입</a></li> </ul> </li> </ul> </div> <!-- 네비게이션 바 구성 끝 --> </nav> <!-- 하나의 컨테이너처럼 감싸주는 역할 --> <div class="container"> <div class="col-lg-4"></div> <!-- 회원가입 폼은 위의 양식은 일치하며, 이제 내부 폼만 바꿔준다. --> <div class="col-lg-4"> <div class="jumbotron" style="padding-top: 20px;"> <!-- 양식 삽입 post는 회원가입이나 로그인같이 어떠한 정보값을 숨기면서 보내는 메소드/ 로그인 Action페이지로 정보를보내겠다--> <form method="post" action="joinAction.jsp"> <!-- 회원 가입에 맞게 위에 액션은 joinAction페이지로 밑에 제목은 회원가입 화면으로 변경 --> <h3 style="text-align: center;">회원가입 화면</h3> <div class="form-group"> <!-- 회원 가입에서도 userID or userPassword는 동일하게 가져가고, 회원가입에 필요한 나머지 속성추가 --> <input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20"> </div> <!-- userName 추가 --> <div class="form-group"> <input type="text" class="form-control" placeholder="이름" name="userName" maxlength="20"> </div> <!-- 성별 선택 추가 --> <div class="form-group" style="text-align: center;"> <!-- 버튼 공간을 따로 마련해준다.(남,녀) --> <div class="btn-group" data-toggle="buttons"> <!-- 선택이 된곳에 표시를 하는 active를 설정해준다. --> <label class="btn btn-primary active"> <input type="radio" name="userGender" autocomplete="off" value="남자" checked>남자 </label> <label class="btn btn-primary"> <input type="radio" name="userGender" autocomplete="off" value="여자" checked>여자 </label> </div> <!-- 성별 선택부분 완료 --> </div> <!-- email 작성부분 구현 --> <div class="form-group"> <!-- placeholder는 아무런 입력이 없을때 띄워주는 값 --> <input type="email" class="form-control" placeholder="이메일" name="userEmail" maxlength="20"> </div> <!-- 버튼 또한 회원가입으로 value변경 --> <input type="submit" class="btn btn-primary form-control" value="회원가입"> </form> </div> </div> <div class="col-lg-4"></div> </div> <!-- 애니메이션을 담당하게 될 자바스크립트 참조 --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- 특정홈페이지에서 제이쿼리 호출 --> <script src="js/bootstrap.js"></script> </body> </html>

Next.js 에서 fluent-ffmpeg 사용 시 에러 해결 가능할까요?

Next.js 에서 puppeteer를 사용해서 특정 url에 접속하여 애니메이션을 png로 100장 정도 캡처하여 생성하고, fluent-ffmpeg를 사용해서 해당 png 이미지들을 mp4 영상으로 만들려고 하는데요. yarn add puppeteer fluent-ffmpeg @ffmpeg-installer/ffmpeg yarn add --dev @types/fluent-ffmpeg 위와 같이 라이브러리들을 설치했구요. 아래 page.tsx 파일에서 코드를 구현했는데요. dev로 실행해서 해당 페이지에 접속을 하면 아래와 같은 에러가 발생하는데요. 해결이 가능할까요?? 다른 라이브러리를 써야할지 구현한 코드가 문제가 있는지 모르겠네요. 도움 부탁드립니다!! # 에러 코드 # 1 of 1 error Next.js (14.2.3) Server Error Error: Cannot find module '/Users/.../animation-capture/node_modules/@ffmpeg-installer/darwin-arm64/package.json' This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack webpackEmptyContext file:///Users/.../animation-capture/.next/server/app/capture/page.js (22:10) eval node_modules/@ffmpeg-installer/ffmpeg/index.js (40:27) (rsc)/./node_modules/@ffmpeg-installer/ffmpeg/index.js file:///Users/.../animation-capture/.next/server/vendor-chunks/@ffmpeg-installer.js (20:1) Next.js eval /./src/app/capture/page.tsx (rsc)/./src/app/capture/page.tsx file:///Users/.../animation-capture/.next/server/app/capture/page.js (286:1) Next.js # 코드 구현부 # import { NextApiRequest, NextApiResponse } from 'next'; import puppeteer from 'puppeteer'; import fs from 'fs'; import path from 'path'; import ffmpeg from 'fluent-ffmpeg'; import ffmpegInstaller from '@ffmpeg-installer/ffmpeg'; ffmpeg.setFfmpegPath(ffmpegInstaller.path); .... 중략.... const outputFilePath = path.resolve("./screenshots/video.mp4"); ffmpeg() .addInput(`${folderPath}/screenshot-%d.png`) .inputFPS(10) .output(outputFilePath) .on("end", () => { res.status(200).send(`Video created successfully at ${outputFilePath}`); }) .on("error", (err) => { console.error("Error generating video:", err); res.status(500).send("Failed to generate video"); }) .run(); } catch (error) { console.error("Error capturing screenshots:", error); res.status(500).send("Failed to capture screenshots"); }

리액트 라우팅을 이렇게 하는게 맞는지 모르겠습니다..

안녕하세요 독학 하고 있는 학생입니다.. 작은 프로젝트로 혼자서 홈페이지를 만들고 있습니다. 우선 로그인 페이지부터 만들고 있는데, 로그인페이지에는 아이디찾기 비밀번호찾기 등등 많은 페이지가 들어가더라구요.. 그래서 리액트 라우터를 공부하고 적용시켰습니다. 코드는 아래와 같습니다. 이렇게 해도 제가 원하는대로 로그인페이지에서 아이디 찾기 페이지로 이동하고 하는 것은 맞는데 App.js에 이렇게 주저리주저리 원하는 것을 다 넣어두면 나중에 전체적으로 페이지를 완성시켰을 때 App.js에 너무 방대한 내용이 들어가지않나..? 싶더라구요.. 그래서 중첩된 라우트도 찾아서 공부했는데 크흡..암만해도 적용이 안됩니다.. 그래서 그냥 이대로 홈페이지를 계속 만들어도 되는지,,아니면 저의 고민을 해결할 방법이 중첩된 라우트가 맞는지 알고싶습니다.. 맞다면 다시 공부해야겠죠 ㅜ.. 답변부탁드립니다 (_ _) import "./App.css"; import { Route, Routes } from "react-router-dom"; import WigTemplate from "./components/wigtemplate"; import FindId from "./components/findId"; import FindPwd from "./components/findPwd"; import SignIn from "./components/signIn"; import NotFound from "./components/notFound"; function App() { return ( <Routes> <Route path="/" element={<WigTemplate />} /> <Route path="/findId" element={<FindId />} /> <Route path="/findPwd" element={<FindPwd />} /> <Route path="/signIn" element={<SignIn />} /> <Route path="*" element={<NotFound />} /> </Routes> ); } export default App; ---------------------------------------------------------- import React from "react"; import styled from "styled-components"; import WigLoginButton from "./wigLoginButton"; import WigHeader from "./wigHeader"; import WigInput from "./wigInput"; import WigFind from "./wigFind"; const WigTemplateContainer = styled.div` height: 100vh; display: flex; align-items: center; justify-content: center; `; const WigTemplateBlock = styled.div` width: 500px; height: 600px; background: #d0ebff; border-radius: 80px; `; function WigTemplate() { return ( <WigTemplateContainer> <WigTemplateBlock> <WigHeader></WigHeader> <WigInput></WigInput> <WigFind></WigFind> <WigLoginButton></WigLoginButton> </WigTemplateBlock> </WigTemplateContainer> ); } export default WigTemplate; ------------------------------------------------------- import React from "react"; import styled from "styled-components"; import { RxDividerVertical } from "react-icons/rx"; import { Link } from "react-router-dom"; const FindBlock = styled.div` display: flex; justify-content: center; `; const ABlock = styled(Link)` color: black; font-size: 0.9rem; text-decoration: none; `; function WigFind() { return ( <FindBlock> <ABlock to="/findId">아이디 찾기</ABlock> <RxDividerVertical style={{ marginTop: "3px" }} /> <ABlock to="/findPwd">비밀번호 찾기</ABlock> <RxDividerVertical style={{ marginTop: "3px" }} /> <ABlock to="/signIn">회원가입</ABlock> </FindBlock> ); } export default WigFind;

파이썬 오류 좀 고쳐주세요 ㅠㅠ

import time import requests import streamlit as st API_BASE_URL = "http://localhost:8000/qna" # Fastapi로 api 생성 def request_chat_api(user_message: str) -> str: url = API_BASE_URL resp = requests.post( url, json={ "user_message": user_message, }, ) resp = resp.json() print(resp) return resp["answer"] def init_streamlit(): st.set_page_config(page_title='Dr. KHU', page_icon='🩺') if "messages" not in st.session_state: st.session_state.messages = [{"role": "assistant", "content": "안녕하세요! Dr.seo입니다🩺"}] # Initialize chat history if "messages" not in st.session_state: st.session_state.messages = [] # Display chat messages from history on app rerun for message in st.session_state.messages: with st.chat_message(message["role"]): st.markdown(message["content"]) def chat_main(): if message := st.chat_input(""): # Add user message to chat history st.session_state.messages.append({"role": "user", "content": message}) # Display user message in chat message container with st.chat_message("user"): st.markdown(message) # Display assistant response in chat message container assistant_response = request_chat_api(message) with st.chat_message("assistant"): message_placeholder = st.empty() full_response = "" for lines in assistant_response.split("\n"): for chunk in lines.split(): full_response += chunk + " " time.sleep(0.05) # Add a blinking cursor to simulate typing message_placeholder.markdown(full_response) full_response += "\n" message_placeholder.markdown(full_response) # Add assistant response to chat history st.session_state.messages.append( {"role": "assistant", "content": full_response} ) if __name__ == "__main__": init_streamlit() chat_main() 이 코드를 실행시키면 자꾸 AttributeError: st.session_state has no attribute "messages". Did you forget to initialize it? More info: https://docs.streamlit.io/library/advanced-features/session-state#initialization 라고 뜨네요..

채팅 기능 client 가 null 값이 돼요

하나의 페이지에서 connectHandler를 작동하고 또다른 페이지에서 sendHandler를 작동하려고 하는데 이렇게 해서는 useChat()이 리렌더링 되면서 client 값이 초기화가 되더라구요 값을 유지하고 싶고 recoil에 client를 담는 건 불가능이라고 떠서... connectHandler와 sendHandler를 다른 hooks로 분리하는 방법도 생각해봤는데 그러면 또 client값이 connect한 값이 아니더라구요 무슨 방법이 있을까요? 제발 도와주세요 ㅠㅠ (한 페이지에서 connectHandler, sendHandler, disconnectHandler 실행하면 잘 작동합니다!) import { CompatClient, Stomp } from "@stomp/stompjs"; import { useRef } from "react"; import { useRecoilState } from "recoil"; import { inputMessageState, messageState } from "../../states/chatting"; export function useChat() { const [messages, setMessages] = useRecoilState(messageState); const [inputMessage, setInputMessage] = useRecoilState(inputMessageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connectHandler = () => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe(`/sub/chat/room/1`, onMessageReceived, { token: token!, }); }, ); }; const onMessageReceived = (message: any) => { setMessages((prevMessage) => [...prevMessage, JSON.parse(message.body)]); }; // 채팅 나가기 const disconnectHandler = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const sendHandler = () => { if (client.current && inputMessage.trim() !== "") { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: 1, message: inputMessage, type: "TALK", }), ); setInputMessage(""); } }; return { connectHandler, disconnectHandler, sendHandler, }; }

파이참 코딩 관련 질문

score_A : 0 #단순 쾌락 score_B : 0 #경제 적압박 score_C : 0 #사회 적압박 score_D : 0 #유전 score_E : 0 #보복 score_F : 0 #환경 question1 = input('난 가정 폭력을 당한적 있다.') #질문1 if question1 == "o": #만약 질문1에 맞다고 대답 한다면 score_E += 1 #환경에 1점 추가 score_D += 1 #유전에 1점 추가 question2 = pyautogui.prompt('난 학교 폭력을 당한적 있다.') question3 = pyautogui.prompt('난 여아가 이성적 으로 좋다.') question4 = pyautogui.prompt('난 가정 형편 또는 개인 적인 형편이 좋지 않다.') question5 = pyautogui.prompt('나의 범죄는 충동적 이였다.') question6 = pyautogui.prompt('난 반 사회적 인격 장애를 진단 받은적 있다.') question7 = pyautogui.prompt('난 대인 관계에 능통치 못하다.') question8 = pyautogui.prompt('난 감정 기복이 심하다.') question9 = pyautogui.prompt('나의 범죄는 계획적 이였다.') question10 = pyautogui.prompt('난 주변에 친한 사람이 없다.') answer_list = [] answer_list.append(question1) answer_list.append(question2) answer_list.append(question3) answer_list.append(question4) answer_list.append(question5) answer_list.append(question6) answer_list.append(question7) answer_list.append(question8) answer_list.append(question9) answer_list.append(question10) print(answer_list) survey_dict= {'문항번호': [1,2,3,4,5,6,7,8,9,10], '내용': answer_list, } survey_df = pd.DataFrame(survey_dict).set_index("문항번호") print(survey_df) 위의 코드에서 NameError: name 'score_E' is not defined 라고 오류가 나는 이유가 뭘까?

React에서 Custom hook 사용법에 관하여 질문있습니다.

react custom hook이란 로직의 재사용성을 위하여 로직들을 묶어놓는 용도로 사용한다고 배웠는데 종종 custom hook에서 component까지 render하는 함수를 제공하는 케이스들을 본것같아 궁금한것이 있습니다. 질문이 두가지 있습니다. 1. Custom hook에서 component 렌더링해주는 함수까지 제공하는 것이 custom hook의 용도에 알맞은 것일까요? 관련된 component를 제공해주는 것까지 재사용할 로직에 포함된다고 생각하면 되는걸까요? 2. 두번째는 react 렌더링에 관련된 질문입니다. custom hook에서 export default const useComponent = () => { const [value, setValue] = useState(''); const InputComponentByCustomHook = () => { return (<input value={value} onChange={(e)=>setValue(e.target.value)} />); } return [InputComponentByCustomHook ]; } 로 선언해준 후, 이를 app에서 사용하는 경우에 const App = () => { const [RenderedComponentByCustomHook] = useComponent() return (<> <InputComponentByCustomHook /> </>) } 이 경우에는 자꾸 input에 값을 입력할때 한글자 한글자마다 focus가 풀리길래 왜 그런가에 대해서 알아보니 value값이 변경될때마다 InputComponentByCustomHook컴포넌트가 계속 새롭게 만들어져서 focus가 풀린다고 하더라구요. 그런데 아래와 같이 const App = () => { const [RenderedComponentByCustomHook] = useComponent() return (<> { InputComponentByCustomHook() } </>) } 함수를 실행하여 return으로 컴포넌트를 전달해주는 경우에는 input에 값을 입력해도 focus가 풀리지않습니다. value 값이 변경될때마다 InputComponentByCustomHook 함수는 계속해서 재생성되는 것은 알겠는데 앞선 케이스와 달리 이친구는 계속 input 컴포넌트가 유지되는 이유가 무엇일까요? 함수가 재생성되더라도 return에 전달되는 컴포넌트들은 재생성되지 않는 것인가요?

<input type="file" multiple> 관련하여..

<template> <div> <input ref="fileInput" type="file" accept="image/*" multiple="true" @change="handleFileInputChange" /> <button @click="openFileInput" class="select-button"> Select Images </button> <div class="preview-container"> <div v-for="file in selectedFiles" :key="file.lastModified" class="preview-item" > <p>{{ file.name }}</p> <div class="preview"> <img :src="previewImage" style="width: 100px" /> </div> <!-- <img :src="URL.createObjectURL(file)" /> --> <button @click="removeFile(file.lastModified)" class="remove-button"> X </button> </div> </div> </div> </template> <script setup lang=“ts”> const fileInput = ref() const selectedFiles: Ref<Array<any>> = ref([]) const openFileInput = () => { fileInput.value.click() } const previewImage = ref<any>('') const handleFileInputChange = e => { // const files = Array.from(fileInput.value.files) const files = e.target.files console.log('files', files) selectedFiles.value.push(...files) console.log('add selectedFiles', selectedFiles.value) for (let i = 0; i < selectedFiles.value.length; i++) { const file = selectedFiles.value[i] console.log('handleFileInputChange_ file', selectedFiles.value[i]) const reader = new FileReader() reader.onload = e => { previewImage.value = e.target.result } reader.readAsDataURL(file) } } const removeFile = lastModified => { selectedFiles.value = selectedFiles.value.filter( file => file.lastModified !== lastModified ) console.log('remove selectedFiles', selectedFiles.value) } </script> 모바일에서 카메라로 찍은 여러장의 사진들이 각각의 썸네일로 노출되어야함 현재는 최신 사진으로 엎어치기 됨.. 예) 'A B C D' 의 사진이 나와야하는데 현재는 A 찍고 B찍으면 'B B' 가 됨 C찍으면 'C C C'가 됨 도와주세요!

Next.js 14 서버액션을 사용한 폼 데이터 처리 중 질문입니다.

next.js 14의 서버액션을 사용해서 사용자로부터 form으로 데이터를 입력받아 DB에 저장하고 첨부파일을 서버에 업로드하는 모듈을 개발중입니다. 문제점은, 첨부파일을 input으로 입력받아 서버액션 함수로 formData로 넘겨주는데, 서버액션 함수에서 첨부파일의 파일명에 한글이 포함됐을 경우 파일명의 한글이 유니코드로 보이는 문자열로 찍히고 있습니다. // Form.jsx "use client"; // [other code] export default function Form() { const [formState, formAction] = useFormState(inquiryAction, { success: undefined, message: "", }); const { register, handleSubmit, reset, formState: { errors }, } = useForm(); const onSubmit = (data) => { const formData = new FormData(); const jsonData = JSON.stringify(data); formData.append("jsonData", jsonData); data.attachment[0] && formData.append("attachment", data.attachment[0]); formAction(formData); }; return ( <form action={handleSubmit(onSubmit)}> // [other code] <FileInput label="첨부파일" {...register("attachment")} error={errors} resetTrigger={resetTrigger} /> // [other code] </form> ); } // inquiryAction.js "use server"; import { connectDB } from "./connectDB"; export async function inquiryAction(prevState, formData) { const fields = JSON.parse(formData.get("jsonData")); const attachment = formData.get("attachment"); console.log(attachment); } Form 컴포넌트는 클라이언트 컴포넌트이고, react-hook-form과 next14의 서버액션을 사용하기 위해, form의 action에는 react-hook-form의 handleSubmit함수에 onSubmit 함수를 인자로 전달합니다. onSumbit 함수에서 서버액션 함수를 가져와 처리를 하고 있습니다. 그런데 여기서 서버함수쪽에서 첨부파일을 받을 때 한글 파일명이 다 깨지고 있네요... 기존에 api route와 fetch api를 사용했을 땐 문제가 없었는데.. 제가 놓치고 있는 부분이 있을까요?

nextjs 초보 fetch & DELETE 동작이 안되요.

app/api/list/[id]/route.js export async function DELETE(request, {params}) { const id = params.id; const {searchParams} = request.nextUrl; const sort = searchParams.get('sort'); return NextResponse.json({message: 'test', id, sort}); } 위처럼 되어있고, app/list/ListItem.js <button className="blue"> <span onClick={() => { fetch('/api/list/' + post._id, { method: 'DELETE' }).then(() => { console.log('call delete'); }); }}>삭제</span> </button> 위 처럼 코드를 작성했는데, DELETE route가 실행이 되지 않습니다. 어떻게 해야 하나요?... POST의 경우에는 아래와 같은데 동작이 잘 되서요.. app/write/route.js export async function POST(request) { const data = await request.formData(); let body = Object.fromEntries(data); const db = (await connectDB).db('exam'); await db.collection('post').insertOne(body); return new Response('POST'); } app/write/page.js <form action="/api/write" method="POST"> <input type="text" name="title" placeholder="제목"/> <br/> <input type="text" name="content" placeholder="내용"/> <button type="submit">NEW</button> </form>

input type="file" 사용법

<template> ...(생략) <label for="camera" class="btn btn-purple btn-square btn-lg col-6 right-border" v-if=" imageYn === 'N' && imageYn === null" > 사진 촬영 </label> //class가 조건에 따라 달라짐. <label for="camera" class="btn btn-secondary btn-square btn-lg col-6 right-border" v-if=" imageYn === 'Y' " > 사진 촬영 </label> <input type="file" id="camera" accept="image/*" capture="camera" style="display: none" @change="onFileSelected" /> <button class="btn btn-secondary btn-square btn-lg col-6 left-border" @click="rightButton" v-if="status === '방전 시작'" > 방전 완료 </button> ...(생략) </template> <script setup lang="ts"> const imageYn:string = ref('') console.log('2', imageYn.value) //사진촬영 const onFileSelected = event => { const file = event.target.files[0] if (file) { imageYn.value = 'Y' console.log('1') console.log('imageYn', imageYn.value) console.log('yes file', file) } else { imageYn.value = 'N' console.log('imageYn', imageYn.value) console.log('no image') } } </script> 결과 사진 찍기 전 -> imageYn ='N' 이거나 null일 경우-> class에 btn-purple 적용 카메라를 실행하여 사진을 찍었을 경우 -> imageYn='Y' -> class에 btn-secondary 적용 / disable처리도 되야함 문제점 사진촬영 후 console 1번은 'Y' 찍히되 2번엔 null입니다. 도와주세요!

<input type="file"> 관련하여..

<template> <label for="camera1"> 촬영 </label> <input type="file" id="camera1" accept="image/*" capture="camera" style="display: none" @change="onStartFileSelected" /> </template> <script> const startFile = ref({}) //@change const onStartFileSelected = event => { const startFileInfo = event.target.files[0] startFile.value = startFileInfo if (startFileInfo) { startImageYn.value = 'Y' console.log('startFileInfo', typeof startFileInfo) } else { startImageYn.value = ' ' console.log('no image') } } // 파일 포함 다음 상태 업데이트하는 api const fileUpdateStatusApiHandler = async () => { const formData = new FormData() console.log('startFile===',startFile.value)//File형식 데이터 정상 찍힘 -> 타입 : 객체(Object) console.log('startFile',JSON.stringify(startFile.value)) //안찍힘???왜?????? 객체->스트링으로 바꿈 formData.append('file_upload', JSON.stringify(startFile.value),startFile.value) //빈값이 들어감.. try { const res: any = await ApiCert.post( API_URL.url, formData, { headers: { 'Content-Type': 'multipart/form-data' } } ) console.log('response =====', res) if (res.resCode === 'OK') { console.log('OK') } else { alert(res.resMsg) } } catch (err: any) { console.log('error =====', err) } } </script> file형식 데이터를 api보낼때 formData에 넣어 보내고싶은데 file이 안들어가네요.. file_upload: {} 빈값으로 들어갑니다. 도와주세용

COPY(PG) GC 오버헤드 에러

안녕하세요. 대용량의 텍스트 파일을 postgreSql에 적재하는 모듈을 개발하고 있습니다. copy 함수를 활용하여 텍스트 파일('|'으로 구분되어 있는)을 테이블에 insert 하는데 헤더 스킵을 위해 csv로 parsing하려고 합니다. 근데 파일이 커서 그런가(8GB정도) 'OutOfMemoryError : gc overhead limit exceeded' 에러가 계속 발생합니다.. (어떨 땐 에러 없이 잘 들어가기도 합니다) 코드 중에 불필요한 구문이 있는 건지 판단이 잘 안됩니다... 또 csv로 파싱하지 않고 텍스트 파일의 첫째 줄을 지우고 copy로 밀어 넣는 방법이 있을까요? --------구현 코드-------- try ( BaseConnection c = dataSource.getConnection().unwrap(BaseConnection.class)) { try ( PGCopyOutputStream os = new PGCopyOutputStream(c, "COPY " + tableName + " FROM STDIN WITH (FORMAT CSV)"); CSVPrinter writer = new CSVPrinter(new OutputStreamWriter(os, StandardCharsets.UTF_8), CSVFormat.POSTGRESQL_CSV); CSVParser reader = new CSVParser(new InputStreamReader(inputStream, charset), CSVFormat.INFORMIX_UNLOAD.withFirstRecordAsHeader())) { for (CSVRecord row : reader) { for (String col : row) { if (col != null && StringUtils.hasText(col.trim())) { writer.print(col.trim()); } else { writer.print(null); } } writer.println(); } } } *inputStream은 해당 파일 BufferedInputStream 객체입니다.

react에서 상태업데이트 로직 자체가 실행이 안되는 경우도 있나요?

React에서 Modal이 Modal을 호출하는 다중 Modal 구현중 난제를 만나게 되어 질문을 올립니다 소스의 경우 복붙보다는 github 주소를 남기는것이 좋을것 같아서 github링크로 대체하는점 양해부탁드립니다. https://github.com/graylobo/modalTest (간단해서 clone후 바로 실행가능합니다) 로직에 대해 설명을 하자면 아래와 같습니다. 편의상 음슴체로 하는점 양해부탁드립니다. 1. 전역에서 사용될 기본Modal 을 정의 (BaseModal) 2. BaseModal의 on/off의 경우 recoil로 관리 3. useModalStack 을 사용하여 custom modal (TestModal1,2)을 열수있음 4. custom modal은 다른 custom modal을 호출할수 있으며, modal 호출자는 피호출자의 상태를 공유할수 있음. 즉 SomeComponent가 TestModal1을 호출하고, TestModal1이 또다시 TestModal2를 호출했을때, TestModal2의 상태값을 TestModal1에서 받을수 있으며, TestModal1의 상태값을 SomeComponent에서 받을수 있음 위 기능까지는 문제없이 동작하며, SomeComponent의 경우 TestModal1에서 자신의 로컬상태(inputData)가 있고 확인버튼 클릭시 currentModal.handleConfirm?.(inputData) 가 호출되고 SomeComponent의 handleConfirm에 지정한 콜백로직이 실행되면서 setReceivedData를 통해 receivedData의 상태 업데이트가 TestModal1에서 전달한 inputData로 정상적으로 업데이트가 됨. 또한 SomeComponent가 TestModal1을 호출한 프로세스와 마찬가지로, TestModal1에서 TestModal2 를 호출하고 TestModal2에서 자신의 로컬상태(inputData)가 있고 확인버튼을 클릭하여 currentModal.handleConfirm?.(inputData)를 호출하면 TestModal1의 handleConfirm에 지정한 콜백로직이 실행되면서 TestModal2에서 전달한 inputData를 받는것 까지는 정상적으로 동작하는데 여기서 문제는 TestModal1의 setReceivedData를 통해 receivedData의 상태가 TestModal2에서 전달한 inputData로 업데이트가 되어야 하는데 디버깅시 setReceivedData 자체가 아예실행이 되지않음. react개발하면서 useState의 set함수에 전달하는 콜백함수 자체가 실행이 안되는거는 처음 겪어보고 레퍼런스도 없어서 혹시 저와 동일한 문제를 겪거나 해결방안을 알고 계시는 분이 있다면 조언주시면 매우 감사하겠습니다.

recoil selector ts 타입선언 에러.

안녕하세요. recoil을 학습중입니다. 아무리 해도 type에러가 자꾸떠서요.. 지금 #으로 표시해둔 selector의 set부분이 에러가 뜹니다. initailState를 임의로 값을 주었구요 지금 현재 Tag[] 로 타입을 정의했습니다. selector의 newValue에 type을 선언안하니까 에러가 뜨더라구요 제 생각에는 initialState가 Tag[] 배열의 형태인데 컴포넌트에서 넘어오는 newValue의 타입은 Tag이기 때문에 에러가 발생하는거같습니다. 그래서 newValue에 타입을 지정해줬더니 에러가 set쪽으로 넘어가더라구요. 임의의 값을 주어도 이런 에러가 발생하진 않아야된다고 생각하는데, 아무리 생각해봐도 도저히 해결이 안되네요.. 도움이 필요합니다. <components> ``` const [tagsState, setTagsState] = useRecoilState(tagsListSelector); const newTag = { tag: inputText.toLocaleLowerCase(), id: v4() }; setTagsState(newTag); ``` <atoms> ``` interface Tag { tag: string; id: string; } const initialState:Tag[] = [ { tag: "AAA", id: v4() }, { tag: "BBB", id: v4() }, { tag: "CCC", id: v4() }, ]; export const tagsListState = atom({ key: "tagsListState", default: initialState, }); export const tagsListSelector = selector({ key: "tagsListSelector", get: ({ get }) => { return get(tagsListState); }, #set#: ({ set, get }, newValue: Tag) => { const currentTagsList = get(tagsListState); if (currentTagsList.find(({ tag }) => tag === newValue.tag)) { toast.warning("이미 존재하는 태그입니다."); } else { set(tagsListState, [...currentTagsList, newValue]); toast.info("새로운 태그가 등록되었습니다."); } }, }); ```

체크박스 유지는 어떻게 하는 걸까요 ㅠ

체크박스를 누르면 표를 보이게 하고 해제하면 표가 사라지는 것을 구현을 했습니다. 문제는 수정화면에 들어갔을 때인데요, 저장 후 수정화면에 들어가면 표는 보이고 작성한 내용도 보이는데, 체크박스에는 체크가 해제되어 있습니다. 네,, 이 부분을 수정하고 싶은데, 우선 입력화면에는 //스크립트 <script> function onChangeHandler(){ var checkbox = document.getElementById('check-btn'); document.getElementById("tableExample").style.display = checkbox.checked ? "":"none"; } </script> //화면(?) 코드 <input type="checkbox" id ="check-btn"> <table id = "tableExample" onchange="onChangeHandler();"> <th>... <td id ="table-content"> 수정화면에서는 //스크립트 <script> var content = document.getElementById("table-content"); if(content.length > 0){ document.getElementById("check-btn").checked = true; document.getElementById('tableExample').style.display=""} }else(content.length == 0){ document.getElementById("check-btn").checked = false; document.getElementById('tableExample').style.display="none"; } // 문자가 하나라도 쓰여있으면 체크박스에 체크가 되고, 표를 보여줄 수 있게, // 문자가 하나라도 쓰여있지 않으면 체크박스에서 해제가 되고, 표를 숨길 수 있게 하려고 했습니다. onChangeHandler(); // 마지막으로 수정화면에서도 기능을 사용할 수 있게 함수를 한 번 더 호출 </script> 입니다. 어떻게 수정하는 게 좋을까요 ㅠ 작성한 내용이 있는지에 따라서 입력화면에서의 체크박스 상태를 유지하고 싶은데 말이죠..

리액트에서 superagent를 활용해서 minio에 업로드하는 방법을 알려주세요 😂

제발 도와주세요 ㅜㅜㅜㅜㅜ 몇일동안 오류를 해결하지 못하고 있어요.. .. 리액트 웹에서 모바일 핸드폰으로 웹을 접속했을 경우, input을 통해서 사진을 업로드하거나 촬영한 이미지를 minio에 업로드 하고 싶은데, 아래 부분에서 계속 오류가 발생해서 도움을 요청해요 ㅠㅠ https://min.io/docs/minio/linux/developers/javascript/API.html#presignedPostPolicy 위 문서를 참고해서 코드를 작성했어요! [핸드폰으로 웹 접속 -> 사진 업로드/촬영 -> minio 업로드] 이 순서인데, minio에 이미지가 업로드가 되지 않고 계속 오류를 발생시켜요. superagent를 활용해서 minio에 업로드가 가능하다고, 위 문서를 참고해서 작성을 했는데, 계속 아래 에러 메시지를 전달받고 있어요ㅜㅜ 아래 에러를 게속 반환해요. <Error> <Code>MalformedPOSTRequest</Code> <Message>The body of your POST request is not well-formed multipart/form-data. (The name of the uploaded key is missing)</Message> <BucketName>bucket</BucketName> <Resource>/bucket</Resource> <RequestId>RequestId...</RequestId> <HostId>HostId...</HostId> </Error> f12 개발자 모드 페이로드 전달 데이터 bucket: 데이터 Content-Type: multipart/form-data x-amz-date: 날짜정보 x-amz-algorithm:데이터 x-amz-credential: 데이터 policy: 데이터 x-amz-signature: 데이터 file: (바이너리)

onChange 함수 관련하여

<template v-for="(item, i) in checkListItem" :key="i"> <label for="camera"> <form> <input type="file" id="camera" accept="image/*" style="display: none" @change="e => handleFileInputChange(e, i, item)" /> </form> </label> </template> <script lang=“ts” setup> const handleFileInputChange = (e, i, item) => { console.log(checkListItem.value) //콘솔1 console.log(item) //콘솔2 console.log(i) //콘솔3 const files = e.target.files[0] const reader = new FileReader() reader.onload = e => { /* 수정필요 */ item[i].check_file = e.target.result item[i].checked = true } reader.readAsDataURL(files) } <script> //콘솔1 checkListItem = [ {checkId: 11, content: ‘체크리스트1’}, {checkId: 12, content: ‘체크리스트2’}, {checkId: 13, content: ‘체크리스트3’}, {checkId: 14, content: ‘체크리스트4’}, {checkId: 15, content: ‘체크리스트5’} ] handleFileInputChange 함수 실행 시 선택한 checkListItem의 item과 index값을 가져와 선택한 item에 파일 첨부하고싶은데.. 현재는 체크리스트4번에 파일을 첨부하면 체크리스트1에 값이 들어옵니다. 콘솔 찍어보면 무조건 첫번째 객체값 부터 찍힙니다. //콘솔2 는 {checkId: 11, content: ‘체크리스트1’}, //콘솔3은 0 이 찍힙니다.

긴 arrayList state 변경시 성능최적화 할수있는 방법을 알고싶습니다.

import { useState } from 'react'; function App() { const [data, setData] = useState([ {text: '', num : 0}, * 10000 ]) return ( <div> {data.map((item, idx) => ( <TextTest1 key={idx} idx={idx} item={item} data={data} setData={setData} /> ))} </div> ); } const TextTest1 = ({idx, item, data, setData}) => { return ( <div> <input type="text" value={item.text} onChange={(e) => { let arr = [...data] arr[idx].text = e.target.value setData(arr) }} /> <input type="number" value={item.num} onChange={(e) => { let arr = [...data] arr[idx].num = e.target.value setData(arr) }} /> </div> ) } export default App; 만약 state값이 const [data, setData] = useState([ {text: '', num : 0}, * 10000 ]) 저렇게 array list의 오브젝트가 10000개가있을경우 인풋값을 변경할시 성능이 상당히 느려지는데 혹시 이런경우에 성능을 최적화 할수있는 방법이 있나요?

useInput 훅의 onChange 연속 2번 사용하는법

function useInput(initialState) { const [state, setState] = useState(initialState); const onChange = (e) => { console.log(e, 'onchange') const { target: { name, value }, } = e; setState({ ...state, [name]: value, }); }; return { state, onChange, }; } 이러한 useInput 훅이 있습니다. 어떠한 페이지에서 const {state, onChange} = useInput(); 이라고 코드를 선언 한 후에 onChange를 두번 연속으로 코드를 작성하면 정상적으로 동작할까 궁금해서 해봤는데 마지막에 선언된 값만 state에 들어가더라구요 이유가 무엇인가요?? const onClick = () => { onChange({ target: {name : "AAA", value: "1번" }}); onChange({ target: {name : "BBB", value: "2번" }}); } 결과 : 2번값만 들어가있음

자바스크립트의 이벤트 처리 질문

리액트로 이미지 inpainting 컴포넌트를 만들고 있습니다. 사용자가 이미지 업로드를 하면 canvas 영역에 그 이미지가 채워지고 그 이미지에 mask 영역을 칠할 수 있는 이미지 에디터 컴포넌트인데요, 궁금한게 생겨 질문드립니다. 첨부한 코드는 컴포넌트의 코드중 이미지 업로드 시 onChange 이벤트의 처리기인 handleImageUpload 함수와, handleImageUpload 함수에서 호출되는 loadImage 함수의 코드입니다. 사용자가 input 요소에 이미지를 업로드하면 onChange 이벤트가 발생해 handleImageUpload 함수가 실행되고 loadImage 함수가 실행됩니다. loadImage 함수가 실행되면 img 객체가 생성되고 img 객체의 src를 지정하죠. 그러면 브라우저는 이미지 로딩을 시작하고 이미지 로딩이 완료되면 onload 콜백함수가 실행됩니다. 저는 이 과정을 자바스크립트의 콜스택, 이벤트 루프, 태스크큐 구조에서 나타내보자면 다음과 같다고 생각했습니다. 1. 초기상태 콜스택 : [ ] 태스크큐 : [ ] 2. 사용자가 파일을 업로드 -> onChange 이벤트 발생 콜스택 : [handleImageUpload] 태스크큐 : [ ] 3. handleImageUpload 내부에서 loadImage 함수 호출 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] 4. loadImage 내부에서 img 객체 생성 및 src 할당 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] Web API : 이미지 로딩 시작 5. loadImage 함수 종료, handleImageUpload 함수 종료 콜스택 : [ ] 태스크큐 : [ ] Web API : 이미지 로딩 진행중 6. 이미지 로딩이 완료되면 Web API가 onload 콜백을 태스크큐에 추가 콜스택 : [ ] 태스크큐 : [onload] Web API : 이미지 로딩 완료 7. 이벤트 루프가 콜스택이 비어있음을 확인하고 태스크큐에서 onload 콜백을 콜스택으로 이동 콜스택 : [onload] 태스크큐 : [ ] 8. onload 콜백 실행 (캔버스에 이미지 그리기 등) 콜 스택 : [onload, drawImage, ...] 태스크큐 : [ ] 일단 이 과정이 맞나요? 만약 이게 맞다면 생기는 궁금증이 있습니다. Web API에서 이미지 로딩이 진행되는동안 loadImage 함수 및 handleImageUpload 함수가 종료되면 loadImage 함수 내에서 생성된 img 객체는 가비지 컬렉터에 의해 지워져야 하지 않나? 그렇게 img 객체가 GC에 의해 사라지면 이미지 로딩이 완료되었을 시점엔 img 객체의 onload 함수도 없어진것이니 onload 함수의 로직은 실행이 되지 않아야 하는 거 아닌가? 하는 생각이 들어 질문드립니다

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>

NextJS 폴더 구조 (pages 폴더 아래에 components)

안녕하세요, 회사 프로젝트 폴더 구조를 잡아야 하는데 궁금한 게 있습니다. (NextJS 버전은 12 사용 중) next.config.js에서 아래의 설정 후 pages 폴더 아래 components를 두는 구조를 사용하시는 분 계실까요? pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'] https://nextjs.org/docs/pages/api-reference/next-config-js/pageExtensions 아래와 같은 구조가 괜찮다고 판단되어 사용하려고 하는데 어떨지 의견 좀 여쭤보고 싶습니다. - apps/ --- pages/ ----- Main/ ------- page.ts ------- component.ts ------- hook.ts ------- test.ts --- shared-components/ ------- Button.ts ------- Input.ts 기존에는 pages 폴더에는 index.js만 두고 components 폴더 아래에 모든 컴포넌트들을 두는 구조로 사용 중인데, 프로젝트의 페이지가 많아지면서 특정 페이지에서만 사용하는 독립적인 컴포넌트들이 많아지다 보니 components 폴더에 있는 파일들이 구분이 잘 안됩니다. 어떤 페이지에서 사용하는 컴포넌트인지, 재사용 가능한 컴포넌트인지 명확한 구분이 어려워서 위와 같은 구조를 고민해보았는데 혹시 실제 비슷하게라도 사용 중인 곳이 있는지 궁금합니다. components 폴더 아래 page 별로 구분할 수도 있지만, 독립적인 컴포넌트는 page.ts와 같이 있는 게 조금 더 유지보수면에서 편할 것 같아 고민해보았습니다. 더 좋은 의견이 있다면 환영입니다. 어떤 폴더 구조를 사용하고 계시는지, 추천할만한 구조가 있다면 꼭 의견 부탁드리겠습니다!

Nextjs 에서 부분적으로 FOUC 가 발생하는 것 같습니다.

안녕하세요. 오늘도 Next의 심오함에 허우적대고 있는 주니어 프론트엔더 입니다. Next 에서 디자인관련 프레임워크와 라이브러리로 Ant-Design 과 Styled-components를 선택하여 프로젝트를 진행하는 중입니다. 그리고 방식은 기본 Antd의 컴포넌트를 import 하여 필요 부분만 Styled-components로 덮어 커스텀하는 방안으로 택하였습니다. 이전에 Next는 기본적으로 서버에서 html을 생성하려는 경향이 있기에 css-in-js는 가끔가다 hydrating 과정으로 인해 스타일이 적용되지 않는 부분만 먼저 보여진다고 들었습니다. 그래서 현재 next 13을 사용하고 있어 (app routing 방식이 아닌 구 버전인 pages routing 방식을 사용하고 있습니다.) next.config.js에서 styled-components를 인식하게 도와주는 설정 코드를 작성하였습니다. - 해당 설정은 최하단에 첨부하였습니다. 문제는 FOUC 관련 이슈가 일부 컴포넌트에만 나타납니다. Button컴포넌트와 Input컴포넌트를 위와 같은 스타일 방식으로 제작을 하였는데, 페이지가 리프레쉬가 되면 Button 컴포넌트는 기존 styled-components의 커스텀을 유지하지만, Input 컴포넌트는 styled-comopents의 커스텀을 입히기 전의 Ant-Design의 기본 디자인으로 렌더링되는 문제가 발생하였습니다. 그래서 제가 진행했던 FOUC 관련 설정에 문제가 있는지 궁금하여 질문을 드리려고 합니다!

객체 depth가 깊은 경우 ... 연산자로 복사하면 안좋나요?

안녕하세요. react를 공부 중인 초보자입니다. 현재 recoil 사용하여 recoil state에 객체로 state를 사용하고 있습니다. 그런데 input에서 onChange 이벤트로 state를 변경할 때, 객체의 depth가 깊다면 ... 연산자로 복사하면서 가는게 안좋나요? 예를들어 setState(prev => ({ ...prev, [name]: { ...prev[name], data: { ...prev[name].data, value: value } }, })); 이런 식으로 update 할 경우 ... 연산이 너무 많아져서 비효율적 인가요? 해당 input의 data가 다른 페이지에서 사용 되진 않고 다른 페이지를 갔다 와도 (컴포넌트 이동) 입력된 정보가 남아 있도록 recoil state에 관리하고 있습니다. 초보적인 입장에서 input에 입력 할 때마다 이렇게 하는 건 손해 같아서, input value를 컴포넌트에서 ref로 따로 관리를 하고, useEffect에서 clenup 으로 한번만 setState 하는 방식이 어떨까 하는 의문이 생깁니다. 객체 깊이가 깊어 ... 연산이 많아지는 경우 onChange에서 관리하면 성능적으로도, 클린 코드 (가독성) 면에서도 별로 일까요?

테일윈드 + react 사용 중인데 반응형을 어떻게 구현하면 좋을까요?

안녕하세요 ! 테일윈드 + react로 간단한 투두프로젝트 진행 중인데 반응형을 구현하던 도중 궁금한 점이 생겨서 질문드립니다. 최대 뷰포트 480 이하부터만 특정 컴포넌트(시계, 제목)는 안보이게 하고 기존의 투두리스트 입력할 input, 투두리스트 ul 목록들, 날짜만 보이도록 구현하고 싶은 상황입니다. 480 이상일 때는 위의 말한 컴포넌트들이 모두 보이는 상황입니다! 테일윈드 반응형을 하게 되면 특정 뷰포트일 때만 아예 안보이도록도 구현할 수 있나요? 가능하다면 특정 컴포넌트는 안보여야 하다보니 기존에 구현에 놓은 ui가 안깨지고도 가능한건지, 아니면 직접 재설정 해줘야하는건지도 궁금합니다! 테일윈드 반응형에 익숙치 않아서 어렵네요 ㅠㅠ 위와 같은 고민으로 다른 방법을 찾다보니 useMediaQuery 가 있어서 설치해보고 사용중인데 테일윈드의 단점인 클래스명 길어지는 것, 일일히 태그마다 지정해서 사용해줘야한다는 것을 해결해 줄 수 있을 것 같았는데 특정 컴포넌트가 아예 안보이게 하다보니 조건부렌더링으로 해서 코드가 길어지고, 480 이하 일때 안보이기는 하나 ui가 모두 다 깨져서 결국엔 다시 테일윈드로 레이아웃을 맞춰주게 되더라구요.. 코드로 예를 들자면 import { useMediaQuery } from 'react-responsive'; function TodoHead() { const isSmallScreen = useMediaQuery({ query: '(max-width: 480px)', }); return ( !isSmallScreen && ( <div> <h1 className="mt-[100px] text-center text-6xl font-bold text-white"> Todo List </h1> </div> ) ); } export default TodoHead; 이와 같이 짜둔 상황인데 480 이하일 때는 의도대로 제목이 안보이기는 하나, 해당 컴포넌트가 사라지면서 모든 ui가 깨지니까 결국엔 다시 레이아웃을 조정해야하는 상황인거죠 ㅠㅠ 테일윈드 단점을 해결하고자 쓴건데 좋은 방법이 아닌 것 같기도하고.. 사실 초보라서 사용하던 테일윈드를 활용해서 해결 가능한건지, useMediaQuery 이게 좋은 방법인지도 아닌지도, 아님 굳이 사용할 필요가 없는건지.. 잘 판단이 안서는 상황이네요..ㅎㅎ 도와주세요 선배님들의 조언이 필요합니다 !!

닫힌 질문 | 문제가 뭔지 알려주세요

<!DOCTYPE html>> <html> <head> <title>Love 출석부 로그인</title> <style> h1{ position: absolute; left: 650px; } </style> <script>let name =document.getElementById("samename") alert(name.values+"님 환영합니다.") event.preventDefault();</script> </head> <body> <h1>로그인</h1> <form accept="API.py" method="post" onsubmit="keypress" method="get" action="Love2.html"> 이름:<input type="text" id="samename" size="30" value=""><br> </form> </body></html> 이름을 쓰고 엔터를 누르면 그 다음에 출석부 사이트에 가는데 문제는 엔터를 누르면 crbug/1173575, non-JS module files deprecated.라고 떠요

여러개 input의 onChange처리 어떻게 해야하나요?

input을 여러 개 관리해야 하는데 이름, 나이 이런 input 관리가 아닌 항목 추가(카카오톡 투표하기)처럼 name으로 구별하기 어려운 inputs를 구현하고 있는데(단순한content로 되어있습니다.) onChange를 어떻게 처리를 해야 줘하는지 감이 안 잡히는데 구현해 보신 분 있으실까요? 이 input들은 최대 30개까지 추가가 됩니다. +) 추가되는 인풋을 component로 따로 빼서 구현했습니다. const [contents, setContents] = useState([ { id: 1, content: '' }, { id: 2, content: '' } ]) {contents.map(() => ( <Input/> 이런식으로 되어있습니다!!!