react (3) 썸네일형 리스트형 의료 서비스 - 보안 강화 방법 이번에 개발하는 케어나는 사용자의 건강검진 결과를 분석하고 관리해 주는 서비스다. 이 서비스는 오늘 할 일이나 점심 메뉴와 같은 가벼운 데이터가가 아니라, 누군가의 혈압, 당뇨 수치 등의 건강정보를 다룬다. 만약 실수로 이 정보가 유출된다면? 단순한 버그 수정으로는 되돌릴 수 없는 사고가 된다😢 프론트엔드는 본질적으로 누구나 코드를 뜯어볼 수 있는 환경이다. 그리고 브라우저는 확장 프로그램이나 악성 스크립트 등 공격자가 개입할 여지가 너무 많다. 그래서 본격적인 개발에 앞서, 우리 팀만의 프론트엔드 보안 대책을 생각해보기로 했다.목표는 완벽한 방어가 아니라, (1) 유출 가능성을 줄이고, (2) 정보가 유출되더라도 피해를 최소화하며, (3) 재발을 어렵게 만드는 것이다.1. 보호해야할 데이터와 주요 위.. PDF 업로드가 느린 이유와 런칭을 위한 성능 최적화 0. Boini 소개Boini는 실시간 프레젠테이션 상호작용 플랫폼이다. 발표자와 청중이 발표 중 실시간으로 소통하고(이모지/질문), 발표 종료 후에는 AI 기반 리포트로 슬라이드 반응과 질문을 분석할 수 있다.서비스 특성상 발표 자료가 바로 떠야 실시간 상호작용이 가능하므로, 발표 자료 업로드 속도는 UX의 핵심이다.1. MVP에서 구현한 PDF 업로드 흐름MVP에서는 발표자가 PDF를 올리면 프론트에서 PDF를 이미지로 변환한 뒤 S3에 저장하고, 서버는 이미지 URL만 DB에 저장하는 구조로 구현했다. MVP 흐름발표자: PDF 업로드프론트: PDF → 이미지(N장) 변환브라우저: 변환된 이미지 N장을 S3 업로드서버: 업로드된 이미지 URL을 DB에 저장청중: 클라이언트가 요청하면 서버가 DB의.. Router + API SPA (Single Page Application) 단일 페이지로 구성된 웹 애플리케이션여러 HTML 파일을 준비했다가 새로 렌더링하는 것이 아닌, 하나의 페이지 내에서 바뀔 부분, 필요한 부분만 동적으로 로딩하여 화면을 업데이트하는 방식 라우팅 (Routing)사용자가 요청한 url에 따라 해당 url에 맞는 페이지를 보여주는 것SPA가 하나의 페이지만 존재하는 애플리케이션을 의미하는게 아니라, 여러 페이지 존재 가능다수의 페이지를 표시하는 데 있어서 과거 전통적인 방식으로 페이지 전환을 수행하지 않고, 마치 하나의 페이지인 것처럼 처리하는 기술을 의미react-router-dom 이란?react는 SPA이다.react에 router를 사용할 수 있는 즉, 화면 전환을 지원하는 모듈이다.리액트로 S.. 이전 1 다음
