자바스크립트 개요 및 쓰임새 (221107) - TIL1

자바스크립트의 기본적인 3가지 출력방법

1. 콘솔창에서 입력해서 출력하기
2. alert() 태그를 작성해서 내용을 출력하기
3. console.log() 태그를 작성해서 출력하기

JS를 사용한 애플리케이션의 종류

1. 웹 서버 애플리케이션
   기존 웹 서버 애플리케이션은 C#, 자바, 루비, 파이썬 등의 프로그래밍 언어로 개발하며 두가지 이상의 언어가 필요했다. 하지만 2009년 Node.js가 등장하면서 자바스크립만으로도 웹 서버 애플리케이션을 개발할 수 있게 되었다.

• 특징

  • Node.js는 웹 서버 애플리케이션 개발에 꼭 필요한 간단한 모듈만 제공한다.
    루비와 루비 온 레일즈, 파이썬과 장고를 사용하여 개발할 때 보다 데이터 처리와 예외 처리 등이 복잡하다.

  • Node.js는 빠르다.
    다른 스크립트 언어와 프레임 워크를 사용하여 개발한 웹 서버 애플리케이션보다 10배 가량 빠르다.

    예를 들어서 링크드인 사이트는 루비기반에서 Node.js로 웹 서버 애플리케이션을 교체한 후 속도는 20배 빨라지고 서버는 1/10로 줄었다.

2. 모바일 애플리케이션

• 네이티브 앱

  • 오브젝티브-C, 자바, 코틀린, 스위프트 등 전용 프로그래밍 언어를 사용하여 안드로이드폰, 아이폰 용으로 따로 개발한 애플리케이션을 말한다.
    

• 모바일 앱

  • 네이티브 앱 개발 방식은 인건비, 유지보수 등 비용이 많이 발생하기 때문에 소규모 스타트업에서는 웹사이트를 애플리케이션으로 단순 감싸서 보여주는 모바일 앱을 사용했지만 기능의 활용도 적고 성능도 좋지 않았다.

• 하이브리드 앱

  • 일반적으로 모바일 사이트와 비슷한 컨텐츠를 보여주지만 스마트폰의 고유의 모습과 기능을 활용할 수 있는 형태이다.
  • 엔진과 프레임워크들 새로 등장하며 네이티브 앱처럼 만들어주는 기능을 제공하는데 리액트 네이티브가 대표적인 예이며 이를 사용한 애플리케이션으로는 페이스북, 인스타그램, 핀터레스트, 디스코드, 스카이프 등이 있다.

3. 데스크톱 애플리케이션

• NW.js('노드웹킷 제이에스')

  • 자바스크립트 개발 전용 텍스트 에디터 아톰의 배포를 시작으로 일렉트론이 개발되며 공개된 소스는 데스크톱 애플리케이션 개발에 널리 쓰이게 되었다.

  • 이를 사용한 데스크톱 애플리케이션으로는 비주얼 스튜디오 코드, 디스코드, 깃허브 데스크톱, 워드프레스, 몽고디비, 데이터 관리 도구 컴파스 등이 있다.

자바스크립트 코드 실행

• 작성한 코드의 오류를 확인하는 방법

  • 작성한 html파일을 브라우저에서 실행하고 검사창을 눌러서 개발자도구를 통해서 오류 상태를 확인할 수 있다.
    
    

• 오류의 종류

  • ReferenceError - 예외처리

    Uncaught ReferenceError: OO is not defined

  • SyntaxError - 구문 오류

    Uncaught SyntaxError: Invalid or unexpected token

    Uncaught SyntaxError: missing ) atfer argument list

• 자바스크립트 표준 스타일

  • 코딩 스타일, 코딩 컨벤션

    들여쓰기와 중괄호 입력방식, 키워드 바로 뒤의 공백 등 코드 작성 시 약속으로 스타일 정해서 사용한다. 정답이 있는 것은 아니지만 모두가 팀원들과 상의하는 것이 바람직하다.

자바스크립트 기본 용어

• 표현식 -> 문장 -> 프로그램
  
  

  • 표현식 - 값을 만들어 내는 간단한 코드
    
    
  • 문장 - 표현식이 하나 이상 모인 것
    
    
  • 프로그램 - 문장이 모인 것

• 자바스크립트에서의 문장 구분
  세미콜론(;) 또는 줄바꿈을 통해서 문장을 구분한다.

• 키워드
  자바스크립트가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어들. 2020년을 기준으로 키워드는 약 53개 가량 존재.

• 식별자 => 선언할 때 사용하는 변수 혹은 상수명

  • 키워드를 사용하면 안된다.
  • 숫자로 시작하면 안된다.
  • 특수문자는 _와 $만 허용한다.
  • 공백 문자를 포함할 수 없다.

  여러 단어를 연결하여 식별자를 만들때는 공백을 포함할 수 없으므로 공백 다음 단어를 대문자로 표시하여 구분한다.

  will out -> willOut
  will return -> willReturn
  i am a boy -> iAmABoy

• 함수, 메소드, 변수, 속성

  • 식별자 뒤에 괄호가 있으면서 단독으로 사용되면 함수

    예시 - alert("Hello world!")

  • 식별자 뒤에 괄호가 있으면서 다른 식별자와 사용되면 메소드

    예시 - Math.abs(-273)

  • 식별자 뒤에 괄호는 없으면서 단독으로 사용되면 변수

    예시 - input

  • 식별자 뒤에 괄호는 없으면서 다른 식별자와 사용되면 속성

    예시 - Array.length