웹 개발 온라인 IDE 환경 구축하기 (사지방에서 웹 공부하기)

웹 개발 온라인 IDE를 찾은 이유

군에서 코딩을 한지 어언 1년이 넘었다. 알고리즘 공부 및 백준 문제풀이를 주로 했지만 중간중간에 AI 공부, 깃허브 블로그 구축을 위해 웹 공부도 찍먹 (진득히 하지는 못)했다. 이번에는 군에서 진행하는 해커톤 사전공부를 하기 위해서 웹개발을 할 수 있는 온라인 IDE를 찾아보고 있었다. 내가 찾는 온라인 IDE의 조건은 이렇다.

1. 간단한 테스트가 가능한 온라인 IDE (큰 프로젝트 수준의 코드는 쓰지 않는다.)

2. 실행이 빠르고 컨테이너가 열리는 시간도 빠른 IDE

3. 별다른 공부나 복잡한 사전구축을 하지 않아도 바로 테스트가 가능한 IDE

이 3가지 조건을 모두 만족하는 온라인 IDE로 replit을 채택했다.

 

replit의 장점?

The collaborative browser based IDE

사실 replit은 사지방에서 백준과 코포를 풀 때도 외부 IDE로 잠깐 사용했었었다. 요즘은 leetcode에 있는 playground를 사용하고 있지만.. (leetcode playground는 Problem solving에 최적화된 기능을 갖고 있다.)

replit을 쓰면서 알게된 장점은 가벼운 코드를 테스트하는데 이만한 IDE는 없다는 것이다. UI도 단순하고, 실행도 다른 IDE보다 빠르다. 해커톤을 하기 위한 IDE를 골라야 한다면 replit을 고르지 않았겠지만, 현재의 목적은 html, css, js 문법을 배우고 테스트하는 용도이기 때문에 고르게 되었다. 

 

replit으로 웹 공부하기

먼저 replit 회원가입을 하고 레퍼지토리에서 html,css,js를 클릭하면 이렇게 html파일, css파일, js파일이 생성된다.

그리고 이 레퍼지토리에서 쓴 코드를 웹 화면에 보여주는 링크도 생성한다.

https://webpractice.itinbangk.repl.co/ 이 링크가 내 레퍼지토리의 코드를 실행해 웹으로 보여주는 주소이다.

replit 화면

 

그냥 레퍼지토리만 생성하면 끝이다. 구름IDE나 기타 외국 IDE처럼 커맨드를 입력하고 뭘 설치하고 할 필요가 없다.