Code Colosseum - 프로그래밍 알고리즘 문제 풀이 사이트 (with. 토큰 보상)

• 코드 스테이츠 BEB 과정의 마지막 프로젝트로 개발자라면 누구나 접해본, 코딩 테스트 문제 사이트를 만들었다.
• 기본적인 사이트의 아이디어는, 문제를 출제한 사람에게 NFT로 문제를 발행하여 소유권을 보장하고 코딩 테스트 문제를 해결한 사람에게는 토큰으로 보상을 주는 것이다.
• 나는 이 프로젝트에서 클라이언트 앱 개발(프론트엔드)을 담당하였고, 나머지 두 팀원분이 백엔드와 스마트 컨트랙트를 담당하였다.
• 클라이언트 앱의 배포는 Netlify를 통해 진행하였다.
• 클라이언트 앱은 React로 만들었다. (CRA, Create React App)

🫐 클라이언트 앱에 사용된 라이브러리들

• react-router-dom ^6.3.0
• styled-components ^5.3.5
• react-query ^3.38.1
• axios ^0.27.2
• redux ^4.2.0
• react-redux ^8.0.1
• @reduxjs/toolkit ^1.8.1
• react-ace ^10.1.0
• react-slick ^0.29.0
• slick-carousel ^1.8.1
• react-icons ^4.3.1

웹사이트 GIF

웹사이트의 홈 페이지

카이카스 지갑으로 로그인, 마이페이지

문제 출제

문제 해결

문제 리뷰 작성

프로젝트 회고

• 이번 프로젝트는 약 한달동안 진행되었다. 직접 아이디어를 내고 팀원들과 의견을 조율하며 프로젝트를 진행하였다.

• 나는 이번 프로젝트에서 클라이언트의 개발과 디자인을 맡았는데, 실제로 유저가 사용할 때 어떻게 하면 더 편리하고 효율적으로 정보를 제공할 수 있을지 생각하였다.

• 그러기 위해서 다양한 알림창을 만들었다.

🍈 로그인 시 로그인한 계정의 정보를 알리기 위해서 우측 상단에 3초 뒤 사라지는 알림이 보이게 하고, 문제 제출/도전 등 로딩이 발생하는 순간에는 로딩 모달창을 만들었다. 그리고, 사용자에게 안내가 필요한 순간에는 클릭하면 사라지는 알림 모달을 만들었다.

• 모달창은 재사용되는 부분이 많았기에, Redux를 통하여 관리하였다. 필요한 순간에 보여지게 하고, 사용이 끝나면(또는 사용자의 입력이 있으면) 보이지 않게 하여 모달창을 컨트롤하였다.

• 카이카스 지갑이 연결될 때 마다 서버에서 해당 유저의 데이터를 가져오고 알림창을 띄웠어야 했는데, 이 로직은 자주 사용되었기에 따로 커스텀 훅으로 만들어 반복적으로 사용하였다.

• 문제를 출제할 때 입력을 많이 검사해야 했다. 그중에서도 입력으로 테스트케이스의 inputs을 받는 게 가장 고민되는 부분이었다.

• ,를 기준으로 여러 개의 인자를 받으면 문자열로 해당 인자들을 받았는데, 이를 다시 분리하여 배열에 담고, 제대로 입력이 되었는지 테스트가 필요하였다.

• 결국, 문자열을 ,를 기준으로 각 인자의 타입대로 변환했어야 했는데, 처음에는 재귀적으로 알고리즘을 만드는 방법으로 생각했으나 '바퀴를 다시 발명하지 마라'라는 격언에 따라서 현재 사용할 수 있는 방법이 있을지 생각을 해보았고, eval을 사용하여 입력받은 문자열을 변환하였다.

🫒 eval 사용에 대해 정리한 벨로그 포스트 링크 : https://velog.io/@citron03/ESLint-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-no-eval

• 개인적으로 사이트에 다크 모드를 만드는 것을 좋아했는데, 기본적으로 어두운 상태로 사이트를 만들다보니, 역으로 라이트 모드를 제작하고 Footer에서 변경할 수 있도록 하였다.

🫒 redux와 styled-components를 사용한 리액트 다크 모드에 대해서 작성한 벨로그 포스트 링크 : https://velog.io/@citron03/Redux%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-React-%EB%8B%A4%ED%81%AC-%EB%AA%A8%EB%93%9C-%EA%B8%B0%EB%8A%A5-with.-styled-components

• React-Query 라이브러리를 사용하였는데 처음에는 잘 사용할 수 있었지만, 단순한 페이지 조회 이외에 조건부로 Get 요청이 필요할 때 등 오히려 사용이 불편했던 점이 있었던 것 같다.

• 좋은 라이브러리라도, 적재적소에 잘 활용하는 것이 중요하다고 느끼게 되었다.

• 최대한 코드를 분리하여 보기 좋게 만들기 위해 노력하였지만, 기능이 추가되면서 코드가 덧붙여져 이 부분에서는 좀 아쉬움이 남는 것 같다. 추후 다시 코드를 분리하기도 하였지만, 그래도 아쉬움이 남는다.

• 연습문제를 등록하는 부분이나 얻은 미네랄이나 광물과 같은 포인트를 토큰으로 변환하는 과정에서 낙관적 업데이트를 적용하여 API 호출을 줄였다.

• 최신 버전 Reudx에서 createStore가 deprecated되었고, 그 대신에 @reduxjs/toolkit의 configureStore를 사용하는 것을 권장받아 아예 rtk의 createSlice나 createAsyncThunk를 사용하여 리덕스 사용 환경을 구축하였다.

🫒 관련된 내용(rtk의 사용)을 작성한 벨로그 포스트 링크 : https://velog.io/@citron03/redux%EC%99%80-Redux-Toolkit-rtk#createasyncthunk

• react-slick와 slick-carousel를 사용하여 캐러솔을 만들 수 있었다.

• 코드를 작성하는 부분에 react-ace 모듈을 사용하여 코드 에디터를 만들 수 있었다.

프로젝트 관련 링크

🍓 깃허브 : https://github.com/codestates/beb-03-project3-CodeColosseum

🍓 배포된 사이트 : https://codecolosseum.netlify.app/