React에서 강좌 리뷰 버튼 활성화 처리하기: some() vs Map

SayBridge 프로젝트를 진행하면서, 강좌별로 “내가 이미 리뷰를 작성했는가?”를 확인하여 리뷰 작성 버튼을 활성화하거나 비활성화하는 기능이 필요했다. 처음에는 로직을 처리하는 부분이라 서버에서 해당 코스에 리뷰가 있는 지를 확인하여 각 코스마다 리뷰 여부를 확인 요청을 보내려했는데 그럴 경우 요청이 코스 수만큼 늘어나 데이터가 많아지면 서버 부하가 심해질 것 같았다.  기존 MyPage 로드 시 유저가 수강중인 강좌, 작성한 리뷰를 불러오는데, 이때 저장한 강좌 및 리뷰 정보를 이용하여 프론트에서 해당 기능을 구현하기로 했다.   처음에는 단순하게 .some()를 사용해 각 코스마다 리뷰를 찾는 방식으로 구현하였다.const hasReview = reviews.some(review => review..

• format_list_bulleted 개발 일지
• · 2025. 3. 7.
• textsms

신규 강좌 알림 기능 - Event 기반 아키텍처 리팩토링

SayBridge 프로젝트 구현 중 신규 강좌 알림 구독 서비스 신청 시 신규 강좌가 등록되면 해당 강좌 정보를 구독한 사용자들에게 이메일로 전송해는 기능을 구현하였다.1. 기능 개요 처음 구현 시 수강생에게 메일을 보내려면 강좌를 생성하는 CourseService 안에서 메일 전송 로직을 넣으려고 하다가  “메일 전송”이라는 기능은 다른 서비스나 기능에서 응용할 수 있을 것 같다는 생각을 해서 MailService 코드를 따로 생성 하였다. MailService 코드@Servicepublic class EmailService { @Autowired private JavaMailSender mailSender; @Autowired private SubscriberRepository ..

• format_list_bulleted 개발 일지
• · 2025. 3. 3.
• textsms

2. 와이어 프레임 제작

초기에 계획한 웹 서비스의 기능을 바탕으로 대략적인 와이어프레임을 제작했다. 대략적인 구성이라 개발을 진행하면서 필요한 화면은 그때그때 즉각적으로 제작하여 개발을 진행할 생각이다. 1. 회원가입 페이지 회원가입 페이지는 이메일, 이름, 생년월일, 비밀번호, 비밀번호 확인, 나라를 선택할 수 있다.  2. 로그인 페이지  로그인 페이지는 이메일, 비밀번호를 입력하여 로그인을 하거나, 회원가입 버튼 및 SNS 로그인 버튼을 통해 회원가입 페이지로 이동 또는 SNS로 회원가입 및 로그인을 할 수 있다. 3. 메인 페이지 메인페이지에서 왼쪽 메뉴를 통해 다른 페이지로 이동할 수 있다. 메인페이지에는 나라, 레벨을 선택 후 Submit 버튼을 클릭하여 선생님을 추천받을 수 있고, 아래에는 다른 다양한 선생님들에 ..

• format_list_bulleted 개발 일지
• · 2025. 1. 21.
• textsms

1. 프로젝트 계획

프로젝트 아이디어 평소에 토익이나 토플 같은 자격증 공부보다는, 현지에서 자연스럽게 일상 대화를 나누는 데 더 관심이 있었다. 종강하고 졸업 작품을 끝낸 다음에 개인 프로젝트를 시작하려고 했는데, 외국어 공부랑 연관된 웹 서비스를 만들어보면 재미있겠다고 생각해서 이번 프로젝트를 기획하게 되었다. 프로젝트 네이밍SayBridge: 말(Say)을 통해 다른 문화, 언어, 사람들을 연결(Bridge)하는 플랫폼으로, 의사소통과 이해를 돕는 역할을 한다는 의미로 네이밍을 선정했다. 기술 스택 선정  기존에 사용해봤던 백엔드는 Django, Spring boot + React + MySQL, SQLite 를 사용했었다. 고민을 해본 결과 세 가지의 선택지가 있었는데Node.js(express.js) + React..

• format_list_bulleted 개발 일지
• · 2025. 1. 20.
• textsms