[JavaScript] 자바스크립트 기본

데이터베이스 다음으로 배울 것은 자바스크립트라는 언어인데 웹에서 많이 사용되는 중요한 언어이다. Dep2play에서 개발에 필요한 언어이어서 공부를 시작하게 됐다. 크게는 기초(문법), 프런트 기초(jQuery 등), 백엔드 기초(Node.js)를 배울 것이고 기초에 대해서 먼저 공부를 시작하게 됐다. 자바 언어를 배웠기 때문에 내가 아는 부분은 간단하게 보거나 넘어갈 것 같다.

 

자바스크립트 - 웹 브라우저 위에서 동작하는 언어이고 웹브라우저라는 형태의 소프트웨어들을 프로그래밍적으로 제어하기 위한 언어이며 웹프로그래밍 하려면 사실상 필수이다.

 

최근에 node.js라는 서버측 자바스크립트가 각광받고 있고

MongoDB와 같은 친 자바스크립트 데이터베이스를 사용하면 클라이언트부터 서버 그리고 데이터베이스까지 모든 부분을 자바스크립트 기반으로 구현할 수 있다.

 

자바스크립트 언어 자바스크립트가 동작하는 환경(웹 브라우저) 분리이터베이스 다음으로 배울 것은 자바스크립트라는 언어인데 웹에서 많이 사용되는 중요한 언어이다. Dep2play에서 개발에 필요한 언어이어서 공부를 시작하게 됐다. 크게는 기초(문법), 프런트 기초(jQuery 등), 백엔드 기초(Node.js)를 배울 것이고 기초에 대해서 먼저 공부를 시작하게 됐다.

 

 

 

자바스크립트 - 웹 브라우저 위에서 동작하는 언어이고 웹브라우저라는 형태의 소프트웨어들을 프로그래밍적으로 제어하기 위한 언어이며 웹프로그래밍 하려면 사실상 필수이다.

 

 

 

최근에 node.js라는 서버측 자바스크립트가 각광받고 있고

 

MongoDB와 같은 친 자바스크립트 데이터베이스를 사용하면 클라이언트부터 서버 그리고 데이터베이스까지 모든 부분을 자바스크립트 기반으로 구현할 수 있다.

 

실행 방법은 간단했다. 메모장에서 코드 작성 후 파일이름.html로 모든 파일로 저장 인코딩은 UTF-8로 하면 됐고 웹 창에서 ctrl+o 누르고 파일 열면 실행이 됐다

그리고 콘솔은 F12(개발자 도구)를 눌러서 console창을 클릭하면 나왔다

도구는 강의에서 사용한 Sublime Text를 사용했는데 도구 부분에서는 개발자 본인이 신경을 써서 좋은 개발 도구를 선택하는 것이 중요하다 했다

 

코드 기본 형태는 아래와 같았고

script 부분 사이에 코드를 입력했다

 

정수는 1 실수는 1.1처럼 입력하고

문자는 |는 바로 뒤에 있는 문자 하나를 정보로 해석하고 typeof는 값의 데이터 형을 알려준다

 

변수는 코드의 재활용성을 높여준다

 

비교 연산자로

= 대입 연산자

== 동등 연산자 - 서로 값이 같으면 true 다르면 false

=== 일치 연산자 - 값, 데이터 형까지 일치해야 true

가 있다

 

다른 연산자들로는 

 

null - 값이 없음을 명시적으로 표현

undefined - 그냥 값이 없는 상태

NaN - 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형 숫자가 아니라는 뜻

! - 부정을 의미

!= - 같지 않다

!== - 정확하게 같지 않다

등이 있다

 

조건문은 if로 시작하고 조건이 될 수 있는 값 Boolean이 있다

빈 문자열, undefined, null, NaN 은 false로 간주하고

 

반복문에서 i++이면 사용하고 증가한다는 것이고 ++i이면 증가한 후 사용하는 것이다.

 

함수는 재사용성, 유지보수가 용이, 가독성 때문에 사용되는데

function 함수명( [인자] ''' ){

            코드

            return 반환값

}

이렇게 쓰인다 여기서 return은 결과 반환하는 것 외에 함수를 중지시키는 역할을 한다

( function(){

          코드

})();

이렇게도 사용할 수 있는데 이건 익명함수라고 불린다

 

배열에 대해서도 배웠는데 배열을 조작함에 있어서

1. 추가

- push : 배열의 끝에 원소 추가

- concat : 복수의 원소를 배열에 추가

- unshift : 값을 배열의 첫 번째 원소로 추가

- splice( a, b, 'c') : a번째 인덱스 뒤부터 b만큼의 원소의 수를 제거하고 'c'를 추가

2. 제거

- shift : 배열의 첫 번째 원소 제거

- pop : 배열의 마지막 원소 제거

3. 정렬

- sort

- reverse : 역순 정렬

 

객체에 대해서도 배웠다

객체 만드는 법은

1. var 객체이름 = {'key' : 값, '''}

2. var 객체이름 = {}

   객체이름['key']=값;

3. var 객체이름 = new Object();

   객체이름['key']=값;

 

객체에는 객체를 담을수도 함수를 담을수도 있다

 

모듈은 부품으로 사용하는 기법이고 코드를 여러 개의 파일로 분리하는 것이다

- 코드를 별도의 파일로 만들어서 재활용하고

- 코드 수정 시 필요한 로직을 빠르게 찾을 수 있다

- 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다

 

자바스크립트가 구동되는 호스트 환경에 따라 모듈화 방법이 다르다

 

라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합이다

 

그 중 유명 라이브러리인 jQuery 예약어는 $('#list li').text('coding everybody')이다

 

UI(User Interface) - 사용자를 대면하는 접점(하드웨어나 소프트웨어에서)

 

API(Application Programming Interface) - 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치

 

자바스크립트의 API는

1. 자바스크립트 자체의 APi - ECMAScript, 자바스크립트 사전(생활 코딩), 자바스크립트 레퍼런스(MDN), jscript 레퍼런스(MSDN)

2. 자바스크립트가 동작하는 호스트 환경의 API - 웹 브라우저 API, Node.js API, Google Apps Script API

이렇게 있다

 

프로그래밍을 공부할 때 레퍼런스는 명령어의 사전을 의미, 튜토리얼은 언어의 문법을 설명한다

 

정규 표현식은 문자열에서 특정한 문자를 찾아내는 도구이고 이 도구를 이용하면 수십줄이 필요한 작업을 한 줄로 끝낼 수 있다

정규 표현식은 두 가지 단계로 이루어지는데

1. 컴파일 - 검출하고자 하는 패턴을 만드는 일인데 우선 정규표현식 객체를 만들어야 한다

만드는 방법은

1) 정규표현식 리터럴 var pattern /a/

2) 정규표현식 객체 생성자 var pattern = new RegExp('a'); 이고 두 가지  모두 같은 결과를 만든다

2. 실행 - 정규표현식을 컴파일해서 객체를 만들었으면 문자열에서 원하는 문자를 찾아내야 한다

RegExp.exec();

-RegExp는 정규표현식 객체이고 패턴이 들어있다

-exec는 추출이다.

RegExp.test();

-패턴에 해당되는 문자열이 있으면 true 없으면 false

String.match()

-RegExp.exec()와 비슷

String.replace()

- 패턴 검색해서 이를 변경한 후 변경된 값을 리턴

 

정규표현식 패턴을 만들 때 옵션을 설정할 수 있는데

i - 붙이면 대소문자 구분을 안하고

g - 붙이면 검색된 모든 결과를 리턴한다

 

괄호안의 패턴은 마치 변수처럼 재사용할 수 있는데 이 때 기호 $를 사용한다