자바스크립트(JavaScript) 코드 테스트 환경 추천
HTML · CSS · JavaScript – JSBin, 브라우저 DevTools, Node.js
자바스크립트(JavaScript) 개발을 하다 보면
간단하게 HTML, CSS, JavaScript 코드를 테스트하고 싶을 때가 많습니다.
이 글에서는 JSBin, 브라우저 개발자도구(DevTools), Node.js를 활용해 효율적으로 코드를 테스트하는 방법을 정리했습니다.
(최종 업데이트: 2025년 11월 24일)
⚡ 1. JSBin (https://jsbin.com/)
JSBin은 브라우저에서 바로 실행할 수 있는
온라인 HTML / CSS / JavaScript 코드 테스트 도구입니다.
별도 설치 없이 주소만 열면 되기 때문에, 간단한 샘플 코드나 UI 테스트에 매우 유용합니다.
- - Output 탭 : HTML, CSS가 적용된 실제 결과 화면 확인
- - Console 탭 : JavaScript 코드 실행·디버깅
- - Add library : jQuery, Bootstrap 등 다양한 라이브러리 추가 가능
- - https://jsbin.com/
💻 2. 브라우저 개발자도구(DevTools)
크롬(Chrome), 엣지(Edge), 사파리(Safari), 파이어폭스(Firefox) 등
모던 브라우저에는 기본적으로
개발자도구(DevTools)가 포함되어 있습니다.
보통 [F12] 또는 Ctrl + Shift + I (Mac은 ⌥ + ⌘ + I)로 열 수 있습니다.
- - Console 탭 : JavaScript 코드를 한 줄씩 바로 실행해 테스트
- - Elements 탭 : HTML 구조와 스타일을 실시간으로 수정·검증
- - Sources 탭 : 로딩된 JavaScript 파일 디버깅 및 브레이크포인트 설정
📦 3. Node.js로 콘솔에서 테스트
Node.js가 설치되어 있다면,
브라우저 없이도
터미널(Terminal) 또는 CMD에서
JavaScript 코드를 바로 실행할 수 있습니다.
- - 터미널에서 node 입력 후 엔터 → REPL 환경에서 코드 테스트
- - 파일 단위 테스트 : node test.js 처럼 파일 실행
- - 알고리즘 연습, 서버 사이드 JavaScript 테스트에 적합
- - https://nodejs.org/
자바스크립트(JavaScript) | 날짜 유효성 검사(윤달 포함) YYYYMMDD, YYYY-MM-DD
윤달을 포함한 날짜의 유효성 검사
자바스크립트(JavaScript) | 주민등록번호, 법인등록번호, 사업자등록번호 유효성 체크
자리수 + 유효성 체크
자바스크립트(JavaScript) | 모바일 브라우저 구분하기, Check mobile browser
정규식(Regex : Regular expression) 이용하기
자바스크립트(JavaScript) | IE(Internet Explorer) replaceAll 구현
IE에는 문자열 함수에 replaceAll이 없어요.
댓글
댓글 쓰기