들어가며안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 개발하고 있습니다. 현재 서비스는 초기 단계로, 새로운 기능 추가와 버그 수정을 빈번하게 진행하고 있습니다. 현재 인프라는 하나의 AWS EC2 인스턴스에서 Nginx, Docker, GitHub Actions를 활용하여 지속적으로 배포되고 있습니다. 하지만 새로운 버전을 배포할 때마다 기존 컨테이너를 중지하고, 새로운 컨테이너를 실행하며, 애플리케이션(Spring)을 시작하는 과정을 거치게 됩니다. 이 과정에서 약 20초 정도의 다운타임(downtime)이 발생하여 사용자가 서비스를 이용하지 못하는 상황이 발생하고 있습니다. 이러한 다운타임은 사용자에게 불편을 초래하고, 이탈 가능성을 높이는 문제점을 안고 있습..

들어가며안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다.공부를 위한 프로젝트이기 때문에 레포지토리는 현재 public으로 공개되어 있습니다. 서버 개발을 하는 경우 다양한 민감 정보를 사용하게 됩니다. 예를 들어, 데이터베이스 접속 정보, 인증을 위한 시크릿 키, OAUTH 인증을 위한 클라이언트 ID, 시크릿, AWS S3 버킷 정보 등이 있습니다. 이러한 정보들은 보안상의 이유로 외부에 노출되어서는 안됩니다. 이러한 정보들을 관리하는 방법은 간단하게 다음과 같이 나눌 수 있습니다.yml 파일을 .gitignore에 추가하여 레포지토리에 올리지 않는 방법환경변수를 사용하여 정보를 주입하는 방법서브모듈을 사용하여 외부 레포지토리에서 정보를 가져오는 방..

들어가면서안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다.플러피에서는 시험 문제를 만들 때 지시문과 선택지만을 작성할 수 있었습니다.문제를 표현하기에 한계가 있어 지문을 추가해달라는 피드백이 있었습니다. 지문을 추가한 시험 문제현재 서비스는 배포 중인 상태이고 데이터가 이미 존재하기 때문에 데이터베이스 스키마를 모두 지우고 새로 생성하는 방법은 사용할 수 없습니다. 간단하게 떠올린 방법은 데이터베이스에 직접 들어간 후 질문 테이블에 지문 컬럼을 추가하는 방법이 있습니다. 다음과 같이 SQL 문을 실행하면 됩니다.ALTER TABLE 질문 ADD COLUMN 지문 TEXT NOT NULL DEFAULT ''; 하지만 이 방법은 데이터베이스에 직접 접근해..

들어가면서안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다. 이 서비스에는 시험 목록을 보여주는 부분이 많습니다. 시험 목록에는 아래와 같은 카드가 존재하고, 여기에 시험을 설명하는 글이 들어갑니다. 시험 설명 글의 줄 수에 따라 카드의 높이가 달라지게 됩니다. 저는 카드마다 높이가 다른 것은 일관성이 없어 보기가 불편했습니다.이러한 이유로 시험 설명의 최대 라인 수와 최소 라인 수를 고정해보았습니다.최대 라인 수 고정먼저, 최대 라인 수를 고정하는 법을 알아보겠습니다.이 속성을 적용할 경우, 줄 수는 최대 3줄까지 늘어나고, 그것을 넘어가면 "..."으로 처리하게 됩니다.{ overflow: hidden; // 넘치는 부분을 숨김 displ..

들어가면서안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다.플러피에서는 단답형, 서술형, 객관식 단일 선택, 객관식 복수 선택, True/False 등 다양한 문제 유형을 지원하고 있습니다. 이에 따라 요청 데이터에도 다양한 형태의 문제 데이터를 받아야 합니다.예를 들어, 단답형 문제와 객관식 단일 선택의 경우 질문은 동일하게 필요하지만, 옵션 여부나 정답 형태가 다릅니다. 다음의 코드를 참고해주세요.// 단답형 문제 요청 데이터{ "text": "1 + 1 = ?", "type": "SHORT_ANSWER", "correctAnswer": "2"}// 객관식 단일 선택 문제 요청 데이터{ "text": "1 + 1 = ?", "type": "..

안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다. 모바일 환경에서도 시험 문제를 풀 수 있게 하기위해서 반응형으로 개발하던 중 문제가 사소한 문제가 발생했는데요.문제를 푸는 화면의 크기를 꽉차게 하고 싶어 height: 100vh로 했지만 주소창의 크기로 인해서 스크롤이 되는 문제였습니다. 아래의 동영상을 참고해주세요. vh는 CSS에서 사용하는 단위로, 뷰포트(viewport)의 높이에 기반합니다.1vh는 viewport의 전체 높이의 1%를 의미합니다. 예를 들어, 뷰포트 높이가 1000px라면, 1vh는 10px입니다. 사파리나 크롬같은 경우 주소 표시줄을 감췄을 때를 기준으로 설정되었기 때문에 100vh를 설정했지만 스크롤되는 현상이 발생했습니..