#input

텍스트 전처리 및 분류 태스크에서의 LLM 활용 방법

안녕하세요 현재 Text classification 을 진행해야 하는 상황입니다. 단순히 아웃풋만 가져오기보다는 나중에 아이템이 새로 생겼을 때 인퍼런스도 진행해야 되는데요. 현재는 크롤링된 글 1200개 가량 정도 보유하고 있지만 지속적으로 늘어날 것입니다. 이 부분에서 LLM을 활용하는 것이 좋을지 판단해주시면 좋겠습니다. 아래는 저의 고민사항들입니다. 1. 기술적 역량을 기르기 위해 시작하는 프로젝트인데 LLM에게 텍스트 전처리, 분류까지 맡기는게 맞을까요? 2. 제가 생각하는(알고 있는) 방법은 LLM API를 호출해서 처리하는 방법인데 그렇게 한다면 속도나 비용 측면에서 손해를 보지 않을까? (Batch 형식으로 하지는 못할까?) 3. 회사들 중에 LLM을 활용하여 어떠한 태스크를 진행하고 있다는 글들은 자체적으로 Fine Tuning한 LLM을 활용하고 있는 것인지? 4. 물론 어느 정도의 전처리가 들어가겠지만 프롬프트로 input 관리부터 output 까지 관리할 수 있는지? llm을 처음 활용하는 것인데 개념이 잡히지 않은 것 같아 이런 고민들이 생기는 것 같습니다. 많은 조언 주시면 감사하겠습니다!

React 리렌더링 질문있습니다.

안녕하세요. React를 사용하는 프로젝트에서 테이블을 생성하여 editable 가능하도록 개발하고 있습니다. 해당 테이블에 input도 있고 switch 기능도 있습니다. editable 테이블의 경우 전체 테이블 값을 다 받아서 업데이트 하는 형식입니다. 원래는 ref를 사용해서 진행하려고 했는데 input 과 switch 가 동시에 있어서 row 단위에 값을 받을 때 문제가 발생됩니다..(rows state 와 ref 와 데이터 불일치가 발생됨) 저는 input 에 1글자 쓸 때마다 리렌더링 되는게 안좋다고 생각해서 ref를 사용한건데 그냥 rows state만 사용하고 memo로 리렌더링을 줄이는게 맞을까요? 고견부탁드리겠습니다(_ _)

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

리액트로 이미지 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 함수의 로직은 실행이 되지 않아야 하는 거 아닌가? 하는 생각이 들어 질문드립니다

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

파이참 코딩 관련 질문

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 라고 오류가 나는 이유가 뭘까?

파이참관련된 질문 드립니다.

score = 0 question1 = input("질문1: ") if question1 == "예": score += 10 # "예"를 선택하면 10점 추가 else: score += 0 # "아니오"를 선택하면 점수 변동 없음 question2 = input("질문2: ") if question2 == "예": score += 5 # "예"를 선택하면 5점 추가 else: score += 0 # "아니오"를 선택하면 점수 변동 없음 print("당신의 최종 점수는 ", score, "입니다.") 이렇게 코드를 만들었다고 쳤을때, 예를 선택하면 A에 점수 +몇점, 아니오를 선택하면 B에 점수 +몇점 이런식으로 만들 순 없을까요??ㅠㅠ

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

객체 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에서 관리하면 성능적으로도, 클린 코드 (가독성) 면에서도 별로 일까요?

useState와 useEffect에 대해 너무 헷갈립니다.

안녕하세요 useState와 useEffect를 공부중인데 아직 초보자라 너무 헷갈리더라구요. 제가 이해한 것은 우선 useState는 클릭했을 때 모달창이 나온다거나, 사용자가 input에 입력한 값처럼 무언가를 동적으로 변경이 되게 할 때 사용하고 또 API를 사용할 때 이 데이터를 저장할 때 사용한다...로 알고 있고 useEffect는 컴포넌트가 처음 렌더링 될 때 html 부분이 먼저 화면에 그려진 후 데이터가 실행되게 할 때 useEffect를 사용한다...까지만 이해하고 있습니다. 여기서 궁금한점이 첫번째로, useState는 제가 설명한대로만 사용하면 되는지 궁금합니다. 두번째로, useEffect는 이 안에 작성한 코드는 한번만 실행이 된다라고 하는데 이 한번만 실행이 된다라는게 무슨 말인지 그리고 useEffect안에 console.log()와 useEffect 밖에 console.log() 이렇게 했을 땐 뭐가 다른것인지 너무 헷갈립니다. 제가 아직 초보자라 정말 정말 쉽게 설명해주시면 너무 감사드리겠습니다. ㅜㅜ

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

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 라고 뜨네요..

리액트에서 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: (바이너리)

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"); }

nextjs 14 form xss방지를 위한 검증방법

nextjs 14 server action 으로 form 전송하려고 합니다 xss공격을 방지하기위해 input의 html이나 script코드를 걸러내고싶은데 혹시 어떤라이브러리를 사용하는게 좋을까요?

리액트 투두리스트 체크박스

리액트로 투두리스트를 만들어보고 있는데 삭제 기능은 filter() 메서드로 구현하였고, 체크박스는 input에 css :checked로 구현하였습니다. 문제는 첫번째 항목을 체크하고 난 후에 리스트 앞부분에 새로운 항목을 추가해도 체크박스는 항상 첫번째 항목에 체크되어 있습니다... 인풋 박스를 독립적으로 빼서 컴포넌트로 사용하면 개별로 적용될거 같았는데 결과는 같았고, state로 체크 된 항목을 따로 관리해봤는데 그거또한 결과가 같았습니다...ㅠㅠ 리스트의 key는 map의 index로 사용하고 filter()로 삭제 기능을 구현하니 키는 마지막 순서만 삭제되면서 재렌더링으로 리스트가 변경되서 체크박스가 개별로 적용이 안되는것으로 예상이 됩니다만 너무 어렵네요ㅠ.. 구체적으로 도와주시면 감사하겠습니다ㅠㅠㅠ코드는 첨부했습니다!

vitest toHaveStyle

Input 컴포넌트를 클릭 했을 때, border-color가 제대로 변경되는지 확인하는 테스트 코드를 작성하고 있습니다. Input이 Focus 되었을 때 사진과 같이 border-color가 #3182ce로 변경되는데 테스트 코드 상에서는 에러가 발생합니다. expect($input).toHaveStyle({ borderColor: '', }); 이런 식으로 작성했을 땐 통과가 되는데 #3182ce 값으로 변경됐는지 확인 할 수 있도록 테스트 코드를 작성하는 방법이 있을까요?

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-hook-form 복잡한 form에서 궁금점이 있습니다 !

안녕하세요 현재 진행하는 프로젝트에서 form을 recoil로 관리하고있습니다. 이유는 form과 화면구성이 너무 복잡한 형태라 props drilling도 심하고 (부모에서 자식까지 5~7 depth) 관리해야하는 데이터가 많아 store에서 관리하고있습니다. react-hook-form이 복잡한 form에서 효율을 낸다고 해서 마이그레이션 해볼까 생각중인데 궁금점이 있어 작성합니다 ! 1. 이렇게 전역적으로 관리를 해야하는 복잡한 form에서도 좋은 효율을 내고 전역 상태관리 라이브러리보다 좋은 방향일까요?! (FormProvider 를 사용) 2. form에서는 input 필드만이 아닌, tab클릭, 드랍다운 클릭, 체크박스 클릭, 이미지 업로드, 라디오 클릭 등등 이러한 경우가 많은데 react-hook-form 을 사용해도 좋은 방향인가요?! 어떨때 react-hook-form을 사용하면 좋은지 궁금합니다 !

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함수에 전달하는 콜백함수 자체가 실행이 안되는거는 처음 겪어보고 레퍼런스도 없어서 혹시 저와 동일한 문제를 겪거나 해결방안을 알고 계시는 분이 있다면 조언주시면 매우 감사하겠습니다.

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를 사용했을 땐 문제가 없었는데.. 제가 놓치고 있는 부분이 있을까요?

input 컴포넌트의 onChange를 외부에서 주입받는 방식에 대해...

안녕하세요 React에서 input 공통 컴포넌트를 만드는데 질문 있습니다. input 컴포넌트의 onChange 이벤트를 prop으로 외부에서 주입받는게 맞을까요? 아니면 input 컴포넌트 내부에서 자체적으로 onChange 이벤트를 처리하는게 맞을까요? 퍼널 형식으로 되어 있는 각 페이지마다 input으로 데이터를 받아서 전역 데이터에 넣으려고 합니다 예를 들면, 가입 절차나 설문 조사같은 페이지요!

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에 전달되는 컴포넌트들은 재생성되지 않는 것인가요?

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("새로운 태그가 등록되었습니다."); } }, }); ```

테일윈드 + 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 이게 좋은 방법인지도 아닌지도, 아님 굳이 사용할 필요가 없는건지.. 잘 판단이 안서는 상황이네요..ㅎㅎ 도와주세요 선배님들의 조언이 필요합니다 !!

프론트 앤드 미디어쿼리를 사용한 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> ``` 읽어봐주셔서 감사하고 도움 주시면 감사하겠습니다

NextJS13 app라우터 컴포넌트 설계 질문드립니다.

안녕하세요. NextJS13을 사용하여 팀 프로젝트를 진행하고 있습니다. 프로젝트 내 게시판 페이지에서 페이지네이션을 개발하던 도중 궁금한 내용이 있어 질문드립니다. 현재 게시판 메인페이지에서 데이터를 가져와서 페이지네이션 컴포넌트로 프롭스로 전달하는 형태로 로직을 구현하였습니다. 과정에서 상태관리가 필요하여 훅을 사용하기위해 페이지 전체를 'use client' 키워드를 사용하여 클라이언트 컴포넌트로 변경하였는데 데이터 렌더링 부분은 서버에서 렌더링하려면 Container 컴포넌트를 별개로 생성하여 최상위 컴포넌트에서 데이터를 불러오고 프롭스로 전달하는 형태로 구현을 하면좋을지 솔루션을 듣고싶습니다. 기존에는 SEO등을 고려하여 사용자와 상호작용하는 부분(input, form 등등..)에 한해 클라이언트 컴포넌트로 구성하였는데 위와 같이 데이터를 불러오고 가공하는도중 리액트 훅이 필요할때 어떻게 설계하시는지 궁금합니다.

프론트엔드 개발자 전향(?) 조언 부탁드립니다..

안녕하세요 선배님들 나이는 25세(만나이)이고 현재 프론트엔드 개발자로 전향하고자 공부중입니다 IT 쪽으로 지식이 아무것도 없던 상황에서 국비지원으로 웹 퍼블리셔 교육을 받은 뒤 취업을 했었습니다. 인하우스 회사였고 디자이너 한 명과 퍼블리셔 한 명 이렇게 총 두명이 프로젝트를 진행했었습니다 (개발자는 외주 개발자를 쓰셨구요) 사내 저를 제외한 모든 분들이 IT쪽 관련 지식이 없으셨는데 입사 첫날부터 사수가 없는 상태로 자사 홈페이지 리뉴얼 프로젝트의 기간을 1개월로 지정 받았습니다.. 기간이 촉박한 와중에 완성이 된 페이지임에도 불구하고 중간 중간에 기획이 계속 바뀌면서 새로운 기능을 도입하라는 요청이 계속 들어오는 형식으로 진행했어요 ㅠㅠ.. 또, 퍼블리셔 = 프론트엔드라고 UI개발은 원래 퍼블리셔가 하는거라고 하셨어서.. UI인터렉션만 구현할줄 알던 실력으로 구글링과 코드펜에서 가져온 코드를 자사 프로젝트에 적용시켜보며 꾸역꾸역 했던거같습니다. 상사분들 모두 결과물 자체에는 굉장히 만족하셨어요 근데 몇 달 일하다보니 이대로 괜찮은지 의구심이 생겼습니다 짧은 기간 내에 프로젝트를 완성해야 해서 거의 매일 야근했었고 요구사항의 레벨이 높아 혼자 힘으로 풀어내기가 벅찬데 사수도 없어 질문조차 할 수 없고 당장 일정을 맞춰야 하기 때문에 모든 스크립트를 제이쿼리로 처리하다보니 바닐라는 연습조차 안되고 어려운 기능들은 구글링을 통해 복붙만 해대서 실력이 제자리에 멈춰있다는 느낌이 들었습니다(비 상식적인 일정 탓에 야근이 많아서 자기계발 시간이 없다시피 했지만 물론 제가 노력하지 않은 것일수도 있어요..) 그래서 과감히 퇴사를 결정하고 사수도 있고 사내 개발자가 있는 회사에 다시 퍼블리셔로 취업을 했습니다 근데 이 곳에서는 퍼블리셔는 JS를 아예 만질일이 없고 웹사이트 퍼블리싱이 아닌 이미지 위에 input, text만 absolute로 우겨넣는 작업을 노가다 식으로 하는 회사였습니다.. 물론 제가 자세히 물어보지않고 취업한 탓이겠죠.. 근데 이 곳도 업무의 양이 어마무시해서 정말 야근을 미친듯이 하다보니 또 자기계발 시간이 없었습니다 실무에서 실력 향상에 도움이 됐다면 좋았겠지만 오히려 실력이 떨어지는 느낌을 받아서 또 다시 퇴사를 결심하고 이젠 정말 개발자로 준비하는게 좋겠다는 생각을 하게 됐습니다 그렇게 현재 기초부터 다시 다지자는 마음가짐으로 인강과 챗 지피티를 이용해 공부중입니다 뭔가 신세한탄만 털어놓는듯한 서론이 정말 길었는데 결론은 25살 나이에 기초부터 다시 다져가며 공부하려는데 늦거나 하진 않았을까요?.. 바닐라, React, TypeScript, GraphQL, 백엔드 기초(원활한 협업을 위해) 정도 생각하고 있습니다. 1. 회사마다 다르겠지만 어느정도 수준에 도달했을때 취업을 하는게 향후 커리어에 도움이 될까요? 인프런 내에 코드캠프 고농축 프론트엔드 코스 강의를 구매하였고 이 강의로 기초 부분을 숙지한뒤 심화 내용은 따로 공부할 생각입니다. 2. 위 서론에서 말씀드린 다니던 회사 두 곳 모두 재직 기간이 6개월 정도인데 이력서에 첨부하는건 오히려 안좋을까요? 면접 보는 회사에서 전 회사 인사 담당자에게 전화하는 경우도 있다고 들었는데 너무 짧게 다니다가 퇴사해서 안좋게 볼 수 있을거같다는 생각이 들어서 쓰기가 조금 망설여집니다 3. 1번 질문의 연장인데 공부하는 방향은 괜찮은지 조언 부탁드립니다 4. 제가 고졸이라 비 전공에 학력도 낮은데 25살에 기초부터 다시 차근차근 하기에는 조금 늦은 감이 있을까요?.. 긴 글 읽어주셔서 정말 감사드립니다!

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>

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

<!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.라고 떠요

css에서 버튼의 색상을 추가하고 싶습니다

input [type=인정결석]{ background-color: greenyellow; }</style>여기에서 제가 잘못한 부분이 있나요?

react에서 함수관리를 어떻게 하시나요..?!

안녕하세요 ! 리액트에 대해서 궁금한점이 생겨서 질문 남기게 되었습니다 ! 예를들어 여러 페이지에 아래의 코드처럼 const [name, setName] = useState<string>(‘’); const handleFormChange = (e: React.changeEvent<HTMLInputElement>) => { const { value } = e.target; setName(value); } 관리해야할 state들이있고 입력창에서의 변화를 핸들링해주어냐한다면, 각 페이지에서 저 handleFormChane를 매번 작성해서 넣어주는게 맞을까요…? 아니면 따른 방식이 있는지 궁금합니다 ! 읽어주셔서 감사합니다 !!!