AID 홈페이지 리뉴얼 프로젝트의 모각코에 다녀왔습니다. 2024년 1월 14일(일)에 다녀온거라 일주일은 지났네요. 방학이 되고 프로젝트 개발 속도에 박차를 가할 생각..이었지만, 인턴을 겸하면서 진행하다보니 개발이 뒤처졌습니다. 다른 팀원들도 각자의 일정으로 주춤했었고, 이대로는 안 되겠다는 생각에 주말에 아예 날을 잡고 모여서 개발을 하자는 이야기가 나왔습니다. 뭐 거창한 거는 아니고 팀원 4명이 학교 근처 카페에 모여서 아침 9시부터 저녁 6시까지 개발만 했습니다. 역시 다같이 하니까 집중도 잘 되고 개발 속도가 팍팍 붙더라구요. 하루종일 팀원들이랑 카페에 앉아서 서로 말도 개발만 했지만.. 이런게 개발자스러워서 오히려 만족스러웠습니다:) 우선 하루 동안 QnA 페이지 구현을 마쳤습니다. 그래도 ..
개발 중인 API 홈페이지 리액트 프로젝트에 API 모킹 라이브러리인 MSW를 적용해보았다. API 모킹의 필요한 이유 현재 AID 홈페이지 리뉴얼 프로젝트는 한창 개발이 진행 중이다. 프론트엔드에서 api 요청을 테스트하기 위해서는 로컬에 백엔드의 코드를 다운받고 실행시켜 로컬 네트워크에서 테스트해야 한다. 여기서 불편함이 느껴졌다. 백엔드 개발자들이 Docker로 잘 말아서 올려주었지만 매번 API를 테스트할 때마다 백엔드 프로젝트를 열어서 도커 명령어를 실행시킨 후, 테스트 종료 후에는 다시 도커 명령어를 입력해주어야 해서 번거로웠다. 그리고 로컬에서 리액트 프로젝트와 장고+도커 프로젝트를 동시에 실행시켜야 했기에 노트북의 배터리도 빠르게 녹아갔다. 마지막으로 백엔드의 DB 구조나 api url 같..
한참 묵혀두고 있다가 일주일 전부터 디자인을 갈아엎기 시작했다. 빨리 배포하려고 디자인은 1도 신경 안 쓰고 개떡같이 만들긴 했지만, 만들고나서 내가 보기에도 너무 구렸다. 시험 기간도 겹치고 다른 일들도 겹쳐서 미루고 미루다가 2024년 신년을 맞아 뜯어고치기로 했다. 그렇다고 코드 리팩토링을 한 건 아니고 디자인만 리뉴얼했다. Background 내가 보기에도 정말 구리다. 밋밋하게 흰 배경은 하기 싫어서 react-particles라는 인터랙티브 배경 라이브러리를 써봤는데.. 좋은지는 나도 모르겠다.. 이번 리뉴얼에는 원래 하고 싶었던 우주 배경을 도입하기로 했다. Department 섹션 단순하게 테이블로 나열하기보다는 모바일 웹뷰에서도 보기 쉽도록 slider 방식으로 구현하고 싶었다. swip..
동아리 홈페이지 프로젝트의 코드 가독성을 높이기 위한 전략 이번에는 프로젝트의 코드 가독성을 높이기 위해 몇 가지 전략을 시도해보았다. "동아리" 홈페이지라는 특성 상, 이 프로젝트는 동아리가 살아있는 동안은 계속 존재하고 유지보수되어야 한다. 이 말은 "내가 이 프로젝트에서 나가고 다른 개발자가 맡았을 때 이해하기 쉬워야 한다"는 뜻이다. 이러한 시도가 효과적인지는 조만간 후배가 들어왔을 때 알 수 있을 것이다. 우리가 택한 전략은 다음과 같다. TypeScript TSDoc 시멘틱 태그 1. TypeScript 사실 이러한 이유 때문에 기존의 JS 프로젝트를 TS로 마이그레이션했다. 타입도 없는 레거시를 다른 개발자가 이어갈 수 있을까 의문이 들었고, 그래서 정적 타입가 가능한 TypeScript로 ..
홈페이지를 리뉴얼하게 된 이유 현재 속한 동아리의 홈페이지를 리뉴얼하게 되었다. 사실 2023.09 ~ 2023.11까지 개발 중이었다가 한 번 갈아엎은 것이다. 바닐라 JS 기반 React를 사용하여 AWS S3 배포 자동화까지 구현한 홈페이지를 갈아엎고 TypeScript로 마이그레이션한 이유는 다음과 같다. 코드 가독성: 당장의 구현에만 급급해서 주석도 없는 스파게티 코드였다. 내가 학교를 졸업해도 후배들이 계속해서 유지보수/개발을 할 수 있어야했기에 가독성을 높이고 데이터 타입 체크가 가능한 TypeScript가 필요했다. 초기 디자인: 기존의 프로젝트는 초기 디자인도 없이 바로 개발에 들어갔었다. 그래서 구현 시 UI 디자인을 어떻게 할 지 고민하는 시간이 길어졌다. 프로젝트 기획 단계에서 초기..
