#함수

리액트에서 이벤트 루프관련해서 질문이 있습니다

안녕하세요. 리액트에서 이벤트 루프 동작 관련해서 제가 이해한내용이 맞는지 질문드립니다! 코드를 간단히 설명드리면 List를 그리는 scroll container가 있고 아이템이 추가되면 마지막으로 추가된 아이템으로 스크롤을 시키려는 코드입니다. (useEffect를 사용해도 되지만 이벤트 루프를 이해하기 위해서 작성하였습니다!) 스크롤을 시키기 위해 작성한 코드는 세가지입니다! 1번 코드는 스크롤이 되지 않습니다. 이유는 리액트에서 batch 업데이트 과정에서 렌더링되기 전에 호출되었으니 스크롤이 되지 않습니다. 2번 코드는 스크롤이 되었습니다. 리액트의 상태변화는 마이크로태스크큐에서 실행이 되었고 렌더링이 발생한 후에 매크 태스크큐가 실행되기 때문에 올바르게 렌더링 후에 실행이 되었습니다. 3번 코드는 스크롤이 되었습니다. 이건 이유를 정확히 모르겠습니다. 개발자 도구에서 실행된 시점을 봐도 마이크로태스크큐에서 스크롤 함수가 실행되었지만 올바르게 실행이 되었습니다. 마이크로 태스크 큐 실행과정에서 appenchild가 발생하고나서 렌더링이 되기전에 이미 레이아웃이 다 계산은 완료가 되는걸까요? 어떻게 이해를 해야될지 모르겠습니다.

프론트엔트 개발자로 이직하기 위해서 어떻게공부 해야하나요?

안녕하세요, 문과 4년차 직장인입니다 2025년에 제대로 공부해서 1년안에 프론트엔드 개발자로 이직하고 싶습니다. 추천하는 공부방법 있으실까요?? 최근 4-5개월간 인터넷 강의(udemy)로 자바스크립트를 독학했고 배열, 함수, 비동기함수 등 이론은 대부분 이해했지만 혼자 완벽하게 구현하기에는 미흡한 상태입니다) 아래 방법 정도로 생각해봤는데 경력자분들 시선에서 가장 효율적인 방법이 공부방법이 무엇일지 조언을 부탁드립니다 1년안에 프론트엔드 개발자로 이직하기위한..!) - 프론트엔드 개발자로서 사용할 줄 알아야하는 프로그램이 뭔지? (자바스크립트, node.js, 리액트..?) - 자바스크립트만 공부하면 되는건지? - 강의를 독학으로 들으면서 개인 프로젝트를 할지? - 아니면 부트캠프를 들으면서 개인 프로젝트를 할지? - 추천하는 부트캠프가있는지? 회사를 그만두고 준비하기에는 너무 부담이 클것같아서 다니면서 준비하려고합니다! 꼭 조언 부탁드립니다 :) 감사합니다

invalidateQueries가 실행되지 않습니다.

mutate 함수 내부에서 onSuccess:()=>{ queryClient.invalidateQueries({ queryKey: ["USERINFO"] }) navigate("/") } 를 실행하는데 mutate함수는 잘 실행되고 이후에 경로 이동도 잘되는데 useQuery훅 네트워크 요청 자체가 가질 않습니다. refetchType, refetchOnMount, enabled, refetchQueries, prefetchQueries등등 다 시도해 봤는데 안됩니다..! 거의 100번 정도 테스트해봤을때 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 함수의 로직은 실행이 되지 않아야 하는 거 아닌가? 하는 생각이 들어 질문드립니다

안녕하세요 개발이 하고싶은 20대 후반 직장인입니다.

안녕하세요. 27살 sqa회사 입사 3개월차 직장인 입니다. 자바기반 국비공부를 6개월 하며 개발자를 꿈꾸었지만 최종학력은 4년제 중퇴(고졸), it관련 경력도 없고 개발쪽 취업이 자꾸 미끄러져서 급한마음에 지금 회사에 온 것 같습니다. 처음엔 qa업무도 개발관련 지식이 있다면 활용가능하고 도움이 된다고 해서 입사하게 되었는데 막상 입사하고 나니 단순 테스터업무와 엑셀문서(함수) 정도를 하고 있습니다. 연차가 쌓이고 먼 훗날 전문적인 qa로서 일을 할 수도 있겠지만 제가 애초에 it로 뛰어든 이유와 맞지 않아 괴리감을 느끼고 있네요.. 이 상황에 안주하고 싶지 않고 이직을 하여 개발자로서의 커리어를 쌓아가고 싶기에 부족하지만 학점은행제를 통해 학위만이라도 따려고 등록하여 강의를 듣고있고, 기존에 가지고 있던 포트폴리오에 제 개인 프로젝트를 하나 추가해보면 어떨까 싶어서 다시 시도중에 있습니다. 제가 배운것이 많지 않기에 리엑트,자바(스프링),오라클,공공api사용등 같은 기술을 가지고 새로운 프로젝트를 하는게 좋을지 아니면 새로 다른 언어,툴 등을 배워 진행하는게 좋을지 이 시도를 하며 제가 잘 하고 있는것인지 이 방법이 무의미한 방법인지 자꾸 저를 의심하게 되어 긴 글 남깁니다. 욕이라도 좋습니다. 제 현상황을 바라봐주시고 조언 부탁드립니다.

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

next.js url 파라미터 변경 시 데이터 호출

next.js 서버 컴포넌트에서 fetch후 클라이언트 컴포넌트로 넘겨주는 구조에서 브라우저 url 파라미터 값이 바뀔때마다 새로운 데이터를 호출하도록 구현하고 싶습니다,. useEffect를 활용하려했으나 fetch 함수가 async다보니 클라이언트 컴포넌트에서 사용할 수 없더라구요... 방법이 뭔지 모르겠습니다ㅠㅠ 알려주시면 감사하겠습니다!!

깃 merge 충돌이 나는 경우를 정의할 수 있나요?

서적에는 이렇게 나와있습니다. "병합하려는 두 브랜치가 서로 같은 내용을 다르게 수정한 상황에 충돌이 발생한다." "같은위치의 코드를 두 브랜치가 동시에 수정하면 충돌이 발생한다." 따라서 저는 같은 파일,같은 라인 코드를 서로 다르게 수정하면 충돌이 난다고 생각했습니다. 근데 첨부한 사진과 같은경우 충돌이 안더라구요;; 브랜치는 main, develop 2개가 있습니다. 그리고 2개의 브랜치 소스는 아래와 같습니다.(1번째 사진) 그리고 먼저 main 브랜치로 person 소스를 아래와 같이 수정하고 커밋, 푸시를 진행하였습니다.(2번째 사진) 그리고 develop 브랜치로 person 소스를 아래와 같이 수정하고 커밋, 푸시를 진행하였습니다.(3번째 사진) 그리고 person 브랜치를 main 브랜치에 merge 시켰습니다. 각 브랜치의 소스를 보면 main의 5번째 줄 함수명이 b 이고 9번째 줄 함수명은 c 입니다. 근데 develop 브랜치의 5번째 줄 함수명은 d 이고 9번째 줄 함수명은 b 입니다. 이렇게 되면 서적의 내용만 봤을땐 같은 위치의 코드를 각각의 브랜치에서 서로 다르게 수정을 했는데 왜 충돌이 발생하지않고 merge 가 진행되는건가요..? 일단 merge 를 하면 첨부사진과 같이 됩니다.(4번째 사진) 뭔가 충돌발생하는 경우를 정확히 정의하고 알고 넘어가고싶은데 어려운것 같습니다... 선배님들은 어떻게 이 부분을 이해하고 계신가요?

next.js의 캐시와 react query 캐시 질문

next.js와 react query를 사용해 프로젝트를 진행하다가 이해가 안되는 현상이 있어서 질문드립니다. 어떤 A 라는 페이지에 들어오면 포스트와 포스트의 댓글들이 보이는 상황입니다. 첨부한 코드는 A 페이지를 담당하는 page.tsx 코드와 page 에서 사용중인 컴포넌트중 댓글 컴포넌트인 Comments 컴포넌트, 그리고 Comments 에서 useQuery의 queryFn으로 지정한 getComments 함수의 코드입니다. Comments 컴포넌트의 useQuery의 staleTime은 10초로 해두었고, queryFn인 getComments 함수의 fetch는 revalidate를 60초로 해둔 상황입니다. useQuery의 staleTime보다 fetch의 revalidate 시간을 길게 한건 react query로 인한 클라이언트측의 캐시와, next.js의 fetch에 의한 서버 측의 캐시의 차이점을 확인해보려고 그런것입니다. A 페이지에 처음 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리로 인해 받아온 댓글(comments) 데이터가 화면에 보입니다. 이 댓글에는 랜덤으로 생성된 이미지가 있습니다. 우선 10초가 지나기 전에는 새로고침에도 기존의 데이터 그대로 보이고, fetch 요청을 받는 백엔드 api에도 요청이 들어오지 않습니다. react query로 인해 쿼리가 실행되지 않아서 그런 것이겠죠? 그러고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale 상태가 된 후에 A 페이지를 새로고침하면 ['posts', id, 'comments'] 쿼리는 다시 fresh 해지는데 백엔드 api에는 요청이 들어오지 않았더라구요. 화면상의 댓글의 이미지들도 이전과 동일하게 나옵니다. 저는 이게 "A 페이지에 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리가 실행되어 fetch 요청이 실행되는데 이 ['posts', id, 'comments'] 쿼리는 서버 컴포넌트에서 프리패치 되는 거니까, 즉 fetch가 서버쪽에서 실행되는 거니까 react query의 캐시가 아닌 fetch의 캐시 설정을 따른다. 그렇기 때문에 ['posts', id, 'comments'] 쿼리가 실행되어 fetch가 실행되지만 fetch의 캐시는 남아있으니까 캐싱된 값을 사용해서 백엔드 api에는 요청이 안들어온것이다." 라고 생각했고 이걸 확인하기위해 새로고침을 해본것이었기 때문에 이 결과에 대해 납득하긴 했는데요.. 이 생각이 맞는건지가 일단 궁금합니다. 그리고 진짜 이해가 안되는건 이겁니다. A 페이지에 들어오고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale해지면 이번에는 다른 페이지로 이동했다가 A 페이지로 다시 돌아옵니다. A 페이지에서 새로고침을 하지 않고 사이트 내에서 페이지 이동으로 A 페이지에 다시 들어오는거죠. 이러면 백엔드 api에 요청이 들어오더라구요. 이게 왜 그런건지 모르겠습니다. 10초가 지나 ['posts', id, 'comments'] 쿼리는 stale 해졌지만 60초는 안지나서 fetch의 캐시는 유효한... 위의 새로고침 경우와 동일한 상황인데 새로고침 시에는 api로 요청이 안들어오고, 다른 페이지로 이동했다가 다시 돌아온 경우는 api로 요청이 들어오네요. A 페이지에서 새로고침을 하나, 다른 페이지에서 A 페이지로 페이지 이동을 하나, 둘 다 page 컴포넌트가 실행되고 ['posts', id, 'comments'] 쿼리가 서버에서 프리패치되니까 fetch가 서버에서 실행되는거 아닌가요? 근데 왜 새로고침하면 fetch의 캐싱이 적용되는것처럼 백엔드 api로 요청이 안들어오고 페이지 이동 시에는 들어올까요... 이걸 아무리 생각해도 모르겠습니다. 60초가 지난 후에는 새로고침 시에도 백엔드 api로 요청이 들어오더라구요. 이것으로보아 60초 전에는 새로고침 시 요청이 안들어오는게 fetch의 캐시 때문인것도 맞는 거 같은데, 왜 페이지 이동 시에는 60초 전에도 캐싱값을 안쓰고 api로 요청을 보내는지 모르겠습니다. 어떤 메커니즘으로 이렇게 되는것일까요? 아직 Next.js의 캐싱과 react query에 대해 잘 알지 못해서 이해가 안됩니다.. ㅠ 도와주십쇼..!

Next.js 코드 가독성..

안녕하세요 프론트앤드 1년차에 다가가고 있는 신입 개발자입니다. 현재 Next14를 사용하고 있으며 코드의 가독성, 효율성을 많이 고려하면서 코드를 짜려고하는데 너무 고민이 되네요 저보다 앞서서 달려가고 있는 개발자 선배님의 생각을 듣고싶습니다 ㅠㅠ... 2가지가 궁금합니다. 먼저 첫번째 이미지처럼 Version에 관련된 파일을 저렇게 분리했을 때 저는 Version의 최상위 Layout.tsx에서 모든 것을 선언하기가.. 너무 오히려 가독성이 안좋다고 생각을 하고 있습니다 즉, 변수나 함수를 모두 최상위 Layout.tsx에서 선언 및 정의를 해두고 props로 내려주는게 이상하다고 생각을 합니다. 변수, 함수, useEffect 모두 직접 해당 변수나 함수를 컨트롤하는 부분에서 선언 및 가공을 하는게 맞다고 생각을 합니다. 최상위 Layout.tsx가 너무 무거우면 오히려 나는 VersionDataTable에 관련된 변수나 함수만 보려고 하였으나 최상위 Layout.tsx를 보고 아 이게 VersionDataTable에 필요하구나 뭐가 필요없구나, useEffect의 의존성 배열까지 고려하는것이 불필요하다고 생각을 하고 있습니다.. 근데 같이 프론트 앤드 개발하시는 분께서는 '단기적으로 절대 코드가 변하지 않는다고 생각하면 그 말씀이 맞는데 그건 아니잖아요? 우리는 계속 유지보수를 할거고 그러면 결과적으로 A에서만 사용하던 변수나 함수들을 A,B,C에서 같이 사용할 수 있게 변경하게 되면 그때 변경하면 유지보수 측면에서 너무 안좋습니다. 최상위에 모두 선언이나 정의를 해두고 props로 내려주는게 맞다 이런 형식으로 코드를 작성하면 몇개월 뒤에 코드를 수정할 때 A가서 수정했다가 C가서 수정했다가 D가서 수정하실 거에요? 바로 알아보실 수 있겠어요?' 라고 말씀을 하시더라구요.. 물론 몇개월 뒤에 코드를 보거나 하면 제가 작성한 코드인데도 저는 헷갈리는 경우가 많습니다. 그러나 최상위에 모두 선언 및 정의해둬도 마찬가지 아닌가..? 유지보수 측면에서 뭐가 안좋은거지..? 라고 생각되게 됩니다.. 선배님의 말씀을 따라가고는 싶은데 이해가 안돼서요 제가 아직 기본기가 많이 부족한 상황이라 이 상황에서 말씀드리면 이론부터 말하며 설득시키기가 부족하다고 생각하기 때문에 말씀드리면 오히려 '저는 이렇게 생각해요 틀렸는데요?' 라고 말하는 것 같아 말다툼이 될 것 같습니다. 2. 밑 사진을 보면 modalTemplate라는 폴더, ConfirmTemplate이라는 폴더가 존재하는데요 이것에 대해서 저는 사용하는 용도에 따라서 Create면 Create Create와 Update를 동시에 할 수 있는거면 BundleCreateAndUpdate 이런 형식으로 각각의 파일을 생성을 하고 문법상 공유되는 부분은 중복이 되어서 실제로 보여주는 부분을 영역으로 나눠서 BasicOptions, SelectList, VersionDetail, VersionOptions로 나누고 각각의 파일에서 사용하는 부분만 불러와서 쓰는 형식으로 코드를 작성했습니다. 그러나 이렇게 용도에 따라 구분하지 않고 최상위 Layout.tsx파일 하나만 만들고 ModalType이라는 props를 받아서 ModalType이 create, update, create&update, delete ... 등 JSX에서 삼항 연산자를 써서 처리를 할수도 있습니다. 저는 ModalType으로 처음에 구분하다보니 나는 'create' 속성일 때 어떤 형식으로 되는지 코드로 보고싶은데.. 그러면 너무 뜯어서 봐야하더라구요 그래서 용도에 맞게 파일을 만들고 거기서 form을 불러오기만해서 중복 코드를 줄이는 방식을 택했습니다.. (더 나은 코드라고 생각했습니다.) 그랬지만 선배님께서 'ModalType으로 나누는게 더 좋아요 저렇게 지으면 가독성이 너무 떨어지고 파일의 이름이 너무 길어지잖아요 이상하지 않나요?' 라고 말씀을 하시더라구요... 물론 가독성은 사람마다 다른거 알고있습니다. 그러나 ModalType으로 나누기 시작하면 한도 끝도없이 나누고 ModalType이 delete일 때만 사용하는 함수, create일 때만 사용하는 함수 등 필요없는 함수도 너무 많아져서 용도에 맞게 파일을 구분하고 거기서 중복 코드만 최대한 줄이자! 라고 생각하여 코드를 작성했는데 이 내용도 말씀드려 봤지만 '가독성' 이라는 이유 하나만으로 너무 안좋다고 합니다.. 진짜 안좋은건가요..? Next 도 그렇고 프론트 앤드 너무 어렵습니다..

비밀번호검증 질문 (백엔드 프론트엔드 연동 )

저는 컴퓨터공학과 학생이지만 개발이 처음입니다. 프론트엔드를 맡아 리액트 네이티브 앱을 개발하는 중입니다. 기초 지식은 있지만 학교 수업만 들어봤기 때문에 실제로 서비스를 어떻게 만드는지는 몰라, 이번 프로젝트에서는 사실상 GPT가 다 짜줬다고 해도 무방한 정도였어요. 프로젝트가 거의 다 끝나가는데, 백에서 비밀번호에 암호화를 걸면서 수정사항이 생겼습니다. if (existingProfile.password !== profile.oldPassword) { Alert.alert('비밀번호 오류', '기존 비밀번호가 올바르지 않습니다.'); return; } 기존에는 위와 같이 단순하게 비교를 했었는데, 백에서 암호화가 되어버려서 저런 단순한 로직을 사용할 수 없게 되었습니다. 대신 백에서 currentPassword(클라이언트에서 입력받은 비밀번호), getPassword함수(암호화되지 않은 사용자 계정의 기존 비밀번호를 받아오는 함수)를 bcrypt를 이용해서 알아서 다 처리하도록 코드를 다 짜주셨다고 하더라고요. 백엔드 코드는 사진으로 올려두었는데, if (passwordEncoder.matches(currentPassword, user.getPassword()))를 통해서 두 비밀번호가 일치하는 경우에만 정보가 수정되도록 코드가 작성되어 있습니다. 로직은 충분히 이해가 가는데, 이를 프론트엔드 코드에 어떻게 적용해야하는지 전혀 모르겠습니다. 구글링을 어떻게 해야 이런 경우의 풀이가 나오는지도 모르겠고, 찾아봐도 백엔드에서 암호화를 하는 방법이나 해시를 하는 방법 같은 것만 나오네요. 이 문제를 해결하기 위해 일주일 내내 노트북만 붙잡고 있었는데 멘탈만 부서지고, 코드는 아무것도 나아지지 않았습니다. 부디 많은 조언과 도움 부탁드립니다.

React 동작 원리와 관련된 질문

아래 코드에서 handleClick 실행 시 setPending으로 "ready"로 상태가 변경되면 렌더링되고 delay이후 "done"으로 변경되면 또 렌더링 되는 건 알고있습니다. 1. 여기서 비동기함수(위에서 delay)와 관련해 batch 렌더링이 적용되지 않는 이유를 react 공문 링크나 설명 가능하신 분 계신가요? 2. handleClick의 컨텍스트에서 setPending으로 상태가 변경되고 react의 render함수가 실행되고 이후 delay함수가 실행되고 그 다음 setPending이 실행, 다시 render함수가 실행되는 과정을 실행컨텍스트 관점에서 알고싶습니다.

함수에서 다중반환은 잘 사용 안하나요?

코딩하다가 여러 값을 반환해야할때 클래스로 만들거나 map으로 만드는게 귀찮아서 다중반환을 사용해보려고 하는데, 보통 잘 사용하지 않나요?

리액트에서는 호이스팅이 다른이유?

순수 자바스크립트에서는 함수선언문으로 만든 경우에만 호이스팅단계에서 선언과 초기화가 코드 실행 전에 이뤄져서, 선언부보다 윗라인의 코드에서 사용할 수 있다고 배웠습니다. 그런데 첨부한 이미지처럼, 리액트에서는 함수형 컴포넌트를 화살표함수로 만들고, const를 사용해서 변수를 선언해도 선언부보다 윗라인의 코드에서 사용이나 참조가 가능한 이유가 뭔가요?? 구글에서 글을 여러개 찾았는데 이야기 하는게 다 달라서 너무 햇갈리고 궁금합니다.

usecallback

usecallback을 사용하여, 참여기능, 좋아요기능 함수에 usecallback으로 감싼것을 성능최적화 경험이라고 할수있을까요 ? 참여나 좋아요 함수가 다른 함수들 때문에 불필요한 리렌더링이 될수가있어서.. 사용해보았는데 궁금합니다. 이외 다른..실무에서 usecallback이 사용되는 경우가 궁금합니다.

개발자 신입 mdd툴 사용하는 sm회사 다니는게 맞을까요?

안녕하세요 비전공자에 개발에 대한 경험은 없는 신입 개발자입니다 이전에 개발팀은 아니고 운영팀에서 sql 쿼리업무를 2년동안 해왔고, 자바개발을 하고 싶어 퇴사하고 학원수강으로 지식을 쌓고 지금 시스템 운영유지보수 회사에 입사하게 됐습니다 회사에서는 MDD툴을 사용해 자바는 실행함수만 쓰면 나머지 코드는 자동 생성된다고 하더라고요 그래서 자바는 잘몰라도 된다고 하시고 오히려 자바보단 쿼리가 더 비중이 높다고 하셨습니다 자바개발에 대한 경험이 없는 저에게 SI회사도 아니고 SM회사에서 MDD툴을 쓰는 회사에 경력이 도움이 될까요?? 다니는게 맞을까요?

타입스크립트에서 타입 표기는 모두 다 해야하나요?

자바스크립트만 이용해 프로젝트를 하다가 타입스크립트를 사용하면 오류 메시지도 자세히 볼 수 있고, 나중에 규모가 커졌을 때 더 좋다고 들었습니다. 그래서 타입스크립트에 대해 공부하게 되었고 타입 명시를 하는것도 이해했습니다. 그런데 모든 변수나 함수와 같은 자료에 타입을 명시할 필요가 없다고 들었는데, 그렇다면 어디에 타입을 명시해야하는지 기준을 잘 모르겠습니다,, 다른 분들이 타입스크립트로 프로젝트한 깃 레포를 살펴봐도 잘 모르겠더라구요,, 혹시 타입스크립트를 사용하는 분들은 모든 곳에 타입 명시를 하시나요? 만약 모든 곳에 타입 명시를 하지 않는다면, 타입스크립트에서 타입 명시하는 기준이 무엇인지 궁금합니다,,!! 🤔

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

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

직장상사가 너무 코드를 못짜는거 같아요.

1년도 안된 신입 개발자입니다. 제 직속 상사가 너무 코드를 못짜서 고민이 많습니다. 함수를 재사용할 수 있는데 그것을 재사용할 생각을 안하고, 똑같은 함수를 복사해서 여러 페이지 파일에서 사용을 합니다. 그래서 그 함수에 문제가 있으면 그 함수를 사용한 여러 페이지를 찾아서 코드를 수정합니다. 이런 일이 무수히 많이 일어나자 너무 스트레스가 많습니다. 또 간단하게 생각할 수 있는 로직을 변수도 여러개 만들어서 코드를 더 복잡하게 만듭니다. 이런 개발자들이 실제로도 많나요...?

React Spring 배포과정 중 의문의 404

react + spring boot로 진행하는 프로젝트가 현재 cloudtype이라는 플랫폼으로 배포중에 있습니다. 문제는 정확한 서버주소를 호출하는 것 같음에 불구하고 404 에러가 발생하여 해결하지 못하고 있습니다. 현재, 아래 사진과 같은 로그가 클라이언트, 서버에 각각 발생합니다. 서버에서는 다음과 같이 구성되어있고 @RestController @RequestMapping("/v1/login") @RequiredArgsConstructor @CrossOrigin(origins = "https://web-secondchance-front-bug-1cupyg2klvnmgdft.sel5.cloudtype.app") public class KakaoController { private final KakaoService kakaoService; private final Logger LOGGER = LoggerFactory.getLogger(KakaoController.class); @PostMapping("/kakao-login") public ResponseEntity<UserDto> kakaoLogin(@RequestBody KakaoLoginDto kakaoLoginDto) { String code = kakaoLoginDto.getCode(); LOGGER.info("Get Code from FrontEnd : {}", code); LOGGER.info("Request getAccessToken()"); kakaoLoginDto = kakaoService.getAccessToken(code); String accessToken = kakaoLoginDto.getAccess_token(); LOGGER.info("access_token : {}", accessToken); if(accessToken != null){ UserDto userDto = kakaoService.getUserInfo(accessToken); return ResponseEntity.ok(userDto); } else { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } // accessToken이 null임에도 getUserInfo를 부름. // 안부르게 끔 위의 방법을 포함하여 // 1. map에서 true, false를 사용하여 해봄 // 2. getAccessToken을 map객체로 반환하게끔 하여 accessToken이 있으면 true, 없으면 false로 하여 isEmpty 함수로 체크하여 부름 // 위의 두 방법 전부 소용없음. 그냥 getUserInfo를 부름. } @PostMapping("/kakao-logout") public String kakaoLogout(){ return "ok"; } } 현재 리액트에서는 다음과 같이 axios.post로 접근하여 code를 전달합니다. 무엇이 문제일까요?

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

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 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

프론트엔드 테스트코드 어떻게 하세요?

안녕하세요. 2년차 프론트엔드로 일하고 있는 주니어입니다. 사내에 테스트코드 도입 전 혼자 해보고있는데요, tdd를 하고 계시는 다른 현직자 분들에게 궁금한점이 있습니다. 유닛 테스트 : jest, vitest E2E 테스트: cypress, playwright 위의 도구로 이것저것 해보고있는데 하면서 까다로운 점이 있습니다. 일반 유틸 함수 같은 것은 유닛테스트가 비교적 간단하지만 프론트 엔드이다 보니 컴포넌트 테스트를 하려면 무조건 DOM 으로 불러와야하고, 사이즈가 큰 컴포넌트는 뭔가 잘 되지도 않고, 이럴거면 그냥 E2E만으로 하면 되지 않나 라는 생각도 들고... 실제로는 unit 테스트 도구로 컴포넌트 dom으로 불러와서하고 e2e도 따로 하시나요? 아니면 e2e로만, unit으로만 이렇게 한가지로만 하시나요??

sns기능을 구현중에 있습니다.

swift 로 sns 기능을 구현 중에 있습니다. 메모리 관리를 위해 테이블 뷰로 피드 창을 구현하였는데 Pagination을 위하여 테이블뷰 셀 안에 스크롤뷰를 구현에 그 안에 frame에 맞춰 Imageview를 넣어주었습니다. 이 상황에서 무한 스크롤 , 새로고침 기능 시 셀 재사용으로 인하여 이전 셀의 이미지가 살짝 보였다가 현재의 이밎로 보이거나 override된 셀의 prepare reuseable 함수에서의 초기화를 함에도 깜빡이는 현상이 지속됩니다. 혹시 좋은 의견 있으신가 여쭤봅니다!

[Js] 함수 매개변수 전달에 대하여...

안녕하세요! 이제 막 1년 좀 넘은 주니어 개발자 입니다. 공부 중에 한 가지 궁금한 점이 생겨서 선생님들께 여쭤보려합니다. js 함수를 작성하는 중에 매개변수로 event를 전달하려 했더니 event에 취소선이 생성됩니다... 예시) - html - <div class='.card'> ... <button id="deleteCard" onclick="deleteCard(event)">삭제</button> </div> - js - function deleteCard(event){ let card = $(event.target).closest('.card').remove(); }; 위와 같이 작성했는데 함수 실행은 되긴 하는데 매개변수 event에 취소선이 생기니 잘못된 것 같아서 여쭤봅니다... 취소선이 생기는 이유와 문제가 된다면 어떤 점에서 문제가 생기는지 개선점은 뭐가 있는지 궁금해서 문의 남깁니다.

코테 자바언어만 지원하는 기업 본다 안본다 (보는날 다른일정있음)

자바는 플젝할때만 쓰고 파이썬으로만 코테보는중입니다 남은기간은 1일정도고 자바에서 코테 볼때쓰는 함수는 기억이 잘 안납니다

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)

개발자 모드 함수 실행 방지

안녕하세요. 스스로 개발자라고도 하기 민망한 신입 개발자입니다. 이번에 자바스크립트를 이용한 쿠폰 다운로드 로직을 구현하면서 예전 사람이 만들어 놓은 코드를 참고하면서 문제가 발생했습니다. 기존 방식은 프론트단에 있는 데이터를 ajax에 담아 서버 측에서 검증을 받은 후 쿠폰 다운로드 함수를 실행하여 쿠폰을 다운로드 받아왔습니다. 예시) 로그인체크 함수 (ajax로 로그인 검증 함수로 보냄) 응답이 성공일시 -> 참여이력체크 함수 (ajax로 로그인 검증 함수로 보냄 -> 반복 -> 검증 전부 성공시 쿠폰 다운로드 함수 실행 여기서 문제는 개발자 모드 콘솔창에 쿠폰 다운로드 함수를 호출하면 검증과정 없이 쿠폰이 다운로드 받아지는 것입니다. 이것을 방지하기 위해 서버단에서는 세션, 토큰을 사용하는 방법이 있다는 것은 찾았지만 클라이언트 측, 즉 자바스크립트 코드로 개발자 모드에서 함수를 무단으로 호출하는 것을 방지하는 방법이 있을까요? 밑에 원하는 해결 방안을 적어 놓겠습니다 1. 개발자 모드 실행 시 경고창, 창 이동 방법 - 이 방법은 제외입니다. 2. 클로저 사용 - 익명 함수로 다운로드 함수를 작성 시 검증 과정 마지막에 호출하지 못하더군요. 제가 클로저를 잘못 이해하고 사용한다 생각하니 클로저로 해결할 수 있는 방법이 있다면 가르쳐주시면 감사하겠습니다. 3. 그 이외에 방법 자바스크립트 코드로 해결하는 방법이 있으면 좋겠습니다.

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 객체입니다.

자바스크립트 및 프로그래밍 입문 강의 추천

안녕하세요. 친구가 프로그래밍을 입문하고 싶어하여 질문을 할 때 마다 답변을 주고있지만 서로아는 지식의 차이가 있기에 어디서부터 설명해야 할지 어려움이 있습니다. (D를 설명하다 기본으로 생각하던 C를 몰라 설명하다보니 B, A 까지 설명하게 되어 작은 부분 설명한번에 30분씩 소요 되는 중 입니다.) 기본적인 프로그래밍 단어(변수,함수,자료형) 등을 알려주는 강의가 있다면 추천받을 수 있을까 하여 질문드립니다. 읽어주셔서 감사합니다.

Edge에서 카메라 디바이스 아이디 가져오기

navigator.mediaDevices.enumerateDevices() javaScript로 해당 함수를 사용해서 카메라의 디바이스 아이디를 가져오려 하는데 FireFox나 chrome에서는 정상적으로 디바이스 아이디를 가져오는데 Edge에서만 못 받아오는거 같습니다. 해결 부탁드립니다,,ㅠㅠㅠ