#json

질문 15
해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

2달 전 · 박정환 님의 새로운 댓글

스프링부트 로컬 환경에서는 되지만, 배포 환경에서 404 에러가 발생합니다.

안녕하십니까 선배님들. 스프링부트 API 서버를 개발하고 배포하였는데 다음과 같은 문제가 발생하였습니다. 로컬 환경에서는 잘 작동하지만, 배포 환경에서 특정 POST 요청에서 404에러가 발생하는 문제였습니다. 해당 요청은 JSON을 반환하는 컨트롤러입니다. 서핑을 하던 중, Spring Security의 CSRF의 문제일 수도 있다고 하던데 저는 현재 Security를 사용하지도 않고 다른 POST 요청은 잘 응답하여 뭐가 원인인지 잘 모르겠습니다. 아래는 application.yaml과 Controller 코드입니다. 감사합니다. // application.yaml spring: application: name: tika servlet: multipart: max-file-size: 50MB max-request-size: 50MB

개발자

#스프링

#자바

답변 1

댓글 2

조회 64

4달 전 · 문종호 님의 새로운 답변

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

개발자

#llm#rag

답변 1

댓글 0

조회 74

6달 전 · 동욱 님의 질문

리액트 설치에 대해 질문있습니다.

안녕하세요 리액트를 공부하고 있는 프론트엔드 취준생입니다. npx create-react-app ./ 이걸로 리액트를 설치하니 아래 이미지 처럼 packge.json 파일이 있고 packge.json 앞에 ._ 이걸 붙어서 하나씩 더 생기더라구요. 이건 왜 그런건가요?

개발자

#프론트엔드

#리액트

#공부

#설치

답변 0

댓글 0

조회 44

6달 전 · 노원재 님의 답변 업데이트

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

개발자

#reactnative

#xcode

#reactnative-run-ios

답변 1

댓글 0

조회 432

7달 전 · 성지수 님의 새로운 답변

환경변수 주입 및 빌드(모노레포)

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 front(React), back(Node), common 패키지로 구성되어 있으며, 모노레포로 되어있음 - Dockerfile 스크립트에서는 build → run 순서로 실행되도록 구현되어 있음 - 서버 배포 시에는 하나의 포트만 사용해야 하므로 back(Node)에서 front의 정적 파일(index.html)을 실행해야 함 - Docker 빌드 시, front(webpack 빌드)와 back 둘 다 build 스크립트를 실행하고, 이미지 실행 시에는 back만 run 스크립트를 실행하여 back에서 front의 정적 파일을 실행해야 함 - 환경변수는 이미지 실행 시 docker-compose.yml의 env_file 속성을 사용해 외부에서 주입해야 함(환경변수가 바뀌는 상황이 있다면 .env 파일을 수정한 후 다시 빌드해야 합니다.) 예외 상황 Docker 빌드할 때 .env 파일을 포함하지 않고 run 스크립트를 실행(이미지 실행) 시 주입하는데, front 패키지에는 run 스크립트가 존재하지 않습니다. (back에서 front의 정적 파일을 실행) 즉, 환경변수가 주입되지 않고 있음 해결 방법 첫번째는 back에서 front의 dist 파일 호출 시 환경변수 객체를 만들어 value 값을 key 값으로 치환해서 함께 넘기고, index.html의 head에서 window 객체를 활용해 값을 받는 방법 하지만 이 방법은 개발자 도구에서 환경변수 값이 노출되고, window 객체를 활용하기 때문에 새로운 브라우저를 생성할 때마다 사이드 이펙트가 발생할 수 있음 두번째는 모노레포 root 패키지에서 prerun 스크립트로 front의 build 스크립트를 실행하는 방법 스크립트 -> "prerun": "lerna run build --parallel --scope @projectname/front --stream", 이 방법은 빌드를 두 번 실행하므로 자원을 많이 소모하지만, 예외 상황이 없는 것으로 보임 질문 받은 내용 Q. 환경변수를 바꾸는 상황이 존재할까요? A. 회사의 인프라 환경에 따라 다르지만, 포트나 IP가 변경될 수 있는 상황이 있음 예를 들어, 외부 서버에 요청을 보낼 경우 그 서버의 정보가 바뀌면 설정을 변경해야 하며, 다른 서버에 요청할 때 인증 정보를 입력해야 하는데, 토큰이나 사용자 패스워드 값이 변경될 경우에도 수정이 필요함 고민되는 부분 다른 해결 방법이나 비슷한 상황이 있다면 함께 논의하고 싶습니다. ㅎㅎ *프로젝트 구조 root ├── packages │ ├── back │ │ ├── package.json │ │ ├── index.ts │ │ ├── .babelrc │ │ └── ... │ ├── common │ ├── front │ │ ├── public │ │ │ └── index.html │ │ ├── package.json │ │ ├── src │ │ │ └── index.js │ │ ├── src │ │ ├── webpack.config.js │ │ └── ... ├── package.json ├── lerna.json ├── docker-compose.yml ├── Dockerfile * 프로젝트의 중요 정보는 제외했습니다.

개발자

#환경변수주입

#모노레포

#빌드

#node.js

#react

답변 1

댓글 0

조회 76

7달 전 · 백승훈 님의 새로운 답변

Next.js 사용 시 SyntaxError: Expected property name or '}' in JSON at position 61의 에러위치가 어딘지 어떻게 알수있나요?

"next-auth": "^5.0.0-beta.20" 사용 중인데 해당 에러를 검색해보니 JSON 형식의 문자열이 아니기 때문에 에러가 발생한 것이라고 하던데 에러가 일어난 코드의 위치를 정확히 말을 안해주니 어디서 어떻게 고쳐야할지 도통 모르겠습니다....ㅠㅠ 해당 에러를 야기하는 것으로 의심되는 파일의 코드와 에러메시지를 띄운 터미널을 캡처하여 첨부드립니다... 혹시 어디서 문제인지 힌트라도 주신다면 열심히 찾아 해결해보겠습니다!!!

개발자

#next-auth

#next.js

답변 1

댓글 0

조회 37

7달 전 · 익명 님의 질문

micro repo 세팅하면서 격은 문제(같은 문제 격는 분들 댁글)

이번 프로젝트에서 하나의 레포지토리에서 client, server, admin, common 4가지 패키지를 만들었습니다. client, server, admin은 common을 의존하도록 모노레포로 만들었고, client는 admin을 의존할 수 있게 micro로 만들었습니다. 간단한 패키지 설명: - client: 메뉴 헤더 등 구현, 페이지는 admin을 remote 해서 사용, React로 구현 - admin: 페이지에 나오는 콘텐츠의 전반적인 부분이 컴포넌트로 되어있음, React로 구현 - server: Node.js로 되어있고 실제 Spring 서버에서 준 데이터를 포맷하는 형태 - common: 공통 컴포넌트, 라벨 등 문제1: 다른 프로젝트에서 expose 되어있는 Next.js 프로젝트(scss로 스타일 구현)를 client에서 사용할 때 의존성 관련 오류가 생깁니다. client의 package.json에서 peerDependencies로 next를 설정해줘야 하는지, 양쪽 패키지(다른 프로젝트와 client)에서 Next.js와 React를 share 설정을 해야 되는지 잘 모르겠습니다. 여러 방법으로 시도는 해봤지만 의존성 오류나 Next.js에서 훅을 사용 못하는 오류 때문에 해결하지 못하고 있습니다. 문제2: 빌드 최적화를 위해 트리쉐이킹이나 코드 스플리팅을 해야 합니다. 웹팩에서 아래와 같이 코드 스플리팅을 하면 청크 파일 이름이 겹치기 때문에 filename을 해시값으로 설정해야 합니다. 여기서 문제가 생기는데, micro의 client처럼 remote 하는 부분에서 remote.js, app.js 청크가 필요하기 때문에 이름이 해시값으로 바뀌면 해당 청크를 찾을 수 없습니다. 또한 ModuleFederationPlugin이 빌드 시 자동으로 코드 스플리팅을 해준다는 이야기도 있는데, 이 부분은 정확하지 않습니다. 저와 같은 문제를 격고 있거나 해결하신 분들 같이 나눴으면 합니다.

개발자

#micro

#react

#monorepo

#nextjs

#build

답변 0

댓글 0

조회 26

8달 전 · 익명 님의 질문

제 코드, 뭐가 문제일까요?

https://github.com/get1092/Trade/blob/main/quest/53/53quest.html 완전 초짜여서 여기저기 구글링해보고 챗gpt도 써봤는데 더 이상은 무리네요.. 현재 cbt타입의 웹사이트를 만들고 있습니다. 원하는기능은 3개입니다. 1. 문제에 답을 입력하면 omr에도 연동되어서 같이 입력되게 되어야함 2. 답안josn파일(53anwer.json)을 토대로 문제를 다 풀면 채점해서 점수가 나오게함 + 오답은 omr에 빨간색으로 칠할것 답안 josn : https://github.com/get1092/Trade/blob/main/quest/53/53anwer.json 3. omr에 문제버튼 누르면 해당번호로 문제가 이동되는것 이거면 되는데 초보자인 저에게는 너무 어려웠나봅니다. 혹시 어떻게 하면 되는지 알 수 있을까요?

개발자

#웹사이트

답변 0

댓글 0

보충이 필요해요 3

조회 76

8달 전 · liberarion1945 님의 질문

리액트 종속성 에러

버전 호환성 때문에 라이브러리가 안깔리는데 리액트랑 해당 라이브러리와의 호환성은 어디서 확인할 수 있을까요? 일단 깃허브 package.json에 있는 peerdependency확인해봤을 때는17.0.1 이상이라고 나오는데 그 이상이거든요... 근데도 계속 에러 메세지보면 리액트 18.3.1 버전이 필요하다고 하는데 지금 리액트 버전에 호환이되는 라이브러리 버전을 설치하고 싶어서요. 헤당 정보는 어디서 찾을 수 있을지 알려주시면 감사하겠습니다.

개발자

#react

#expo

#dependency

#react-native-maps

답변 0

댓글 0

조회 22

9달 전 · 김하늘 님의 새로운 답변

Next.js axios patch메서드 cors error

현재 마이스터고 재학 중인 2학년 학생입니다. 학교에서 Next.js를 사용하여서 서비스를 만드는 프로젝트를 하고있습니다 이 프로젝트 중 서버와의 통신을 위한 axios를 customAxios로 만들었고 기존 put메서드로 수정 api를 호출했을 당시엔 요청이 갔는데 patch메서드로 하니 CORS에러가 계속 뜹니다. velog와 wrtn등을 이용하여 withCredentials: true도 줘보고 package.json에 "proxy"도 줘봤는데 계속 CORS에러가 뜨네요.. 혹시 몰라서 postman으로 호출했을때는 정상적으로 호출이 가는데 이 경우는 무엇이 문제일까요? 도와주시면 감사하겠습니다.. ㅠㅠ

개발자

#corserror

#next.js

#react

#frontend

답변 1

댓글 0

조회 82

9달 전 · 최용빈 님의 답변 업데이트

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

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

개발자

#파이썬

#python

답변 2

댓글 1

보충이 필요해요 2

조회 333

10달 전 · 정창록 님의 질문

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

개발자

#next.js

#fluent-ffmpeg

#mp4

답변 0

댓글 0

조회 87

10달 전 · 백승훈 님의 답변 업데이트

백엔드에서 데이터가공도 하나요?

저는 주니어개발자입니다 제 방식은 백엔드는 로직처리나 쿼리결과를 프론트로 보내고 프론트에서 데이터를 화면에 보이기쉽게 가공해서 보이는방식으로 하는데 지금다니는회사 프로젝트에서 이중중첩반복문을 사용해서 json형태로 만들고 화면에선 그대로 보여주는 방식을 하라고합니다 이중중첩반복문 자체도 좋지않을뿐더러 데이터가공을 백엔드에서 할때 데이터가많으면 서버부하가 나지않나요? 그리고 프론트에서 객체리스트로 2차원배열형태를 사용하는걸 보통 개발자들은 좋아하지않나요? 특히 그래프나 통계를 낼때 데이터들을 분류해서 꺼내는작업을하다보면 객체리스트형태로 할수밖에없던데 이렇게하지말고 데이터를 동적(데이터값이 바뀌어도 수정할필요없이)이 아닌 정해진 변수로 값을 꺼내도록 하라는데 이게맞나요..?

개발자

#백엔드개발

답변 1

댓글 0

조회 168

10달 전 · 남 재민 님의 새로운 답변

리액트 개발자님들 도와주세여

안녕하세요 웹퍼블리셔로 일을 하고 있는데 요즘 하도 리액트 뷰를 원하는곳이 많아서 리액트 공부를 하거있슺니다 깃 데스크 탑으로 커밋하는데 집에서 할때랑 회사에서 할때랑 package lock json 셋팅이 달라져서 그런지 npm start가 안되는데 레포지를 회사랑 집 각각 해둬야하는걸까여??

개발자

#react

#웹퍼블리셔

#리액트

#프론트엔드

답변 4

댓글 0

조회 669

10달 전 · 조건희 님의 질문

react native로 dart api를 사용하고 싶습니다.

react natvie로 dart api를 활용한 미니프로젝트를 진행하려고 합니다. 그런데 api 사용을 위해서 각 기업의 고유번호를 받아오는 과정에서 api를 호출하면 zip파일을 받게됩니다. 여기서 문제입니다. 그동안 json으로만 받아봐서 zip파일은 경험이 없습니다. react native에서 api호출시 zip파일로 받아서 저장하는 방법이 있을까요? 서버없이 구현하고 싶습니다. 제가 해보니 axios.get으로 받을경우 CORS오류가 발생됬습니다.. react 혹은 react native로 api 호출시 zip파일을 받아서 저장하는 방법을 알고계신다면 알려주시길 부탁드리겠습니다.

개발자

#react

#react-native

#api호출

#zip

답변 0

댓글 0

조회 48

일 년 전 · 소지우 님의 답변 업데이트

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

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

개발자

#프론트엔드

#package.json

#npm

#초보-공부

답변 2

댓글 1

조회 121

일 년 전 · 안희수 님의 답변 업데이트

npm과 package.json에 대해 질문있습니다.

안녕하세요 코딩 공부를 하고 있는 초보자 입니다 공부를 하다가 npm에 대해 궁금한점이 있어 질문을 드립니다. 1. npm init -y 이러한 명렁어를 작성하던데 이건 무슨 명령어인지 쉽게 설명부탁드리겠습니다. 다양한 라이브러리? 뭐 이러한 것들을 사용하기 위해 사용하는 건가요? 2. 설치를 하면 package.json 이라는 파일이 생성되는데 이건 어떤 파일인지 궁금합니다. 3. package.json 안에 보면 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "node-sass": "node-sass", "sass": "node-sass styles/main.scss dest/style.css" }, 이러한 코드가 나오고 npm run node-sass 이러한 명령어도 사용하는데 이건 뭔지 궁금합니다. 지금까지는 html, css, js 를 공부할때 어떠한 것을 설치하지않고 그냥 각 파일만 만들어 코드작성을 한것뿐인데 이러한 것들을 설치하거나 하는 이유도 궁금합니다. 아무래도 초보자여서 구글링을 해서 찾아보고 하지만 설명들이 너무 어렵거나 헷갈려서 쉽게 알려주시면 감사하겠습니다.

개발자

#프론트엔드

#npm

#package.json

#초보-공부

답변 1

댓글 0

조회 88

일 년 전 · 민태호 님의 댓글 업데이트

앱(Flutter)에서 JSON데이터를 검색하려고 합니다

안녕하세요 Flutter를 이용하여 식단 및 체성분 관리 앱을 개발 중인 대학생입니다! json형식의 식품영양성분 공공데이터 안에서 사용자가 입력한 식품명 검색어를 기준으로 데이터를 불러오려고 합니다. DB는 Google Firebase를 사용 중이며, 위와 같은 목적으로 데이터를 사용 할 때에 적합하지 않다면 다른 DB를 사용 할 의향도 있습니다. 사용자의 검색어로 시작하는 특정 데이터만이 아니라, 검색어를 "포함"하는 데이터도 불러오고 싶습니다. 현재 어느 정도 그려 본 방법입니다. 영양성분 JSON 다운로드 ↓ Python을 이용하여 필요한 데이터만 가공 ↓ Firebase Realtime Database / Storage에 저장 ↓ 저장된 JSON을 API 호출을 통해 String으로 불러옴 / 앱 내부에 .json 파일로 저장 ↓ Map으로 변환 후 캐싱 ↓ 사용자가 검색어 입력 ↓ 검색어를 포함하는 데이터만 별도 리스트에 추가 여기서 데이터를 불러오는 과정에서 필터링을 거치지 않는 이유는 Firebase Realtime Database에서는 검색어를 "포함"하는 것이 아닌, 사전 순으로 검색어 기준 뒤에 있는 데이터만 가능하다고 합니다.. 그래서 결국 JSON파일로 직접 사용하기로 했습니다 혹시나 저의 부족함이 보이시는 분들의 조언과 피드백을 듣고 싶습니다! 더 나은 방법이 있다면 무차별 폭격 및 질문 부탁드립니다! 미리 감사드립니다 (_ _)

개발자

#json

#flutter

#query

#쿼리

#data

답변 1

댓글 1

조회 111

일 년 전 · 권혁진 님의 답변 업데이트

리액트에서의 오픈그래프 적용?

안녕하세요. 현재 리액트를 활용해서 대학축제에서 사용할 채팅앱을 개발하고 있습니다. 저희 앱에서는 학교 축제 정보(몇시에 어떤 행사가 있는지)와 학우 간 채팅 기능을 제공하는데요. 카카오톡 채팅방에 링크를 보내면 카드형태로 보여주는 링크 미리보기 기능을 저희 앱에도 구현하고자 합니다. 더욱 구체적으로 말씀드리자면, 서버로부터 받아온 대학 축제정보 게시물이 여러개가 있는데, 이 모든 게시물들에 오픈그래프를 적용하고 싶습니다. 그래서 채팅방에서 공유할 때 링크 미리보기가 출력되게 하고 싶습니다. 문제는 리액트 특성 상 클라이언트에서 렌더링하기 때문에 적용이 어렵다는 것입니다. 1. axios.get('festival/1')을 호출하여 스프링 서버에서 축제 정보를 JSON으로 받아온다. 2. 리액트에서 받아온 JSON을 바탕으로 렌더링한다. 이런 상황에서 오픈그래프를 적용할 수 있는 방법이 있을까요?

개발자

#react

답변 2

댓글 0

조회 127

일 년 전 · 강병진 님의 새로운 답변

패키지 잠금 파일 관련 질문이 있습니다

package-lock.json, yarn-lock.json의 경우 merge를 할때 conflict가 나면 어떻게 해야 할까요? 그냥 삭제하면 안된다고 들은 것 같아서 일일이 수정을 해주었는데 생각보다 시간이 오래걸려서 좋은 해결방법이 있다면 알고 싶습니다!!

개발자

#패키지잠금파일

답변 1

댓글 0

조회 260

일 년 전 · 허니 님의 새로운 답변

리액트 로그인질문..

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같은거에 요청보내는 로직을 작성해서, 토큰만보내서 유효한 토큰인지 아닌지, 유효하지않은토큰이면 에러를 리턴시켜준다던가, 리프레쉬토큰을 발급시켜서 연장시켜준다던가 이런식으로하면될까요? 마지막으로 질문이 좀 많고 중구난방인데 죄송스럽고 조심스럽네요..

개발자

#react

#login

#register

#local-storage

#jwt

답변 1

댓글 0

조회 108

일 년 전 · cozy 님의 답변 업데이트

앱에서 공공데이터를 이용하려고 할 때 api가 아닌 json을 이용하는게 좋을까요?

졸업 프로젝트로 식단, 체성분 관리 앱을 개발하고 있는 대학생입니다. "전국통합식품영양성분정보표준데이터"를 이용하여 사용자가 섭취한 식품의 영양소를 제공하려고 합니다. api를 사용하면 사용자가 식품 이름을 검색할 때마다 요청을 보내야 하므로 요청이 많아질 경우 제한에 걸리고, api서버 속도의 영향도 받고, 위와 같은 이유로 api요청 보다는 json 데이터를 다운받아서 DB에 저장하고 사용하는 방식을 생각 중입니다. 비슷한 경우에는 어떻게 처리하는지 알고 싶습니다! 조언 부탁드리겠습니다!

개발자

#공공데이터

#데이터

#api

#openapi

#restapi

답변 1

댓글 1

조회 100

일 년 전 · ㄱㅎㅁ 님의 새로운 댓글

관계형 디비 api설계와 프론트엔드에서 처리

관계형 데이터베이스를 사용중인데 총 10개의 칼럼이있는 테이블1과 총 13개의 칼럼이있는 테이블2 를 조인해서 응답해주는 API가 있는데요, 화면에서 필요한 칼럼은 테이블1에서 3개, 테이블2에서 5개 입니다. 이럴 때 테이블2개를 조인해서 카8개를 가진 json으로 리턴해주고 있는데요, 프론트엔드에서 테이블1에 해당하는 타입과, 테이블2에 해당하는 타입을 이미 지정해 놓아서 해당 방식으로 리턴해주면 조인을 하는 API마다 새로운 타입을 정의해야되서 조금 불편한것같다 라는 의견이 있었습니다. 보통 관계형 데이터베이스를 사용해서 조인 후 리턴하는 경우 api는 어떻게 설계하는게 좋을까요?

개발자

#관계형

#rdbms

#api

답변 1

댓글 2

조회 44

일 년 전 · 다혜 님의 질문

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

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

개발자

#react-native

#spring-boot

답변 0

댓글 0

추천해요 1

보충이 필요해요 1

조회 129

일 년 전 · 이동희동이 님의 질문

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

개발자

#next.js

#server-action

답변 0

댓글 0

조회 511

일 년 전 · 이창협 님의 새로운 댓글

aws-rds mysql 속도

안녕하세요 로컬환경에서 expressjs로 json 형태의 임시db를 만들어서 게시판을 만들었는데요. 이땐 속도도 빠르고 문제가 없었는데 ec2로 서버를 옮기고 rds에 mysql로 db를 옮겼는데요. 페이지이동 할때 10개씩 끊어서 가져오는데 데이터 가져오는데 속도가 엄청 느리더라구요. aws에서 사용하는 스펙이 느려서 그런걸까요 아니면 제가 설정을 잘못해서 그런걸까요 부끄러운코드지만 url도 올려놓겠습니다. http://18.116.200.216:3000/

개발자

#react

#expressjs

#rds

#ec2

#mysql

답변 2

댓글 5

조회 110

일 년 전 · 익명 님의 질문 업데이트

라이브러리 배포중 궁금한 것이 있습니다.

package.json에서 "main": "./src/index.ts"로 설정하면 ./src/index.ts가 같이 npm에 배포됩니다. 하지만 사진에서 보시는 toss의 slash 라이브러리는 ./src/index.ts가 같이 배포되지 않습니다. 어떤 차이가 있는걸까요? https://github.com/toss/slash/blob/7c8d8a3/packages/react/react/package.json

개발자

#라이브러리

#package.json

#npm

답변 0

댓글 0

조회 36

일 년 전 · 백승훈 님의 답변 업데이트

React json load error

Data.json을 아래와 같이 설정하고 [ {"id": 1, "name": "kim", "age": 30}, {"id": 2, "name": "lee", "age": 25}, {"id": 3, "name": "park", "age": 35} ] 리액트 app.js에서 json을 불러 출력하려고 하면 아래와 같은 에러가 나와요 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON 아무리 검색해도 해결법을 못찾겠어서 글 올립니다ㅠㅠ 아래 스크립트는 app.js 작성한 내용입니다 ㅠ

개발자

#react

#json

#promise

#javascript

답변 2

댓글 0

조회 171

일 년 전 · 백승훈 님의 댓글 업데이트

Nginx, Express 연결 후 프론트에서 이미지 파일 전송시 408 Error

안녕하세요. 혼자 해보던 도중 도저히 해결이 되지 않아 문의드립니다. - 서버 설계 - 현재 저는 Express앱을 AWS EC2 인스턴스에 NGINX를 설치한 후 proxy_pass에 express앱이 구동중인 port를 연결하여 사용하고 있습니다. 이 과정에서 ALB를 통해 ACM을 연동하여 HTTPS 프로토콜이 사용가능하게 설정까지 하였습니다. 이미지 파일업로드는 multer-s3를 이용해 s3버킷과 연결하여 업로드 되는 방식입니다. - 문제상황 - 로그인과 기본적인 CRUD는 문제없이 되는데, 프론트에서 이미지 파일(multipart/form-data)을 서버로 전송하면 504 오류가 출력됩니다. 1. nginx의 access.log에는 해당 uri의 상태코드가 408이라 출력됩니다. 2. nginx의 error.log에는 readv() failed (104: Connection reset by peer) while reading upstream가 출력됩니다. 3. 개발자도구의 console창에 'server의 이미지 업로드 uri' from origin '프론트 도메인'이 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 이라 출력됩니다. 위 오류를 해결해보기 위해 시도해본 것은 아래와 같습니다 1. NGINX의 proxy_connect_timeout, proxy_send_timeout, proxy_read_timeout, send_timeout을 600으로 설정, client_max_body_size를 500M으로 설정 2. ALB의 유휴제한시간 600 설정 3. Express 앱에 app.set('trust proxy', true); 추가 4. Express-session에 app.use(session({proxy:true})) 추가 5. body-parser에 app.use(bodyParser.json({limit: '1000mb'})); 추가 및 app.use(bodyParser.urlencoded({limit: '1000mb', extended: true})); 추가 6. 업로드되는 uri의 미들웨어에 (req, res, next) => { req.setTimeout(1000000); next(); } 추가 7. upload.single()미들웨어를 주석처리 후 req.file 출력 시도 아직도 해결을 하지 못하였습니다 ㅜㅜ 연휴임에도 도와주시면 너무 감사하겠습니다..

개발자

#aws

#alb

#nginx

#express

#ec2

답변 2

댓글 4

조회 284

일 년 전 · 익명 님의 질문

[node.js] 세션을 이용한 로그인 구현 중 브라우저 쿠키의 maxAge 초기화 안 되는 문제 발생

Node.js(v18.17.0) + TypeScript로 개발을 진행하고 있습니다. express 로 서버를 구축했고, express-session , session-file-store 라이브러리를 사용해서 로그인 기능을 구현했습니다. 제가 원하는 것은 세션 만료 시간을 연장하는 기능을 만드는 것인데... 서버에서는 세션 쿠키 만료 시간이 재설정(초기화)가 되는데 브라우저에 저장된 쿠키 만료 시간은 그대로인 상태라 연장이 되지 않습니다. 처음 제 코드는 이렇습니다. ```ts export const extendSession = async (req: Request, res: Response) => { req.session.resetMaxAge(); res.json({ success: true, message: '세션 연장 성공', expiredTime: req.session.cookie.expires.getTime(), }); }; ``` 이런 식으로 resetMaxAge() 함수를 통해서 만료 시간을 연장할 수 있을거라 생각했습니다. (트라이캐치문은 생략하였습니다.) 콘솔에 값을 확인해봤을 때에도 연장이 잘 된 것으로 보이는데 브라우저에 저장된 쿠키의 만료 시간을 확인해보면 최초의 쿠키 값 그대로였습니다. 이를 해결하기 위해서 만료 시간을 따로 정해서 줘보기도 했습니다. `req.session.cookie.maxAge = 3600000;` 하지만 마찬가지로 세션 쿠키의 만료 시간은 바뀌지만 브라우저에 저장된 쿠키의 expires가 변하지 않았습니다. 따로 헤더를 줘보아도 새로운 쿠키가 생성될 뿐 해결책이 되지 않았습니다. `res.setHeader('Set-Cookie', 'Max-Age=3600000')` express-session 미들웨어가 자동으로 set-cookie 헤더를 설정해주어서 제가 여기에 어떻게 접근할 수 있을지 모르겠습니다. 브라우저의 쿠키가 초기화 적용을 받지 못하는 것이 문제인 것 같은데... 원인은 대충 알 것 같으면서 해결책을 모르겠습니다. session 설정은 이렇습니다! ```ts app.use( session({ secret: process.env.SESSION_SECRET_KEY, resave: false, saveUninitialized: false, cookie: { sameSite: 'lax', secure: false, httpOnly: true, maxAge: 1000 * 60 * 5, }, store: new FileStore({ reapInterval: 3000, }), }), ); ```

개발자

#node.js

#express

#express-session

#session

#cookie

답변 0

댓글 0

조회 183