#def

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

파이참 코딩 관련 질문

import pandas as pd import pyautogui score_A : 0 #단순 쾌락 score_B : 0 #경제 적압박 score_C : 0 #사회 적압박 score_D : 0 #유전 score_E : 0 #보복 score_F : 0 #환경 question1 = pyautogui.prompt('난 가정 폭력을 당한적 있다.') #질문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_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 라고 오류가 나는 이유가 뭘까?

Suspense, useSuspenseQuery를 이용해서 skeleton ui를 구현하는데 초기 렌더링시 화면이 덜그럭거리는 문제가 있습니다.

200ms 동안은 이전 UI를 보여주고, 그 다음부터는 skeleton ui를 보여주고 싶습니다. 하지만, 현재상황은 이렇습니다. useSuspenseQuery를 이용했을때, 처음 200ms동안 데이터가 없어서 높이가 0이 되었다가 다시 높아지면서 화면이 덜그럭거리는 문제가 있습니다. 그래서 useTransition을 이용해서 이전 UI상태를 유지하도록 했지만 지연시간이 길어졌을때는 skeleton ui가 보이질 않습니다. 제가 궁금한건 다음과 같습니다. 1. 보통 useSuspensequery를 사용해 skeleton ui를 보여줄때 초기 렌더링시 이전 데이터가 보이지 않아서 화면이 깜빡이는 문제를 어떻게 해결하나요? 2. useTransition과 skeleton ui는 같이 사용할 수 없는 건가요? 대략적인 코드는 다음과 같습니다. 각각 최상위 부모인 Search 페이지, 데이터를 불러오고 카드리스트를 업데이트하는 CardList 컴포넌트, 스켈레톤 UI의 지연을 처리하는 DeferredComponent 입니다.

NavigationContainer 중첩 오류

안녕하세요, RN(Expo)로 React Navigation을 적용하다 오류가 해결되지 않아서 질문드립니다. expo를 통해 다음과 같이 index.js에 React Navigation을 적용했습니다. import { store } from "@/redux/store"; import MainScreen from "./screens/MainScreen"; import { Provider } from "react-redux"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LoginScreen from "./screens/LoginScreen"; export default function HomeScreen() { const Stack = createNativeStackNavigator(); return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Main" component={MainScreen} /> <Stack.Screen name="Login" component={LoginScreen} />{" "} </Stack.Navigator> </NavigationContainer> </Provider> ); } 그러나 다음과 같은 오류가 뜨며 빈화면만 보이더라구요ㅠ Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them. 찾아보니 NavigationContainer가 중첩되었다는 것 같은데, 저는 계속해서 그대로 강의를 따라가고 있었고, 따로 NavigationContainer를 적용한 파일이 존재하지 않습니다 ㅠ 다음 속성을 추가해도 오류가 해결되지 않습니다 ㅠ 아마 어디선가 부모에서 NavigationContainer가 적용된 것 같은데 찾을 수가 없네요 ㅠㅠ independent={true} 조금 더 찾아보니 expo-router랑 충돌이 난 거일 수도 있다는데 정확하게 모르겠네요 ㅠ

리액트 네이티브 릴리즈로 배포 시 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 **** ************************** 이런 로그가 뜨고 있습니다.

부트캠프에 관해 질문 드리고 싶습니다..!

최근에 코딩에 관심이 생겨 알아보던 중 프론트엔드와 백엔드개발자 직무를 보게되었고, 3개월 동안 JS와 파이썬 기초를 독학하였습니다. 하지만 제가 비전공자라서 혼자서 하려니 막막할 때가 많아서 국비지원 부트캠프를 찾아보고 있는데요.. 아직은 프론트와 백엔드 중 어느 분야로 나아갈 지 확신이 안 서서 풀스텍을 듣고, 그 이후 직무를 정해서 해당 직무의 부트캠프를 들으려고 하는데요.. 이렇게 부트 캠프를 2개 들어도 괜찮을까요? 주변에서는 프론트나 백엔드 하나를 정해서 듣는게 낫다고 하시더라고요.. 그래서 좀 더 공부해서 확신이 설 때까지 부캠 수강을 미뤄볼까 싶기도 합니다 ㅠㅠ 하지만 일단 뭐라도 하는게 좋지 않나 라는 생각도 듭니다.. 제가 알아본 부캠은 3개 중 하나를 선택하려는데 커리큘럼 괜찮을까요? 1. https://codingon.co.kr/pr/kdt/14th 2. https://www.hrd.go.kr/hrdp/co/pcobo/PCOBO0100P.do?tracseId=AIG20210000328805&tracseTme=14&crseTracseSe=C0061&trainstCstmrId=500020039773#undefined 3. https://www.hrd.go.kr/hrdp/co/pcobo/PCOBO0100P.do?tracseId=AIG20230000451047&tracseTme=1&crseTracseSe=C0061&trainstCstmrId=500020027783#undefined

채팅 디비 설계 질문이요!

안녕하세요:) 저는 ! 웹소켓과 관계형디비+프리즈마 를 이용해서 백엔드를 구성하고, 리액트로 만든 프론트 와 양방향 채팅 서비스를 만들려고 합니다! 채팅방 DB스키마를 작성하는데 어려움을 겪어 질문을 남깁니다. 현재 프리즈마에서 model ChatRoom { id Int @id @default(autoincrement()) name String creatorId Int users ChatRoomUser[] messages Message[] createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } model ChatRoomUser { id Int @id @default(autoincrement()) userId Int // 외부 API에서 가져올 사용자 ID chatRoomId Int chatRoom ChatRoom @relation(fields: [chatRoomId], references: [id]) createdAt DateTime @default(now()) updatedAt DateTime @default(now()) @@unique([userId, chatRoomId]) } model Message { id Int @id @default(autoincrement()) chatRoomId Int senderId Int // 외부 API에서 가져올 사용자 ID receiverId Int? // 선택적 필드, 단체 채팅에서는 null content String timestamp DateTime @default(now()) chatRoom ChatRoom @relation(fields: [chatRoomId], references: [id]) createdAt DateTime @default(now()) updatedAt DateTime @default(now()) } 이런식으로 구현하였는데 조언좀 부탁드립니다.ㅠㅠ

안녕하세요.. 정말 이것저것 다 해봤는데 안되네요 ㅠ

안녕하세요. 리액트와 리액트 쿼리를 이용해 프로젝트를 진행 중 입니다. 저는 일단. src/hooks/useProduct.jsx 라는 커스텀 훅 을 만들었습니다. 제 계획은 1. 맨 처음 최상단 Home.jsx 에서 useProduct 라는 커스텀 훅 호출 2. 자식컴포넌트에 data를 전달 3. Search.jsx에서 받은 filter값으로 커스텀 훅 안의 query 재실행 4. 바뀐 상태는 Home.jsx 가 다시 받고 자식 컴포넌트에게 전달. 1~3까지는 콘솔찍어가면서 잘 되는데 4.는 되지 않습니다. (쿼리 데이터가 바뀌어도 4이 재 실행이 안됨..) ㅠㅠㅠㅠㅠㅠㅠ 쿼리 옵션도 줘보고 전역 상태도 만들어보고 이것저것 다 해봤는데 ㅠㅠ 혹시 아시는분 계신가요..? 어떠한 답변도 정말 감사히 받겠습니다 간략 코드첨부) Home.jsx const Home = ()=>{ const { data, error, isLoading } = useProduct(); return ( <Search /> <List data={data?.product} /> ); }; export default Home; Search.jsx const Search = () => { ```일부코드생략``` const { updateQuery } = useProduct (); const handleSubmit = () => { const searchData = { productId }; updateQuery(productId); }; } return( ```일부코드생략``` <button onClick={handleSubmit}> 조회 </button> ) } export default Search; useProduct.jsx const useProduct = () => { const [queryData, setQueryData] = useState(); const { data, error, isLoading } = useQuery({ queryKey: ["product", queryData], queryFn: () => fetchProduct(queryData), }); const updateFilters = (queryData) => { setQueryData(() => (queryData); }; return { data, error, isLoading, updateQuery , }; export default useProduct ;

react-query,

안녕하세요. 리액트쿼리 최신v5를 사용하면서 어려움에 처해 글을 남기게 되었습니다. 제가 만든 코드는 아래와 같습니다. Home.jsx (맨처음 데이터를 받아서 List에 뿌려주는 역할) const { data, error, isLoading } = useFilteredApartmentData(); console.log('home data',data) <List data={data.speechCommands} /> Search.jsx (사용자 검색) const { updateFilters } = useFilteredApartmentData(); //커스텀훅 const handleSubmit = (filter) => { updateFilters(filter); }; useFilteredApartmentData .jsx (훅) const useFilteredApartmentData = () => { const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["apartments", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); console.log("훅안에서 새로운데이터", data); const updateFilters = (newFilters) => { console.log(newFilters); setFilters((prevFilters) => ({ ...prevFilters, ...newFilters, })); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 저의 계획은 search.jsx에서 사용자의 검색을 받으면 훅의 updateFilters 를 실행시키고 useState가 바뀌니 useQuery의 재 시작과 함께 새로운 데이터를 받아 List에서 새로운 데이터를 뿌리는 것이었습니다. 그런데 console.log("훅안에서 새로운데이터", data); 이 부분도 새로운 데이터로 잘 찍히는데 문제는 Home.jsx 에서 console.log('home data',data) 이부분은 안찍히네요 결과적으로, 리스트의 변동이 없습니다. 혹시 아시는분 답변주시면 정말 감사하겠습니다 ㅠㅠ

리액트쿼리 데이터 리패칭 이렇게 하는거 아닌가요?

home.jsx const { data, error, isLoading } = useFilteredApartmentData(); <List data={data.result} /> 훅.jsx const useFilteredApartmentData = () => { const queryClient = useQueryClient(); const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["aaa", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); const mutation = useMutation({ mutationFn: (filter) => { fetchFilteredApartmentData(filter); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["aaa", filters] }); }, }); const updateFilters = (newFilters) => { console.log(newFilters); setFilters(newFilters); mutation.mutate(newFilters); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 여기서 처음에 데이터 패칭은 잘 이루어 지는데 fillter가 바뀌면 훅의 updateFilters 가 동작하여 새로운 데이터를 list에 다시 뿌리려고하는데 화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

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

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

JSP파일의 <Script> 위치?

안녕하세요 저는 비전공자 it교육을 받고 현재 26개월정도 프로그래밍을 하고 있는 초급 개발자입니다. 현재 금융 프로젝트 개발을 진행하고 있으며 여느때와 다름없이 고급 선배분들의 경험치를 흡수하며 성장 중이었어요 사건은 작일 일어났습니다. 코드리뷰를 받던 중 JSP에 있는 <script>위치가 왜 html 밑에 선언이 되어있냐는 지적을 받게되었습니다. ???? 저는 지금까지 스크립트 태그가 body 밑에 선언이 되어있는 jsp파일들을 여러 봤었기도하며 배울때도 css html js 이런식으로 페이지 구성을 해야한다고 배웠던걸로 기억을 했습니다. 하지만 20년이 넘어가는 경력을 가지신 선배님이 자기는 그런식으로 코드를 짜는 사람은 지금까지 단한번도 본적이 없다고 선언하셨죠.. 그래서 코드리뷰를 받은 저는 현재 갈팡질팡 하고 있습니다.. 물론 js에 async와 defer 같은 기능들이 있지만 그런걸 사용은 안하고 있습니다. 구글링을 해보면서도 스크립트가 아래에 위치해야한다 스크립트가 아래에 위치하는건 옛말이다 등등 많은 글들이 많아 헷갈려서 여쭤봅니다. 솔직히 얘기하면 사용하는 방법에 따라서 둘다 틀린 말은 아닌 것 같지만 요즘은 jsp 파일을 구현할 때 어떤식으로 프로그래밍을 하시는지 궁금하네요

in react-native cli, No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()

안녕하세요 운영체제 windows, react-native cli, android를 사용중입니다. 구글링을 해도 도저히 안나오길래 질문을 드립니다.. firebase react native auth, app 홈페이지에서는 해답이 없더라구요... 혹시 해결방법 아시는분들 계신가요 ㅠㅠ

콜백함수부분에 대해 질문있습니다.

안녕하세요 현재 자바스크립트를 공부하고 있는 초보자입니다. 현재 위치를 보여주는 코드를 작성하면서 궁금한 점이 생겼습니다. const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); }; askForLocation(); 이러한 코드가 있는데 제가 알기론 ()=>{} 콜백함수에 매개변수로 position이 있고 제일 마지막에 askForLocation() 함수 호출하는게 있는데 이 함수 호출부분에서 인자로 아무것도 전달되는것이 없어서 console.log(position)를 했을 때 undefined가 나올 것을 예상했는데 geolocation의 객체정보가 콘솔창에 나오더라구요. 그래서 매개변수로 전달 될 만한것이 없는데 어떻게 콘솔창에 객체정보가 나오는지 궁금합니다. 초보자 입장에서 정말 쉽게 설명해주시면 너무 감사드리겠습니다.

리액트 쿼리 에러 핸들링 이슈

react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

백엔드 테스트 와 머신러닝 테스트가 따로 하면 잘되는데 같이 하면 오류가 발생합니다.

저희 프로젝트의 기본적인 골자는 osmd라고 하는 mxl포맷 파일을 악보 형태로 렌더링해주는 라이브러리를 사용하구요, 스트림되는 오디오를 듣고 그걸 머신러닝 파이썬 코드가 처리한 뒤 timestamp라는 값을 반환하면 그에 맞춰 악보의 현재 위치를 가리키는 cursor를 움직이는 프로젝트입니다. 또한 오디오 스트림을 넘겨받기 위해서 aws에다가 쿠렌토 미디어 서버를 만들었구요, 머신러닝 코드는 로컬에서 돌아가고 있습니다. 각기 따로 스트림을 처리했을때(stdin stdout) 잘 되는 것을 확인했습니다(https://github.com/Kurento/kurento-java 쿠렌토 서버의 구현은 이 레포를 참고해서 만들었습니다) 또한 import sys def main(): while True: line = sys.stdin.readline() if not line: break output = line.strip() + '2' print(output) if __name__ == "__main__": main() 이 예제를 활용해서 테스트해봤을 때 문제없이 작동했습니다(쿠렌토) 머신러닝 코드는 wav 파일을 버퍼 잘라서 stdin에 집어넣고 테스트해보았습니다 작동은 둘 다 문제없이 작동했지만 같이 이어서 하게되면 Failed to write data: The pipe is being closed라는 오류 로그가 찍힙니다. (요약) 1. 백엔드에서 Kurento Media Server(webrtc) 인풋 들어온거에 아무거나 붙여서 반환하는거로 테스트 해봤을 때 문제 없이 스트림 처리가 되는 것으로 확인 됨 2. 머신러닝 쪽에서 오디오 스트림 모드를 만들고 stdin으로 들어온 스트림에 대한 결과값을 stdout으로 반환하는 것이 확인 됨 3. 그렇지만 둘을 이제 갖다붙이면 위 에러 로그 발생 이유 아시는 분들은 알려주시면 감사드립니다. 두서없이 장문을 써서 이해가 안되는 부분들 말씀해주시면 설명드리겠습니다. 감사합니다.

Recoil Atom Effect 적용 기: 팀 내 설득 및 구현 조언

안녕하세요!! 현재 진행 중인 프로젝트에서 회원가입 시 필요한 정보를 입력하는 중 새로고침 시 session 및 localstorage를 이용하여 상태유지를 하려고하는데 recoil과 관련하여 atom effect를 사용하면 우아하게 처리할 수 있음을 알았습니다. 따라서, 각 atom에 effect를 하나하나 추가하는 방법을 생각했는데 동일한 logic을 행하는 코드의 양이 방대해지고 localstorage에 각 atom에 해당하는 key-value로 저장되므로 가독성 측면에서 좋지 않다고 판단하여 아래와 같은 과정을 생각했습니다. 각 atom을 하나로 묶어 객체로 관리하자. 객체로 관리하게 되면 불필요한 re-rendering이 촉발되므로 객체로 선언한 atom의 각 property에 접근 및 수정을 위한 selector를 정의하자. 객체에 내의 property에 1대1로 selector를 정의하면 객체로 묶기 전 atom의 갯수만큼 selector를 선언해주어야 하므로 selectorFamily를 사용하자. 이것저것 찾아보면서 1 → 2 → 3 단계로 생각을 정리했습니다. 아래는 현재 사용되는 atom입니다. <ATOM> // signup.store.ts 👇 회원가입에 대한 user state들 - SignUpProfileTypeAtom - SignUpProfileRentalTypeAtom - SignUpProfileRegionsAtom - SignUpProfileDepositPriceAtom - SignUpProfileTermAtom - SignUpProfileMonthlyPriceAtom - SignUpProfileSmokingAtom - SignUpProfilePetAtom - SignUpProfileAppealsAtom - SignUpProfileGenderAtom - SignUpProfileMatesNumberAtom - SignUpProfileMateAppealsAtom // 👇 위의 atom들을 한 번에 access 및 update - SignUpProfileSelector 하지만, 다른 팀원이 저렇게 atom을 구성한 상황 제 생각을 그대로 적용하고자하면 팀원의 코드를 마음대로 바꾸는 거 같아서 조심스럽습니다. 협업함에 있어 설득도 하나의 중요한 스킬임을 갈수록 깨닫게 됩니다.(다들 어떻게 설득하시나요?) 팀원이 기존의 코드는 안 바꿨으면 좋겠다 하면 각 atom에 effect를 추가하는 것이 맞겠죠???? 현재 현업에 계신 분들은 이러한 상황에서 어떻게 설득하며 어떻게 하는 것이 좋을까 자문을 구하고 싶어서 글 올려봅니다!!🥲🥲 짧지 않은 글이지만 읽어주셔서 감사하고 많은 의견 주시면 감사하겠습니다!!😄😄😄 ```typescript import { SignUpType } from '@/types/signUp.type'; // ? type 집 유형 0: 원룸/오피스텔, 1: 빌라/연립, 2: 아파트, 3: 단독주택 @number export const SignUpProfileTypeAtom = atom<SignUpType['type']>({ key: 'signUpProfileTypeAtom', default: undefined, }); // ? rental_type 집 대여 유형 0: 월세, 1: 전세, 2: 반 전세 @number export const SignUpProfileRentalTypeAtom = atom<SignUpType['rental_type']>({ key: 'signUpProfileRentalTypeAtom', default: undefined, }); // ? regions 유저가 찾는 지역 >도시 (region) + 구(district) 형태의 배열 @string[] export const SignUpProfileRegionsAtom = atom<SignUpType['regions']>({ key: 'signUpProfileRegionsAtom', default: [], }); // ? deposit_price 보증금 (전세 혹은 월세) 범위 [최소 금액, 최대 금액] (0만원~10000만원) @[number, number] export const SignUpProfileDepositPriceAtom = atom<SignUpType['deposit_price']>({ key: 'signUpProfileDepositPriceAtom', default: [0, 10000], }); // ? term 유저가 살 기간 [최소기간, 최대 기간] (0 ~ 24)범위 @[number, number] export const SignUpProfileTermAtom = atom<SignUpType['term']>({ key: 'signUpProfileTermAtom', default: [0, 24], }); // ? monthly_rental_price 월세 [최소 금액, 최대 금액] (0만원, 500만원) @[number, number] export const SignUpProfileMonthlyPriceAtom = atom<SignUpType['monthly_price']>({ key: 'signUpProfileMonthlyPriceAtom', default: [0, 500], }); // ? smoking 흡연 여부 @boolean export const SignUpProfileSmokingAtom = atom<SignUpType['smoking']>({ key: 'signUpProfileSmokingAtom', default: undefined, }); // ? pet 펫 여부 0: 상관없음, 1: 좋음, 2: 싫음 @number export const SignUpProfilePetAtom = atom<SignUpType['pet']>({ key: 'signUpProfilePetAtom', default: undefined, }); // ? appeals 유저의 어필할 매력(배열형태) @string[] export const SignUpProfileAppealsAtom = atom<SignUpType['appeals']>({ key: 'signUpProfileAppealsAtom', default: [], }); // ? gender 상대방의 성별 0: 상관없음, 1: 남성, 2: 여성 @number export const SignUpProfileGenderAtom = atom<SignUpType['gender']>({ key: 'signUpProfileGenderAtom', default: undefined, }); // ? mates_number 인원수 0: 상관없음, 1: 1명, 2: 2명, 3: 3명이상 @number export const SignUpProfileMatesNumberAtom = atom<SignUpType['mates_number']>({ key: 'signUpProfileMateNumberAtom', default: undefined, }); // ? mate_appeals 유저가 원하는 상대방의 매력 (배열형태) @string[] export const SignUpProfileMateAppealsAtom = atom<SignUpType['mate_appeals']>({ key: 'signUpProfileMateAppealsAtom', default: [], }); ```

react-navigation navigate 파라미터 type

안녕하세요, @react-navigation의 useNavigation을 통해 페이지 이동을 하는 함수를 만들던 중 타입 설정이 되지 않아서 질문 드립니다. navbar와 같은 곳에서 사용할 목적으로 navigateTo와 params 를 받아 스크린을 이동시켜주는 함수를 만들고 싶지만 params의 타입에서 에러가 나고 있어서 이 부분에서 어떻게 해줘야 하는지 질문드려요.. 에러 내용을 보면 아래와 같이 나오는게 각 페이지 별 type이 일치하지 않아서 그런걸로 보이는데 각 메뉴마다 navigation.navigate('Login', {~~}); navigation.navigate('Foo'); 이런식으로 하게되면 동작은 하지만 너무 중복된 코드가 되는 것 같아 pgae를 받는 함수로 만드려고 하는 중인데 잘 안되네요..! Argument of type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to parameter of type '[screen: "Login"] | [screen: "Login", params: { page: string; data?: object | undefined; } | undefined] | [screen: "Foo"] | [screen: "Foo", params: undefined] | [screen: "Bar"] | [screen: "Bar", params: undefined]'. Type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to type '[screen: "Login", params: { page: string; data?: object | undefined; } | undefined]'. Type at position 0 in source is not compatible with type at position 0 in target. Type 'keyof RootStackParamList' is not assignable to type '"Login"'. Type '"Foo"' is not assignable to type '"Login"'.ts(2345)

토큰값을 받아오지 못하는 문제 (undefined)

안녕하세요 JWT 토큰을 이용해 로그인 검증하는 로직을 구현하고 있습니다. 로컬스토리지에 토큰을 저장하는 것까지 성공했으나 프론트 측에서 로그인 검증을 요청할때 실제 토큰 값을 받아오지 못하는 문제가 있어 질문 드립니다. login-required에서 토큰 값 유무 로직을 전부 지우고 콘솔로만 찍는 경우 undefined와 실제 토큰값이 나타납니다. 만약 토큰 값 유무 로직을 이용한다면 undefined값만 서버로 들어와 페이지가 무한로딩 되는 현상이 나타납니다. next()처리가 안되기 때문인 것 같습니다. (+ index.html은 test.js를 연결하고 있습니다.) 사진으로 보면 네트워크 요청헤더에서 확인한 결과 1. 처음엔 document 유형의 localhost를, (인증 헤더 x) 이후 js를 불러온다 2. 마지막에 xhr형식인 localhost를 불러옵니다 (인증 헤더 o) (여기서 undefined, 실제 토큰값이 콘솔에 동시에 나타나는 이유라고 생각이 듦) (순서를 보면 document 유형 localhost -> css, js -> xhr 유형 localhost 즉 처음에 document 유형에서 인증헤더를 못가져와서 (js가 로드되기 전이여서) 토큰 유무를 체크하지 못하는 것 같습니다) 결론적으로 제가 생각한 문제 분석 (1) ('/') 에 get 요청을 보낸다. (2) 서버는 loginRequired를 실행한다. (3) 서버로 부터 html을 받지 못한 상태에 loginRequired가 실행되어 토큰 값은 undefined가 된다. (4) next()를 거쳐 서버에서 html을 클라이언트로 부터 응답을 해준다. (5) html을 브라우저에 보여주면서 그 html에 연결된 js를 불러온다. (6) 이때 불러온 test.js에서 get요청 ('/') 로직을 불러와 다시 server.js에서 loginRequired 응답으로 토큰 값을 불러온다. 즉 js가 로드가 되어야 userToken을 로컬스토리지로 부터 받아오고 요청을 하여 토큰 값을 불러올 수 있다. 그런데 get 요청전에 토큰 검증을 하고 허가가 되어야 html을 로드해야 하지 않을까? 그렇다면 서버에서 처리를 해야하는가? 배워가는 학부생으로 많이 부족하다고 생각합니다,, 선배님들의 견해를 받고 싶어 게시물 올립니다..! 핵심 코드는 다음과 같습니다.

사용자 등급에 따라 다른 화면을 보여주고 싶어요.

Next.js 14버전을 사용하고 있습니다. 홈페이지에 접속했을 때, 사용자의 로그인 상태 여부에 따라 각기 다른 컴포넌트를 보여주고 싶습니다. const Main = () => { const isLogin = useRecoilValue(loginStatus); const user = useRecoilValue(userAtom); return ( <> <AuthWrapper> {isLogin && user ? <Login/> : <Logout />} </AuthWrapper> </> ) }; export default Main; isLogin과 user는 로그인 여부와 회원 정보에 대한 전역 변수입니다. isLogin의 default값은 false이고, user의 경우 isLogin이 true일 때만 존재합니다. (로그인 상태일 때 해당 유저 정보를 api로 호출) 그리고 <AuthWrapper>를 통해 해당 전역 변수들을 업데이트 해줍니다. 제가 원하는 건 최초 페이지 접속 시에 AuthWrapper를 통해 state값을 초기화해주고, 이에 알맞게 컴포넌트가 렌더링 되는 것입니다. 하지만 isLogin의 default값이 false이기에 로그인 상태일 경우, 순간적으로 Logout컴포넌트가 출력되었다가 AuthWrapper에서 검증 후 state값이 변경되면 Login컴포넌트가 출력됩니다. 이 순간적인 깜빡임을 없애고 바로 동작할 수 있게 하는 방법이 있을까요? +) 추가로.. 서버 사이드에서 처리하기에는 AuthWrapper 내부에서 storage값을 사용하거나 useEffect등을 사용하기에 불가능했습니다.

리액트 로그인질문..

react + 파이어베이스만 써오다가 react + express 조합을 오랜만에 사용중인데 긴가민가한점이있어서 질문드립니다 ㅠㅠ import axios from 'axios'; const instance = axios.create({ baseURL: process.env.REACT_APP_API_BASE_URL, timeout: 2500, headers: { 'Content-Type': 'application/json', withCredential: true, }, }); instance.interceptors.request.use( (config) => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = token; } else { delete config.headers['Authorization']; } return config; }, (error) => { return Promise.reject(error); } ); export default instance; 이렇게 인터셉터를주어서, 요청할 때마다 토큰을 전달하고있습니다. 그리고 프라이빗 라우터 + 유저정보 인증 훅을 사용해서 로그인사용자만 접근가능하게 페이지를 설정해줬습니다. 근데 질문 1. 네트워크탭 Request Headers 에서 Authorization을 확인해보면 토큰정보가 그대로 노출되고있는데요 원래 이렇게되나요? 질문 2. Bearer + token 이렇게 보내는 경우는 포스트맨이나 이런걸로 테스트할때만 Bearer 을 붙여서 보내주면될까요? 질문 3. 검색 키워드가 생각이안나서 질문으로 올립니다. 아주 옛날에는 (4년전) App.tsx에서 if(localstorage.token){ setAuthToekn(token); } 이런식으로 하고, setAuthToken함수는 import axios from 'axios'; const setAuthToken = (token) => { if (token) { axios.defaults.headers.common['x-auth-token'] = token; } else { delete axios.defaults.headers.common['x-auth-token']; } }; export default setAuthToken; 이런식으로 되어있었는데요, 요즘은 제가 짠 코드처럼 axios.인터셉터 식으로 하는게 맞나요? 질문 4. 그럼 요즘도 회원가입/로그인시 로컬스토리지에 유저 정보 (닉네임 이름 이메일, 토큰정보)만 저장해두고 로그인하면, 로그인버튼이 회원 닉네임으로 변하게 해준다던가.. 이런식으로 분기처리를 하나요? ( 저는 이렇게하고있어서요.. 로딩처리를 줄수도있겠지만 깜빡거리는게 싫고, 또 로컬스토리지로안하면 로그인버튼으로 잠깐바꼇다가 회원닉네임이 표시되더라구요) 질문5. (질문4와 이어집니다.) 만약 질문4처럼하면 사용자가 사이트에 계속 로그인중인데, 이 토큰이 끝났는지 판단하려는 코드를 따로 작성해줘야할까요? 예를들면, App.tsx에 서버 api/auth같은거에 요청보내는 로직을 작성해서, 토큰만보내서 유효한 토큰인지 아닌지, 유효하지않은토큰이면 에러를 리턴시켜준다던가, 리프레쉬토큰을 발급시켜서 연장시켜준다던가 이런식으로하면될까요? 마지막으로 질문이 좀 많고 중구난방인데 죄송스럽고 조심스럽네요..

타입스크립트 'value' is possibly 'null' 에러 옵셔널체이닝으로 해결안되는 이슈

import DateRangePicker from "@wojtekmaj/react-daterange-picker"; import { useDispatch } from "react-redux"; import { dateFetch } from "components/feature/FetchSlice"; import styled from "styled-components"; type ValuePiece = Date | null; type Value = ValuePiece | [ValuePiece, ValuePiece]; export default function CustomCalendar() { const dispatch = useDispatch(); const [value, onChange] = useState<Value>([new Date(), new Date()]); return ( <CalendarBox> <Calendar>조회 기간</Calendar> <StlyedDateRangePicker onChange={onChange} value={value} onCalendarClose={() => { dispatch( dateFetch({ startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), }) ); console.log(value); }} /> </CalendarBox> ); } <StlyedDateRangePicker>는 styled component로 만든 DateRangePicker 라이브러리 컴포넌트입니다. DateRangePicker 에서 날짜 2개를 선택하면 value라는 배열에 Date 객체 2개가 들어갑니다. 그리고 onCalendarClose 함수가 동작하면서 redux로 만들어놓은 startDate, endDate 객체에 각각 date를 toISOString() 처리한 값이 할당되는 로직입니다. 날짜를 선택하기 전에는 value={value}의 value 배열요소인 Date객체 값이 null 값이니까 type ValuePiece = Date | null; 타입지정을 해줬습니다. startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), 근데 위 코드의 value[0], value[1] 에러가 나더라구요. 'value' is possibly 'null'.ts(18047) Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Date | [ValuePiece, ValuePiece]'. Property '0' does not exist on type 'Date | [ValuePiece, ValuePiece]'. null 값일 수도 있다길래 옵셔널체이닝을 줬는데 여전히 에러가 발생합니다.. 해결방법을 도무지 모르겠네요.. 도와주시면 진심으로 감사하겠습니다ㅠㅠㅠ

[React]서버에서 받아온 데이터 객체 속성 undefined

프론트를 배우고 있는 학생입니다. 서버에서 response.data를 setData함수로 data를 업데이트해서 콘솔에 출력했을 때는 분명 각 속성들이 잘 정의되어서 왔습니다. data의 속성에 있는 배열을 맵핑하려고 했더니 안되서 콘솔에 출력을 해보니 해당 속성은 undefined라고 뜹니다. 다른 속성들도 undefined라고 뜨고 다른 state를 만들어서 data의 각 속성을 개별적으로 받을려고 했는데 저렇게 해도 undefined로 떠요. 혹시 해당 데이터 객체는 잘 왔는데 각 속성에 접근하면 undefined인 이유를 아시나요?? 🥲

Next.js에서 page.js

안녕하세요. Next.js를 공부하던 중 궁금한점이 생겨 질문드립니다 ! 제가 app/page.js 파일에 사용자가 로그인했다면 메인화면 컴포넌트를 보여주고, 로그인하지 않았다면 로그인 컴포넌트를 보여주도록 작성해두었습니다. 그런데 궁금한 점이 로그인을 했는지 유무를 getserversession을 통해 세션을 확인해서 판단합니다. 그런데 이때 비동기처리를 위해 await를 붙여줘야하는데, 그렇다면 page.js의 Home() 자체에 async를 붙여주어야합니다. 그래서 해당 방법을 사용해 제가 생각한 로직은 구현했습니다. 그런데 궁금한 점이 page.js에서 export default async function Home() 이런식으로 작성해도 되나요? 제가 page.js의 역할을 정확히 이해하지 못한 느낌이 들어 질문드립니다. (챗 지피티에게 물어보니 13버전 이전의 내용만 알고 있는 듯합니다. 또한 컴포넌트 자체에 async를 붙이면 안된다고 답변이 옵니다 !)

Next JS 14 쿠키 관련 질문입니다.

현재 NextJS 14 버전을 사용 중에 있으며 App Router로 폴더 구성을 하고 로그인 작업을 진행 중에 있으며, 로그인 프로세스는 다음과 같습니다. 1. 프론트엔드 : 사용자가 로그인 버튼 클릭 2. 디스코드 서비스에서 인증 (디스코드 페이지로 이동) 3. 백엔드 서버로 인증코드 전송 4. 백엔드 서버에서 프론트엔드로 리다이렉트 (이 때 쿠키로 엑세스 토큰과 같은 정보를 보내줌) 쿠키 설정도 https에 백엔드랑 같은 도메인으로 맞춰 줬습니다. 여기서 1~4번까지 에러 없이 잘 동작하고, 쿠키도 브라우저에 잘 저장되고 있습니다. 근데 여기서 한 가지 문제가 발생했는데, Nexjs가 서버 사이드 컴포넌트(layout) 에서는 쿠키를 잘 불러오고 있지만 클라이언트 사이드 컴포넌트(page) 에서는 쿠키를 불러올 수 없었습니다. (undefined) 현재 클라이언트 사이드 컴포넌트에는 최 상위에 'use client' 를 붙혀 잘 사용하고 있고, cookies-next 라는 라이브러리로 불러오고 있습니다. 어떤 것이 문제일까요? 문제의 원인과 해결 방법을 알고 싶습니다.

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에서 랜더링 시점 바꾸기

안녕하세요! nextjs 프로젝트 진행중에 궁금증이 생겼습니다. 현재 Sidebar 컴포넌트에서 카카오맵이 불러와져야 작업을 할 수 있는 상태입니다. 카카오 맵은 children 에서 랜더링되기 때문에 아래와 같이 코드작성시, Sidebar 랜더링 시점에 kakao is not defined 라는 오류가 뜹니다. 혹시 Sidebar를 좀 늦게 랜더링 할 수 있을까요? export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className={inter.className}> <div id="login-modal" /> <section className="flex h-screen"> <nav className=" h-full bg-slate-100"> <Sidebar /> </nav> {children} </section> </body> <Script src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${APIKEY}&libraries=services,clusterer`} strategy="beforeInteractive" /> </html> ); }

안드로이드 스튜디오에서 메일전송기능 구현하는법

안녕하세요 이번에 3학년 올라가는 컴공 학부생입니다. 방학동안 안드로이드 프론트엔드 공부를 하면서 동기들과 프로젝트로 앱을 하나 만들고있습니다. 코틀린을 사용해서 문의하기 기능을 만드는 중인데 인텐트를 사용하지 않고 문의 제목은 메일 제목으로, 문의 내용은 메일 내용으로 전송하는 방법을 찾고있습니다. 구글 검색을 해보니 smtp가 뭔지는 잘 모르겠지만 그걸로 구현이 가능한 것 같은데 글들이 최소 2년전 자료들이어서 현재 쓰고있는 hedgehog 버전과 통용되지 않는것 같습니다. 그래도 과거글을 바탕으로 구현해보고 있는데 2가지 문제가 발생했습니다. 1. Zendesk Auth 사이트에서 구글메일 보안비밀번호를 확인할수있다고 하는데 확인이 되지 않습니다. 2. 구글에서 지원하는 smtp 정보를 받아와서 MimeMessage 객체에 전달하는 과정에서 getDefaultInstance의 authenticator 부분에 javax.mail의 Authenticator를 상속받은 this를 넣었는데 FATAL EXCEPTION: DefaultDispatcher-worker-1 javax.mail.AuthenticationFailedException 오류가 발생했습니다. 스택오버플로우를 찾아보니 새로운 애뮬레이터를 만들라는 말이 있어서 해봤는데 실패했습니다. 구글신께 도움을 구해보려다 실패해서 여기에 올립니다!

스프링을 통해 캐싱 중 오류가 발생했습니다

안녕하세요 먼저 오류 종류에 대해서 말씀드리면 Null key returned for cache operation입니다 @Cacheable, @CachePut, @CacheEvict 모두 key값에다가 파라미터의 이름과 같이 key="#id"를 주었습니다. 그러자 위와 같은 에러가 발생하였습니다 id라는 변수명이 문제인가? 라는 생각을 가지고 다른 것으로 바꾸어 봤지만 똑같은 문제가 발생했습니다. 일단 해결방법은 defaultKey 값을 사용하거나 파라미터를 직접 key="#p0" 이렇게 하니 해결이 되었습니다. 구글링해도 아래와 같은 방법으로 해결하는 말만 있고 위에서와 같이 변수명을 사용할 때의 문제점이 안나와서 질문 올립니다!