코딩테스트용 Web IDE 구축 회고 | Web IDE 구축하기 - 3

 

완벽하진 않지만, 한 스프린트를 마쳤다는 느낌으로 현시점에 대해 정리를 하고 갈까 합니다

해당 내용 플젝 readme로도 작성된 내용입니다

 

 

---

 

 

프로젝트 동기 및 목표

---

클라이언트는 React, 서버는 Express.js, 컴파일 환경은 Docker를 활용했습니다.

프로그램 동작 방식은 다음과 같습니다. 유저는 원하는 프로그래밍 언어를 고른 뒤, 해당 문제에 맞는 코드를 작성합니다. 유저가 [코드 실행] 및 [제출하기] 버튼을 누르면 작성한 코드는 Socket 통신 서버에 전송됩니다. 유저가 작성한 코드는 back/compile 디렉터리에 해당 언어에 맞는 파일로 만듭니다. 해당 언어에 맞는 Dockerfile을 실행시켜 유저의 코드 파일을 복사해 Docker 내 임시파일로 저장하고, 이미지 생성, 컨테이너를 띄웁니다. 유저가 사용해야 할 입력값은 example 또는 testcase 데이터를 이용해 컴파일된 Docker 컨테이너에 echo 쉘 명령어로 실시간으로 할당시킵니다

[코드 실행]으로 진행했을 경우에는 출력 값을 그대로 반환해 주고, [제출하기]로 진행했을 경우에는 testcase의 output과 유저의 결괏값이 맞는지 틀린지에 대한 값을 출력해 줍니다.

모든 example, testcase가 진행된 후에는 해당 Docker 컨테이너를 삭제하고, 코드 파일도 삭제합니다.

 

 

프로젝트를 진행하며 느낀 점

---

이 프로젝트를 통해서 Docker를 처음 사용해 봤고, Javascript 환경이라도 가상머신을 이용하면 다른 언어를 받아서 처리할 수 있다는 걸 배웠습니다.

또한, Node.js를 평소에는 API CRUD 만들 때 써봤는데 처음으로 child process 함수들을 이용해 보면서 Node.js에 대해 한층 더 깊이 탐구할 수 있는 계기가 되었습니다.

 

 

아쉬운 점 및 개선 사항

---

1. Docker 실행될 때 굉장히 느립니다. 이 부분은 제 개인 노트북 문제일 확률이 높다고는 생각이 듭니다.
2. 컴파일이 진행될 때 클라이언트 쪽에서 Socket 연결이 끊겼다는 에러를 반환합니다.
   실제로 정말 끊기진 않았고, 실행에 문제는 없으나 이러한 에러를 왜 반환하는 건지 아직 의문인 상태입니다.
3. 현재 코딩테스트 input이 될 값을 띄어쓰기 정도만 포함된 문제로밖에 못하는 것입니다.
   "3" 또는 "3 7 4" 이런 값은 가능한데, "1 2 3\n5 6 7" 이런 값이 안됩니다. 쉘 명령어를 echo -e "1 2 3\n5 6 7" 이렇게 작성을 해보았으나, 클라이언트 측에서 출력할 때-e 1 이렇게만 출력됩니다. 컨테이너 안에서 shell 명령어가 실행되거나, shell 파일을 읽어오도록 수정해 보았으나 해결되지 못했고, bash 에러가 떠서 이 부분도 수정을 해보았으나, 아직까지 해결하지 못했습니다.
   이 부분은 공부가 좀 더 필요할 것 같습니다.

 

 

마무리

---

앞으로 개선사항을 어떻게 해결할지가 관건일 것 같은데,

제가 바로 해결할 수 있을지 의문입니다

프론트엔드 개발자이고, 서버와 도커에 대해 지식이 그렇게 빠삭하진 않다 보니 

프로젝트를 하는 내내 고난과 역경이었습니다ㅎㅎㅎ....

그래도 늘 궁금했던 서비스인데 이렇게 직접 구현해 보니 궁금증이 싹 풀려서 좋더라고요!

해당 프로젝트 코드는 제 깃허브에서 확인하실 수 있습니다

https://github.com/Kyung-A/run-code-IDE

GitHub - Kyung-A/run-code-IDE: 코딩테스트용 Web IDE