Python을 활용한 파이 차트 이미지 생성 이번 글은 python에서 파이 차트를 만들어 js에서 이미지로 보여주는 과정을 정리한 글이다. 1. DB 연결하기 환경변수 설정 환경 변수 파일(.env)을 활용하여 DB 연결 정보를 보호한다. DB_TYPE=mysql DB_DRIVER=pymysql DB_HOST=127.0.0.1 DB_USE...

Python-SocketIO와 NLTK를 사용한 챗봇 구현 Python-SocketIO를 활용하여 실시간 양방향 통신을 구현하고 NLTK를 사용한 간단한 챗봇 기능을 추가했다. Spring과 WebSocket으로 채팅을 구현한 경험이 있어 이를 비교하면서 적용하니 이해가 더 쉬웠다. Spring WebSocket 경험이 있다면 SocketIO을 이...

검색어 자동완성 사용자가 단어를 입력하면 해당 단어로 시작하거나 끝나는 단어를 검색하여 결과를 화면에 출력하는 기능을 정리한 글이다. 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...