Roxylife
Roxy 빛나는 새벽
Roxylife
전체 방문자
오늘
어제
  • 분류 전체보기
    • 개발(회고록)현황일기
    • 개발CS지식
    • 알고리즘문제풀기
    • Git
    • 개발언어
      • HTML, CSS
      • JavaScript
    • 프론트엔드
      • React
    • Side Project
      • 혼자Project
      • 팀Project
    • 교육참여
      • [스파르타코딩클럽]
      • [저스트코드]

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 스파르타코딩클럽후기
  • 팀프로젝트
  • JUSTCODE
  • 신년운세코딩패키지
  • 코딩교육
  • 회고록
  • 드림코딩
  • JavaScript
  • 바닐라JS크롬앱
  • 저스트코드
  • 노마드코더
  • 스터디코드
  • 개발
  • JUSTCODE6기
  • git
  • 힙한취미코딩이벤트
  • 저스트코드6기
  • 기업협업
  • 스파르타코딩클럽
  • 코코아톡클론

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Roxylife

Roxy 빛나는 새벽

개발언어/JavaScript

JavaScript 기본 및 설정

2021. 8. 24. 15:51

JavaScript를 왜 사용할까?

  • 프론트엔드에서만 가능
  • 액티브한, 반응형 웹페이지를 구현 ex. game, three.js

JavaScript 설정

HTML 환경 특성상 코드가 적혀있는 순서대로 쭉 읽어서 내려 오기 때문에,
그 특성을 고려하지 않고 코드를 작성하고 나면
내가 원하는 대로 페이지에 나오지 않을 수 있는 상황이 생길 수 있다.
그래서 JavaScript 파일을 불러올 때는 defer 를 활용해 불러오는 것이
가장 좋은 방법이라고 한다.

<head> <script defer src="script.js"></script> </head>

실제 기본적인 Setting

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="variable.js"></script>
  </head>
  <body></body>
</html>

JS 파일에는 변수를 설정하는 코드를 사용하는 경우가 많은데,
이때, 가장 상단에 'use strict'! 를 선언해 주는 것이 좋다고 한다.
이걸 설정해 주면 내가 지정하지 않은 변수를 사용하게 되면
오류가 발생하기 때문에 비상식적인 출력을 막아주는 역할을 한다고 한다.
물론 html 내에서 type 을 통한 선언을 할 시에는 선언할 필요가 없지만 말이다.

// Whole-script strict mode syntax
// JavaScript is very flexible
// flexible === dangerous
// added ECMAScript 5
"use strict";

console.log("Hello World!");

let a;
a = 6;

이유

1. <script>를 <head> 안에 넣을 경우

    js 다운, 적용 후 html요소가 만들어지기 때문에 사용자가 웹페이지를 보는 속도가 느림

2. <script>를 <body> 안에 넣을 경우

    html 요소가 만들어지고 난 후 js를 다운 적용 하기 때문에 웹페이지를 빠르게 보이지만 페이지가 js에 의존적이면 유저가 빠르게 정상적인 페이지를 보기는 어려울 수 있음

3. <script async>

    html 요소가 만들어질때 병렬적으로 다운받을 수 있다는 장점이 있지만, html 요소가 모두 만들어지기 전에 js가 적용되기 때문에 오작동 가능성 있음

4. <script defer>

    html 요소가 만들어질때 병렬적으로 다운받을 수 있고, 적용은 html이 모두 만들어 진 후 하므로 최적의 방법

'use strict' ㄴ오류를 내어 비상식적인 프로그래밍을 막아줌

'개발언어 > JavaScript' 카테고리의 다른 글

Function(코드를 캡슐화해서, 실행을 여러번 가능)  (0) 2021.08.25
Objects [설명이 필요한 정보가 담긴 데이터 리스트들]  (0) 2021.08.24
Array [설명이 필요하지 않은 데이터 리스트들]  (0) 2021.08.24
Booleans(true,false,null, undefined)  (0) 2021.08.24
Variable을 만드는 방법(const,let,var)  (0) 2021.08.24
    '개발언어/JavaScript' 카테고리의 다른 글
    • Objects [설명이 필요한 정보가 담긴 데이터 리스트들]
    • Array [설명이 필요하지 않은 데이터 리스트들]
    • Booleans(true,false,null, undefined)
    • Variable을 만드는 방법(const,let,var)
    Roxylife
    Roxylife
    꿈나무 FE개발자

    티스토리툴바