[모던자바스크립트] 3. 자바스크립트 기초
in Devlog on JavaScript
이 글은 번역 및 정리 글입니다. 출처: javascript.info
개발자 콘솔
코드는 오류가 발생하기 쉽다. 인간인 이상 오류는 발생할 수 밖에 없다.
그러나 브라우저에서는 기본적으로 사용자에게 오류가 표시되지 않는다. 따라서 스크립트에 문제가 발생하면 깨진 부분을 보지 못하여 수정할 수 없다.
일반적으로 스크립트에 대한 오류를 보고 다른 유용한 정보들을 얻기 위해 개발자 도구가 브라우저에 포함되어 있다.
대부분의 개발자는 크롬이나 파이어폭스를 사용하곤한다. 이들 브라우저에는 최상의 개발자 도구가 있기 때문이다.
개발자도구는 많은 기능을 가지고 있으며, 이를 잘 사용하는 방법도 우리는 배워야 한다.
구글 크롬
bug.html 페이지를 열면 자바스크립트 코드에 오류가 있다. 개발자도구를 통해서 보도록하자.
윈도우라면 F12, 맥이라면 Cmd+Opt+J가 디폴트 단축키이다.
기본적으로 콘솔탭이 열려 있으며. 버그페이지에서는 붉게 에러가 떠있는 것을 볼 수 있다.
오류의 내용은 lalala라는 알 수 없는 명령이 포함되어 있다는 것이다. 오른쪽 bug.html:12 는 오류가 발생한 줄 번호이며, 클릭하면 소스를 볼 수 있다.
오류 메세지 아래에 파란색 > 기호가 있다. 이곳은 자바스크립트 명령을 입력 할 수 있는 명령줄 이라고 한다.
이제 오류를 볼 수 있게되었으니 시작단계로써는 충분하다. 추후에 디버깅에 대해 더 공부해 보자.
자바스크립트 기초
Node.js로 서버환경에서도 사용할 수 있지만, 브라우저를 기준으로 자바스크립트를 공부해 보자. alert같은 브라우저 함수를 사용할 예정이니 Node.js를 사용하시는분들은 이런부분들을 조심.
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>
`/path/to/script.js` 는 루트에서부터 절대 경로이다. 상대경로도 제공가능하며 외부 url도 제공할 수 있다.
이는 CDN에서 로대시 라이브러리를 가지고 오는 스크립트이다. 이를 첨부하면 로대시를 자유롭게 사용할 수 있다.
여러 스크립트를 넣고 싶다면 아래와 같이 하면 된다.
…
복잡한 스크립트는 별도의 파일에 작성하고 스크립트를 임포트 하는것이 좋다. 브라우저가 파일을 다운로드하여 캐싱하여 동일한 스크립트를 참조하는 다른 페이지는 다운로드하지 않고 캐시에서 가져와 트래픽이 줄어들고 페이지가 더 빨라지는 효과를 얻을 수 있다.
<script> 태그는 src와 스크립트 내용을 동시에 가질 수 없으므로 아래와 같은 경우는 내용이 무시된다.
<script src=”“/js/script1.js”> alert(1); // 내용이 무시된다 </script> ```
숙제
나는 자바스크립트 개발자다라는 메세지를 띄우는 페이지를 작성1번 숙제의 스크립트를 외부 파일로 추출하여 수정하고 작동되도록 작성
2023년 새해에는 성장하고 함께하고 싶다면?
Pre A 단계 이상의 스타트업 C 레벨들이 모여서 커뮤니티를 만들었습니다. 같이 스터디하고 친해질 일잘러를 찾습니다.
