혼공 자바스크립트 - Chapter 01

몽슈뜨·2022년 10월 31일
0
post-thumbnail

✨01-1 자바스크립트 활용

  • 자바스크립트Javascript
    는 웹브라우저에서 사용하는 프로그래밍 언어programming language입니다. 썬 마이크로 시스템즈에서 개발한 프로그래밍 언어인 자바Java와 비슷한 이름을 사용하는 마케팅 조약을 체결했습니다.
    자바와 자바스크립트는 이름은 비슷하지만 인도와 인도네시아, 코끼리와 바다코끼리처럼
    완전히 다른 프로그래밍 언어입니다.

  • 웹 클라이언트 애플리케이션 개발
    초기의 웹은 변하지 않는 정적인 글자들로만 이루어졌습니다. 웹은 하이퍼링크hyperlink
    라는 매개체로 웹문서가 연결된 하나의 거대한 책에 불과했습니다. 하지만 자바스크립트가
    나오면서 웹 문서의 내용을 동적으로 바꾸거나 사용자의 마우스 클릭과 같은 이벤트 처리가 가능해졌습니다.
    이처럼 기존의 웹 페이지보다 다양한 기능을 가진 웹 페이지를 웹 어플리케이션web application이라 부릅니다.

  • 웹 서버 애플리케이션의 개발
    기존에는 웹 클라이언트 애플리케이션을 자바스크립트로 개발하고, 웹 서버 애플리케이션은
    C#, 자바,루비,파이썬 등의 프로그래밍 언어로 개발했습니다. 그래서 웹 개발을 하려면
    2가지 이상의 프로그래밍 언어가 필요했습니다. 하지만 2009년 Node.js가 등장하면서
    자바스크립트로도 웹 서버 애플리케이션을 개발할 수 있게 되었습니다.

    • Node.js 장점
    1. Node.js는 웹 서버 애플리케이션을 개발할 때 꼭 필요한 간단한 모듈만 제공합니다.
      그래서 다른 스크립트 언어와 프레임워크(루비와 루비온 레이즈, 파이썬과 장고)를
      사용할 때보다 데이터 처리와 예외 처리 등이 조금 복잡합니다.

    2. Node.js는 빠릅니다
      다른스크립트 언어와 프레임워크로 개발한 서버 애플리케이션이 10대의 컴퓨터가 있어야 접속자를 감당할 수 있다면 Node.js로 개발한 서버 애플리케이션은 1대로도 충분합니다.
      서버 구매 비용과 유지비용이 1/10로 줄어든다는 것은 기업으로는 굉장한 이득입니다.

  • 모바일 애플리케이션 개발
    안드로이드폰과 아이폰은 각각 자바/코틀린Kotin과 스위프트Swift라는 프로그래밍 언어로 개발합니다. 이는 각 스마트폰에서 인식해서 실행할 수 있는 프로그래밍 언어가 다르기 때문입니다. 그래서 애플리케이션을 만들어 출시한다면 안드로이드폰용과 아이폰을 각각에서 인식하는 프로그래밍 언어로 개발해야 합니다. 2가지로 만들기 때문에 인력,비용 등도 2배로 필요하며, 이는 기업으로서는 큰 손해라고 할 수 있습니다.

    모든 스마트폰에는 내부에서 기본으로 인식 할 수 있는 공톤된 프로그래밍 언어가 있는데, 자바스크립트가 대표적인 예입니다.
    그래서 페이스북에서는 자바스크립트로 네이티브 애플리케이션native application을 개발할 수 있는 리액트 네이티브React Native를 만들어 공개했습니다. 이를 활용하면 자바스크립트만으로 모든 운영체제에서 빠르게 작동ㅎ라는 네이티브 애플리케이션을 만들 수 있습니다.

  • 데스크톱 애플리케이션 개발
    모바일 애플리케이션을 자바스크립트로 만드는 일이 일반화 되자 "데스크톱 애클리케이션도 자바스크립트로 만들자!"는 의견도 나왔습니다.NW.js(노드웹킷 제이에스) 모듈 등으로
    데스크톱 애플리케이션 개발에 조금씩 자바스크립트를 활용하기 시작했습니다. 그러다가
    개발자 그룹에서 거대한 영향력을 행사하던 깃허브GitHub에서 NW.js 개발자들을 흡수하고
    자바스크립트 개발 전용 텍스트 에디터인 아톰Atom을 만들어 배포했습니다. 아톰을 만들 때
    활용한 아톰 셸Atom Sehll을 일렉트론Electron이라는 이름으로 공개하면서 다른 개발자들도 자바스크립트로 데스크톱 애플리케이션을 개발할 수 있게 되었습니다.

  • 데이터베이스 관리
    데이터베이스Database는 데이터를 저장할 때 사용하는 프로그램이라고 간단하게 표현할 수 있습니다. 애플리케이션은 대부분 데이터를 저장하므로 데이터베이스를 활용해야 합니다.
    데이터베이스는 보통 SQL 이라는 프로그래밍 언어를 사용해 관리합니다. 일반적으로 알려진
    Oracle, MySQL 등 의 관계형 데이터베이스 관리 시스템(RDBMS)는 모두 SQL 프로그래밍 언어를
    사용합니다. Not-Only-SQL 이라고 불리는 NoSQL은 2010년 이후 페이스북,트위터 등으로 인해
    폭발적으로 증가한 빅데이터를 처리하기 위한 기술이며, 그중 MongoDB 가 데이터베이스를 관리할 때 자바스크립트를 활용하는 대표적인 NoSQL 데이터베이스 입니다.

  • 자바스크립트의 종류
    1990년대 중반부터 자바스크립트가 많은 곳에서 사용되자 유렵컴퓨터제조협회(ECMA)는
    자바스크립트를 ECMAScript 라는 이름으로 표준화했습니다. 자바스크립트 표준 명칭은
    ECMAScript이지만 오래 사용해왔던 자바스크립트 라는 용어를 더 많이 사용합니다.

✨01-3 알아두어야 할 기본 용어

  • 표현식과 문장
    자바스크립트에서 값을 만들어내는 간단한 코드를 표현식expression이라고 부릅니다.
    다음 코드가 표현식입니다.

    9303
    10 + 30 + 30 * 5
    'JinRoSoJu'

    하나 이상의 표현식이 모이면 문장statement이 됩니다. 문장 끝에는 마침표를 찍듯이
    세미콜론(;) 또는 줄바꿈을 넣어서 문장의 종결을 알려줍니다.

    // 세미콜론을 사용한 문장 구분
    10 + 20 + 30 * 5; var JinRoSoJu = 'Jin' + 'Ro' + 'Soju'; alert('hello javascript...!');9303;
    
    // 줄바꿈을 사용한 문장 구분
    10 + 20 + 30 * 5
    var JinRoSoJu = 'Jin' + 'Ro' + 'Soju'
    alert('hello javascript...!')
    9303

    다음과 같이 줄바꿈과 세미콜론을 2가지 모두 입력하는 경우도 많습니다.

    10 + 20 + 30 * 5;
    var JinRoSoJu = 'Jin' + 'Ro' + 'Soju';
    alert('hello javascript...!');
    9303;

    하나의 표현식도 문장으로 종결을 의미하는 세미콜론 또는 줄바꿈을 넣으면 문장이라고 부르고
    이러한 문장이 모여서 프로그램program을 이룹니다.

  • 키워드
    자바스크립트가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어를 키워드keyword라고
    합니다. 2022년 기준으로 키워드로 정의 내릴 수 있는 단어는 다음과 같습니다.
    javascript keyword - 링크

  • 식별자
    식별자identifier는 프로그래밍 언어에서 이름을 붙일 떄 사용하는 단어입니다.
    주로 변수명이나 함수명등으로 사용됩니다. 자바스크립트 식발져를 만들 때는 다음 규칙을
    반드시 지켜야 합니다.

    1. 키워드를 사용하면 안 됩니다.
    2. 숫자로 시작하면 안 됩니다.
    3. 특수문자는 _$만 허용합니다.
    4. 공백 문자를 포함할 수 없습니다.

    위 규칙만 만족한다면 모든 단어를 식별자로 사용할 수 있습니다.

  • 식별자를 만드는 일반적인 관례
    식별자를 만들 때 한글, 한자, 일본어와 같은 전 세계의 언어를 모두 사용할 수 있지만,
    알바벳을 사용하는것이 관례입니다. 또한 a,b처럼 의미 없는 단어보단 input, output 같은
    의미 있는 단어를 사용하는게 좋습니다.
    식별자를 만들 때 알파벳을 사용한다는 것 외에도 자바스크립트 개발자 대부분이 지키는
    관례가 있습니다. 이는 식별자의 의미를 더 명확하게 하려고 사용하는 규칙입니다.

    1. 클래스의 이름은 항상 대문자로 시작합니다.
    2. 변수와 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작합니다.
    3. 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 합니다.
  • 식별자의 종류

    구분단독으로 사용다른 식별자와 사용
    식별자 뒤에 괄호 없음변수속성
    식별자 뒤에 괄호 있음함수메소드

  • 주석
    주석comment은 프로그램 코드를 사용하며 프로그램 진행에는 전혀 영향을 주지 않습니다.
    HTML 페이지에는 크게 HTML 태그 주석과 자바스크립트 주석이 있습니다.

    HTML 주석
    <!-- 주석 -->
    JavaScript 주석
    // 한줄 주석
    /*
    범위
    주석
    */

  • 간단한 표현식 결과 확인하기 ( 출력 )
    구글 크롬의 주소창에 about:blank 를 입력해 크롬이 기본적으로 제공하는 빈 페이지로 들어가
    개발자 환경을 띄웁니다. about:blank에서 [Console]탭을 클릭해
    구글 크롬 개발자 도구에 들어갑니다

    단축키 : Ctrl + Shift 또는 F12 또는 마우스 우클릭+검사

  • 경고창에 출력하기
    자바스크립트의 가장 기본적인 출력 방법은 alert() 함수를 사용하는 것입니다.
    alert()함수를 사용하면 웹 브라우저에 경고창을 띄울 수 있습니다.

    <script>
     	alert("hello JavaScript ... !!")
     </script>

    이때 함수의 괄호 안에 들어가는 것을 매개변수parameter라고 부릅니다.

profile
개발자되면 맥북사줄께

0개의 댓글