[혼공JS] 개발환경 설정 chapter 1

1. 자바스크립트의 활용

웹클라이언트 개발 : 정적웹페이지(HTML,CSS) -> 동적웹페이지 그리고 웹클라이언트(React) 개발에 사용됨
웹서버애플리케이션 : Node.js를 이용한 웹서버 개발이 가능해짐 - Back-end (express 프레임워크)
                                Node.js는 개발에 꼭 필요한 모듈만 제공함 , 속도가 아주 빠름 

모바일애플리케이션개발 : 리액트네이티브를 이용한 크로스플랫폼 개발 가능

데스크톱애플리케이션개발 : 일랙트론을 이용하여 데스크톱앱 개발가능

데이터베이스 관리 : Nosql의 대표 MongoDB를 관리할 수 있음

 

자바스크립트의 종류 : 종류라기보단 프로그래밍언어의 역사와 같음 현재는 ECMAscript기반으로 함

 

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

책은 윈도우를 기반으로 개발환경을 설정했지만 본인은 운영체제 공부를 위해 우분투를 사용중이다.

그래서 터미널로 설치하는 과정을 적을려고 한다.

 

우선 책에 나온대로 크롬을 먼저 설치하고 
1. 저장소 목록을 새로 가져옵니다.

$ sudo apt update

2. Chrome 패키지를 다운로드합니다. (wget 패키지가 없다면 sudo apt-get install wget -y)

$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

4. Chrome 패키지를 설치합니다.

$ sudo dpkg -i ./google-chrome-stable_current_amd64.deb

이후 설치완료!

 

마찬가지로 vscode도 설치해봅시다.

1.https://code.visualstudio.com/ 로 접속해서 .deb 파일 받기

2.이후 다운로드 폴더로 가서 

sudo apt install ./<file>.deb

현재 배포되는 파일은 

3. 인스톨 끝!

 

그리고 대망의 Hello World

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

1 . 표현식

값을 만들어 내는 간단한 코드

//예시 :

273

10+20+30*2

'RintIanTta'

이러한 표현식이 하나이상 모이면 문장이 됨

//세미콜론을 사용한 문장 구분

10+20+30 *2; var rintiantta = 'Tint' + 'Ian' + 'Tta'; alert('Hello JavaScript..!');273;

//줄바꿈을 이용한 문장구분

10+20+30 *2;

var rintiantta = 'Tint' + 'Ian' + 'Tta'

alert('Hello JavaScript..!')

273

이때 위 처럼 줄바꿈이나 세미콜론(;)을 찍어 문장의 종결을 알린다.

그리고 이러한 문장들이 모여 프로그램을 만듭니다.

 

2 . 키워드

처음 만들어질때 부터 정해놓은 특별한 의미가 있는 단어를 키워드라고 하며 예시로
if, for, true 같은 키워드들이 있습니다.

나머지는 공부하면서 자연스럽게 배워게됨

 

3 . 식별자

식별자는 프로그래밍언어에서 이름을 붙일때 사용되며 보통 변수명이나 함수명을 지을때 사용됩니다.
식별자의 경우 다음과 같은 규칙을 반드시 지켜야하는데

1.  키워드를 사용하면 안 됩니다.
   예시 :break ,if ,for
2. 숫자로 시작하면 안 됩니다.
3. 특수문자는 _와$만 허용됩니다.
4. 공백문자는 포함될 수 없습니다.

p.s 가끔 _와 $만 사용하는 경우가 있습니다.

 

식별자를 만드는 관례 : 

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

3번예시 : will out -> willOut, i am a boy -> iAmABoy

 

4 . 주석

주석의 종류는 크게 2가지 HTML주석 과 자바스크립트 주석이 있습니다.

 

HTML주석 : <!-- -->로 감싸서 사용함

자바스크립트 주석 : 1. // 한줄 주석

                              2./*~~~~~~ */  여러줄 주석 사용가능 

 

5 . 출력

간단한 표현식 결과 확인 : 구글크롬의 F12로 들어가 구글크롬콘솔 사용

 

경고창에 출력하기 : 

alert(message?: any ) : void

alert 함수에 매개변수를 넣어서 코드를 입력하고 실행하면 경고창 형식으로 나옴

 

콘솔에 출력하기 : console.log(~~~~)형식으로 작성하면 콘솔창에서 나온다.

console.log('냐옹냐옹')