1. jQuery맛보기
1. jQuery사이트에서 cdn을 가져온다.
<!DOCTYPE HTML>
<html>
<head>
<title>document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<script>
document.querySelector("body").sytle.backgroundColor = "red";
$("body").css("background-color", "red");
$("body").css("background-color", "red").css("color", "white");
</script>
</body>
</html>
- jQuery는 반복문을 거의 사용하지 않는다 jQuery객체에 의해 선택된 태그는 전부 바뀌기 때문이다.
- 그래서 특정 요소만 바뀌기를 원한다면 클래스나 아이디를 지정해준다.
<script>
$("#id").css("background-color", "red").css("color", "white");
</script>
- id 지정도 가능하고 체이닝 형식으로 코드를 작성할 수 있다.
2. export, import -> 모듈화
1. 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.
2. JavaScript코드를 모듈화하는데 핵심이며, ES6에서 도입된 최신 문법이다.
3. 사용법
- 외부에 공개하려는 모듈은 export 해야 하고, 내보내진 모듈을 가져와 사용하려면 import 해줘야 한다.
export 방법
test.js
export let a = 3
export let b = {a:3, b:3, c:3}
export let c = [1, 2, 3]
export function test1() {...}
export function test2() {...}
export function test3() {...}
let a = 3
let b = {a:3, b:3, c:3}
let c = [1, 2, 3]
function test1() {...}
function test2() {...}
function test3() {...}
export {a, b, c, test1, test2, test3}
let a = 3
let b = {a:3, b:3, c:3}
let c = [1, 2, 3]
function test1() {...}
function test2() {...}
function test3() {...}
export {a as variableA, test1 as t1, test2 as t2}
function test1() {...}
export default test1
- export default는 명시적으로 하나만 내보내겠다는 뜻이다. 여기서 여러개를 내보내려 한다면 에러가 발생한다.
import 방법
main.js
import {a, b, c, test1, test2, test3} from "./test.js"
- export로 묶어서 내보낸 경우는 그 파일안에서 사용한 변수명을 그대로 사용해야 한다.
import {a as variableA, b as varialbeB} from "./test.js"
- 변수명을 바꾸고 싶다면 위와 같이 바꿔줄 수 있다.
import * as it from "./test.js"
console.log(it.a);
console.log(it.b);
console.log(it.c);
console.log(it.test1());
console.log(it.test2());
console.log(it.test3());
- 모두 한번에 가져와서 접근형식으로 사용할 수 있다.
import myTest from "./test.js"
- export default로 내보냈을 경우 export로 내보냈을 때와 크게 차이가 2가지 정도 있다
- 첫번째는 {} 없이 가져오는 것이고 두번째는 변수명을 가져올 때 사용자가 임의로 지정할 수 있다.
<script type="module"></script>
- script태그에서 사용을 하려면 type을 명시해줘야 한다. 그후 src로 가져오거나 script태그 안에서 import를 사용하여 각 모듈을 사용한다.
- import와 export의 사용 방법은 여러가지 이지만 항상 약속을 정하고 일관되게 사용하는 것이 옳다고 생각한다.
3. component 맛보기
1. 모듈화를 활용한 웹페이지 구성
2. render를 통해 HTML요소를 반환하는 함수이다. 독립적이고, 재사용 가능한 UI조각이다.
3. class component와 functional component가 있다. 기반이 class, function의 차이이다. 현재는 거의 functional component를 사용한다.
4. component의 이름은 항상 대문자로 시작한다.
function ComponentTest() {
return (
<div>
...
</div>
)
}
export default Component
- 이런식으로 파일을 작성하여 내보낸다. 항상 <div>태그로 묶어서 내보내야 한다.
4. 자주 사용하는 내장객체 메서드
1. Array
let arr = [1, 2, 3, 4, 5, "a", "b", 7, 8];
//callback 함수의 별도의 return값이 없고 각 요소마다 함수를 실행
arr.forEach((element, index) => {...})
//callback함수가 요소를 순회하면서 실행결과에 따른 새로운 배열을 반환
let newArr = arr.map((element, index) => {return ...})
//callback함수의 return 값이 true인것만 return하여 새로운 배열을 반환
let filterdArr = arr.filter((element, index) => {return true/false})
//accumulator의 값을 어떻게 축적을 할 지 callback함수에 정의하여
//return하여 최종적으로 하나의 값으로 반환시킨다.
let newNum = arr.reduce((accumulator, currentValue, index) => {return...}, initialValue)
//callback 함수를 정의해서 사용
arr.sort((a, b) => b - a);
//배열을 문자열로 변환 join의 인자는 뭐든지 될 수 있음
let str = arr.join("")
2. String
let str = 'JavaScript';
str.concat("Hello") //JavaScriptHello
str.charAt(index)
str.charCodeAt(index)
String.fromCharCode(65) //A
str.split("") //공백 없이 나누면 문자 전체를 배열로 공백을 두면 단어를 배열로
str.trim() //공백 제거
str.toLowerCase()
3. Math
Math.PI // 3.14
Math.ceil() //올림
Math.floor() //내림
Math.round() //반올림
Math.random() //0~1사이 숫자
Math.sqrt() //제곱근
Math.pow(a, b) //a의 b승
4. Number
Number('123'); // 123
Number('123') === 123; // true
Number('12.3'); // 12.3
Number('12.00'); // 12
Number('123e-1'); // 12.3
Number(''); // 0
Number(null); // 0
Number('0x11'); // 17
Number('0b11'); // 3
Number('0o11'); // 9
Number('foo'); // NaN
Number('100a'); // NaN
Number('-Infinity'); // -Infinity
let a = 312.3154
a.toFixed(2) //312.31
let b = 2342422;
b.toLocaleString() // 2,342,422
Number.isInteger(10 / 3) //false
-내장 객체 메서드는 많이 존재한다 현재는 내가 사용해본 것을 정리한 것이다. 공식 문서를 보면서 그때마다 필요한 것을 찾는것이 중요하다고 생각한다.
5. rest operator, spread operator
- spread operator: 묶여있던 것을 풀어주는 역할, 차원을 낮춰주는 역할을 한다.
- rest operator: 흩어져있는 요소를 묶어준다. (항상 나중에 써줘야 한다 rest란 의미 그대로 나머지라는 뜻)
/* Spread 문법을 사용한 매개변수 정의 (= Rest 파라미터)
...rest는 분리된 요소들을 함수 내부에 배열로 전달한다. */
function foo(param, ...rest) {
console.log(param); // 1
console.log(rest); // [ 2, 3 ]
}
foo(1, 2, 3);
/* Spread 문법을 사용한 인수
배열 인수는 분리되어 순차적으로 매개변수에 할당 */
function bar(x, y, z) {
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3
}
// ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(-> 1, 2, 3)
// spread 문법에 의해 분리된 배열의 요소는 개별적인 인자로서 각각의 매개변수에 전달된다.
bar(...[1, 2, 3]);
// ES6
function foo(v, w, x, y, z) {
console.log(v); // 1
console.log(w); // 2
console.log(x); // 3
console.log(y); // 4
console.log(z); // 5
}
// ...[2, 3]는 [2, 3]을 개별 요소로 분리한다(→ 2, 3)
// spread 문법에 의해 분리된 배열의 요소는 개별적인 인자로서 각각의 매개변수에 전달된다.
foo(1, ...[2, 3], 4, ...[5]);
// 객체의 병합
const merged = { ...{ x: 1, y: 2 }, ...{ y: 10, z: 3 } };
console.log(merged); // { x: 1, y: 10, z: 3 }
// 특정 프로퍼티 변경
const changed = { ...{ x: 1, y: 2 }, y: 100 };
// changed = { ...{ x: 1, y: 2 }, ...{ y: 100 } }
console.log(changed); // { x: 1, y: 100 }
// 프로퍼티 추가
const added = { ...{ x: 1, y: 2 }, z: 0 };
// added = { ...{ x: 1, y: 2 }, ...{ z: 0 } }
console.log(added); // { x: 1, y: 2, z: 0 }
// Spread
const n = { x: 1, y: 2, ...{ a: 3, b: 4 } };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
// Rest
const { x, y, ...z } = n;
console.log(x, y, z); // 1 2 { a: 3, b: 4 }
