◆ Javascript 정의
-
클라이언트 내에서의 프로그래밍을 처리하는 언어
-
클라이언트는 브라우저를 말함
-
과거에는 간단한 입력창 검사 정도만 구현(느리니까)
-
구글에서 Javascript V8 엔진을 개발하면서 대 변화가 일어남
-
점점 Javascript를 이용해서 서버를 거치지 않고 처리하는 과정이 늘어남
- jQuery
-
전통적인 웹에서도 화면을 서버가 아니라 자바스크립트로 생성하는 시도가 발생
- AngularJS
- VueJS(2014)
- ReactJS(2013)
-
자바스크립트가 빠르고 브라우저만 있으면 어디서나 돌아가니까 OS 패싱 시도
-
서버를 자바스크립트로 구현하려는 시도가 발생
- 자바스크립트 런타임 개발(NodeJS)
- 스프링과 겹치는 분야
-
가장 신기술이 많이 나오는 분야
-
자바스크립트를 쓰고 싶다면 HTML 내부에
<script>태그를 생성해야 한다. -
type을 어떻게 설정하느냐에 따라 다른 언어로 인식(기본값 = text/javascript)
◆ 코드 분리
◆ script 태그를 사용한 코드 분리
장점
- 가독성이 좋아진다.
- HTML과 분리하여 모듈로 개발할 수 있다.
단점
- 대상을 선택하려면 추가 코드가 필요하다.
◆ 외부 스크립트를 사용할 경우 src 속성으로 위치를 지정
- CDN 형태도 가능하다.
- 여러 개 사용 가능하다.
◆ Javascript 코드 위치
- 스타일과 마찬가지로 HTML보다 미리 불러와서 처리하도록 구현
- style보다는 아래
<head>배치 - 과거 방식
- 브라우저마다 코드를 해석하고 실행하는 방식이 다르다.
- 어떤(파이어폭스) 브라우저는 순차적으로 해석
- 어떤(크롬) 브라우저는 자바스크립트 먼저 해석
- 어디서나 동일하게 처리되도록 구성하는 것이 이상적이다.
- 최근 스크립트 배치 위치(body의 맨 마지막)
- 최근 홈페이지의 가장 이슈인 홈페이지가 표시되는 속도를 개선하기 위한 위치
- 사용자는 홈페이지를 봐야 행동이 가능하다.(ex : 클릭)
- HTML/CSS(디자인)/JS(기능) 중에서 유일하게 나중에 불러와도 되는 것이 JS
- 자바스크립트 로딩을 최 후순위로 미루기 위하여 이곳에 작성
- Lazy Loading 방식
◆ Javascript 코드 기본 요소
-
자바스크립트는 문법이 비교적 자유롭다.
1) 문자열의 따옴표가 한 개든 두 개든 상관하지 않는다.
2) 세미콜론을 강제하지 않는다.
3) 자료형을 명시적으로 구분하지 않는다.
- 정수와 실수를 구분하지 않는다. -
변수
- 자바와 같은 컴파일 언어에서는 크기 때문에 자료형이 매우 중요하다.
- 자바스크립트는 스크립트 언어이므로 자료형을 일괄적으로 해석한다.
- 자바스크립트 버전에 따라 var, const, let 등 다양한 키워드를 사용한다.
- 자료형의 개념을 있으며, 정상적인 계산이 아니면 오류 발생 혹은 오류 값 처리를 한다.
- 자바에서 오류나는 코드(자바스크립트는 오류가 아닌 NaN 처리한다.)
◆ 함수(Function)
- 특정 기능을 수행할 수 있는 코드를 보관하는 저장공간
- 지속적으로 재사용하기 위한 코드를 보관하는 것이 목적
- 자바에서의 static 메소드와 유사하게 사용한다.
- 자바스크립트는 자료형 구분을 하지 않으므로 반환형을 작성하지 않는다.
- 반환형 대신 function 키워드 사용
- 이름은 자유롭게 작성하되 다른 스크립트와 충돌 가능성을 고려
- 매개변수에 자료형을 작성하지 않는다.
- 함수는 호출해야 실행이 된다.
(중요)
- 함수를 호출할 때 꼭 매개변수 개수가 맞지 않아도 된다.
- 만약 매개변수에 값을 넣지 않는다면 해당 변수는 undefined가 된다.
- 자바스크립트는 오버로딩이 불가능하므로 이 방식으로 모든 처리를 구현한다.
- 가급적이면 형태와 일치하는 호출을 할 수 있도록 하여 문제를 줄인다.
- // customFunction(100, 200, 300) //마지막 값은 버려진다. - 함수와 인라인 스크립트를 섞어서 HTML과 연계하여 사용이 가능하다.
Backend Developer