자바스크립트 공부하기_1일차

1. 자바스크립트란?

: 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어

• 스크립트 : 자바스크립트로 작성한 프로그램
  • 웹페이지의 HTML안에 작성 가능하며, 웹페이지를 불러올 때 스크립트가 자동 실행됨.
• 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성, 실행 가능.
• 메모리나 CPU같은 저수준 영역의 조작을 허용하지 않음.
• 브라우저엔 자바스크립트 가상 머신이라 불리는 엔진이 내장됨.
• 엔진마다 특유의 코드네임이 있음.
  • V8 : Chrome과 Opera에서 쓰임.
  • SpiderMonkey : Firefox에서 쓰임.
  • 등등
• 엔진 동작 과정
  a. 파싱 : 엔진이 스크립트를 읽음
  b. 컴파일 : 읽어 들인 스크립트를 기계어로 전환
  c. 기계어로 전환된 코드가 실행되고, 기계어로 전환되어 실행 속도가 빠름.
• 최적화
  • 엔진은 각 프로세스 단계마다 최적화를 진행
  • 컴파일이 끝나고도 실행중인 코드를 감시하며, 데이터 분석을 통해 기계어로 전환된 코드를 다시 최적화.
  • 이를 통해 스크립트 실행 속도가 더 빨라짐.
• 환경
  • Node.js 환경: 임의의 파일을 읽고 쓰고, 네트워크 요청을 수행하는 함수 지원
  • 브라우저 환경: 웹페이지 조작, 클라이언트와 서버의 상호작용 (ex. 새 html 추가, 마우스 클릭이나 포인터 움직임, 네트워크를 통한 원격 서버에 요청 보내기, 파일 다운로드, 쿠키 가져오기, 로컬 스토리지 데이터 저장)
• 보안 (브라우저 기준. 서버는 이런 제약이 존재하지 않음.)
  • 브라우저는 보안을 위해 자바스크립트 기능에 제약을 걸어둠.
    • 디스크에 저장된 임의의 파일을 읽거나 쓰는 등의 행동시 제약을 받음. 사용자가 파일을 선택할 때와 같은 특정 상황에만 가능.
    • 동일 출처 정책
      • 브라우저 내 탭과 창은 서로의 정보를 알 수 없음.
      • 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용되지만 도메인, 프로토콜, 포트가 다르면 접근 불가
    • 타 사이트나 도메인에서 데이터를 받아오기 불가능.(명확한 승인 후 가능)
• 자바스크립트 강점
  • html/css와 완전히 통합 가능
  • 간단하게 처리를 도와줌
  • 모든 주요 브라우저에서 지원, 기본 언어로 사용됨
• TypeScript : 개발을 단순화하고 복잡한 시스템을 지원하려는 목적으로, 자료형의 명시화에 집중에 만든 언어. Microsoft가 개발.

2. 코드 에디터

• 통합 개발 환경(IDE)
  : 프로젝트 전체를 관장하는 다양한 기능을 제공. 개발환경을 쾌적하게 해줌.
  ex. visual studio code, webstorm
• 경량 에디터
  : IDE만큼 다양한 기능을 제공하지는 않지만, 속도가 빠르고 단순함.
  • 파일 하나만 수정하고 싶다면, 경량 에디터. 프로젝트 전체를 수정,개발할 경우에는 IDE
    ex. visual studio code, atom, vim

3. Chrom으로 디버깅하기

Chrom으로 디버깅에 정말 잘 설명이 되어있음!!

• 코딩 스타일

4. 자바스크립트 기본 문법

• script 태그 : 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입 가능

  • script 태그는 src 속성과 내부 코드를 동시에 가지지 못하기 때문에, 안에 코드는 실행되지 않음.

  <script src="file.js">
  	alert(1); //실행 안됨.
  </script> // script를 2개로 분리시 실행됨.

  • 가끔 language, type 속성을 쓰는 코드를 볼 수 있는데, 요즘은 사용 안함. 오래된 코드

• 코드 구조

  • 문(statement) : 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미.
    • 원하는 만큼 문을 작성할 수 있고, 서로 다른 문은 세미콜론으로 구분.
  • 세미콜론 : 줄바꿈이 있으면 암시적으로 세미콜론으로 해석 (세미콜론 자동 삽입)
    • 하지만, 세미콜론이 필요한데 추정하지 못하는 상황도 발생
      ex. [...] 대괄호 앞에서는 세미콜론이 있다고 가정하지 않음.

      alert("제대로 동작 안함") // 끝에 세미콜론이 필요. 아니면 한줄로 인식
      			[1, 2].forEach(alert)

    • 따라서 세미콜론을 넣는 것을 권장!

• 이후 추가 작성

출처 : https://ko.javascript.info/