풀스택으로 개발을 하려면 백엔드와 프론트엔드를 동시에 다루어야 한다. 이 때 프로젝트를 각각 생성하고 빌드하는 것은 매우 번거로운 일이다. 이전에는 Express안에 Next.js 프로젝트를 포함시켰었는데 이번에는 SpringBoot 프로젝트 안에 React 프로젝트를 추가해 보았다.

예전에 프로젝트에 넣었던 코드를 수업용으로 만드는 과정에서 필받는 바람에 실컷 작성해 버린 코드이다. Redux의 반복적인 보일러플레이트 코드를 줄이고 CRUD 작업을 간소화하는 ReduxHelper 유틸리티인데, 난이도가 너무 높아져 버려서 수업에서 사용은 못하고 백업용으로 포스팅 한다.

React Chart.js 를 활용한 다양한 차트 구현 - 막대, 선, 산점도, 파이, 레이더 차트 완벽 가이드

아름답고 반응형인 팝업 메시지 박스를 제공하는 SweetAlert2 플러그인으로 사용자 친화적인 알림 구현

숫자 카운팅 애니메이션을 제공하는 React CountUp 플러그인으로 스크롤에 반응하는 동적 효과 구현

간단하고 가벼운 React 이미지 슬라이더 컴포넌트로 자동재생, 네비게이션, 인디케이터 등 다양한 기능 지원

스크롤 위치에 따라 요소를 등장시키는 플러그인

어떤 요소를 클릭했을 때 지정된 이미지나 영상 등을 모달창으로 띄울 수 있게 하는 플러그인

노트북을 정리하고 맥스튜디오로 갈아탄지 1년쯤 되었다. 외장하드 하나 들고 다니면서 작업하는게 무척 만족스럽다. 한가지 단점은 집에 있는 맥스튜디오와 외장하드간 동기화를 위해 Git에서 Pull을 자주 받아야 된다는 점이다.

SpringBoot 프로젝트 수업을 진행하면서 데이터베이스 ERD를 DBML로 생성하기 위한 프롬프트를 작성하여 학생들에게 배포했다. 결과물은 꽤 마움에 든다.