SOPT 2차 세미나 내용 개괄적 정리

2차 세미나 이후 순전히 내가 보기 위한 지극히 개인적인 목적의 정리임!
콜백함수, Primise, Async/Await + HTML Canvas, drag and drop 실제로 다양하게 활용해보고 다시 정리하기

호이스팅

변수의 정의나 함수의 선언이 유효 범위의 최상단으로 올라가는 것

function hoisting(){
    console.log(d); //아래 선언된 것이 호이스팅 일어나서 상단부로 옴 ) undefined
    console.log(e); //ReferenceError
    var d = "be";
    let e = "sopt";
    fuction f(){
        console.log("28th");
    }
}
hoisting();

주의사항

• 전역변수 var을 함수 내부에 같은 이름으로 적으면 내부에 있는 변수가 우선 적용된다

var g;
function inner() {
  var g;
  console.log(g); //undefined
  g = "part";
}

자료형

• 기본적으로 null은 값이 존재하지 않음, 값을 알 수 없음
• undefined는 값이 할당되지 않음 -> "undeined"를 제외한 객체들은 typeof 겁사해보면 전부 다 객체로 취급됨 (undefined는 undefined 그 자체로 취급됨)

프로토타입

JS의 모든 객체는 자신의 부모 역할로부터 상속 받음 -> 이러한 부모 객체가 프로토타입 객체

배열

배열을 루프로 순회하기 위해 사용하는 방법들
참고) 배열을 순회하기 위해 사용하는 방법들 참고 사이트

배열 참조 가능한 반복문

1. for in

for (let index in arr1) {
  console.log(arr[index]);
}

• 인덱스를 통해 순회하는데 문제는 확장자도 가져옴(프로토타입 지정한 것 등)
• 어떤 때에는 루프의 순회순서가 무작위가 됨 ) 잘 안씀
• 객체 속성 순회하고 싶으면 사용 가능

2. for of

for (let element of arr1) {
  console.log(element);
}

• Map, Set 객체 순회도 가능
• for-in 구문 단점 모두 커버 / 직관적이고 간결한 문법
• break, return 통해 벗어나는 것도 가능

배열 프로토타입 받은 객체가 사용할 수 있는 함수 (array의 메소드)

1. forEach

arr1.forEach(element,index)=>{
    console.log(element);
    console.log(arr[index]);
}

//위와 같은 함수
arr1.forEach(function (element,index) {
  console.log(element);
  console.log(arr[index]);
});

• 간단해서 좋지만, break나 return 구문을 통해 벗어나기 어려움

유용한 배열 메소드

배열 메소드!! 이것 좀 잘 알아두기~ 쉽게쉽게 할 수 있는 것들 많음! (정렬이라던가 ㅋ..)

• arr1.length; 배열의 길이
• arr1.concat(arr2); 두 배열 합친 새로운 배열 리턴
• arr.sort(); 배열 요소들 순서대로 정렬
• arr1.push(넣을요소); 배열의 마지막 요소 추가
• arr1.pop; 배열의 마지막 요소 제거
• arr1.shift(); 배열 처음 요소 제거 (옮기고 넣어야돼서 느림)
• arr1.unshift();배열 처음 요소 추가 (옮기고 추가해야돼서 느림)
• arr1.map; 지정된 함수의 내용을 적용한 새로운 배열 리턴

//map 사용법
const arr4 = ["be", "sopt"];
const arr5 = arr4.map((item) => item + " heart");
console.log(arr5); // be heart, sopt heart

질문사항

• 그럼 JS에서 쓰는 .sort()의 time complexity는? (정렬 알고리즘보다 효율적인가?)
• 답변) Firefox uses merge sort. Chrome, as of version 70, uses a hybrid of merge sort and insertion sort called Timsort.
  The time complexity of merge sort is O(n log n). While the specification does not specify the sorting algorithm to use, in any serious environment, you can probably expect that sorting larger arrays does not take longer than O(n log n) (because if it did, it would be easy to change to a much faster algorithm like merge sort, or some other log-linear method).
  While comparison sorts like merge sort have a lower bound of O(n log n) (i.e. they take at least this long to complete), Timsort takes advantages of "runs" of already ordered data and so has a lower bound of O(n). (https://stackoverflow.com/questions/57763205/what-is-array-prototype-sort-time-complexity)

함수

함수는 일급 객체다!

1. 함수 표현 종류
   • 함수 선언문 )호이스팅 일어남
     -> 변수에 대입하는 느낌으로 함수를 표현해야 호이스팅이 일어나지 않음
   • 기명함수 표현식 )호이스팅 없음 (그렇지만 익명함수를 더 자주 씀)

    //기명함수
   const f2;
   f2 = function_f2(){
       console.log("f2");
   }

   • 익명함수 표현식 ) 호이스팅 없음(호이스팅 원치 않을 때 유용~!)
     -> 간결하게 화살표 함수로 가능

    //익명함수
   const f3;
   f3 = function () {
     console.log("f3");
   };
   
   //화살표 함수
   const f3 = () => {
     console.log("f3");
   };

2. 변수의 특징
   • 매개변수 ) 정의할 때 활용
   • 인자 ) 실제로 전달하는 애
3. return값
   • 함수 호출 지점으로 값을 반환 ) 지정되지 않은 경우엔 undefined를 반환 (디폴트 값이 undefined)
4. 좋은 함수 만드는 법
   • 하나의 함수는 하나의 기능만
   • lowerCamelCase
   • 동사로 시작, 명확
   • 화살표 함수 작성 권장 (꺄하~ 익숙해지자~!)

객체

• key와 value로 구성
• 내부 값들(property)은 쉽표로 구분
• value는 어떤 값이건 가능 -> 만약 여기에 함수가 온다면, 그 함수는 method라고 부름

const nahee = {
    fullname: " nahee Park:
    age: 22;
    lang;["Korean","English"];
    sayhi: () => {
        console.loh("hi");
    }
}

기본 연산자

JSON

• 자바스크립트 객체 표현식
• 데이터 저장하고 전송할 때 많이 사용되는 data 교환 형식 -> key, value로 구성
• 주로 서버 - 클라이언트 통신할 때 사용
• localStorage 웹 저장소 저장할 때도 사용
• 주의할 것은 key값, 문자열은 항상 쌍따옴표 이용해서 표기해야 함
• JSON으로 가져올 수 있는 데이터 -> 해당 자바스크립트가 로드된 서버 데이터에 한정된다.
  (XMLHttpRequest() 자바스크립트 함수를 통해 데이터 불러오는데 동일 서버에 대해서만 지원)

//JSON 형식 텍스트를 자바스크립트 객체로 변환하기
JSON.parse( JSON으로 변환할 문자열 ) : JSON 형식의 텍스트를 자바스크립트 객체로 변환한다.
JSON.stringify( JSON 문자열로 변환할 값 ) : 자바스크립트 객체를 JSON 텍스트로 변환한다.

동기와 비동기

이것들에 대해서는 추후 예제와 함께 상세히 포스팅 다시 할 예정

1. 콜백 함수

• 자바스크립트는 기본적으로 동기적이다! ) 싱글 스레드여서 효율성 위해 동기적 처리
• 그래서 비동기로 처리하기 위해선 콜백함수가 필요

콜백함수의 원리
무언가 일을 다른 객체한테 시키고, 그 일이 끝날 때까지 기다리는 것이 아니라 그 객체가 다시 나를 부를 때까지 내 할 일 따로 하고 있는 것

-> 콜백 지옥 저런!!ㅜㅜ ) 익명함수를 분리해 기명함수로 작성하거나 프로미스 이용해 해결

2. 프로미스

• 자바스크립트 비동기 처리에 사용되는 객체
• 세가지 상태
  1. pending ) 아직 비동기 처리가 완료되지 않음
  2. fulfilled ) 비동기 처리 완료돼 결과값 반환
  3. rejected ) 비동기 처리 중 오류 발생

//New Promise()를 통해 선언, 파라미터는 resolve, reject
// 리턴값은 resolve 나 reject 내부 메시지
// 둘 중 하나만 실행, 두 가지 모두 있으면 두번째 것은 무시됨
const getCoffee = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Ice Americano"), 3000);
  setTimeout(() => reject(null), 3000);
});

getCoffee
  .then((result) => console.log(result)) //then ) fulfilled 상태일 때 실행
  .catch((error) => console.log(error)) //catch ) rejected 상태일 때 실행
  .finally(() => console.log("done!")); // 결과에 상관없이 항상 실행

• fetch 사용해 실제 API 호출하면 Promise 객체 반환
• response.json()을 통해 response의 body를 JSON 객체로 변환한다
  -> 우리가 볼 수 있는 객체의 형태로 보기 위해서!
• -> 아이쿠 복잡해 async/await 사용

3. async/await

• then, catch 없이도 Promise 결과를 얻을 수 있다
• await는 async 함수 안에서만 사용 가능하다
• await는 결과가 resolve인지 reject인지 상관 없이 프로미스 끝날 때까지 기다린다.

다른 Async / Defer

• Async: 스크립트가 html 영향 받지 않을 때
• defer : 스크립트가 html 영향을 받을 때

---

API canvas

1. html 기본 세팅 ) 넓이, 높이 지정 (css로도 가능)

<canvas id="canvas" width="500" height="500"></canvas>

2. JS 기본 세팅

const canvas = document.getElementById("canvas");
const stx = canvas.getContext("2d");

3. 사각형 그리기

function dratReact() {
  ctx.fillstyle = "red"; //채울 색상 지정
  ctx.fillReact(100, 100, 200, 200); //테두리 색상 지정
  ctx.strokeStyle = "black"; //사각형 칠하기
  ctx.strokeReack = "black"; //사각형 테두리 그리기
  ctx.clearReact = "black"; //사각형 지우기
}

4. 삼각형 그리기
5. 원 그릴 땐 degree가 아니라 radian 이용
6. 마우스로 그리기 -> 마우스 이벤트를 설정

drag and drop

특정 엘리먼트를 마우스로 끌어서 옮기는 HTML API

1. 각각의 bucket에는 dragover 이랑 drop 이벤트를 추가해준다
   -> dragover은 끌고 오는 이벤트
   -> drop은 끌고 와서 떨구는 이벤트