CRA → Vite 마이그레이션 과정 정리

이번 글에서는 기존에 CRA(Create React App)를 사용하던 리액트 프로젝트를 Vite로 마이그레이션하면서 진행한 작업들을 개인적으로 정리해보았습니다. 타입스크립트 관련 설정 등 제가 사용하지 않은 내용은 포함되어 있지 않으니, 해당 주제가 필요하신 분은 다른 참고 자료를 함께 보시는 것을 추천드립니다.

• React
• Vite

스프링 부트, 요청이 몰리면 어떻게 될까?

스프링 부트를 사용하지만, 앞단에서 요청이 어떻게 처리되는지 모르고 있었다. 스프링 부트에 대규모 요청이 몰리게 되면 어떻게 될까? 그런 물음을 받았을 때 내가 납득할 수 있는 대답을 낼 수 없었다. 일단 요청마다 다른 스레드가 처리한다는 건 알겠는데, 요청마다 새로운 스레드가 만들어지는지, 그렇다면 최대 몇 개까지 생성될 수 있는지, 또 처리할 수 없는 요청은 어떻게 되는지 의문이 생겼다.

• Spring
• Tomcat
• Thread

Index와 EntityGraph 적용 과정 정리

MariaDB와 Hibernate(JPA)를 활용하여 프로젝트를 진행하며 데이터베이스 쿼리 성능 최적화와 관련된 작업을 정리하였습니다.

• MariaDB
• JPA
• Spring

위도와 경도를 사용하여 가까운 지점 찾기

프로젝트를 진행하면서 자신과 가까이 있는 지점들을 검색하는 기능이 필요했다. 데이터베이스에 아래와 같이 모든 지점들의 위도와 경도를 실수 형태로 가지고 있다. 이때 한 지점과의 직선 거리가 일정 값 이하인 지점들을 어떻게 찾을 수 있을까?

• SQL
• 수학

최대한 빠르게 한글 검색하기

학교 과제나 작은 프로젝트를 진행하면서 검색 기능이 필요한 경우가 있다. 다행히도 Elasticsearch (엘라스틱 서치)라는 훌륭한 오픈소스 검색 엔진을 사용하면 검색 기능을 쉽게 만들 수 있다. 그런데 하나씩 꼼꼼히 익혀가면서 만들기에는 홈페이지의 가이드 내용이 너무 방대하다. 그런 상황에 쓸 수 있게, 한글 검색이 최소한으로 작동만 하게 만들어 보는 가이드 글이다. 오라클 클라우드 프리티어에서 제공하는 무료 Compute 인스턴스의 메모리 용량은 1GB이다. 이 글의 목적에서 알 수 있듯이 무료 Compute 인스턴스에서 작동해줬으면 했기에, 1GB 메모리 우분투 서버 가상머신에서 테스트되었다.

• Elasticsearch

Next.js에서 Quill 에디터 사용하기

이 글에는 Next.js에서 react-quill의 사용 없이 Quill 에디터를 사용하기 위한 코드를 제공한다. 아래와 같이 Quill 에디터를 사용하게된 이유 Next.js를 통해 개발을 진행하면서 Quill 에디터를 사용하고자 했다. 그런데 Quill에서 바꾸고 싶은 부분이 있어 그 부분을 수정한 후 직접 빌드하여 사용해야 했다. 직접 빌드된 걸 react-quill에 적용하기 번거로워 보였다. 또, 어떤 블로그 글에서 react-quill을 사용하는 것이 직접 스크립트를 불러오는 것보다 번거롭다는 말이 있어 react-quill을 사용하지 않고 아래와 같은 방식으로 시도하였다. 이 글의 코드는 이 분의 블로그에서 소개된 내용에서 React Hook으로 변환 및 일부 코드를 추가한 것이다. 해당 블로그에서 React에서 Quill을 적용하는 방법을 올려주셔 잘 적용할 수 있었으나, 아쉽게 글을 내리신 걸로 보인다. 그래서 혹시 Next.js에서 Quill 에디터를 직접 로드하는 방식으로 사용하려는 분이 있다면 코드를 참고하라고 이 글을 올리게 되었다.

• Quill
• React