1. 프로젝트 설명
1.1 프로젝트의 목적과 목표
- 브라우저에서 터미널 환경을 보여주고 linux 명령어를 연습할 수 있는 사이트를 만들고 싶었다.
- linux 명령어와 더불어 sql 쿼리문도 연습할 수 있도록 기능을 추가하였다.
1.2 팀구성
- Front-End : 1명
- Back-End : 2명
1.3 진행 기간
- 2023년 3월 23일 ~ 2023년 4월 14일
1.4 기술 스택
Front-End
- React
- Redux
- Xterm.js
- Socket.io
Back-End
- TypeScript
- Node.js
- Express
- MySQL
- Sequelize
- Bash
Deploy
- Amazon EC2
- GitHub Actions
1.5 배포 과정
- 이번 프로젝트에서는 GitHub Actions를 사용해 자동으로 배포가 되도록 구현해 보았다.
- Pull Request를 한 뒤 Main 브런치에 Merge를 하게 되면 GitHub Actions에 작성한 Workflow가 Front/Back 디렉토리의 변경을 감지하고 변경된 디렉토리만 빌드를 진행하여 해당 서버로 SCP로 전달하게 된다.
2. 구현 기능
2.1 메인 페이지
2.2 회원 가입
2.3 로그인
2.4 리눅스/MySQL 모드 선택 버튼
2.5 문제 정답 체크
2.6 프리 터미널
2.7 프로필 페이지
2.8 방명록
2.9 기여자 페이지
느낀 점
3.1 어려웠던 부분
프로젝트 중간에 페이지에 접속하면 소켓이 3개씩 열리는 문제가 있었다. 이 문제의 원인은 React가 상태의 변경을 감지해 재렌더링을 하기 때문이 었다. 이 문제를 해결하기 위해 3명이 함께 고민한 결과 재렌더링이 안되는 부분으로 소켓 연결 코드를 옮기기로 했고 소켓 연결을 맺는 코드를 App 컴포넌트로 옮겨서 하위 컴포넌트에 props로 전달해 주는 방법으로 해결 하였다.
3.2 기억하고 싶은 부분
이번 프로젝트에서 가장 기억에 남는 부분은 GitHub Actions이다. GitHub Actions는 처음 써보기도 했고 사용하면서 느낀 편리함이 많았기 때문이었다.
