JQuery
js의 Front end 라이브러리중 하나로 높은 시장 점유율을 아직 갖고있다.
FE framework
- React는 라이브러리이나, 프레임워크처럼 쓴다.
- Vue.js : Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다.
javascript 실행순서
head -> body -> html 밖
자바스크립트와-엔진-그리고-실행-방식
js 변수
- Memory(RAM) 내에서 저장위치
스택에서 단일 변수값을 담고있다
힙에는 리스트등 다중값을 담고있다 - var, let, const
var: mutable, 중복정의 가능하다, 사이드 이펙트 통제불가로 최근 안쓰는 추세
let: 재할당 가능
const : 재할당 불가
- 전역변수/지역변수
전역변수 year는 모든 곳에서 콜해서 쓸수있다.
밖에서 지역변수 text는 접근불가이다.
block scope의 경우 범위이긴 하나 밖에서 사용가능하다.
js 연산자
-
기본연산자
++/--/a*b/a**b -
나머지 연산자
큰 숫자를 다룰때, 나머지 연산자를 이용하여 작은 숫자로 바꿔 부하를 줄인후 사용
a % b
-
플러스(+)연산으로 문자열 붙이기. 숫자와 문자도 타입이 다르지만 문자로 붙으므로 주의
1+'a' -> '1a' -
논리 연산자
-
a && b
a 에는 false일 확률이 높은 조건을 둔다. 그럼 뒤의 b를 검사하지 않아도 false니까 뒤 문장을 실행하지 않아 성능이 향상된다.
-
a || b
a 에는 true 확률이 높은 조건을 둔다. 그럼 뒤의 b를 검사하지 않아도 true이므로 뒤 문장을 실행하지 않아 성능이 향상된다.
-
!true, !false
조건문에서 비교연산보다는 직접적인 boolean을 넣어줄때 성능이 향상됨
js function
- 3가지 방식으로 작성가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>function</title>
<script type="text/javascript">
function add(num1, num2){
return num1+num2;
}
const add1 = function(num1, num2){
return num1+num2;
}
// arrow function
const add2 = (num1, num2) => {
return num1+num2;
}
const result = add(10,20);
console.log(result);
const result1 = add1(1,2);
console.log(result1);
const result2 = add2(11,22);
console.log(result2);
</script>
</head>
<body>
</body>
</html>-
기존 function과 arrow function의 차이?
this 객체가 가리키는 대상이 다르다. 그래서 arrow function을 사용한다. -
파라미터로 데이터(오브젝트, 상수 등) 외에도 함수를 넘겨줄수도 있다. 이게 콜백함수 개념이다. 자주쓰는 패턴이다. 제이쿼리는 보통 콜백함수 개념으로 작성되어있다.
DOM
-
DOM이란?
트리구조로 html을 접근할수있게 문서화한 것
https://poiemaweb.com/js-dom -
event
- 자주쓰이는 주요 이벤트들
https://www.w3schools.com/js/js_events.asp - 이벤트를 부여하는 방식, attribute 방식은 레거시/ 보통 properties를 사용
- onclick이라는 attribute에서 실행
이전 버전 브라우저에서도 실행되도록 javascript: 를 붙여준다. 최근버전에서는 javascript: 없이 함수명만 써줘도 실행은 가능하다.
<button onclick="javascript:console.log('click');">click</button>
- DOM Selector
DOM에서 노드를 찾을때 너무 많은 계층을 타야하기 때문에, 기본 셀렉터를 제공한다.
웹브라우저에서 properties를 확인하면, innerText에 텍스트가 확인된다. 따라서 blank -> click으로 바꿔주는 코드는 셀렉터를 사용하여 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>event</title>
<script type="text/javascript">
const clickEvent= function(){
// console.log('click');
document.getElementById("box").innerText = "click"; //blank -> click
}
</script>
</head>
<body>
<button onclick="javascript:clickEvent();">click</button>
<div id ="box">blank</div>
</body>
</html>셀렉터 + 루프를 이용해서 바꾸기
<!DOCTYPE html>
<html lang="en">
<head>
<title>event</title>
<script type="text/javascript">
const clickEvent= function(){
// console.log('click');
// document.getElementById("box").innerText = "click"; //blank -> click
const list = document.getElementById("list");
const liList = list.getElementsByTagName("li");
for (let index = 0; index < liList.length; index++) {
liList[index].innerText = "click"+(index+1);
}
}
</script>
</head>
<body>
<button onclick="javascript:clickEvent();">click</button>
<div id ="box">blank</div>
<ul id = "list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>- properties를 사용하는 이유?
태그 내에 있는 attribute 방식보다는, 최근에는 properties 방식을 사용한다.
한방에 이해하는 attribute 와 property 속성 차이
<!DOCTYPE html>
<html lang="en">
<head>
<title>event</title>
<script type="text/javascript">
const clickEvent= function(){
// console.log('click');
// document.getElementById("box").innerText = "click"; //blank -> click
const list = document.getElementById("list");
const liList = list.getElementsByTagName("li");
for (let index = 0; index < liList.length; index++) {
liList[index].innerText = "click"+(index+1);
}
}
//body page loading 완료 후 발생하는 이벤트로 딱 한번 실행
window.onload = function(){
document.getElementById("btn").onclick = function(){
clickEvent();
}
};
</script>
</head>
<body>
<!-- <button>click</button> -->
<button id="btn">click</button>
<div id ="box">blank</div>
<ul id = "list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>아래코드에서 clickEvent();를 바로 onclick에 고정 부여하지 않고 function에 넣는 이유는, 다른 함수들도 일괄실행하는 확장성을 위해서이다.
또한, clickEvent와 같이 ()를 붙이지 않는것은 onload시 바로 최초 실행되는 것을 방지하여 클릭시에만 함수가 실행되도록 하기위해서이다.
//고정부여
document.getElementById("btn").onclick = clickEvent;
// document.getElementById("btn").onclick = clickEvent(); window.onload = function(){
document.getElementById("btn").onclick = function(){
clickEvent();
}
};- 클라이언트 조작 주의점
웹브라우저 설정은 건드릴수 없다. 예를들어,
const init = () => {
//console.log('page load!');
document.getElementById("btn").onclick = function(){
const link = document.getElementById("link");
console.log(link.getAttribute("target"));
//여기서 href는 dom 객체의 property임을 구분해야함.
link.href="http://www.google.com";
link.innerText="google";
link.target = "_blank";
}
}attribute와 property
<!DOCTYPE html>
<html lang="en">
<head>
<title>attribute / property</title>
<script type="text/javascript">
const init = () => {
//console.log('page load!');
//노출이 안되는 경우이므로 아래 property방식이 더좋다
document.getElementById("btn").num = "9999";
document.getElementById("btn").onclick = function(){
console.log(this.num);
// //실제 태그를 건드릴때, target속성은 존재하지 않으므로 null
// console.log(link.getAttribute("target"));
// //properties를 건드릴때, target속성은 공백값으로 존재
// console.log(link.target);
const list = document.getElementById("list");
const liList = list.getElementsByTagName("a");
// console.log(liList);
for (let index = 0; index < liList.length; index++) {
console.log(liList[index].getAttribute("num"));
}
// const link2 = document.getElementById("link2");
// //사용자 정의 attribute 가져오기
// console.log(link2.getAttribute("num"));
// //여기서 href는 dom 객체의 property임을 구분해야함.
// link.href="http://www.google.com";
// link.innerText="google";
// link.target = "_blank";
}
}
window.onload = init;
</script>
</head>
<body>
<button id = "btn">click</button>
<hr />
<!--attribute에 직접num 마킹 -->
<ul id ="list">
<li><a href="http://www.naver.com" id="link1" num="1">naver</a></li>
<li><a href="http://www.google.com" id="link2" num="2">google</a></li>
<li><a href="http://www.google.com" id="link3" num="3">google</a></li>
</ul>
</body>
</html>- attribute와 property는 다르다..!
document.getElementById("btn").onclick = function(){
const link = document.getElementById("link1");
console.log(this.num);
//실제 태그내 Attribute를 건드릴때, target속성은 존재하지 않으므로 null
console.log(link.getAttribute("target"));
//properties를 건드릴때, target속성은 공백값으로 존재
console.log(link.target);- 노출이 안되는 경우이므로 아래 property방식이 더좋다
document.getElementById("btn").num = "9999";- 직접 마킹방식은 비추. 브라우저에서 attribute를 조작해서 값을 넘겨 오류를 유발하는것이 가능하기 때문
<!--attribute에 직접num 마킹 -->
<ul id ="list">
<li><a href="http://www.naver.com" id="link1" num="1">naver</a></li>
<li><a href="http://www.google.com" id="link2" num="2">google</a></li>
<li><a href="http://www.google.com" id="link3" num="3">google</a></li>
</ul>
Reflow / Repaint
js를 통해 Dom에 정보가 바뀌면, 아래 전체 1~5 과정을 전체 재실행한다.
reflow : 레이아웃을 바꾸는것(grid 등 배치)
repaint : 꾸미는 요소를 넣음
Array
js에서 Array는 가변적이다.
https://jsbin.com/
const arr1 = [1,2,3];
const arr2 = arr1; // arr1 == arr2 참조값이 같다
console.log(arr1==arr2);
//기존 배열에 추가
arr1.push(4);
console.log(arr1); //1,2,3,4
console.log(arr2); //1,2,3,4
const arr3 = arr1.concat([5]); // 신규 array 생성하여 추가. 리액트의 경우 이렇게 신규로 넣어줘야 인식함
console.log(arr1); //1,2,3,4
console.log(arr2); //1,2,3,4
console.log(arr3); //1,2,3,4,5
Map 메소드
map() 메소드를 사용하여 배열에 대해 반복 처리
const arr1 = [1,2,3];
const result = arr1.map(
(currentValue,i,arr1) => {
// 배열 각 요소에 모두 10을 더한다
return currentValue+10;
}
);
// arr1은 기존과 동일하며, result에 신규생성 배열이 담긴다
console.log(arr1, result);자세한 설명: https://www.freecodecamp.org/korean/news/javascript-map-method/
reduce 메소드
const result = arr1.reduce(
(total, currentValue) => {
return total+currentValue;
}
);
console.log(result);// 6const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, el, i) => {
console.log(`${i}번째 콜백함수`)
// 리턴시 다음 루프의 첫번째 파라미터에 값이 담긴다
console.log(`acc: ${acc}`);
// 두번째 파라미터는 map과 동일하게 순회중인 배열 요소가 담긴다
console.log(`el: ${el}`);
return el + acc;
}, 0);
console.log(`-----------`);
console.log(`sum: ${sum}`);콘솔 결과
"0번째 콜백함수"
"acc: 0"
"el: 1"
"1번째 콜백함수"
"acc: 1"
"el: 2"
"2번째 콜백함수"
"acc: 3"
"el: 3"
"3번째 콜백함수"
"acc: 6"
"el: 4"
"-----------"
"sum: 10"기초
https://bigtop.tistory.com/69
활용
https://velog.io/@favorcho/%EB%B0%B0%EC%97%B4%EC%9D%98-reduce-%EB%A9%94%EC%84%9C%EB%93%9C
filter 메소드
검색할때 사용, 조건에 따른 특정 요소를 제외하고 싶을때
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 6);
console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]const num = [1,2,3,4,5];
const result = num.filter(
(num) => num % 2 == 1
);
console.log(result);
// Expected output: Array [1, 3, 5]기타
1. 포폴작성시: spring cloud gateway 사용을 고려하라
aws: Amazon api gateway
2. 코테시중요
통과만큼 중요한건 코드스타일
백엔드 개발공부 로그를 기록합니다