[JavaScript] 자바스크립트의 기본

INTRO

출처는 위쪽에 남겨두겠습니다. 아래에 남기기엔 양심에 찔려서요 (코드 구조는 너무 당연해서 스킵했습니다)

https://ko.javascript.info/hello-world

https://ko.javascript.info/strict-mode

진짜 사담에 여담이지만 [JS]로 안 쓰고 [JavaScript]로 쓰는 이유는 영어가 길면 멋있어보이기 때문입니다

잡소리 그만하고 바로 할게요 

---

Script 태그

HTML 문서에 자바스크립트 프로그램을 삽입하게 해주는 태그입니다. 

해당 태그 내부에는 자바스크립트 코드가 들어가고, 브라우저는 이 태그를 만나면 코드를 자동으로 처리합니다. 

속성

• type 속성 
  • <script type =...>로 쓰여집니다. 
  • HTML4 까지는 명시가 필수였으나, 이제는 필수가 아닙니다.
  • 자바스크립트 모듈에 사용할 수 있습니다.
• language 속성
  • <script language = ...>로 쓰여집니다. 
  • 현재 사용하고 있는 스크립트 언어를 나타내는 속성입니다.
  • 현재는 JS가 기본 언어라서 속성의 의미가 퇴색됐다 합니다. 쓸 필요가 없거든요.

외부 스크립트

코드의 양이 많은데 한 파일에 때려넣으면 관리가 진짜 진짜 어려워요

숱하게 들었던 거지만 체감하고 싶지 않았습니다 저도

그래서 이 경우 파일로 소분하여 저장할 수 있습니다. 이렇게 분해한 파일은 src 속성을 사용하여 삽입합니다.

<script src = "js/파일/경로/js파일.js"><script>

같은 프로젝트 내 파일의 상대 경로나 절대 경로로 나타낼 수 있습니다. 

물론 URL 전체를 속성으로 사용하는 것도 가능합니다.

여러개의 스크립트를 삽입하고 싶다면 아래와 같이 사용하면 됩니다. 

<script src = "js/파일/경로/js파일.js"><script>
<script src = "js/파일/경로/js파일.js"><script>
<script src = "js/파일/경로/js파일.js"><script>

파일을 분리하는 이유

스트립트를 별도에 파일에 작성할 경우, 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 브라우저는 페이지가 변경될 때마다 캐시에서 스크립트를 다운받아 사용합니다. 이를 통해 트래픽이 절약되고, 웹 페이지 속도가 향상이 되는 효과가 있습니다. 때문에, 스크립트가 길어질 경우에는 별개의 파일로 분리하여 저장하는 것이 좋습니다.

주의

<script>태그 내부 코드가 무시되는 경우가 있습니다. 

<script src = "파일/경로/파일.js">
 	alert("이 경우 alert은 출력되지 않습니다")
</script>

따라서, 내부에도 코드를 작성하고 싶고, 외부 파일도 연결하고 싶다면 아래와 같이 수정해주면 됩니다. 

<script src = "파일/경로/파일.js"></script>
<script>
	alert("이렇게 해주세요")
<script>

 

---

엄격 모드

자바스크립트는 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었습니다.

하지만, 실수도 영원히 박제된다는 큰 단점이 있었습니다. 동전의 양면성...

그래서 등장한 것이 ES5입니다. 하지만, 기본 기능을 변경하였기 때문에 생기는 하위 호환성 문제를 해결하기 위해 use strict 지시자를 사용해 엄격 모드를 활성화 하여 변경 사항을 사용할 수 있게 했습니다. 

지시자 use strict

"use strict" 혹은 'usr strict'로 사용합니다. 

단순한 문자열처럼 생겼지만 이 지시자가 스크립트 최상단에 오게 된다면 스크립트 전체가 모던한 방식으로 동작합니다. 

여기서 주의 사항은 최상단에 있지 않으면 엄격 모드가 활성화되지 않는다는 점입니다 

//이 경우 엄격 모드는 활성화되지 않습니다
<script>
	alert("hi");
    "use strict"
</script>

//이렇게 고쳐주세요
<script>
   "use strict"
   alert("hi");
 </script>

엄격 모드를 취소할 방법은 없다는 점도 같이 명심해두면 좋을 것 같습니다 :)

콘솔에서의 use strict 

브라우저 콘솔 즉, 개발자 모드에서 테스트를 할 때는 어떻게 사용해야 할까요?

'use strict'를 입력한 후, shift + enter를 통해 줄바꿈을 이용하면 됩니다!

굳이 굳이 사용하지 않아도 되고, 앞으로 모듈이라던가 클래스를 더 알게 되면 더욱 쓸 일이 없을테지만, 알아둬서 나쁠 건 없을 것 같아요 :)