[혼자 공부하는 자바스크립트] 1장. 자바스크립트 개요와 개발 환경 설정

AnSuebin·2022년 11월 7일
0

01-1. 자바스크립트의 활용

  • 자바스크립트 : 웹 브라우저에서 사용하는 프로그래밍 언어
  • 브렌던 아이크 (넷스케이프) 개발
  • 모카 > 라이브스크립트 > 자바스크립트

자바스크립트로 할 수 있는 것들

  • 웹 클라이언트 애플리케이션 개발
    • 기존에는 하이퍼링크라는 매개체로 웹 문서가 연결된 책같은 형태
    • 자바스크립트 이후 웹 문서의 내용을 동적으로 바꾸거나 이벤트 처리가능
    • 웹 애플리케이션 : 기존의 웹 페이지보다 다양한 기능을 가진 웹 페이지(AJAX, Library,Web soket...)
      • 웹 문서 작성 도구, 소비성 애플리케이션, 생산성 업무
  • 웹 서버 어플리케이션 개발
    • Node.js의 등장 : 자바스크립트도 웹 서버 애플리케이션을 개발 할 수 있게 되었음
    • 링크드인 : 자바스크립트만으로 만든 웹서버 어플리케이션
    • Node.js 특징
      • 웹서버 애플리케이션을 개발할 때 꼭 필요한 간단한 모듈만 제공 : 데이터 처리, 예외 처리 복잡
      • 빠르다
  • 모바일 애플리케이션 개발
    • 기존에는 모바일 앱 개발하려면 두가지 언어를 사용해야 했음
    • 자바스크립트는 공통 언어
    • 페이스북 : 네이티브 애플리케이션을 개발할 수 있는 리액트 네이티브 제작
    • 페이스북, 인스타, 핀터레스트 등
  • 데스크톱 애플리케이션 개발
    • NW.js(노드 웹킷 제이에스) 모듈 등으로 데스크톱 애플리케이션 개발에 조금씩 활용
    • 깃허브 : 자바스크립트 개발 전용 텍스트 에디터 아톰 배포, 일렉트론이라는 아톰셸 공개 => 데스크톱 애플리케이션 개발 가능 / 비쥬얼 스튜디오 코드, 몽고디비 등 일렉트론으로 개발
  • 데이터 베이스 관리
    • 데이터를 저장할 때 사용하는 프로그램
    • SQL : 관계형 데이터 베이스 관리 시스템
    • NoSQL : 빅데이터 처리 기술 - 몽고디비(자스 사용)
  • 그외
    • 아두이노, Iot 에서도 사용 가능

자바스크립트의 종류

  • 자바스크립트 표준 명칭 : ECMAScript
  • 인터넷 익스플로러 제외 최신 브라우저는 모두 ECMAScript 기능 지원

모바일 애플리케이션의 종류

  • 네이티브 앱 : 오브젝티브 -c와 자바 프로그래밍 언어를 사용하여 개발한, 제조사 추천 프로그래밍언어를 사용해 만들어진 애플리케이션
    • 초기 스마트폰이 가진 성능과 고유의 기능을 모두 활용하기 위해서
    • 이후 > 모바일 웹앱(웹 사이트를 애플리케이션으로 감싸기만한 것) > 하이브리드 앱(스마트폰 기능과 웹 페이지 연결 층 설치) > 리엑트 네이티브 > 현재 페이스북, 인스타 등
  • 네이티브와 하이브리드가 완전히 구분되진 않음

01-2. 자바스크립트의 활용

  • 코드 실행기 + 코드 에디터 => 개발 환경

코드 실행하기: 구글 크롬에서 콘솔 실행

  • 개발자 도구 단축키 : ctrl + shift + i

코드 실행하기: 파일 만들고 저장해 실행하기

  • 자바스크립트는 <head><script> 태그 추가

알면 좋은 오류들

  • ReferenceError(예외 처리) : **부분을 잘못 입력했을 때 발생하는 오류
Uncaught ReferenceError : ** is not definded
  • SyntaxError(구문 오류) : 토큰(기호)를 잘못 입력했을 때의 오류
    => 기호 쌍이 맞는지 확인 필요
Uncaught SyntaxError: Invalid or unexpected token
Uncaught SyntaxError: missing ) after argument list

자바스크립트 표준 스타일

  • 코드 스타일, 코드 컨벤션 : 회사마다 정해둔 코드 작성 방식
    • 들여쓰기 갯수
    • 중괄호 입력 전에 줄바꿈
    • 키워드 뒤에 공백 등등

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

표현식과 문장

  • 표현식 : 자바스크립트에서 값을 만들어내는 간단한 코드
  • 문장(statement) : 하나 이상의 표현식, 서명,진술, 선언, 서술 등 실행 할 수 있는 최소 단위
  • 문장 끝 : 세미콜론, 줄바꿈
  • 프로그램 : 문장들이 모인 것

키워드

  • 키워드 : 자바스크립트에서 정해놓은 특별한 의미의 단어

식별자

  • 식별자 : 프로그래밍 언어에서 이름을 붙일때 사용
  • 변수명, 함수명으로 사용
  • 규칙
    • 키워드를 사용 금지
    • 숫자로 시작 금지
    • 특수 문자는 _와 $ 허용
    • 공백 문자 포함 불가
  • 식별자를 만드는 일반적인 관례
    • 알파벳 사용, 의미있는 단어
    • 클래스 : 항상 대문자
    • 변수, 인스턴스, 함수, 메소드 이름 첫글자 소문자
    • 여러 단어로 이루어진 식별자 : 첫글자 대문자
  • 식별자의 종류
    • 변수 : 괄호 없음 / 단독 사용
    • 속성 : 괄호 없음 / 다른 것과 함께
    • 함수 : 괄호 있음 / 단독 사용
    • 메소드 : 괄호 있음 / 다른 것과 함께

주석

  • HTML 태그 주석
<!-- 주석 -->
  • 자바스크립트 주석
// 주석
/*
주석
주석
*/
profile
고객에게 명료한 의미를 전달하고, 명료한 코드를 통해 생산성 향상에 기여하고자 노력합니다.

0개의 댓글