검색어 자동완성 사용자가 단어를 입력하면 해당 단어로 시작하거나 끝나는 단어를 검색하여 결과를 화면에 출력하는 기능을 정리한 글이다. 1. DB → Cache 저장 사용자가 검색어를 입력할 때마다 DB를 실시간으로 조회하면 성능 저하가 발생할 수 있다. 이를 해결하기 위해 DB 데이터를 Redis Cache에 저장하여 조회 성능을 개...

직렬화와 역직렬화 직렬화(Serialization) : 객체 데이터를 저장하거나 전송 가능한 형식(ex. JSON, binary)으로 변환하는 과정 역직렬화(Deserialization) : 직렬화된 데이터를 다시 원래 객체로 복원하는 과정 직렬화가 필요한 이유 1. 데이터 타입의 특성과 메모리 주소 의존성 기본형(Primit...

TTS(Text to Speech) 영어 학습 시 예문을 음성으로 들을 수 있도록 TTS를 적용했다. 이를 위해 무료로 사용할 수 있는 Web Speech API를 활용했다. 기본 사용 방법 TTS는 SpeechSynthesisUtterance 객체를 생성한 뒤 이를 speechSynthesis.speak()에 전달하여 음성을 재생한다. //...

MyPage 단순히 사용자가 영어 공부를 하고 문제를 푸는 단순한 과정만 있어서 학습한 데이터를 분석해서 제공하는 MyPage를 구현하게 되었다. 이번 글에서는 학습 시간 및 풀이 시간과 학습 레벨을 시각화하는 내용을 작성했다. 추후에는 더 다양한 분석 데이터를 추가해 MyPage를 확장할 계획이다. 학습 시간과 풀이 시간 ...

Quiz 정답 체크 이번 글에서는 사용자가 퀴즈에서 정답을 맞췄을 경우 db에 정답 상태(correct=true)를 저장하는 과정을 작성했다. 설계 구현할 기능을 아래와 같이 나누어 생각했다. 단계 Front Back 주요 처리 1 퀴...

Levenshtein distance를 활용한 빈칸 채우기 빈칸 채우기 문제는 예문에서 특정 단어를 빈칸으로 대체해 퀴즈를 구성하는 방식이다. 그러나 db에 저장된 단어가 예문에서 변형되어 작성된 경우 기존 로직으로는 이를 처리하지 못해 예문이 퀴즈로 인식되지 않고 그대로 출력되는 문제가 발생했다. 예를 들어 문제 단어가 run일 때 예문에는...

Quiz 조회 최적화 과정 사용자(user_id)별로 정답을 맞히지 못한 퀴즈(correct = false)를 무작위로 10개 조회하는 기능을 구현했다. 처음에는 간단한 방법을 선택했지만 성능 문제로 인해 최적화 과정을 거쳤고 이를 작성했다. *study_id, user_id, correct 컬럼을 활용했다. 1. 초기 구현 : ORDE...

Editor gutter 어느 순간 pr을 열어 둔 상태에서 코드 변경 시 Editor gutter(코드 라인 옆 여백)에 변경된 부분이 핑크색으로 표시되어 불편했다. 코드를 변경 하면 초록색으로 눈에 띄어야 하는데 핑크색과 겹치면서 눈에 잘 띄지 않았다. File Status Colors 구글링 결과 File Status Color...

Quiz 저장하기 Quiz 기능을 구현하기 위해 데이터를 저장하고 조회하는 과정을 진행했다. 이 글에서는 저장 과정을 중점적으로 다루며 조회 기능은 다음 글에서 확인 할 수 있다. Quiz 저장 Quiz는 사용자가 학습한 단어를 기반으로 생성된다. 저장 방식 설계 시 두 가지 방안을 검토했다. 1. Quiz 테이블의 status 활용...

단어 학습 기능 개선 학습해야 할 단어를 효과적으로 관리하기 위해 Redis를 활용해 캐싱 기능을 도입하고 학습 데이터를 조회 및 저장하는 방식을 개선했다. 이번 글에서는 문제 해결 과정과 주요 구현 내용을 정리했다. 전체 코드는 여기에서 확인 할 수 있다. 문제점 발견 사용자가 하루에 학습해야 할 10개의 단어 중 일부(예: 8...