배경 AID 동아리에는 부원들이 사용하는 디스코드 서버가 있다. AID 서버에는 [채용 공고] 채널이 존재하는데 부원들이 알게된 AI/인턴 채용 공고 정보를 서로 공유하는 공간이다. 이를 Github Actions와 Discord Hooks을 활용해 자동화하기로 했다. 상세 구현 사항은 다음과 같다. 채용 공고 크롤링 최근 게시물 인덱스 관리 AID 채널로 공고 전송: Discord Hooks 매일 특정 시간마다 스케줄링: Github Actions AI 기반 채용 공고 필터링: Transformers.js 개발 환경 Bun Github Actions Discord Hooks 채용 공고 크롤링 Job 구현 이 부분은 그냥 크롤링해오면 되는 거라 어려울 건 없다. 가장 익숙한 Nodejs를 사용해서 구현했..

AID 홈페이지 리뉴얼 프로젝트의 모각코에 다녀왔습니다. 2024년 1월 14일(일)에 다녀온거라 일주일은 지났네요. 방학이 되고 프로젝트 개발 속도에 박차를 가할 생각..이었지만, 인턴을 겸하면서 진행하다보니 개발이 뒤처졌습니다. 다른 팀원들도 각자의 일정으로 주춤했었고, 이대로는 안 되겠다는 생각에 주말에 아예 날을 잡고 모여서 개발을 하자는 이야기가 나왔습니다. 뭐 거창한 거는 아니고 팀원 4명이 학교 근처 카페에 모여서 아침 9시부터 저녁 6시까지 개발만 했습니다. 역시 다같이 하니까 집중도 잘 되고 개발 속도가 팍팍 붙더라구요. 하루종일 팀원들이랑 카페에 앉아서 서로 말도 개발만 했지만.. 이런게 개발자스러워서 오히려 만족스러웠습니다:) 우선 하루 동안 QnA 페이지 구현을 마쳤습니다. 그래도 ..

개발 중인 API 홈페이지 리액트 프로젝트에 API 모킹 라이브러리인 MSW를 적용해보았다. API 모킹의 필요한 이유 현재 AID 홈페이지 리뉴얼 프로젝트는 한창 개발이 진행 중이다. 프론트엔드에서 api 요청을 테스트하기 위해서는 로컬에 백엔드의 코드를 다운받고 실행시켜 로컬 네트워크에서 테스트해야 한다. 여기서 불편함이 느껴졌다. 백엔드 개발자들이 Docker로 잘 말아서 올려주었지만 매번 API를 테스트할 때마다 백엔드 프로젝트를 열어서 도커 명령어를 실행시킨 후, 테스트 종료 후에는 다시 도커 명령어를 입력해주어야 해서 번거로웠다. 그리고 로컬에서 리액트 프로젝트와 장고+도커 프로젝트를 동시에 실행시켜야 했기에 노트북의 배터리도 빠르게 녹아갔다. 마지막으로 백엔드의 DB 구조나 api url 같..

동아리 홈페이지 프로젝트의 코드 가독성을 높이기 위한 전략 이번에는 프로젝트의 코드 가독성을 높이기 위해 몇 가지 전략을 시도해보았다. "동아리" 홈페이지라는 특성 상, 이 프로젝트는 동아리가 살아있는 동안은 계속 존재하고 유지보수되어야 한다. 이 말은 "내가 이 프로젝트에서 나가고 다른 개발자가 맡았을 때 이해하기 쉬워야 한다"는 뜻이다. 이러한 시도가 효과적인지는 조만간 후배가 들어왔을 때 알 수 있을 것이다. 우리가 택한 전략은 다음과 같다. TypeScript TSDoc 시멘틱 태그 1. TypeScript 사실 이러한 이유 때문에 기존의 JS 프로젝트를 TS로 마이그레이션했다. 타입도 없는 레거시를 다른 개발자가 이어갈 수 있을까 의문이 들었고, 그래서 정적 타입가 가능한 TypeScript로 ..

홈페이지를 리뉴얼하게 된 이유 현재 속한 동아리의 홈페이지를 리뉴얼하게 되었다. 사실 2023.09 ~ 2023.11까지 개발 중이었다가 한 번 갈아엎은 것이다. 바닐라 JS 기반 React를 사용하여 AWS S3 배포 자동화까지 구현한 홈페이지를 갈아엎고 TypeScript로 마이그레이션한 이유는 다음과 같다. 코드 가독성: 당장의 구현에만 급급해서 주석도 없는 스파게티 코드였다. 내가 학교를 졸업해도 후배들이 계속해서 유지보수/개발을 할 수 있어야했기에 가독성을 높이고 데이터 타입 체크가 가능한 TypeScript가 필요했다. 초기 디자인: 기존의 프로젝트는 초기 디자인도 없이 바로 개발에 들어갔었다. 그래서 구현 시 UI 디자인을 어떻게 할 지 고민하는 시간이 길어졌다. 프로젝트 기획 단계에서 초기..