서론

드디어 종강이 다가온다!
잘 살아있는거 보니 5월도 무사히(?) 보냈나보다.

아니 사실 잘 모르겠다. 기억에 남는 일이 많이 없다.
핸드폰 앨범에 있는 사진과 일정을 보면서 더듬더듬 기억을 살려보기로 하자.

BCSDLab

아무래도 시험기간과 졸업작품 기간의 영향이 있어서 그런지 3, 4월만큼 KOIN 프로젝트의 활동성이 높지는 않았던 것 같다. 이번달은 팀으로서 눈에 보일정도의 성과를 이루기는 어려웠다고 생각한다.

개인적으로도 프로젝트 보다는 교육, 백엔드 트랙 매니징, 동아리 운영업무 자동화에 힘을 많이 들인 것 같다.

B-BOT

5월 2일 (목요일)

동아리 생산성을 도와주는 슬랙봇 삐봇을 개발하는 작업에 함께하기 시작했다.
봇의 응답속도 개선, 인터널 프로젝트와의 연계가 주된 목적이였다.

5월 2일에 동아리방에 모여 기존 삐봇 작업자인 정훈이에게 인계를 받았다.

코드가 ExpressJs, Typescript 환경이여서 살짝 낯설었는데 코드를 몇번 치다보니 그렇게 어렵진 않았다. 매커니즘은 다 비슷한것 같다.

https://github.com/BCSDLab/b_bot

기존에는 Slack API를 호출하여 슬랙에 등록되어있는 모든 회원에 대해 값을 가져온 다음 비활성화된 인원을 필터링하고, 멘션해야하는 대상을 필터링하는 등의 과정을 거쳤다.

아래는 대략적인 의사코드다
SlackAPI.getMembers -> filter(member.isActive == true) -> filter(멘션 대상) -> map(원하는 결과값으로 변환)

이런 구조에서 Slack API 호출과정에서 시간이 오래 걸리는 경우 봇의 응답도 같이 느려지는 상황도 빈번하게 발생했다.

봇의 응답속도를 개선하기 위해 인터널 프로젝트의 DB를 활용하기로 했다.

동아리 인터널 프로젝트의 DB에는 회원들의 정보가 있다. 여기에 Slack Id를 추가로 저장하여 외부 API로부터 회원 정보를 얻어오는 것이 아닌 DB에서 정보를 얻어오도록 수정했다.

슬랙 ID를 저장하는 기준은 Slack 가입 이메일과 인터널 회원의 이메일 정보를 비교하여 같다면 SlackId 컬럼을 갱신하는 방식으로 진행했다. (동명이인이 있어서 고유한 값을 이메일로 판단했다.)

갱신하는 트리거가 필요해서 인터널 프로젝트에 버튼을 추가했다.
어드민 계정만 볼 수 있는 슬랙 동기화 버튼을 눌러 회원들의 슬랙 ID 정보를 최신화할 수 있게 만들어놨다.

확실히 DB에서 정보를 꺼내오니 Slack API에 의존도가 없어져서 멘션 속도가 매우 빨라졌다.
인터널 프로젝트의 회원 정보를 기반으로 삐봇에 많은 액션을 추가해볼 수 있을 것 같다.

인터널 프로젝트

인터널 프로젝트에서 프론트인원의 졸업작품 매우바쁨 이슈로 인해 작업 하나가 미뤄지는 상황이 있었다.

이참에 내가 한번 프론트 작업을 맡아서 수행해보겠다고 말했는데 진짜로 작업을 넘겨줬다 ㅋㅋㅋㅋ 민구형...
React 코드를 처음 만져봤는데 이미 구축되어있는 프로젝트에서 따라치는 수준으로 작성을 한것 같다.

팀 관리페이지

담당한 작업은 팀 관리 페이지를 만드는 작업이였다.
백엔드 부분은 이미 구현이 되어있어 Swagger를 보면서 API를 사용하고, 페이지를 만들었다.

인터널 프로젝트는 백오피스 프로젝트라서 디자인이 딱히 없다.
MUI라는 UI 툴을 사용해서 디자인이나 css를 UI 툴에 맡기는 식으로 개발이 진행되고있었다. 이 덕분에 CSS에서 시간을 많이 쏟지 않아서 좋았다.

코드를 작성하면서 물어볼 사람이 옆에 있으니 황제코딩 하는 기분이였다.
useEffect, useState, useSuspenseQuery, useQuery, 리액트가 렌더링을 언제하는가, props, useMemo, useCallback 등등 많은 키워드를 알았고 나름대로 숙지했다고 생각한다.

여담인데 React Compiler가 오픈소스화되면서 useMemo같은 최적화를 알아서 해준다는 글을 봤었다. (괜히 들었던 지식 나와서 신남)
https://react.dev/learn/react-compiler
개발자들이 개발생태계를 빠르게 으쌰으쌰 만들어가는 분위기가 비교적 활발한 것 같은데 이게 프론트의 매력인 것 같다.

(MUI를 사용하면서) 모달도 띄워보고, 커스텀 Alert 컴포넌트도 구현해보고 꽤 많은 경험을 해볼 수 있어서 재밌었다.

작업내용: https://github.com/BCSDLab/BCSD_INTERNAL_WEB/pull/178

모달

회원을 추가하기 위한 모달을 띄우기 위해 useState를 사용했다. 이 과정에서 추가, 수정, 팀이름 관리 모달이 별개로 관리되어야했다.

이에 3개의 모달을 컴포넌트로 구현했고, 팀 관리 페이지에서 이 모달들을 open하는 state도 설정했다.

옛날에 바닐라 자바스크립트로 모달을 구현하는걸 시도해봤던 기억이 어렴풋이 난다. 그때는 진짜 어려워서 결국 실패했었는데 이번에는 너무나 간단하게 구현됐다 ㅋㅋㅋㅋ 역시 라이브러리가 최고다.

Alert 이야기
팀에서 회원 제거 버튼을 눌렀을 때 한번은 경고창을 띄워주고 싶었다.
alert() 을 쓰면 되겠지! 라고 생각하고 써봤는데 lint에서 걸렸다.
왜 그런지 이유를 알고싶어서 Lint Rule을 찾아봤다.
ESLint no-alert 문서에서는 일관되지 않은 UI를 유발할 수 있기 때문에 custom한 Alert을 만들어 쓰라는 룰이라고 말하고 있다.

Lint의 말을 굳이 거역할 필요는 없으니.. 말하는대로 Custom Alert을 만들어줬다.
이 과정에서 MUI의 Dialog 컴포넌트를 활용했다. 진짜 편한것 같다.

확실히 구현해놓고 보니까 Alert이 제멋대로 생기면 디자이너들이 골치아플것 같긴 하다.
프론트엔드의 Lint가 꽤나 금쪽이 제어를 잘해준다고 느꼈다 ㅋㅋㅋㅋㅋㅋㅋ

검색 이야기
TextField에 onChange가 발생할 때 리스트가 갱신되도록 구현했다.
디바운싱도 적용해보고 싶었으나.. 거기까지 학습하고 적용하기에는 시간이 좀 없었다.

스프린트 회고

5월 20일

인터널 프로젝트 스프린트 회고를 진행했다. 스프린트 주기를 한달로 변경하면서 해야하는 작업에 대해 리마인드가 안되다보니 마지막에 몰아서 하게 된다는 것 같다는 의견이 나와 채널에 매주 리마인드 알림을 걸어놨다.

다음 스프린트 기획으로 글또에서 경험했던 데달부 슬랙봇이 인상깊어 아이디어를 차용해보기로 했다.

동아리내부에서 인원들이 이모지를 잘 달지 않아서 어떻게 참여도를 유발해야할까? 가 주된 고민거리였다. 이 데달부 슬랙봇이 알려주는 활동 요약은 꽤나 재미있는 데이터를 준다고 생각했다.
참여도가 높은 인원들에게 리워드를 제공할 수 있는 데이터가 될 수도 있다고 생각해 다음 스프린트 목표로 삐봇에 활동 요약 안내하기와 같은 기능을 넣어보기로 했다.

5월중에는 시간이 없어 건드리지 못했는데 어떻게 개발할지 꽤 기대되긴한다.

교육

매주 수요일 비기너 교육을 진행했다.
항상 비기너들 과제 채점해준다고 고생하는 우리 백엔드 레귤러들 짱짱 고맙다 🙌

기존에 강의로 모든 지식을 때려 넣는(?) 방식의 교육을 조금은 탈피하고싶었다.
기존에는 초반부터 DI, IoC, Bean과 같은 지식을 제공하고 Spring (부트 아님) 으로 강의하는 방식이였는데 나는 이 방식이 처음 스프링을 접하는 사람에게는 이해하기 어려운 과정이라고 생각했다.

실습하는 방식을 제거하고 SpringBoot로 실습을 해본 뒤 중요한 개념은 뒤에 알려주면서 사실은 너네가 쓰는게 이거였지롱! 대박이지?! 하고 알려주고싶었다.

그래서 커리큘럼에서 DI, IoC, Bean에 대한 설명을 뒤로 넘겼다.

5월 8일 SpringBoot 교육

첫 SpringBoot 교육에서는 정말 간단하게 프로젝트를 시작하고 Hello World를 띄우는 방법을 알려주고 과제를 내줬다.

과제는 간단한 CRUD API를 작성하는 과제를 제공해줬다.
최대한 공식문서를 찾아보면서 학습하게 유도했던 초록스터디의 경험이 너무 좋았어서 이 방식을 차용해봤다.

잘하는 사람들은 과제를 1시간만에 끝내기도 했는데 개발이 아예 처음인 1학년같은 교육생들은 환경설정에서 며칠동안 애먹는 모습도 보여줬었다.

그런데 과제를 채점하다보니 한가지 문제점이 발견되었다... (아래에서 계속)

5월 15일 Spring MVC 교육

그 다음 주차에는 MVC 패턴과 Spring MVC LifeCycle을 알려줬다.

지난 주차 과제를 채점하면서 교육생들이 과제를 진행하며 AI를 사용하는 부분이 발견되었다.

물론 AI의 도움을 받는게 나쁜건 아니라고 생각한다. 하지만 학습 과정에서는 독이라고 생각한다.
지식은 충분히 고민하고 해결하면서 얻어진다고 생각하는데 AI는 이 고민 과정을 생략시켜 학습 효과를 저해시킨다고 생각하기 때문이다.

이에 조금은 강압적이지만 과제 조건에 AI 사용 금지를 추가했다.

주어진 과제는 기존 코드에 추가적으로 리팩터링 하는 방식으로 제공했다.
단발적으로 프로젝트를 계속 만들기보다는 본인이 작성한 코드를 계속 건드리게 만들고 싶었다.

확장성있는 구조를 고민해볼 거리를 가질 수 있도록 DB를 사용하지 않고 자료구조를 사용해 데이터를 저장하도록 제시했다.

5월 23일 Spring JDBC 교육

요즘 트랜드(?) 라고 해야하나 모두가 ORM의 맛을 먼저 보려고 하는 모습에서 그 본질을 이해하지 못하고 사용하는 모습이 간혹 보였다.

그래서 불편함을 먼저 느껴보고 편안함을 경험해보도록 JDBC와 Spring JDBC에 대해 먼저 교육하는 시간을 가졌다.

지난주차에 작성했던 자료구조 기반의 데이터 저장 로직을 DB 기반으로 리팩토링 하도록 과제를 제시했다.
그 사이에서도 코드를 작성하면서 왜?를 생각해볼만한 고민거리들을 함께 보고서 작성 주제로 제공해주기도 했다.

지난 주차에 요구사항을 다소 불친절하게 제공했던 것 같아 요구사항 문서를 별도로 구성해서 제공하기도 했다.

5월 29일 Spring Core 교육

Spring의 IoC, DI, AOP에 대해 알려줬다. 지금까지 작성해왔던 코드가 왜, 어떻게 돌아가는지 작성한 코드를 기반으로 설명해줬다.

추가로 과제를 진행하며 교육생들이 혼동하는 개념들(DTO, VO, DAO, 계층형 아키텍처 등)에 대해 이야기하는 시간도 같이 가져갔다.

과제로는 AOP 개념을 사용하는 ControllerAdvice를 활용하여 에러 핸들링을 수행하는 과제를 제공해줬다.

AOP에 대한 이해, 에러 핸들링에 대한 감잡기를 주된 과제 목표로 잡았다.

확실히 옛날 교육방식에서 느꼈던 DI, IoC, AOP가 너무 어려워! 라는 느낌을 많이 상쇄시킬 수 있었던 커리큘럼이라고 생각했다.

선배님들과 만남

5월 10일

선배님께서 밥사준다고 불러주셔서 동아리 PM 인원들이랑 함께 냉큼 달려갔다.
판교 인근 회사 구경도시켜주시고 밥먹고 술마시면서 정말 좋은 말씀 많이해주셔서 너무나 좋은 시간이였다.

(왜 사진을 안찍었지 ㅠㅜ)

이렇게 받은 만큼 다른 동아리 인원, 후배들에게 많이 좋은 경험을 시켜주고싶다는 마음이 드는 것 같다. 뭔가 노린건 아니였지만 은연중에 좀 더 친근한 분위기의 동아리를 만들어가보는것이 올해의 목표중 하나가 된 것 같기도하다.

기타

동아리 외에도 다양한 일들이 있었다.

초록스터디 3기 마무리

초록 스터디 3기도 마무리되었다.

백엔드 지식이 전무한 2명과, 신규 백엔드 인원 1명 총 3명이서 잘 마무리 하는 모습을 보고 뿌듯했다.
커리큘럼에 대한 신뢰가 높아진다.

3기 참여자들 후기 모음

6월 말에는 초록스터디 오프라인 밋업 행사가 있다.
초록스터디 운영 경험에 대한 이야기를 할 예정인데 잘 정리해서 공유해봐야겠다. 🌱

NEXTERS 지원

5월 13일 (월)

동아리방에 있다가 넥스터지 지원글을 보고 갑자기 충동이 일어나 후다닥 지원서를 작성했다. 자세한 이야기는 아래 글로 대체한다.

동아리방에 있다가 갑자기 넥스터즈 지원이 하고싶어져서 지원했는데 어쩌다보니 최종합격한 썰

RealMySQL 스터디

최근에 동아리에서 성능 최적화에 대한 고민을 다같이 하고 있는 추세인 것 같다. Database 레벨에서의 고민거리를 논하기에는 아직 DB에 대한 지식이 많이 부족하다고 느꼈다.

동아리 인원들과 함께 스터디를 하고싶었으나 학교의 팀원들은 학업에 대한 비중 차이가 높아서 스터디에 대한 참여도가 많이 우려되는 상황이였다. 각자가 중요하게 생각하는 방향성도 맞지 않아서 조금 아쉽다고 생각했다.

하지만 아쉽다고 가만히 있을 수 없는 노릇이라 사람을 따로 구해서 글렌, 히이로, 홍고, 루카랑 같이 리마큐(RealMySQL) 스터디를 하기로 했다.

사실 커리큘럼, 스터디 방법 생각 안하고 사람부터 모으고 그 뒤에 짰는데 스터디하자! 라는 말만 듣고 같이해준 우리 스터디원들 너무 고마워... 😅

졸업작품 발표구경

5월 29일 (수)

친구들 졸업작품 발표를 구경하러 갔다.
컴공의 졸업작품..? 이라기 보다는 깐깐한 창업경진대회를 보는 느낌이 강했다.
내년에 내가 해야할거라고 생각하니 꽤... 어려울거같다는 생각도 들었다.

졸업작품은 내가 하고있는 것 보다는 뭔가 새로운 기술을 사용해보고 싶다는 생각이 들었다. 아마 2학기에 접어들면 공학설계 과정에서 AI 관련한 무언가 프로젝트를 시작하게 될거같다.

예비군

5월 22일 (수)

학생예비군도 갔다왔다.
작년에 송파쪽으로 3박 4일 동미참 훈련을 받던거와는 달리 하루만 갔다오면 돼서 꽤 많이 좋았다.

요새는 입, 퇴소도 QR로 잘 해놨구나.. 싶었다.

갔다와서 늘어지가 자고싶었는데 다음날 수업준비해야해서 졸음을 참고 새벽 2시까지 준비했던게 생각난다. 😇

휴식

5월 4일 (토)

(착한 사람만 보이는 멋진 결혼식 사진 📸)

에코 결혼식에 갔다왔다!!! 에코 결혼 완전 축하해~~~!! 🎉🎉
간만에 우테코사람들도 많이봐서 신났다.

결혼식 끝나고 여우, 필립, 히이로, 달리랑 같이 미술관에 갔는데 정말 운좋게 무료 전시 이벤트중이여서 재밌게 보고왔다.

대왕 라이언이랑 춘식이도 보고왔다.

5월 11일 연극라면

성묵이가 티켓줘서 진짜 재밌게 보고왔다.

배우분들 연기력 짱 🙌

5월 18일 서울국제정원박람회

서울 국제정원 박람회도 다녀왔다.
날씨가 너무 좋아서 꽃들도 엄청 잘보이고 사진도 잘찍혔다.

인사이드아웃의 슬픔이가 바닥에 나앉아서 울고있길래 옆에가서 같이 울고왔다. 엉엉 😭
이날 마침 지하철역에서 카누 팝업스토어도 하길래 야무지게 체험하고왔다.

5월 26일 돈의문 박물관 야외방탈출

서울역사박물관쪽에 있는 돈의문 박물관에서 야외 방탈출을 하고왔다.
무료로 할 수 있는 야외 방탈출임에도 엄청 짜임새 있게 잘 구성되어있었다.

돈의문 박물관마을 내부에도 볼거리가 많아서 돌아다니는 내내 눈이 즐거웠다.

야외 미션 게임 : https://dmvillage.info/mission

비가 와서 의상 대여는 안하고 돌아다녔는데 다음에 가면 의상도 대여하고 재밌게 놀아보고싶다.

후기

뭔가 열심히 했는데 성과가 아쉽다는 느낌이 든다.
사진을 잘 안찍고다녀서 휘발된 기억도 있는 것 같다. 6월은 사진 열심히 찍고다녀야지 📸

학습 측면에서는 개인적인 학습에 신경을 많이 못쓴 것 같아 아쉽다는 생각이 든다.
아무래도 학업(자잘한 학교과제 및 시험들)이 많은 인터럽트를 일으켜서 개인 학습시간을 많이 확보하지 못한 것 같다.

일단 6월은 학업을 잘(?) 마무리 하고, 종강하면 밀린 회고 및 트러블 슈팅 글들을 쓰면서 상반기를 정리해보려고 한다.
코인 마이그레이션, 인터널 프로젝트, 동아리 체제, 트랙장 회고 등등.. 동아리 관련된 정리 글이 쓸게 좀 많은 것 같다.