온라인 JavaScript 에디터란?
온라인 JavaScript 에디터는 별도의 개발 프로그램을 설치하지 않고 브라우저에서 JavaScript 코드를 작성하고 바로 실행해볼 수 있는 도구입니다. 짧은 문법을 확인할 때뿐 아니라 여러 파일을 나눠 작성하고, Console 출력과 Terminal 입력을 확인하며 작은 예제나 알고리즘 문제를 테스트할 때 사용할 수 있습니다.
온라인 JavaScript 에디터 사용 방법
Explorer에서 실행할 파일을 선택한 뒤 코드를 작성하고 우측 상단의 실행 버튼을 누르면 됩니다.
console.log(), console.table(), 경고와 오류 메시지는 하단 Console에서 확인할 수 있습니다. 키보드를 자주 사용한다면 Ctrl/⌘ + Enter로 실행하고 Ctrl/⌘ + S로 작업 내용을 저장할 수 있습니다.여러 JavaScript 파일을 함께 작성하기
한 파일에 모든 코드를 작성하지 않고
main.js, utils.js처럼 파일을 나눠 관리할 수 있습니다. 같은 작업 공간에 있는 JavaScript·MJS·CJS·JSON 파일은 require('./utils')처럼 상대경로로 불러올 수 있습니다. 새 파일을 직접 만들거나 컴퓨터의 파일을 드래그해서 추가할 수 있고, Explorer의 파일 메뉴에서 이름을 바꾸거나 필요 없는 파일을 삭제할 수 있습니다.코드 저장과 파일 내보내기
작성 중인 작업은 브라우저에 저장해 페이지를 다시 열었을 때 이어서 편집할 수 있습니다. 컴퓨터에 파일이 필요하다면 현재 파일만 개별로 내보내거나, 여러 파일을 하나의 ZIP 파일로 묶어 내보낼 수 있습니다. 원본 파일을 자동으로 덮어쓰지 않으므로 연습 코드나 임시 테스트를 부담 없이 수정하기 좋습니다.
Terminal에서 입력받는 JavaScript 실행
node main.js처럼 Terminal에서 파일을 실행할 수 있고, readline을 사용하는 코드도 실행 결과 아래의 입력창에서 값을 입력하며 테스트할 수 있습니다.readline.question() 방식뿐 아니라 rl.on('line', ...)처럼 줄 단위 입력을 받는 코드도 사용할 수 있습니다. 줄 단위 입력을 끝내고 싶을 때는 실행 Console 입력창 옆의 EOF 버튼을 누르면 됩니다. 키보드를 선호한다면 IDE가 활성화된 상태에서 Ctrl/⌘ + D도 입력 종료로 처리됩니다.자동 완성과 코드 편집 기능
JavaScript 키워드, 자주 사용하는 전역 객체, 현재 파일에서 선언한 변수와 함수, 워크스페이스 파일 경로를 자동 완성 후보로 확인할 수 있습니다.
Ctrl + Space로 자동 완성을 직접 열 수 있으며, 방향키로 후보를 고르고 Enter 또는 Tab으로 입력할 수 있습니다.Ctrl/⌘ + / 주석 토글, 들여쓰기·내어쓰기, 줄 복제와 이동, 찾기·바꾸기 같은 편집 기능도 지원합니다.API 요청 테스트
fetch()를 사용해 API 요청 코드를 실행하고 응답을 확인할 수 있습니다. JSON API를 호출하거나 비동기 함수와 async/await 동작을 확인할 때 유용합니다. 단, 외부 사이트의 API는 해당 서버가 브라우저 요청을 허용하지 않으면 CORS 오류가 발생할 수 있습니다.어떤 경우에 유용한가요?
- JavaScript 문법 연습: 배열, 객체, 함수, 클래스, Promise 등의 동작을 바로 확인할 때
- 알고리즘 문제 풀이: 입력값을 받아 결과를 출력하는 코드를 빠르게 테스트할 때
- 코드 조각 확인: 프로젝트에 적용하기 전 짧은 로직이나 정규식, 데이터 가공 코드를 시험할 때
- 여러 파일 예제: 유틸리티 함수와 JSON 데이터를 파일별로 나눠 작성하고 불러올 때
- API 연습: fetch와 async/await를 이용한 네트워크 요청을 확인할 때
사용할 때 알아둘 점
이 에디터는 브라우저에서 JavaScript 학습과 코드 테스트를 빠르게 하는 용도에 적합합니다.
npm install이 필요한 외부 패키지 전체나 실제 컴퓨터 파일을 직접 다루는 fs, 완전한 Node.js 서버 환경이 필요한 코드는 일반 로컬 개발 환경에서 실행해야 합니다. 실행 시간이 오래 걸리는 코드는 제한 시간을 3초·10초·30초 또는 제한 없음으로 변경할 수 있습니다.자주 묻는 질문
- Q. 코드는 자동으로 저장되나요?A. 네. 작업 중인 파일은 브라우저에 저장되어 같은 브라우저에서 다시 이어서 편집할 수 있습니다. 중요한 코드는 개별 파일이나 ZIP으로도 내보내는 것을 권장합니다.
- Q. require()를 사용할 수 있나요?A. 같은 작업 공간에 있는 JavaScript·MJS·CJS·JSON 파일은 상대경로 require()로 불러올 수 있습니다. readline, path, util 등 일부 자주 쓰는 기본 모듈도 사용할 수 있습니다.
- Q. readline의 line 이벤트도 사용할 수 있나요?A. 네.
rl.on('line', callback)으로 Enter마다 한 줄을 받을 수 있으며, 입력이 끝났을 때Ctrl/⌘ + D를 누르면 close 이벤트가 호출됩니다. - Q. npm 패키지를 require()할 수 있나요?A. npm 패키지를 설치하는 기능은 제공하지 않습니다. 외부 라이브러리가 필요한 프로젝트는 로컬 Node.js 개발 환경을 사용하는 것이 적합합니다.
- Q. 모바일에서도 사용할 수 있나요?A. 사용할 수 있습니다. Explorer, 코드 편집기, Console과 Terminal을 모바일 화면에서도 이용할 수 있으며 필요에 따라 전체화면과 패널 크기를 조절할 수 있습니다.
- Q. fetch() 요청이 실패하는 이유는 무엇인가요?A. 주소 오류, 네트워크 문제 외에도 외부 API가 브라우저의 교차 출처 요청을 허용하지 않는 경우 CORS 오류가 발생할 수 있습니다.
