본 포스팅은
정보 제공용이 아닌
유튜브 개발자의 품격님의 자바스크립트 입문과
여러 개발자 블로그들의 자료를
바탕으로 보고 배운 것을 직접 정리해본 포스트 입니다.
*** 자바스크립트란?
- JavaScript는 웹문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어.
- HTML과 CSS는 웹의 모델과 뷰를, 자바스크립트는 제어를 담당한다.
- html을 핸들링하기 위한 프로그램 언어.
** 스크립트의 위치?
- html의 상단인 head에서 스크립트를 작성하기도 하는데 head보단 body가 닫히기 직전에서 해주는 것이 좋다.
- 왜? 브라우저의 엔진이 html과 스크립트를 위에서부터 한줄 한줄 읽고 분석하게 되는데 만약 많은 자바스크립트 영역이 상단에 있다면 이를 분석하는 시간이 오래 걸려서 그만큼 실제 화면인 body 영역이 늦게 로딩이 되기 때문에
이 html을 보게 되는 사용자가 더 느리다고 느껴질 수 있기 때문이다
** 자바스크립트의 함수 선언
function 함수명() {
}
** Element?
각 HTML의 요소들을 element라고 한다.
document.getElementByID("name").value=> 이 html 문서에서 name이라는 id를 가진 html요소를 찾고 그것의 value값을 말함.
* JavaScript를 사용해 HTML element를 찾는 방법
- 1) getElementById('id')
- 2) getElementByTagName('tagName')
- 3) getElementByClassName('calssName')
- 4) CSS선택자 : querySelectorAll('선택자') , querySelector('선택자')
- 5) HTML object collection : body, form, images, anchors, ....
*** javascript 타입
** 타입 추론
//숫자, 소수점, 숫자, 문자, 참거짓, 오브젝트, 배열 등등..
let = 1;
a = 1.2345;
a = "Egu";
a = true;
a = {};
a=[]- 자바스크립트는 대표적인 타입추론 언어 중 하나이다.
- 무엇을 넣든 자바스크립트가 알아서 타입을 추론한다.
* var
// var
var x; //변수선언
var x = 1; //선언과 동시에 할당
x = x+2; //재할당 가능
var x = 100; //재선언 가능
- var는 기본적인 타입으로 재선언, 재할당이 가능하다.
* let
// let
let y; //변수 선언
let l = 2; //선언 + 할당 가능
l = l+3 //재할당 가능
let l = 50; //오류 - let은 재선언 불가- let은 js
- let은 재선언이 불가능하다.
* const
// const
const z; //오류
const z = 1; //선언+할당이 동시에만 가능.
const z = 2; //오류 - 재선언 불가
z = z+2; //오류 - const는 재할당- const는 재선언 불가에 재할당도 불가능하며 선언과 할당을 동시에만 가능하다.
* 그럼 어떤 경우에 무슨 변수 타입을 써야 좋을까?
- 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋다.
- 그리고 객체를 재할당하는 경우는 생각보다 흔하지 않다. const 를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.
- 1) 재할당이 필요한 경우에 한정해 let 을 사용한다. 이때, 변수의 스코프는 최대한 좁게 만든다.
- 2) 재할당이 필요 없는 상수와 객체에는 const 를 사용한다.
** 오브젝트
let ob = {
key : value
}
let ob2 = new object();- 오브젝트는 여러 데이터를 묶어서 한번에 보낼 때 사용한다.
- 중괄호 { }로 만들 수 있으며 위와 같이 2가지로 만들 수 있다.
- key와 value값의 쌍으로 이루어져있고 무엇이든 넣을 수 있으며 오브젝트도 예외는 아니다.
- JSON이 이 오브젝트 구조로 이루어져있다.
let obj = {
name:"",
city:"",
obj2:{
}
};
obj.name = $("#name").value;
obj.city = $("#city").value;
obj2.name2 = $("#name").value;
obj2.city2 = $("#city").value;- 오브젝트는 키를 초기화 해도, 미리 초기화 시키지 않아도 오브젝트 밖에서 후에 넣을 수 있다.
** 배열
- 배열은 다른 언어의 배열과 마찬가지로 인덱스를 가지는 복수의 자료를 순차적으로 저장할 수 있는 자료구조이다.
var ar = [];
var ar2 = new Array[];- 배열은 대괄호 [ ]로 만드며 위와 같이 2가지로 생성할 수 있다.
- 배열에는 같은 타입만 넣는 것이 아닌 어떤 타입이든 다양하게 넣을 수 있다.
*** 자바스크립트 제어문(조건문과 반복문)
** if문
if(조건식){
실행문1
}else if(조건식){
실행문2
}else{
실행문3
}
** switch문
switch(상수값){
case n :
실행문
break;
case n :
실행문
break;
default :
기본 실행 문장
}
** for문
for(초기식; 조건식; 증감식){
실행문
}
** while문
while(조건식){
실행문
}** do while문
do {
실행문
}
while(조건식);
*** JQuery?
- javascript의 라이브러리로 javascript에서는 여러 줄에 걸쳐 작성해야하는 것을 짧게, 쉽고 간편하게 코드를 작성할 수 있게 해줌.
- 이전에 html이 표준화되기 전에는 브라우저마다 html을 다르게 짜줘야했었는데 이걸 jquery가 해결해주어서 아주 많이 쓰였으나 최근에는 이 jquery를 안쓰는 추세로 가고 있다.
- 그도 그런 것이 2006도에 나온 라이브러리이기 때문에 vue나 react, angular 등의 최신 프레임워크에 많이 밀리고 있다한다.
** javacript와 간단 비교
<div class="container">
<div>이름 : <input type="text" id="name"></div>
<div>지역 :
<select id="city" onchange="changeCity();">
<option value="02" selected>서울</option>
<option value="064">제주</option>
</select>
</div>
<div> 동네 :
<select id="region_02">
<option value="">강남구</option>
<option value="">서초구</option>
</select>
<select id="region_064" style="display: none;">
<option value="">제주시</option>
<option value="">서귀포시</option>
</select>
</div>
<button type="button" onclick="regist();">등록</button>
</div>function regist() {
//javacript
alert(document.getElementById("name").value);
//JQuery
alert($("#name").val());
}- jqeury는 기본적으로 $를 사용한다.
- val()은 value값을 가져오는 jquery의 자체 함수이다.
- #은 css의 #과 동일하게 id를 뜻한다.
<div class="container">
<div>이름 : <input type="text" id="name"></div>
<div>지역 :
<select id="city" onchange="changeCity();">
<option value="02" selected>서울</option>
<option value="064">제주</option>
</select>
</div>
<div> 동네 :
<select id="region_02">
<option value="">강남구</option>
<option value="">서초구</option>
</select>
<select id="region_064" style="display: none;">
<option value="">제주시</option>
<option value="">서귀포시</option>
</select>
</div>
<button type="button" onclick="regist();">등록</button>
</div>function changeCity() {
//javascript
let city = document.getElementById("city").value;
document.getElementById("region_02").style.display="none";
document.getElementById("region_064").style.display="none";
document.getElementById("region_"+city).style.display="";
//jquery
let city = $("#city").val();
$("#region_02").hide();
$("#region_064").hide();
$("#region_"+city).show();
}- javascript에서는 .style.display ="none" , "" 등이
- jquery에서는 hide(), show() 으로 자체 함수를 써 코드가 비교적 간단하고 짧아진다.
*** jquery 외 다른 라이브러리
- AngularJS: 구글에서 제작한 프론트엔드용 클라이언트 사이드 JavaScript 프레임워크. Angular 1으로도 불린다. 백엔드, 프론트엔드를 동시에 작업 할 수 있다. MongoDB, Express, AngularJS, Node.js를 함께 사용하여 MEAN Stack으로 많이 사용한다. Angular 2 이후로는 이건 TypeScript를 이용한다. 기본적으로 많은 기능들이 내재되어 있다.
- React: Facebook에서 만든 프론트엔드용 오픈소스 라이브러리다. 단방향 데이터 흐름과, Virtual DOM 개념을 도입한 UI 컴포넌트 라이브러리. 생산성이 높고, DOM 업데이트에 있어서 성능이 매우 빨라 동적인 웹 어플리케이션 구성에 유리하다. 그리고 이러한 동적 웹이 모던 웹 어플리케이션의 필수 요소가 되어버린만큼 출시 이후 꾸준히 점유율을 늘려가며 업계 표준 라이브러리 중 하나로 자리잡았다. 최근에는 React Hooks이라 불리는 메소드가 지원되면서 생산성이 더 좋아졌다. html로 뷰를 작성해야하는 Angular와는 다르게 JSX라는 문법을 지원하면서 JavaScript만으로 어플리케이션을 작성하는게 가능하다. 기존 문서에는 MVC의 V(View)를 담당하는 라이브러리라고 되어 있었으나 리액트는 MVC framework가 아니며 View뿐만 아니라 Controller 부분까지도 리액트 컴포넌트 내에서 작성이 가능하므로 정확한 설명이 아니다.
- Vue.js: 중국계 미국인 에반 유가 만든 사용자 인터페이스를 만들기 위한 프론트엔드용 프레임워크이다. 굉장히 자유롭고 유연하게 추가 기능들을 불러올 수 있다는 특징이 있으나 추가 기능들을 무분별하게 사용하는 경우 안정성을 떨어뜨릴 수 있다.
- Node.js: 브라우저 안에서만 작동하던 JavaScript를 브라우저 외의 환경에서 작동할 수 있게 만들어 준 런타임 환경이다.
- Express.js: Node.js를 위한 웹 애플리케이션 프레임워크. 주로 Node로 백엔드 개발할 때 사용된다.
- Deno: Node.js의 개발자 Ryan Dahl이 Node.js의 아쉬운점을 개선한 JavaScript 엔진이다.
♣ 참고 및 인용
'웹 개발 한걸음' 카테고리의 다른 글
| [Design Pattern] 싱글톤 패턴 배워보기 (0) | 2021.04.15 |
|---|---|
| [JavaScript] AJAX / XMLHttpRequest 파헤쳐보기 (0) | 2021.04.14 |
| [Servlet] 게시물 삭제 구현하기 (0) | 2021.04.05 |
| [Servlet] 게시물 수정 구현하기 (0) | 2021.04.05 |
| [Servlet] 상세 페이지 구현하기 (0) | 2021.03.31 |
