#url

앱 배포시 백엔드 서버와의 간극 해결방법

안녕하세요! 장고로 백엔드 서버를 개발하고 RN로 프론트엔드 앱을 개발하고 있습니다..! 프로젝트 초반이라 요구 사항이 자주 변경되어서 테이블을 재설계하거나 api 응답 스키마(serializer)를 수정하는 상황이 빈번하게 발생하고 있습니다. 백엔드 서버는 배포시에 바로 반영이 되지만, 앱 배포의 경우 앱스토어의 심사 + 자동 업데이트로 인해 2~3일 정도의 간극이 발생합니다. 이로 인해 백엔드 응답 스키마가 앱의 old 버전과 일치하지 않아 문제가 발생합니다 ㅠㅠ 현업에서는 이런 문제를 사전에 어떻게 방지하는지, 배포 파이프라인을 어떻게 구성하는지 궁금합니다..! 제가 조사한 바로는 base_url에 버전을 표시하거나 (../api/v1/…), http header에 버전을 명시해서 라우팅을 해주는 것으로 알고 있는데요. 요구사항에 대한 변화가 잦다 보니 더 좋은 방법이 있을까 싶어거 여쭤봅니다..! 읽어주셔서 감사합니다😆

SIN88🥇️SIN88.COM | LINK VÀO NHÀ CÁI SIN88 04/2025

SIN88 là nhà cái uy tín hàng đầu trong lĩnh vực cá cược trực tuyến tại Việt Nam. Với giấy phép hoạt động hợp pháp, SIN88 mang đến môi trường giải trí an toàn, minh bạch. Người chơi có thể tham gia cá độ thể thao, casino online, game slot và nhiều sản phẩm hấp dẫn khác. Giao diện thân thiện, hỗ trợ 24/7 và khuyến mãi lớn là điểm mạnh giúp SIN88 giữ vững vị thế trong thị trường cá cược. Địa Chỉ: 187 Ng. 141 Giáp Nhị, Giáp Nhị, Hoàng Mai, Hà Nội, Việt Nam Phone: 0983 721 968 Email: sin88ho.com@gmail.com #sin88 #sin88hocom #trangchusin88 #dangnhapsin88 #linkvaosin88 Website: https://sin88ho.com/ Social: https://mxoemu.info/forum/member.php?action=profile&uid=20817 https://sin88hocom.yurls.net/en/page/1196371 https://linkfly.to/sin88hocom https://the7thcontinent.seriouspoulp.com/en/user/21740/sin88hocom https://leasedadspace.com/members/sin88hocom/ https://www.nu6i-bg-net.com/user/sin88hocom/ http://linoit.com/users/sin88hocom/canvases/SIN88 https://www.theyeshivaworld.com/coffeeroom/users/sin88hocom https://tawk.to/sin88hocom

RESTful 어디까지 지켜야 할까

특정 article을 전체 재정렬할 때 어떤 URL 형태를 선호하시나요? 1. PUT /articles RESTful을 엄격하게 따른다. URL에 동사는 넣지 않는다. HTTP Method를 PUT 또는 PATCH로 두고 바디를 통해 재정렬을 로직을 표현한다. 2. PUT /articles/reorder RESTful 규칙에 조금 어긋나더라도 직관적인게 최고다.

Oauth2(ios,android)할 때 스프링부트에서 할일

웹으로 구현했을때는 리다이렉트 url등으로 백단에서 인증 받아서 진행 했었는데 네이티브 앱에서의 Oauth2 Docs를 보고있는데 앱단에서 모든 처리를 하는 걸로 보여서요 그럼 그 이후에 그 사람의 프로필정보나 아이디만 보내면 백엔드에서 그걸로 로그인이나 회원가입이 되는게 맞나요? 그렇게 되면 로그인이나 회원가입 api url만 알고있으면 postman으로 아무 닉네임이나 보내면 회원가입이나 로그인이 될 것 같은데 보통 어떤 방식으로 하는지 알고싶습니다.

혹시 랜딩 페이지를 바꾸게 되면

초기 URL로 진입했을 때 랜딩페이지로 가게되는데 랜딩페이지를 변경하게 되면 seo 자체 순위나 이러한 seo 데이터가 초기화 되는건가요? 랜딩 페이지에 데이터가(접속자 수 이러한 것들) 그래서 많은 플랫폼 회사들이 랜딩페이지를 잘 바꾸지 않나 해서요? 답변해주시면 정말 감사드리겠습니다.! 회사가 분기마다 랜딩페이지를 변경하는데 이해가 안가서 여쭈어 봅니다!

게시글 이미지 업로드를 구현하는데 궁금한 점이 있습니다.

velog를 참고하여 Spring + Vue를 이용하여 마크 다운 기반 게시글을 구현하고 있습니다.. 글을 쓰는 도중에 이미지를 올리면 s3에서 url를 반환하여, 이것을 통째로 Post 테이블 Content 필드에 저장하여 순서를 보장하는 식으로 진행하고 있습니다. 로직 흐름은 이렇습니다. 1. 사용자가 이미지를 올린다면, 클라이언트에서 글쓰기 버튼을 눌렀을 때 미리 만들어 놓은 UUID와 이미지를 서버로 보낸다. 2. 서버에서는 s3객체에 임시 저장 여부를 확인하는 isTemp를 태그를 넣어서 서버를 걸쳐서 S3에 쏜다. 3. S3에서 객체를 찾아서 key값과 클라이언트에서 보낸 uuid를 Image 테이블에 저장해서 Post와 간접적으로 연관 관계를 맺는다. 4. 글쓰기를 누른다면 내용과 UUID를 보내서 UUID를 Post의 primary key로 사용하고, UUID 기반으로 Image 테이블에서 key들을 갖고 와서 S3 객체의 isTemp 태그를 false로 바꾼다. 4-1 . 뒤로 가기나 임시 저장을 눌렀을 때는 isTemp를 true로 설정하고 저장한다. 5. 30일이 지날 때마다, Post에 있는 isTemp를 통해 임시 여부를 확인하여 임시 저장된 글을 삭제하고, S3에서는 수명 주기를 설정하여 태그를 기반으로 true인 이미지들을 삭제한다. 객체를 삭제하는 이유는 불필요한 데이터가 공간을 차지하는 것이 별로라고 판단했습니다. UUID는 글을 다 쓰기도 전에 서버로 쏘기 때문에, 어떤 게시글에서 쓰였는지 확인하기 위해서 사용했습니다. 성능이나 용량 면에서 안 좋다고 하지만, 이는 데이터를 넣어 놓고 조회를 하여 성능을 확인하였고 현재 프로젝트 크기를 생각했을 때 접목해도 상관없을 것 같아 넣었습니다. 하지만 이런 식으로 진행하니, 만약 사용자가 중간에 이미지 링크를 삭제한다면? 이라는 시나리오를 생각했을 때 이를 대처할 방도가 떠오르지 않습니다. 다른 분들은 어떤 식으로 처리했는지, 제가 너무 어렵게 생각하고 짜는지 궁금합니다.

Next 14에서 새 탭을 링크로 열기 이후 뒤로가기 시 메인으로 이동하고 싶은데 방법을 모르겠어요.

Next 14에서 새 탭을 링크로 열기 이후 UI 헤더에 커스텀한 뒤로가기 버튼 클릭 시 history가 없어 router.back()이 작동하지 않네요. 새탭에서 url로 검색 시에도 뒤로가기 시 메인 페이지로 이동시키고 싶은데 방법을 모르겠어요. 예를 들면 카카오웹툰처럼 페이지 이동을 하고 싶습니다. 도와주세요 🙏

react 모바일웹 헤더가 Safari 상단 url 바 가림 현상

React / typescript / tailwindcss 헤더를 fixed / sticky로 고정을 해서 크롬에서는 잘 적용됬는데 아이폰 safari 브라우저에서 설정 - 단일탭으로 하고 들어가면 첨부파일처럼 상단 URL 바를 제 헤더가 가려버리는 현상이 나옵니다. index.html에 아래 속성도 추가된 상태입니다ㅠㅠ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> 저와 비슷한 현상인 분 계실까요??

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

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

NextJs 확장 fetch로 서버 컴포넌트에서 동적으로 api를 받는 방법

안녕하세요. 선배 개발자 선생님들. 오늘도 한 단계 성장하기 위해 질문을 남겨봅니다. 저는 NextJs, App router 방식으로 코드를 구현중이며, 서버 상태는 React-Query로 상태값을 관리하고 있었습니다. 왜 리액트 쿼리를 사용했는가? why? 1. Optimistic update, 무한스크롤에 대해 공부하고 적용해보고 싶었습니다. 2. 클라이언트 상태, 서버 상태를 나눈다는 개념이 너무 좋아서 서버 상태는 React-Query로 다뤘습니다. 3. statleTime, gcTime을 조정하여 캐싱기능이 좋았습니다. 갑자기 문득 나는 NextJS를 잘 쓰고 있는건가? 리액트랑 폴더 구조 말고는 다른게 없는거 아닌가? 라는 생각이 들었고, NextJs의 기능을 최대한 활용하고 나머지 불편한 부분이 생긴다면 외부 라이브러리를 사용하자! 라는 생각이 들었습니다. 그래서 저는 React-Query로 상태를 관리하던걸 NextJs의 확장 fetch로 바꿀려고 합니다. Optimistic update, 무한스크롤 기능을 제외하고 나머지 모든 서버 상태는 확장 fetch로 바꿀려고 합니다. 페이지네이션 페이지네이션 처럼 사용자와 상호 작용하는 부분, 즉 동적으로 데이터를 받아오게 하기 위해 url을 변경한 뒤, [id]/page.tsx에서 param로 받던지 혹은 header()를 통해 params를 받아서 처리를 할 수 있다고 생각하고, 저는 header()로 params를 받아서 처리를 했습니다. 모달에서의 페이지네이션 그런데 문제는 모달을 띄우고, 모달 내부에서 페이지네이션이 있는 경우 어떻게 데이터를 동적으로 받아오는지 고민을 해봐도 방법이 없는 것 같습니다. 1. 모달에서 다음 페이지 클릭시 url을 변경한다. -> 안해봤지만 동작을 할 수 있더라도 뭔가 느낌적으로 아닌 것 같습니다. 2. 클라이언트 컴포넌트에서 상태값을 서버 컴포넌트로 전달한다 -> 불가능 궁금한 점 1. 모달 내부에서 페이지네이션을 처리할때 url을 변경해서 서버 컴포넌트에서 확장 fetch로 데이터를 관리하는 게 적절할까요? 2. 모달 내부에서는 페이지네이션을 처리할 때는 react-query로 데이터를 관리하는 걸 확장 fetch로 바꿀 수 없는 건가요?? 바꿀 필요가 없는 건가요? 3. 더 좋은 방법이 있는 건가요?

웹폰트 나눔스퀘어네오 윈도우 크롬 적용안되는 현상

React 프로젝트이며, 웹폰트로 나눔스퀘어네오 cdn방식으로 가져오고 있습니다. 맥에서는 잘 적용되는데, 윈도우 크롬 콘솔에 에러 뜨고 네트워크탭 - 폰트 확인 시 404가 뜨는데, 혹시 저와 같은 현상인 분 있으신가요?? 콘솔 에러 OTS parsing error: Unable to instantiate font face from font data. ``` @font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff') format('woff'); font-weight: normal; font-style: normal; } ``` 나눔스퀘어네오 폰트 https://noonnu.cc/font_page/1053

리액트네이티브 웹뷰에서 카카오 로그인 관련 질문드려요

안녕하세요. 웹 개발자여서 리액트 네이티브 cli로 웹뷰만 했을 뿐 아무것도 모릅니다.ㅜㅜ 원인: 웹뷰에서 카카오 로그인을 붙였습니다. 하지만 안드로이드에서 카카오 로그인이 되지 않습니다. 이유를 찾아보니 카카오 개발자 문서에 https://developers.kakao.com/docs/latest/ko/javascript/hybrid 안드로이드는 따로 뭘 해줘야 한다고 합니다. 'JavaScript SDK가 카카오톡 실행을 위한 Intent URI를 생성해 호출합니다. 웹뷰에서는 WebViewClient#shouldOverrideUrlLoading 메서드를 오버라이딩(Override)하여 Intent를 파싱(Parsing)하고, 해당 Activity를 실행해야 합니다.' 하지만 저것을 어디에 오바라이딩 해야하는건지 전혀 모르겠습니다. 도와주세요

[프론드엔드] 이력서, 포트폴리오 피드백 받고싶습니다.

대학 졸업 후 조교로 일하다 부트캠프 수료하고 이제 취업을 준비하고 있습니다. 학과가 정보통신공학이라 제로베이스 비전공자는 아닙니다. 처음에는 노션으로 이력서와 포트폴리오를 통합하여 되는대로 제출하다가 계속되는 불합격에 분리했습니다. 이력서는 꼭 필요하다고 생각되는 항목들을 한눈에 볼 수 있도록 간단하게 작성하였고, 자기소개서를 추가했습니다. 포트폴리오는 노션 포트폴리오로는 부족하다 생각해서 개인 포트폴리오 사이트를 제작했습니다. 현직자의 시선으로 제 이력서와 포트폴리오가 경쟁력이 있는지, 선배님들께 피드백을 받고싶습니다. <이력서 URL> https://drive.google.com/file/d/19bKofHn2hF8KYDQxJiPUbP8CQE6SDiBh/view?usp=drive_link/ <포트폴리오 URL> https://ksyee.netlify.app/

Nextjs 탭 기능 질문

Next 14 앱라우터 버전과 react-query를 사용하고 있습니다. 게시물 목록을 보여주는 페이지를 만들고 있고 게시물의 카테고리를 필터링 해주는 탭을 만드려고 하는데요. 기존에 React에서 할땐 searchparams 값을 넘겨주는 식으로 필터링이 됐는데 next에서는 url을 바꾸는 식으로 하려면 페이지 이동을 해야 하는 것 같아서 이걸 페러렐 라우트로 처리를 해야할지 url 처리 없이 가야할지 고민이 됩니다 ㅠㅠ

서버에서 이미지 반환시 s3 url과 base64중 어느것이 나을까요?

서버에서 이미지 반환시 s3에 저장된 이미지의 url을 반환하는 방법을 주로 사용했습니다. 그런데 이미지가 10개라면 클라이언트에서 총 11번 리퀘스트를 보내야 하니 성능이나 비용에 문제가 생길 수 있다, 그래서 파일 크기가 작은 이미지를 여러개 반환하는 경우, base64로 인코딩해서 api응답에 한번에 보내는게 낫다는 이야기를 들었는데 현직자 분들은 어떤 방법이 더 좋다고 생각하시는지 궁금합니다.

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

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

오픈 api 사용 할 때 cors 에러 어떻게 해결하시나요?

공공데이터 포털에서 오픈 api를 사용하고 있는데 cors 에러가 떠서 해결하고 싶은데, 직접 서버를 건드릴 수 없어서 어떻게 해결해야 할지 모르겠습니다..ㅠㅠ 배포 이후에도 그대로 동작할 수 있는 방법을 찾고 있습니다! 오류 내용 : Access to fetch at '<endpoint url>' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 현재 아래 사이트를 통해 막아보긴 했는데 중간중간 cors에러가 계속 뜨더라구요 https://allorigins.win/

대규모 사이트의 데이터 수집 sdk를 만들어야하는데...

합쳐서 수십~수백만 사용자가 있는 웹사이트의 회원/비회원 데이터를 수집하는 sdk를 만들어야합니다.. 기본적인 브라우저 정보, 회원정보 부터 접속한 url, 체류시간, utm과 같은 로그까지 수집해야하는게 요구사항입니다. 단순 브라우저 및 회원 데이터의 경우 단발성으로 저장하니 상관없을꺼같은데 로그의 경우 페이지 이동 혹은 매 접속마다 api로 요청하여 db에 저장하는 방법인지... 모르겠네요 😭 어떤식으로 접근해야하는지 감이안와 이렇게 질문 작성합니다 ! 읽어주셔서 감사합니다🙇‍♂️

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

SpringBoot와 MySQL 도커 배포 과정에서 계속 오류가 발생합니다.

선배님들 안녕하십니까? 제목 그대로 스프링부트와 MySQL 배포 과정에서 HikariPool-1 - Exception during pool initialization. server-1 | server-1 | java.sql.SQLNonTransientConnectionException: Could not create connection to database server. Attempted reconnect 3 times. Giving up. 위와 같은 오류가 발생합니다. MySQL은 정상적으로 배포가 되어서 접근이 가능한 것을 확인했습니다. 하지만, SpringBoot의 경우, 계속 DB와 연결이 실패합니다. 아래는 SpringBoot의 application.properties 파일과 docker-compose.yml 파일입니다. 한 수 가르쳐주셨으면 합니다. 감사합니다. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=${SPRING_DATASOURCE_URL} spring.datasource.username=${SPRING_DATASOURCE_USERNAME} spring.datasource.password=${SPRING_DATASOURCE_PASSWORD} spring.jpa.show-sql=true spring.jpa.hibernate.ddl-auto=update spring.jpa.properties.hibernate.format_sql=true

next.js에서 브라우저에 있는 탭기능을 구현하려고 합니다.

next.js로 구성된 사이트에서 특정 링크를 클릭해서 새로운 url로 이동되면 새로운 url로 이동됨과 동시에 브라우저 탭처럼 새로운 탭이 생성됩니다. 그리고 다른 url로 이동하면 새로운 탭이 생성 됩니다. 그리고 기존의 탭에는 새로운 url로 변경하기전에 있는 데이터들과 상태값이 유지되어 있고, 사용자가 해당 탭을 클릭시에 기존에 하던 화면을 그대로 보여줘야 합니다. 간단하게 이야기해서 웹사이트내에 크롬 상단 브라우저탭 기능을 만들려고합니다. 이것저것 시도해보고 있는데 next.js의 url routing를 사용하면서 기존의 상태값을 유지하기가 쉽지가 않네요 혹시 좋은 조언이 있으면 구하고 싶습니다. 감사합니다!

RCE 보안공격 질문입니다!

안녕하세요 백엔드 취업 준비생입니다 최근 프로젝트를 진행중에 배포서버를 구성해봤습니다 aws ec2에 docker compose로 nginx, WAS, redis를 컨테이너화해 동작시키고, nginx에 의해 3개의 WAS가 로드밸런싱 된 상태입니다(WAS 는 sping boot+spring security+JPA를 사용중입니다) route 53으로 Gabia에서 구매한 도메인을 연결해둬 도메인 접근을 허용해둔 상태입니다 배포 서버가 정상적으로 동작하는지 확인하기 위해 log를 보고 있었는데 이상한 요청이 보였습니다 요청 url에 `chmod 777`이라던지 `rm -rf`가 보여서 식겁해서 일단 서버는 내려뒀습니다 알아보니 RCE라는 공격 방식 같더라고요 그래서 RCE를 막는 최선의 방법이 무엇인지 궁금합니다 또 통상적으로 알고있으면 좋은 보안 방어 기법에는 어떤것들이 있을지 궁금합니다! (가능하면 AWS 과금이 없는방법이면 더 좋을거같아요 😊 😊)

aws 비용이 RDS에서 너무 많이 나가는데 할당용량을 변경하면 비용 감소가 가능할까요?

aws Cost Explorer에서 RDS 비용이 다른 항목에 비해 10배이상 비용이 많이 나가는데요.. 사이트 메인화면 쿼리가 너무 느려서.. 영향이 있을것같기도한데.. 아무튼 아래 url의 RDS 쪽 대시보드 확인해보니 https://ap-northeast-2.console.aws.amazon.com/rds/home?region=ap-northeast-2 "Asia Pacific (Seoul) 리전에서 다음의 Amazon RDS 리소스를 사용하고 있습니다(사용량/할당량). DB 인스턴스 (2/40) 할당된 스토리지 (0.08 TB/100 TB)" 위와 같이 할당 스토리지가 100테라?? 씩이나 되는데.. 이게 정상인건지 모르겠네요. 저걸 줄이면 비용이 줄어드는건지 궁금합니다. 근데 어디서 어떻게 줄이는건지 못찾겠네요. 쉽게 줄일 수 있을까요? 그리고 db 인스턴스가 2개인데 각각 30기가, 50기가로 할당되있던데.. 이거랑 대시보드에 나오는 할당량은 또 다른 건지도 궁금하네요. 답변 부탁드릴게요. 감사합니다^^!

안녕하세요 html,css질문입니다 제발 도와주세요

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>중경삼림</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script> <script> jQuery( function() { jQuery( '#background' ).YTPlayer(); } ); </script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="jb-box"> <div id="background" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=ncT1R2hMpaQ', mute: true, showControls: false, useOnMobile: true, quality: 'highres', containment: 'self', loop: true, autoPlay: true, stopMovieOnBlur: false, startAt: 9.5, opacity: 1 }"></div> </div> <br><br><br> <div id="director"> <br><br><br><br> <h1>왕가위</h1> </div> </body> </html> 이건 html이고, body{ margin: 0; } .jb-box { position: relative; } #background { z-index: -1; } 이건 외부 css파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

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

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

TOTP 시크릿키 암호화 질문있습니다.

구글otp앱을 활용해서 TOTP로 2FA 구현중에 있습니다. 사용자에게 qr코드로 등록하게 하려고 합니다. 시크릿키를 암호화해서 저장하는게 맞는거죠? 근데 Qr코드 url에 시크릿키가 복호화되어 보이게되는데 이런건 어쩔 수 없는거죠? Otp 도입해보신 분의 조언이 필요합니다!

redis 연결 이슈 입니다!! 제발 도와주세요 ㅠㅠ

문제는 이렇습니다. prodRedisUrl = redis://:password@ec2프라이빗ip:6379/0로 url을 보냅니다. 그리고 ec2 내 redis bind를 ec2 프라이빗 Ip로 설정하고, 리스닝 하고 있는 상태입니다. 그러면 정상적이라면, 서버가 배포 됐을 때 prodRedisUrl로 redis와의 연결이 성공적으로 연결 됩니다. 근데 어이없는 문제가 발생합니다. 요청하지도 않은 localhost로 redis서버에 연결하려고 하는 것입니다. 그래서 시나리오를 세워서 반대로 테스트를 해봤습니다 !!!! prodRedisUrl = redis://:password@127.0.0.1:6379/0로 하고, 일부러 로컬호스트를 보내 봤습니다. 물론 ec2 내 redis.conf의 bind를 수정 했습니다. bind 127.0.0.1 테스트 해봤더니 127.0.0.1로 접속은 완료 됐지만 이제는 반대로 ec2 프라이빗 Ip로 연결을 요청해서 실패하네요 ㅋㅋㅋㅋㅋ ---- === 도대체 요청하지도 않은 ec2에서 그리고 알지도 못하는 프라이빗 ip로 redis서버에 접속하려는걸까요?????? ----------------------------------------- 즉, 정리하자면 요청하지도 않은 host로 Redis서버에 접속한다 !! 입니다. 로컬에서 테스트 할 때는 아무런 문제 없이 잘 작동하더니만 ec2에 배포하고 연결하려고 하니까 이 말썽입니다... 도저히 이해가 되지도 않고 원인 파악도 힘드네요,, 고수님들의 도움이 정말 필요합니다.. 부탁드립니다 ㅠㅠ

현역 군인 싸지방에서 GCP 를 이용한 CODE-SERVER 설치 중 오류 질문입니다

안녕하세요 대한민국 육군 현역입니다. 싸지방에서 CODE-SERVER 를 이용해서 자바공부좀 하려고 하는데, GCP가입 후 vm인스턴스 생성까지 했습니다. 문제는 SSH 에서 curl -fsSL https://code-server.dev/install.sh | sh 명령어 입력 후 실행 하기 위해 code-server --link 를 입력하면 error Unknown option --link 가 뜹니다.. 문제가 뭘까요 절박합니다 ㅠㅠ + Code-Server가 업데이트 되면서 명령어가 바뀐거 같습니다 ,, 이슈쪽 봐도 못찾겠네요 고수분들 도와주세요 🥲

react에서 복잡한 상태를 관리할때.. 한번에 관리? 분리해서 관리? (jotai, recoil, useState)

안녕하세요 react를 이용해서 복잡한 작성 페이지를 만들고있습니다. 아래의 타입은 예시입니다. type payload = { name: string; message: string; type: string; url: { pc: string; mobile: string; }; contents: { images: { url: string; name: string; }[]; buttons: { name: string; url: string; }[]; }; conditions: { ... }, .... }; 위처럼 복잡한 데이터를 서버로 보내줘야해서 데이터를 관리해야하는데 현재는 페이지내에 구조가 복잡하고 컴포넌트도 매우많아 props drilling이 너무 심해질거같아서 recoil, jotai와 같은 상태관리 라이브러리를 이용해서 작업을 진행하고있습니다. 이러한 상황에서 관리하는 데이터를 한객체에 모아서 관리하는게 좋은지 아니면 const nameAtom = atom(''); const messageAtom = atom(''); const typeAtom = atom(''); const urlAtom = atom({ pc: '', mobile: ''}); .... 처럼 일일히 쪼개서 관리하는게 맞는 방향인지 모르겠어서 질문드립니다 ! (사수가없어서 물어볼곳이없어요...) 현재는 아래와같이 쪼개서 작업한뒤 submit시에 합쳐주는 방식으로 구현해놓았는데 atom 갯수가 20개 정도 되버리니까 너무 복잡해보여서 이게맞나... 싶어서 질문드리게되었습니다.

리액트 로그인질문..

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