안랩샘아카데미 React로 시작하는 프론트엔드 3주차 정리

함수

콜백함수

• 자신이 아닌 다른함수에 인수로써 전달된 함수
  function main(value) {
  value();
  }
  function sub() {
  console.log(“sub”);
  }
  main(sub);

function main(value) {
    console.log("main start");
    value(); //파라미터로 들어온 함수호출해서 sub출력된다.
    console.log("main end");
}

function sub() {
    console.log("sub");
}

main(sub);

sub함수를 선언하지않고 화살표함수로 변경하기

function main(value) {
    console.log("main start");
    value(); //파라미터로 들어온 함수호출해서 sub출력된다.
    console.log("main end");
}

//function sub() {
//    console.log("sub");
//}

main(()=> {
    console.log("sub");
});

1부터 5까지 출력하기(두배,세배의 경우도 있을 경우)

function show(count) {
    for(let idx = 1; idx <= count; idx++) {
        console.log(idx);
    }
}

function showDouble(count) {
    for(let idx = 1; idx <= count; idx++) {
        console.log(idx * 2);
    }
}

function showTriple(count) {
    for(let idx = 1; idx <= count; idx++) {
        console.log(idx * 3);
    }
}

show(5);
showDouble(5);
showTriple(5);

1부터 5까지 출력하기2>콜백 함수로 바꾸기(화살표함수 사용)

function show(count, callback) {
    for(let idx = 1; idx <= count; idx++) {
        callback(idx);
    }
}

show(5, (idx)=>{console.log(idx)}); //
show(5, (idx)=>{console.log(idx*2)}); //2배
show(5, (idx)=>{console.log(idx*3)}); //3배

자바스크립트 자료형
-숫자형,문자형,불린형,null,underfined

객체

객체는 프로그램에서 인식할 수 있는 모든 대상을 의미하고
자바스크립트에서는 데이터를 저장하고 처리하는 기본단위를 말한다.

프로퍼티와 메서드
프로퍼티는 객체의 특징이나 속성,
메서드는 객체에서 할 수 있는 동작

typeof 연산자

• 값의 자료형을 반환
• typeof null == "object" // 언어 자체의 오류
• typeof function(){} == "function" // 함수는 특별하게 취급

객체타입 자료형

• 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입
• Key / Value 쌍을 저장할 수 있는 구조

객체

• 객체는 중괄호 {...}로 생성
  const product = {
  제품명: '망개',
  유형: '캐릭터',
  성분: '솜뭉치',
  원산지: '대한민국'
  }

// let my = new Object(); //new Object()사용해서 생성할수도 있다.
//객체 리터럴 사용 
let my = {
    name : "chris",
    age : 29,
    hobby: "잠자기",
    ext: {}, //또다른 객체
    10 : 20,
    "like you" : true, //띄어쓰기가 있으면 ""로 묶어줘야한다.
};
//key값에는 문자열,숫자열 다 올 수 있다.

//key값으로 value값 가져오는 방법
console.log(my.name);
console.log(my["age"]);

//key값으로 value값 변경하는 방법
my.hobby = "자전거타기";
my["hobby"] = "자전거타기";

//삭제
delete my.hobby;
//삭제 확인
console.log(my);

//name이라는 프로퍼티 있는지 my객체에 있는지 확인하기
let result = `name` in my;

console.log(result); //true

객체안에 프로퍼티가 있는지 판단하는 함수 만들기

function isEmpty(obj) {
    for(let key in obj) {
        return false;
    }
    return true;
}

let mySchedule = {};
// 객체가 비어있니? isEmpty() //true
console.log(isEmpty(mySchedule));
mySchedule["9:00"] = "react";
// 객체가 비어있니? isEmpty() //false
console.log(isEmpty(mySchedule));

let salary = {
    선미: 100,
    희원: 150,
    지민: 200,
};

//월급의 총합을 출력
let sum = 0;

for(let emp in salary) {
	sum += salary(emp);
)

console.log(sum);

배열 array 객체

• 배열도 여러 자료를 다룸
• 배열도 객체를 기반으로 만들어 졌음
• 배열은 요소에 접근 시 인덱스를 사용하지만 객체는 key를 사용

- 배열의 선언

- 배열의 접근 : 인덱스와 요소
array[0] -> 사과
array[1] -> 망고

const fruit = [`사과`,`바나나`,`망고`,`딸기`];

//과일바구니 출력하기
for(let i=0; i<fruit.length; i++){
    console.log(fruit[i]);
}
//for each 사용하기
fruit.forEach((fru) => {
    console.log(fru);
});


const array = [1,2,3,4,5,6,7,8];

const squared = [];

//모든 요소들을 제곱해서 새로운 배열 만들기 구현
for(let idx = 0; idx < array.length; idx++){
  squared.push(array[idx]*array[idx]);
}

//for문을 for each문으로 바꾸기
array.forEach((idx) => {
    squared.push(idx*idx);
});

//map함수로 바꾸기
console.log(array.map((n) => n * n));

console.log(squared);

let arr = [
   { name: "chris", job:"개발자" },
   { name: "john", job:"강사" },
   { name: "merry", job:"교수" },
];

// 직업이 교수인 사람 출력하기 for each
arr.forEach((obj) => {
    if(obj.job==='교수'){
        console.log(obj.name)
    }
});

// 직업이 교수인 사람 출력하기 for 
let arr1 = [
    { name: "chris", job:"개발자" },
    { name: "john", job:"교수" },
    { name: "merry", job:"교수" },
 ];

let arr2 = [];

for(let i=0; i<arr1.length; i++) {
    if(arr1[i].job == '교수') {
        arr2.push(arr1[i].name);
    }
}

console.log(arr2);

//map으로 이름 출력
console.log(arr1.map((item) => item.name));

//filter메소드가 배열생성해서 리턴해준다.
const proPeople = arr1.filter((item) => {
    if(item.job === "교수") return item.name;
});

console.log(proPeople); //교수인 사람만 배열로 return

const proPeople = arr1.filter((item) => {
    if(item.job === "교수") return true;
});

console.log(proPeople); //true사용해도 결과값은 똑값다.

문서객체모델과 이벤트

이벤트와 이벤트핸들러

이벤트

• 웹 브라우저나 사용자가행하는 어떤 동작을 의미
• 키보드의 키를 누르는 것
• 웹 브라우저에서 새로운 페이지를 불러오는 것
• 폼 내용을 입력할 때

이벤트와 함수

• 대부분의 함수는 사용자가 화면에서 버튼을 클릭하거나 항목을 선택했을 때 실행됨
• 버튼을 클릭(이벤트)하거나 항목을 선택하는 것(이벤트핸들러)-> 이벤트
• 이벤트가 발생했을 때 실행하는 함수-> 이벤트 처리기

버튼 클릭했을때 색깔 바뀌게하기

index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #result{
            width: 500px;
            height: 300px;
            margin: 30px auto;
            border: 2px solid #ccc;
            border-radius: 15px;
        }
    </style>
</head>
<body>
 Hello World
 <ul> //리스트
    <li><a href="#" onclick="changeBg('green')">Green</a></li>
    <li><a href="#" onclick="changeBg('orange')">Orange</a></li>
    <li><a href="#" onclick="changeBg('purple')">Purple</a></li>
 </ul>
 <div id="result">
 </div>
 <script src="./index04.js"></script>
</body>
</html>

a태그 href="#"는 페이지이동하지않고 현재페이지에 위치

index04.js

function changeBg(color) {
  let result = document.querySelector("#result");
  result.style.backgroundColor = color;
}

문서 객체 모델

문서 객체 document object

• HTML 요소(element): html, head, body, title, h1, div, span
• 자바스크립트에서는 문서 객체라고 부름
• 문서 객체 = HTML 요소

문서 객체 모델 DOM, Document Objects Model

• 문서 객체를 조합해서 만든 전체적인 형태
• 웹 페이지 내의 모든 콘텐츠를 객체로 나타내줌
• HTML로 작성된 여러 요소들에 자바스크립트가 접근할 수 있도록 브라우저가
  변환시킨 객체

DOM Tree

DOM API

• DOM이란 HTML로 작성된 여러 요소들에 자바스크립트가 접근할 수 있도록
  브라우저가 변환시킨 객체
• 자바스크립트는 이러한 DOM을 통해 HTML로 짜여진 요소들을 생성하고 수정하고 삭제할 수 있다
• DOM은 자바스크립트가 자신에게 접근해, DOM을 조작하고 수정할 수 있는 방법인 DOM API를 제공하기 때문에 자바스크립트는 이를 활용해 웹 요소들을 생성하고 수정하고 삭제할 수 있다.

문서 객체 가져오기

document.getElementById

• document.getElementById(id)
• id값으로 요소 노드 반환

버튼 만들어서 숫자 증가,감소시키기

index3.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
 Hello World
<h2 id="number">0</h2>
<div>
    <button id="increase">+ 1</button>
    <button id="decrease">- 1</button>
</div>
 <script src="./index05.js"></script>
</body>
</html>

index05.js

const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");

increase.onclick = () => {
    number.innerText = Number(number.innerText) + 1;
    console.log("increase가 클릭 됨");
}

decrease.onclick = () => {
    number.innerText = Number(number.innerText) - 1;
    console.log("decrease가 클릭 됨");
}

document.querySelector

• CSS 선택자로 요소 노드를 반환
  document.querySelector(선택자) // 요소 하나만 추출
  document.querySelectorAll(선택자) // 여러 개 추출

css선택자

DOMContentLoaded 이벤트

• 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트
• 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생
• 이미지 파일이나 스타일시트 등의 기타 자원은 기다리지 않음

document.addEventListener('DomContentLoaded, () => { })

이벤트 설정하기
이벤트 핸들러 설정하기

• addEventListener( ) 메소드
• 문서객체.addEventListener( 이벤트 이름, 콜백함수 )
• 콜백 함수는 이벤트 리스너 또는 이벤트 핸들러라고 부름
• 예: h1 태그를 클릭할 때 이벤트 리스너를 호출

이벤트핸들러 적용해보기

const increaseNum = () => {
    console.log("increase가 클릭 됨");
    //number.innerText
}

const decreaseNum = () => {
    console.log("decrease가 클릭 됨");
    //number.innerText
}

increase.addEventListener("click", increaseNum);
decrease.addEventListener("click", decreaseNum);

요소조작하기
요소 찾고 해당 요소 조작하기
const clockElement = document.getElementById("clock");
clockElement.textContent = "12:00";
const item = document.createElement('div');
const checkbox= document.createElement('input');
item.setAttribute('attributeName', 1)
ttem.appendChild(checkbox)