썸네일 코딩테스트용 Web IDE 구축 회고 | Web IDE 구축하기 - 3 완벽하진 않지만, 한 스프린트를 마쳤다는 느낌으로 현시점에 대해 정리를 하고 갈까 합니다 해당 내용 플젝 readme로도 작성된 내용입니다 프로젝트 동기 및 목표 클라이언트는 React, 서버는 Express.js, 컴파일 환경은 Docker를 활용했습니다. 프로그램 동작 방식은 다음과 같습니다. 유저는 원하는 프로그래밍 언어를 고른 뒤, 해당 문제에 맞는 코드를 작성합니다. 유저가 [코드 실행] 및 [제출하기] 버튼을 누르면 작성한 코드는 Socket 통신 서버에 전송됩니다. 유저가 작성한 코드는 back/compile 디렉터리에 해당 언어에 맞는 파일로 만듭니다. 해당 언어에 맞는 Dockerfile을 실행시켜 유저의 코드 파일을 복사해 Docker 내 임시파일로 저장하고, 이미지 생성, 컨테이너를 ..
썸네일 Docker로 각 컨테이너마다 Java, C++, Python, Node.js 언어 실행시키기 | Web IDE 구축하기 - 2 Java, C++, Python 언어가 설치되지 않은 환경에서 어떻게 실행시킬까? 저번 글에는 Javascript 코드를 isolated-vm 가상머신 환경에서 실행시키는 작업을 했습니다 이제 그다음 스텝인 Python, Java, C++ 언어를 받아서 실행시켜야 하는데 어떻게 해야 할까요? 여기서 제가 한 가지 놓친 점이, JS를 뺀 나머지 언어들을 실행시키기 위해선 내 로컬에 해당 언어가 깔려있어야 된다는 것입니다 이 부분을 몰랐던 건 아닌데... 왜 JS 작업할 때 놓치고 있었던 걸까요...?😥 그래서 제 노트북에 모든 언어를 설치해야 하나? 싶었는데, 가뜩이나 똥컴인 노트북에 너무 부담이 되더라고요 (어차피 용량 때문에 깔지도 못했을 듯) 그래서 Docker를 사용하게 되었습니다 Docker 또한..
썸네일 Remix.js V2 살펴보기 | Map Service 구축하기 - 1 전회사에서 사내 어드민 프로젝트로 Remix.js + React-query 환경에 작업을 했었습니다 그때 처음 알게 된 Remix.js는 좀 독특하다고 느껴졌었는데요 이번에 토이 프로젝트로 Remix.js로 풀스택 개발을 해보자고 결심했습니다 근데 웬걸... 버전 2가 나왔더라고요? 또한 Remix.js를 온전히 써보려고 하니 생각보다 제가 Remix.js 생태계 자체를 잘 이해한 건 아니구나 라는 생각이 들었습니다 이번 글에서는 Remix.js를 써보면서 신기하다고 생각했던 점을 쭈욱 써볼까 합니다 파일 시스템 규칙 Remix.js는 React Router 위에 구축이 되었다고 합니다 그래서 React Router 가 기본으로 내장되어있고, 우린 Nested Routes를 구성할 수 있습니다 V1에서는..
썸네일 Javascript 코드를 서버에서 안전하게 실행시키는 방법 (feat. isolated-vm) | Web IDE 구축하기 - 1 사용자에게 받은 코드를 서버단에서 어떻게 실행시켜야 할까? 제가 이번에 개발하려는 Web IDE는 React + Node.js 환경으로 구축하려고 합니다 가장 먼저 Javascript 환경인 만큼, Javascript 코드를 클라이언트에게 받아서 서버에 어떻게 실행시켜야 할까요? eval() 함수 또는 new Function이 가장 먼저 떠오를 수 있을 겁니다 하지만 이 함수들은 절대로 사용합니다 보안상의 큰 문제를 야기시키기 때문입니다 그럼 어떻게 안전한 환경에서 코드를 실행시킬 수 있을까요? 개인적으론 그다음에 떠오른 생각이 좋~은 인터프리터가 있지 않을까? 였는데요ㅋㅎ... 당연 없습니다... 허허 일단 가장 먼저 가상환경(가상머신)에서 코드를 실행시켜야 합니다 그리고 안전성이 보장된 샌드박스 환경..