[혼공스] (JavaScript) 챕터1. JS 개요, 개발환경 설정, 기본용어

목차

   <WIL : What I Learned>

   - JS(자바스크립트)에서 변수는 고정된 타입이 없다

 

   <01-1 JS의 활용>
   1. JS로 할 수 있는 것들
   - JS의 역사?
   - JS로 할 수 있는 것들?

   2. JS 버전
   +. 모바일 애플리케이션 종류

   <01-2 개발환경 설치와 코드 실행>
   1. 개발환경 설치
   - 개발환경이란?
   - [참고] Stack Overflow 2022년 IDE 선호도 조사 TOP10 
   - 개발환경 설치

   2. 코드 실행하기
   - 구글 크롬 콘솔에서 실행
   - 파일 만들고 저장해 실행 (VScode)
   - [참고] VScode의 코드작성 보조기능이 동작하지 않으면? 
   - [참고] 오류
   - [참고] 코딩 스타일/컨벤션(convention)

   <01-3 기본 용어>
   1. 표현식, 문장, 프로그램
   2. 키워드(예약어), 식별자, 주석
   3. 출력
   - 간단한 표현식 결과 확인하기
   - 경고창에 출력하기
   - 콘솔에 출력하기

 

---

 

WIL : What I Learned

- JS(자바스크립트)에서 변수는 고정된 타입이 없다

- 정적/동적 타입 언어
C-family 언어(C, Java 등)는 정적 타입(Static/Strong Type) 언어인 반면, JS는 동적 타입(Dynamic/Weak Type) 언어임

- 타입 추론
JS에서는 변수의 타입 지정(Type annotation) 없이 값이 할당되는 과정에서 자동으로 그 타입이 결정(타입 추론, Type Inference)

<자바의 정석> 변수를 다루는 챕터에서 변수의 선언 다음으로 나오는 내용은 int, long, float 등에 대한 '변수의 타입'이다. 하지만 JS는 동적 언어이기 때문에 자료형이 자유롭게 바뀌도록 데이터를 변수에 할당할 수 있다. 이로 인해 혼란과 코드의 예측 불가능성을 얻게 되었다.

그렇게 고안된 언어가 타입스크립트(TypeScript)이다. 타입스크립트 깃북에서는 '정적 타입 검사자'라고 하며 프로그램을 실행시키기 전에 값의 종류를 기반으로 오류를 찾는다고 한다. 에러의 사전 방지 외에 코드 자동 완성, 가이드의 기능이 있다.

* 출처 : <모던 자바스크립트 Deep Dive>(이웅모/위키북스)
* 출처 : 타입스크립트 깃북

 

---

 

01-1 JS의 활용

1. JS로 할 수 있는 것들 : 웹 클라이언트 / 서버 / 모바일 / 데스트톱 / 데이터베이스 관리 / IOT 개발

- JS의 역사?

• 웹브라우저에서 사용하는 프로그래밍 언어

넷스케이프의 브렌던 아이크가 '모카(Mocha)'라는 이름으로 만듦

▶

'라이브스크립트(LiveScript)'라는 이름으로 개발됨

▶

넷스케이프가 썬 마이크로시스템즈과 '자바스크립트'라는 이름으로 본격적으로 발전시킴

자바와 JS?
- 썬 마이크로시스템즈는 프로그래밍 언어 '자바'를 개발한 곳임
- 비슷한 이름을 사용하는 마케팅 조약을 체결함
- 자바와 JS는 전혀 다른 프로그래밍 언어임

 

- JS로 할 수 있는 것들?

  1) 웹 클라이언트 애플리케이션 개발

• 초기의 웹은 정적인 글자로만 이루어짐 (동적인 기능 불가)
• 다시 말해, 하이퍼링크라는 매개체로 웹 문서가 연결된 하나의 거대한 책에 불과했음
• JS의 등장으로 동적인 기능 처리가 가능해짐
• 인터넷 속도가 빨라지며 웹은 애플리케이션의 모습에 가까워짐

웹 애플리케이션?
- 웹 페이지에 지나지 않지만 다양한 기능을 가지고 있다는 점을 구분하기 위해 그렇게 부름

• 웹 애플리케이션 예

문서 작성 도구	별도 설치 없이 웹 브라우저만으로도 사용 가능
크롬 웹 스토어	웹 브라우저에서 실행되는 웹 애플리케이션을 사고 팔 수 있음

 

  2) 웹 서버 애플리케이션 개발

• 2009년 Node.js의 등장으로 JS로도 웹 서버 애플리케이션 개발이 가능해짐
• Node.js의 장단점?

장점	단점
꼭 필요한 간단한 모듈만 제공	다른 스크립트 언어, 프레임워크 사용하는 것보다 데이터 처리, 예외 처리 등이 좀 더 복잡함
빠르고 비용 절감이 가능함 *다른 스크립트 언어, 프레임워크에서 접속자 감당하기 위해 10대의 컴퓨터가 필요하다면 Node.js는 1대면 충분함 *'링크드인'의 경우 Node.js로 교체한 후 서버는 1/10 줄고, 속도는 20배 빨라짐

 

  3) 모바일 애플리케이션 개발

• 안드로이드폰은 자바/코틀린(Kotlin), 아이폰은 스위프트(Swift) 프로그래밍 언어로 개발함
• 애플리케이션 출시를 위해서는 각 스마트폰에서 인식하는 프로그래밍 언어로 각각 개발해야 함
• 하지만 JS로는 하나의 애플리케이션만 만들어도 모든 스마트폰에서 동작함 (제작 비용 절감)

JS로 만든 네이티브 애플리케이션? 
페이스북(리액트 네이티브 만들어 공개), 인스타그램, 핀터레스트, 우버

네이티브 애플리케이션?
- 흔히 사용하는 모바일 애플리케이션을 말함. 자바, 스위프트 등 스마트폰에 최적화된 프로그래밍 언어로 만든 애플리케이션임

*초기에는 네이티브 애플리케이션과 웹을 합친 '하이브리드' 형태의 애플리케이션이 등장해 인기를 끌었지만, 느리다는 이유로 외면받음

 

  4) 웹 서버 애플리케이션 개발

• 모바일 애플리케이션을 JS로 만드는 일이 일반화되며 데스크톱 애플리케이션도 JS로 만들자는 의견이 나옴
• NW.js(노드웹킷 제이에스) 모듈 등으로 데스크톱 애플리케이션 개발에 JS 활용하기 시작
• 깃허브에서 NW.js 개발자를 흡수하고, JS 개발 전용 텍스트 에디터인 아톰(Atom) 만들어 배포
• 아톰을 만들 때 활용한 아톰 셸(Atom Shell)을 '일렉트론(Electron)'이라는 이름으로 공개
• 일렉트론을 통해 다른 개발자들도 JS로 데스크톱 애플리케이션 개발할 수 있게 됨

일렉트론으로 개발된 애플리케이션?
마이크로소프트의 비주얼 스튜디오 코드(Visual Studio Code), 디스코드(Discord) 클라이언트, 깃허브 데스크톱 클라이언트, 워드프레스(Wordpress) 데스크톱 클라이언트, 몽고디비(MongoDB), 데이터 관리 도구 컴파스 등

 

  5) 데이터베이스 관리

• JS를 활용하는 데이터베이스? MongoDB

데이터베이스?
- 데이터를 저장할 때 사용하는 프로그램
- 종류
1) SQL: Oracle, MySQL 등 관계형 데이터베이스 관리시스템(RDBMS)
2) NoSQL : Not-Only-SQL, 2010년 이후 폭발적으로 증가한 빅데이터를 처리(페이스북, 트위터 등)하기 위한 기술

 

  6) IOT 개발

• JS 활용해 아두이노 등 마이크로 콘트롤러 보드 조작 가능

 

---

 

2. JS 버전

• 표준명칭 : ECMAScript (유럽컴퓨터제조협회 - ECMA에서 명명)
• 표준발표

표준버전	ECMAScript1	ECMAScript2	ECMAScript3	ECMAScript4	ECMAScript5	ECMAScript 2015	...	ECMAScript 2020
발표시기	1997년 6월	1998년 6월	1999년 12월	2008년 10월	2009년 12월	2015년 6월	...	2020년 6월

• 인터넷 익스플로러를 제외한 최신 브라우저(마이크로소프트 엣지, 구글 크롬, 모질라 파이어폭스, 애플 사파리 등)는 모두 최신 버전의 ECMAScript 기능까지 지원함
• 웹 브라우저 사용통계 : https://gs.statcounter.com/

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

 

---

 

+. 모바일 애플리케이션 종류 : 네이티브 / 모바일웹 / 하이브리드 앱

• 초기에는 네이티브 앱(제조사가 추천하는 프로그래밍 언어를 사용해 만들어진 애플리케이션)으로 모바일 애플리케이션을 만들어야 했음

2010년 전후로 나온 아이폰, 안드로이드폰은 각각 오브젝티브-C, 자바 프로그래밍 언어를 사용해 개발

네이티브 앱 (Native App)?
- 제조사가 추천하는 프로그래밍 언어를 사용해 만들어진 애플리케이션

 

• 이에 모바일웹 앱이 등장
• 하지만 성능이 좋지 않고, 스마트폰이 가진 기능을 제대로 활용할 수 없었음

스마트폰 애플리케이션 하나를 만들기 위해 아이폰/안드로이드 개발자를 모두 고용/개발/유지보수하는 것은 소규모 스타트업 입장에서는 비용적으로 큰 부담

모바일웹 앱?
- 웹사이트 화면 을 애플리케이션으로 감싸기만 해서 보여주는 형태

 

• 이에 하이브리드 앱이 등장

네이티브-하이브리드 구분?
리액트 네이티브로 개발한 것을 네이티브 앱으로 취급해야 하는지, 하이브리드 앱으로 취급해야 하는지에 대한 논란 등이 있음. 최근에는 구분이 점점 애매해지고 있어 보다 세분화해서 부름
* 하이브리드 앱 개발자 -> 아이폰 스위프트 개발자, 리액트 네이티브 개발자 등으로 세분화

하이브리드 앱(Hybrid App)?
- 스마트폰의 기능과 웹 페이지를 연결할 수 있도록 중간에 층을 설치해 웹사이트가 스마트폰의 기능을 할용
- 모바일 사이트에서도 똑같이 보이면서 스마트폰 고유의 모습도 가지고 있는 앱

 

• 조금 더 발전되어 웹 앱처럼 개발했는데, 이떄 네이티브 앱처럼 만들어주는 엔진/프레임워크들이 등장
• 그 대표적인 예가 리액트 네이티브임

리액트 네이티브(React Native)?
- 하나의 프로그램을 만들어서 여러 프로그램으로 만들어줌

 

---

 

01-2 개발환경 설치와 코드 실행

1. 개발환경 설치

- 개발환경이란?

• 프로그램 개발을 할 수 있는 환경
• 텍스트 에디터(코드 작성) / 코드 실행기(웹 브라우저)가 필요

 

- [참고] Stack Overflow 2022년 IDE 선호도 조사 TOP10 (출처 : Stack Overflow)

> 더보기 : 텍스트 에디터와 IDE의 차이? (추후 설명 링크 연결 예정)

 

- 개발환경 설치 : 크롬(Chrome) / Visual Studio Code(VScode)

• 크롬 설치 링크
• Visual Studio Code 설치 링크

 

---

 

2. 코드 실행하기 : 구글 크롬 콘솔에서 실행 / 파일 만들고 저장해 실행

- 구글 크롬 콘솔에서 실행

• 개발자 도구 실행 단축키 : F12 또는 Ctrl + Shift + I(알파벳 아이)
• 간단한 코드는 콘솔에서 입력하고 결과를 확인해볼 수 있지만, 실제로 어느 정도 규모가 있는 프로그램을 만들 때는 파일을 만들어 파일에 코드를 입력하고 실행하는 것이 더욱 편리함
• 콘솔 실행 예시

>  console.log("boleesystem")    // 입력한 코드
    boleesystem                          // console.log()로 출력된 내용
<· undefined                             // 해당 줄의 결과 (현재는 결과가 따로 없기 때문에 undefined로 출력) 

 

- 파일 만들고 저장해 실행 (VScode)

• HTML 페이지 생성, 코드 작성, 실행

      1단계 : HTML 페이지 생성하기 (새파일 만들기 단축키 : Ctrl + N)

 

      2단계 : HTML 페이지 작성하기 (html이라고 입력하면 자동 완성 기능으로 나온 'html:5' 선택)

      *[참고] tab키 : 띄어쓰기 2~4개, Shift + tab키 : 띄어쓰기 2~4개 제거 

 

 

      3단계 : HTML 페이지 실행하기

 

- [참고] VScode의 코드작성 보조기능이 동작하지 않으면? 파일의 확장자 확인!

       * 보조 기능 단축키 : Ctrl + SpaceBar

VScode는 파일의 확장자(파일 뒤에 붙는 .html 등)를 기반으로 파일의 언어를 판별해 다양한 코드 작성 보조 기능을 지원하기 때문에 동작하지 않는 경우, 파일의 확장자가 선택되어 있는지 확인 필요

   * 파일의 확장자 선택 방법 (1. 우측 하단 Plain Text를 클릭 / 2. 상단 언어 모드 선택 창에 'html' 등 확장자 입력)

 

- [참고] 오류

• 오류 예시

ReferenceError	예외 처리	Uncaught ReferenceError : OO is not defined	- OO 부분을 잘못 입력했을 때 발생 - 해당 부분을 수정하면 해결됨 - 예 : konsole.log('boleesystem')
SyntaxError	구문 오류	Uncaught SyntaxError : Invalid or unexpected token	- 토큰(기호)을 잘못 입력했을 때 발생 - 토큰(기호)을 수정하면 해결됨 - 예 : +++ 1 ++ 2 + 3
		Uncaught SyntaxError : missing ) after argument list	- 토큰(기호)을 잘못 입력했을 때 발생 - 괄호 ) 를 닫아주면 해결됨 - 예 : console.log)

• 오류 확인 방법? 웹 브라우저에서 개발자 도구 - 콘솔창에서 오류 및 위치(우측 빨간색 박스 부분) 확인 가능

 

- [참고] 코딩 스타일/컨벤션(convention)

• 언어의 사투리처럼 프로그래밍 언어에서도 지역/팀/회사 등에 따라 사용하는 코드 작성 방식이 조금씩 다르며 이를 코딩 스타일/컨벤션이라고 부름
• 예시 : 들여쓰기 2개 vs 4개 / 중괄호 입력 전 줄바꿈 여부 / 키워드 뒤 공백 여부 등
• [참고] 자바스크립트 표준 스타일 링크 (한국어 문서)

JavaScript Standard Style

 

---

 

01-3 기본 용어

1. 표현식, 문장, 프로그램

표현식  ㅡㅡ모여서ㅡㅡ>  문장  ㅡㅡ모여서ㅡㅡ>  프로그램

- 표현식? 값을 만들어 내는 간단한 코드

1 + 2 + 3 * 4

- 문장(Statement)? 표현식이 하나 이상 모인 것 (문장 끝에 세미콜론; 또는 줄바꿈으로 문장을 종결)

  * 프로그래밍에서의 문장은 sentence가 아닌 statement!

   => '코드로서 실행(성명, 진술, 서술, 선언 등)할 수 있는 최소 단위'라는 의미임

1 + 2 + 3 * 4
let boleesystem = 'bolee' + 'system'
alert('Hello!')

- 프로그램? 문장이 모인 것

 

---

 

2. 키워드(예약어), 식별자, 주석

- 키워드(예약어)? 프로그래밍 언어가 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어

> 더보기 : 키워드와 예약어의 차이? (추후 설명 링크 연결 예정)

• [참고] 예시와 함께 키워드가 정리된 사이트(educba)
• [참고] 키워드 한 눈에 볼 수 있도록 정리된 사이트(W3 schools)

JavaScript Keywords | Know List Of Top 49 JavaScript Keywords

JavaScript Reserved Words

 

- 식별자(identifier)? 이름을 붙일 때 사용하는 단어. 주로 변수명이나 함수명 등으로 사용

• 식별자 규칙

1. 키워드 사용 X 
2. 숫자로 시작 X
3. 특수 문자는 _와 $만 허용
4. 공백 문자는 포함 X

 

• 식별자 이름의 일반적인 관례

1. 알파벳을 사용하며, 의미를 지닌 단어(a, b가 아닌 input, output 등)를 사용하는 것이 좋음
2. 클래스 이름은 항상 대문자로 시작
3. 변수/인스턴스/함수/메소드 이름은 항상 소문자로 시작
4. 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 함 (예 : createRequest)

 

• 식별자 종류

구분	단독으로 사용		다른 식별자와 사용
식별자 뒤에 괄호 없음	변수	input	속성	Array.length
" 있음	함수	prompt('bolee', 'system')	메소드	Math.abs(-273)

console.log()
1. console은? 식별자
2. log는? 식별자, 메소드(괄호가 있으므로)

 

- 주석? 프로그램 코드를 설명할 때 사용, 프로그램 진행에는 전혀 영향주지 않음

• HTML 태그 주석 : <!-- 주석내용 -->
• JS 주석 : 방법1. // 주석내용 / 방법2. /* 주석내용 */

 

---

 

3. 출력

- 간단한 표현식 결과 확인하기 : 콘솔

• 간단한 한 줄 코드 실행의 결과를 확인할 때는 구글 크롬 콘솔을 이용하는 것이 가장 편함

 

- 경고창에 출력하기 : alert()

• 개발 전용 에디터를 사용하는 경우, 파일을 만들었을 때 가장 기본적인 출력 방법은 alert() 함수 사용임 

<script>
    alert('bolee.system')
</script>

매개변수(parameter)?
- 함수의 괄호 안에 들어가는 것 (상단 코드에서는 'bolee.system'이 매개변수임)

 

- 콘솔에 출력하기 : console.log() 메소드

    > 상단 콘솔 실행 예시 참조 (추후 링크 연결 예정)

• 화면에 출력되는 내용이 많으면 alert() 함수로 결과를 보는 것이 번거로울 수 있음
• console.log() 메소드의 괄호 내부에 입력한 값을 출력함

 

---

 

※ [출처] 이 게시글은 복습의 목적으로 작성하였습니다. <혼자서 공부하는 자바스크립트(한빛미디어)>에서 발췌한 내용이 포함되어 있으니 자세한 내용은 꼭 해당 서적을 참고하셔서 학습 이해에 도움 받으시길 바라겠습니다.