JS - 기본 개념

Jaa-van·2023년 3월 16일
0
post-thumbnail

1. java script

@문
어떤 작업을 수행하는 ~문법구조~ 와 ~명령어~
이때, 서로 다른 문은 세미콜론으로 구분합니다.
줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있습니다.

기본적으로 줄바꿈에는 세미콜론이 생략되어 있지만 아닌 경우도 있다.
자바스크립트가 대괄호 [...]앞에는 세미콜론이 있다고 가정하지 않기 때문입니다.

@주석
무슨 일인지 설명해주는 주석
한 줄짜리 주석은 //로 시작한다

여러 줄 짜리 주석은 / 로 시작해 / 로 끝난다

또한 주석 안의 내용은 무시된다. 코드가 들어있어도 실행되지 않는다.
이를 이용해 코드 일부를 일시적으로 비활성화할 수 있다.

단축키 -> Ctrl+/ 를 사용하면 해당 줄의 코드를 한 줄짜리 주석으로 처리할 수 있으며, 여러 줄의 주석은 Ctrl+Shift+/ 를 통해 처리할 수 있습니다.

@ust strict(엄격모드)
~그런데 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 수 있겠죠? 그래서 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었습니다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화되게 해놓았습니다.~

이 지시자가 최상산에 오면 스크립트 전체가 모던한 방식으로 동작한다.
한번 엄격 모드에 돌입하면 되돌이킬 방법은 없다.

클래스와 모듈을 사용해 구성한다면 엄격모드를 할 필요가 없지만 추후에 배우게 된다.

let, var를 사용하지 않고 변수를 정의하면 엄격모드에서 에러를 발생시켜 좋지 않은 습관이다.

2. java script 환경설정 및 기본 문법

다양한 언어와 기술스택의 존재 이유

  • 컴파일 여부
  • 성능/안정성과 편의성의 Trade-off 관계
  • 패러다임

@컴파일
소스코드 를 컴퓨터가 알아들을 수 있도록 번역해주는 일

(우리가 알고있는 프로그래밍 언어로 작성된 코드)
-> (0과 1로 표현되어 있는 기계) 로 변환하는 과정

컴파일 언어(C언어, Java 등) <-> 인터프리터 언어(Python, Javascript 등)

~컴파일 언어~는 실행시 전체 컴파일을 진행, 번역하는 과정에서 문법 등 검사
~( 에러를 미리 마주할 수 있다 )~

~인터프리터 언어~는 번역하는 과정이 없고 실행과 동시에 한줄 한줄 해석하고 실행
~(프로그램 실행 중간중간(런타임)에 번역을 실시해 주어야 하고 예기치 못한 에러를 마주하게 된다)~

@성능/안정성과 편의성의 Trade-off 관계
프로그래밍 언어가 실행되는 환경에서 언어가 많은 지원을 해줄 수록 작성된 프로그램의 성능과 안정성이 일반적으로 떨어진다.

프로그램 실행을 위해서 필요한 것 - ~메모리(저장공간) & 연산능력~

ex) 메모리를 할당하고 다 사용할 경우 풀어주는 과정까지 프로그래밍 하려면 개발 난이도가 올라간다.
프로그래밍 언어가 최적화해서 메모리를 할당해주고 다 쓴 여부를 추론해서 풀어주는 것을 자동으로 실행해준다면 난이도는 줄어든다.
하지만 후자는 별도의 처리가 필요하기 때문에 전체적인 성능에서 손해를 본다.

@패러다임
프로그래머에게 프로그래밍의 관점을 갖게 해주고 결정하는 역할을 한다.
프로그래밍 언어들은 특정 패러다임과 관련한 문법 지원 여부가 다르다.

ex) 객체 지향 프로그래밍 -> 상호작용하는 객체들의 집합으로 볼 수 있게 해준다
함수형 프로그래밍 -> 상태값을 지니지 않은 함수값들의 연속으로 생각할 수 있게 해준다.

프로그래밍 언어 표준
ECMA - ECMA-262 라는 ㅅ기술 규격에 따라 정희하고 있는 표준화된 스크립트 프로그래밍 언

최근 대표적인 패러다임 -> 절차형 & 객체지향형 & 함수

@java script (java와는 매우 다른 언어)
객체 지향, 함수형 프로그래밍에 적합한 고수준의 동적인 인터프리터 언어

~웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어~
자바 스크립트로 만들어진 언어를 스크립트(script)
HTML안에서 작성할 수 있고, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.
c계열 언어를 차용, 일급 합수라는 개념에서 script 를 가져왔다

브라우저와 서버에서 실행 가능
자바스크립트 엔진이 들어있는 모든 디바이스에서 작동

브라우저마다 자바스크립트 가상 머신 이라는 엔진이 내장되어 있다
V8 - Chrome & Opera
SpiderMonkey - Firefox
SquirrelFish - Safari

  • 엔진 동작 원리
  1. 엔진이 스크립트를 읽는다 (피싱)
  2. 읽은 스크립트를 기계어로 전환한다 (컴파일)
  3. 기계어로 전환된 코드가 실행된다
    (기계어로 전환된 상태로 실행되기 때문에 실행속도가 빠르다)

@java script 가 브라우저에서 할 수 있는 일
메모리 & CPU 같은 저수준 영역의 조작을 허용하지 않는다.
-> 애초에 브라우저를 대상으로 만든 언어이기 때문에

Node.js 에서는 임의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원한다.

  • 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
  • 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
  • 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)
  • 쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기
  • 클라이언트 측에 데이터 저장하기(로컬 스토리지)

@java script 가 브라우저에서 할 수 없는 일
보안을 위한 기능 제약이 존재 ( 악성 웹페이지가 개인 정보에 접근하거나 손상시키는 것을 막기 위해서)

  • 디스크에 저장된 파일을 읽기,복사,실행에 제약을 받을 수 있다. ( 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문에) 파일을 다룰 수는 있으나 파일을 끌어다 두거나 태그를 통해 접근 가능
  • 브라우저 내 탭과 창은 서로 알 수 없다. 하지만 자바 스크립트를 사용해 한 창에서 다른 창을 열 경우 예외
  • 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있다. 하지만 타 사이트나 도메인에서 받아오는 것은 불가능

@java script 의 장점

  • HTML/CSS와 완전히 통합될 수 있다
  • 간단한 일을 간단하게 처리하게 해준다
  • 모든 주요 브라우저에서 지원하고 기본 언어로 사용된다.

0개의 댓글

관련 채용 정보