💻Dev/JavaScript
JS 실행하는 방법과 콘솔 출력 종류
jini-dev
2025. 5. 8. 10:06
SMALL
출력 : console.log();
콘솔로그 안에다가 원하는 것을 입력한 후 실행한다.
설치한 Extention( Run Code)를 실행하기 위해
단축키( Ctrl + Alt + N ) 를 누르거나 마우스 우클릭을 해서 아래와 같이 Run Code 를 실행한다.
출력화면
자바스크립트 실행하기
1. 인라인 스크립트
태그 내부에 인라인으로 작성하는 방법이다.
코드가 길어지면 코드 가독성이 저하되고, 유지보수가 어렵다.
코드 재사용의 어려움이 발생한다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!-- 인라인 스크립트 -->
<button onclick="window.alert('Hello Wolrd')">Click me!</button>
</body>
</html>
2. 내부 스크립트
스크립트 태그를 감싸서 내부에 코드를 작성하는 방법이다.
반드시 body 태그 최하단에 작성되어야 한다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<button>Click me!</button>
<!-- 내부 스크립트 -->
<script>
console.log("Hello Inner Script");
</script>
</body>
</html>
JS 코드를 body 태그의 최하단에 작성해야 하는 이유
JS 코드를 중간에 작성하면 HTML을 파싱해서 웹 페이지를 구상하다가,
중간에 스크립트 코드를 해석하는데에 시간을 써서
사용자가 빈 화면을 보고 있어야 할 수 있다.
=> 이 경우 async나 defer 속성을 사용해서 해결하는 방법이 있다.
async나 defer은 스크립트를 비동기적으로 로드하는 속성이다.
HTML 파싱이 중단되는 현성과 DOM 트리가 완성되기 전에 스크립트가 실행되는 것을 방지하기 위해 사용된다.
async : 스크립트가 로드 되는 즉시 실행 (스크립트 로드가 순서 상관없이 실행되는 경우 적합)
defer : 스크립트를 비동기적으로 로드 하며, HTML 파싱이 완료된 후 스크립트를 실행 (스크립트의 실행 순서가 중요할 때 적합)
3. 외부 스크립트
.js 확장자를 가진 외부 파일을 따로 생성한 후, body 태그 내부에 src 속성으로 연결하여 작성한다.
-> 브라우저 콘솔창에서 간단한 JS 코드는 연습할 수 있지만, 어려운건 동작하지 않을 수도 있다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<button>Click me!</button>
<!-- 외부 스크립트 -->
<script src="./script.js"></script>
</body>
</html>
콘솔 출력하기
중요도 : 오류메세지(error) > 경고 메세지(warn) > 정보 메세지(info) > 로그 메세지(log) 순서이다.
1. 로그 메세지
console.log('hello world');
2. 오류 메세지
console.error("에러 메세지 출력");
3. 경고 메세지
console.warn("경고 메세지 출력");
4. 정보 메세지
console.info("정보 메세지 출력");
5. 표 만들기
console.table({ name: "홍길동", age: 100 });
6. 시간 정보 확인
console.time("시계");
console.timeEnd("시계");
7. 스타일 설정
console.log("%cHello world", "color:hotpink; font-size:24px");
console.log(
"%cHello %cworld",
"color:hotpink; font-size:24px",
"color:royalblue; font-size:24px"
);
LIST