replit에는 50개가 넘는 템플릿이 제공되지만 JS는 어떻게 실행할 수 있는지 알기가 어렵다. 한번 알기만 하면 쉽지만 처음 그 방법을 알기까지 꽤 많은 시행착오와 시간을 들여야 한다. 이번 포스트에서 그 시간을 아껴보자.
https://replit.com/~에 접속해서 회원가입 하고 로그인 한다. 초기 화면이 열리면 '+' 표시가 있는 아이콘 중 아무것이나 클릭한다.
'Create a Repl' 창이 열리면 'HTML, CSS, JS' 부분을 클릭한다.
Title부에 적당한 제목을 입력하고 엔터를 누르거나 '+ Create Repl' 버튼을 클릭한다.
'index.html, style.css, script.js' 파일이 있는데 'script.js' 파일이 JS 코드를 입력할 수 있는 파일이다. 'index.html' 파일안에서 <body></body> 태그안에 있는 'Hello world'를 다른 문자열로 바꾸어 보자. 바꾼 문자열이 우측 'Webview' 화면에 나타날 것이다.
style.css 파일안에는 Replit에서 제공하는 기본 스타일이 들어있다. CSS 문법을 알면 여기에서 수정해 볼 수 있다.
'script.js' 파일 안에 기본적인 JS 코드를 입력하고 상단의 'Run' 녹색 버튼을 클릭해 보자. Console 부에 결과가 나타난다.
vs code나 다른 에디터를 이용해서 JS 코드를 입력하면 html과 css 코드가 혼재되어 있어서 어느것이 JS 코드인지 아닌지 알아보기 힘들때가 많다. 그러나 Replit은 JS 코드를 완전히 분리해서 보여주므로 코딩 연습하는 사람의 입장에서는 사용하기가 아주 편하다는 장점이 있다.
'SW 배움터 > 자바 스크립트' 카테고리의 다른 글
| 자바 스크립트에서 'console.log(변수명)' 단축키로 한번에 입력하기 (1) | 2023.08.27 |
|---|---|
| jQuery 기초 강좌 1 : jQuery를 사용하는 2가지 방법 (0) | 2022.10.24 |
| JS 구구단 가로 형식에 맞혀 출력하기 (0) | 2022.09.08 |
| JS에서 웹 브라우저 화면에 변수나 데이터를 출력하는 4가지 방법 (0) | 2022.09.07 |
| 자바 스크립트로 전구 불 켜고 끄기 (0) | 2022.09.05 |