온라인 져저를 만들어보자!

왜만드니?

대학교 재학시절 나는 SW운영보조원 활동을 2년간 했다. 주로 어떤걸 했었냐면..

• QnA 답변 활동 : 프로그래밍 과목 QnA게시판에 대한 답 달아주기(과제하다가 막힌 부분이 있으면 힌트를 주는 방식으로 진행)
• 오픈소스 프로그램 커스텀 : Indico 한글화 및 필요한 기능만 남기기, 디자인 커스텀
  여담) 웹 개발 자체도 처음이었는데 flask가 너무 생소하고, 그 당시 나에겐 너무 큰 규모의 프로그램이었던지라 코드를 읽는데 정말 많이 애를 썼다. 1년 동안 얼렁뚱땅 수정을 하긴 했었는데 2년이 지난 지금에서야 어떤 구조로 돼있었는지 어렴풋이 이해가 가는 것 같다.
• 도커 튜토리얼 작성 : 도커 사용법 및 간단한 예제를 만들어 ppt로 제작했다.
• Online-Judger 개발 : angular, express.js, kafka, mongodb를 이용해 개발을 하려고 했고, 도커 + 젠킨스를 이용해 학교 서버에서 배포하려고 했다. 하지만 웹개발 초보자였던 나에게는 이 모든걸 하기 너무 벅찼다.. 결국 이론만 공부하다가 1년이 다 가버렸고 실질적인 개발에 많은 도움이 되진 못했다. 나는 도커에서 카프카 컨슈머가 메세지를 분배해서 가져가지 않고, 한 컨슈머가 모든 메시지를 가져오는 이슈를 해결했었다.

• 대신 거기서 배운 것들을 ( docker, express, RESTAPI, kafka )를 졸업작품에 적용해보았다.
• 온라인 져저를 직접 구현해보고 배포한 경험이 생긴다면 정말 멋있을 거라고 생각했는데, 내 기여도는 상당히 낮아서 아쉬웠다😭. 언젠가 꼭 내손으로 만들어보고 싶었고, 웹 개발에 대한 지식이 조금 생겼다고 생각이 들어 만들어보기로 했다!

어떤 기술들을 사용할까?

• 우선 내가 하고 싶어서 해보는 프로젝트인 만큼 내가 쓰고 싶었던 기술들도 마음껏 써보기로 했다!(이 프로젝트에 딱 맞는 기술이 아니라고 할지라도,, graphql같이 너무 방향성이 다르다~싶은 것만 아니면 써보기로 했다. )

그동안 배우고 써본 것들

• 리액트 : 애증하는 리액트..
• 약간의 최적화(LazyLoading, 렌더링 최적화, 코드 스플리팅)
• 리덕스
• 리덕스 툴킷
• 타입스크립트

공부했지만 써보지 못한 것들

• Next.js : 쓸까말까 정말 고민을 많이 했다. 온라인 져저 특성상 스테이트의 변화가 매우 잦기 때문에 Next.js를 쓰는 의미가 있을까?싶었는데 문제를 보여주는 페이지는 정적으로 만들어줘도 나쁘지 않다고 생각해서 Next.js를 써보기로 했다.
• 리덕스 사가 or redux toolkit의 createAsyncThunk: 늘 예제에서만 실행해보고 사용해봤던, 그 리덕스 사가! 내가 푼 문제의 채점 현황을 리덕스로 관리해서 알림으로 띄워주면 좋을 것 같은데, 채점에 걸리는 시간은 들쭉날쭉하니 비동기로 처리해야한다. => 이거 완전 리덕스 사가쓰기 좋은 이슈아닌가! 그래서 망설임 없이 리덕스 사가를 써보기로 했다.
• OAuth
• Jest, React Testing Library, ... (테스팅)

모르지만 써볼 것

• Github Action(CI/CD)
• STOMP