JavaScript - 2

2023.04.19 JavaScript - 배열과 객체

●함수
 - 참조 타입 중 하나
 - 함수 정의 방법
1. 함수 선언식(function declaration)
: 일반적인 프로그래밍 언어의 함수 정의 방식
      function 함수명()
      {
      }

2. 함수 표현식(function expression)
: 표현식 내에서 함수를 정의하는 방식
: 함수 표현식은 함수의 이름을 생략한 익명 함수로 정의 가능
      변수 키워드 함수명 = function ()
       {
       }
: 표현식에서 함수 이름을 명시할 수 있지만 함수이름은 호출에 사용되지 못함
 - 기본 인자
: 인자 작성 시 = 문자 뒤에 기본 인자 선언 가능
   name = 'Anonymous'

 - 매개변수와 인자의 개수 불일치 허용
1. 매개변수 < 인자
const twoArgs = function(arg1, arg2) {}
twoArgs(1, 2, 3)
----> arg1 = 1, arg2 = 2가 들어가고 에러가 나지 않음

2. 매개변수 > 인자
const threeArgs = funciton(arg1, arg2, arg3) {}
threeArgs(1)
---> arg1 = 1이 들어가고 arg2, arg3는 undefined가 됨



● Spread syntax(...)
 - 전개 구문
 - 배열이나 문자열과 같이 반복 가능한 객체를 배열의 경우는 요소, 함수의 경우는 인자로 확장할 수 있음
 - 배열과의 사용
: let parts = ['어깨', '무릎']
  let lyrics = ['머리', ...parts, '발']
  console.log(lyrics)
 - 함수와의 사용
 : const restArgs = function(arg1, arg2, ...restArgs)
  {
       return [arg1, arg2, restArgs]
  }

  restArgs(1, 2, 3, 4, 5)
  restArgs(1, 2)


● Arrow Function
 - 화살표 함수
 - 함수를 비교적 간결하게 정의할 수 있는 문법
 - function 키워드 생략 가능
   매개변수가 하나 뿐이라면 매개변수의 () 생략 가능
   함수의 내용이 한줄이라면 {}와 return 생략 가능


● this
 - 어떤 object를 가리키는 키워드
   (java에서의 this와 python에서의 self는 인스턴스 자기자신을 가리킴)
 - JavaScript의 함수는 호출될 때 this를 암묵적으로 전달 받음
 - JavaScript에서의 this는 일반적인 프로그래밍 언어에서의 this와 조금 다르게 동작
 - JavaScript는 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라짐
 - 즉, 함수를 선언할 때 this에 객체가 결정되는 것이 아니고, 
   함수를 호출할 때 함수가 어떻게 호출 되었는지에 따라 동적으로 결정됨

 - 전역 문맥에서의 this
: 브라우저의 전역 객체인 window를 가리킴
: 전역객체는 모든 객체의 유일한 최상위 객체를 의미

 - 함수 문맥에서의 this
: 함수를 호출한 방법에 의해 this 값 결정
: 함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우됨
1. 단순 호출
  : 전역 객체를 가리킴
: 브라우저에서 전역은 window 의미
2. Method(Function in Object)
: 메서드로 선언하고 호출한다면, 객체의 메서드이므로 해당 객체가 바인딩
3. Nested
: 교재 참고
: 화살표 함수는 호출의 위치와 상관없이 상위 스코프를 가리킴(Lexical scope this)
: Lexical scope this
-> 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정
-> Static scope라고도 하며 대부분의 프로그래밍 언어에서 따르는 방식


● Array(배열)
 - 키와 속성들을 담고 있는 참조 타입의 객체
 - 순서를 보장
 - 주로 대괄호 이용하여 생성, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능
 - 배열의 길이는 array.length 형태로 접근 가능
 - 배열의 마지막 원소는 array.length - 1로 접근 가능
 - array.reverse() : 원본 배열의 요소들의 순서를 반대로 정렬
   array.push()    : 배열의 가장 뒤에 요소 추가
   array.pop()     : 배열의 마지막 요소 제거
   array.unshift()  : 배열의 가장 앞에 요소 추가
   array.shift()     : 배열의 가장 앞에 요소 제거
   array.includes(value) : 배열에 특정 값(value)이 존재하는지 판별 후 true 또는 false 반환
   array.indexOf(value) : 배열에 특정 값이 존재하는지 확인 후 가장 첫번째로 찾은 요소의 인덱스 반환
    : 만약 해당 값이 없을 경우 -1 반환



● 콜백함수
 - 다른 함수의 인자로 전달되는 함수
 - forEach 함수
: array.forEach(function(element, index, array) {})
    -> element : 배열의 요소
        index : 배열 요소의 인덱스
        array : 배열 자체




● Object(객체)
 - key / value 쌍으로 표현
 - 객체 요소 접근 
: ./[]로 가능
: key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능
 - 생성자 함수
: 동일한 구조의 객체를 여러개 만들고 싶을 때 사용
: new 연산자로 사용하는 함수
: 함수 이름은 반드시 대문자로 시작



● 객체 관련 문법
 1. 속성명 축약
: 객체를 정의할 때 key와 할당하는 변수의 이름이 같으면 예시와 같이 축약 가능

 2. 메서드명 축약
: 메서드 선언 시 function 키워드 생략 가능

 3. 계산된 속성명 사용
: 객체 정의시 key의 이름을 표현식을 이용하여 동적으로 생성 가능

 4. 구조 분해 할당
: 배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법

 5. 객체 전개 구문(Spread Operator)
: 배열과 마찬가지로 전개구문을 사용해 객체 내부에서 객체 전개 가능
: 얕은 복사에 활용 가능


● JSON
 - JavaScript Object Notation
 - key-value 형태로 이루어진 자료 표기법
 - Object와 유사한 구조를 가지고 있지만 Object는 그 자체로 타입이고, JSON을 형식이 있는 문자열
 - JSON을 Object로 사용하기 위해서는 변환 작업 필요

2023.04.24 JavaScript - 이벤트

● Event
 - HTML 요소에서 발생하는 모든 상황
 - 사용자의 행동에 의해 발생하는 동작


● Event object
 - 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체
 - 마우스 클릭, 키보드 누름 등의 사용자 행동으로도 발생 가능
 - DOM 요소는 Event를 받고 처리 가능
 - Event 처리는 주로 addEventListener() 메서드를 통해 처리 
=> EventTarget.addEventListener(type, handler function)
: type -> input, click, submit...
        -> 반응 할 Event를 
: hundler function -> 


● Event 전파
 - DOM 요소에서 발생한 이벤트가 상위노드에서 하위노드 또는, 하위노드에서 상위노드로 전파되는 현상
 - addEventListener 메서드를 사용하여 전파 방식 제어 가능
 - 기본 값은 하위 노드에서 상위 노드로 전파되는 방식을 사용 => Event Bubbling
 - 또한, 이벤트 전파 상황을 필요에 따라 전파 가능
 

● event.preventDefault()
 - 현재 event의 기본 동작을 중단
 - HTML 요소의 기본 동작을 작동하지 않게 막음

 

 

2023.04.25 JavaScript - 비동기처리

● 동기(Synchronous)
 - 모든 일을 순서대로 하나씩 처리
 - 이전 작업이 끝나야 다음 작업 시작 가능


● 비동기(Asynchronous)
 - 작업을 시작한 후 결과를 기다리지 않고 다음 작업 처리(병렬적 수행)
 - 시간이 필요한 작업들은 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리
 - 비동기 사용 이유
: 아주 큰 데이터를 불러온 뒤 실행되는 앱이 있을 때, 동기로 처리하면 데이터를 불러온 뒤 
  앱의 실행 로직이 수행되므로 사용자들은 마치 앱이 멈춘것과 같은 경험을 하게 됨
: 비동기로 처리하면 먼저 처리되는 부분부터 보여줄 수 있으므로, 사용자 경험에 긍정적인 효과를 줌


● JavaScript 비동기 처리
 - 요소
1. JavaScript Engine의 Call Stack
: 요청이 들어올 때 마다 순차적으로 처리하는 Stack(LIFO)
: 기본적인 JavaScript의 Single Thread 작업 처리

2. Web API
: JavaScript 엔진이 아닌 브라우저에서 제공하는 runtime 환경
: 시간이 소요되는 작업을 처리(setTimeout, DOM Event, AJAX 요청 등)

3. Task Queue
: 비동기 처리 된 Callback 함수가 대기하는 Queue(FIFO)

4. Event Loop
: Call Stack과 Taxk Queue를 지속적으로 모니터링
: Call Stack이 비어있는지 확인 후 비어있다면
  Task Queue에서 대기 중인 오래된 작업을 Call Stack으로 Push

 - 방식
1. 모든 작업은 Call Stack(LIFO)으로 들어간 후 처리
2. 오래 걸리는 작업이 Call Stack으로 들어오면 Web API로 보내 별도로 처리하도록 함
3. Web API에서 처리가 끝난 작업들은 곧바로 Call Stack으로 들어가지 못하고
    Task Queue(FIFO)에 순서대로 들어감
4. Event Loop가 Call Stack이 비어있는 것을 계속 체크하고 Call Stack이 빈다면 
   Task Queue에서 가장 오래된 작업을 Call Stack으로 보냄


 - JavaScript는 한번에 하나의 작업을 수행하는 Single Thread 언어로 동기적 처리를 하지만, 
   브라우저 환경에서는 Web API에서 처리된 작업이 지속적으로 Task Queue를 거쳐 Event Loop에 의해 
   Call Stack이 들어와 순차적으로 실행됨으로써 비동기 작업이 가능한 환경이 됨


● Axios
 - JavaScript의 HTTP 웹 통신을 위한 라이브러리
 - 확장 가능한 인터페이스와 쉽게 사용할 수 있는 비동기 통신 기능을 제공
 - node 환경은 npm을 이용해서 설치 후 사용 가능
 - browser 환경은 CDN을 이용해서 사용 가능
 - 기본 구조
: get, post 등 여러 method 사용 가능
: then을 이용해서 성공하면 수행할 로직을 작성
: catch를 이용해서 실패하면 수행할 로직을 작성

 - axios는 비동기롤 데이터 통신을 가능하게 하는 라이브러리
 - 같은 방식으로 Django REST API로 요청을 보내서 데이터를 받아온 후 처리할 수 있음



● 비동기 처리의 단점
 - 비동기 처리의 핵심은 Web API로 들어온 순서가 아닌 작업이 완료되는 순서에 따라 처리한다는 것
 - 개발자 입장에서 코드의 실행 순서가 불명확하다는 단점이 있음


● 콜백 함수
 - 콜백 지옥
: 콜백 함수는 어떤 기능의 실행 결과를 받아서 다른 기능을 수행하기 위해 많이 사용하는데
  비동기 처리를 위한 콜백을 작성할 때마다 마주하는 문제를 Callback Hell이라 함
 - 콜백함수는 비동기 작업을 순차적으로 실행할 수 있게 하는 반드시 필요한 로직
 - 비동기 코드를 작성하다 보면 콜백 함수로 인한 콜백 지옥은 반드시 나타남
      -> 코드의 가독성 해침 / 유지 보수 어려움


● 프로미스(Promise)
 - Callback Hell을 해결하기 위해 등장한 비동기 처리를 위한 객체
 - 비동기 작업의 완료 또는 실패를 나타내는 객체
 - 성공에 대한 약속 then()
: 요청한 작업이 성공하면 callback 실행
: callback은 이전 작업의 성공 결과를 인자로 전달 받음

   실패에 대한 약속 catch()
: then()이 하나라도 실패하면 callback 실행
: callback은 이전 작업의 실패 객체를 인자로 전달 받음
     -> then과 catch 모두 항상 promise 객체를 반환

 - Promise가 보장하는 것
: callback 함수는 JavaScript의 Event Loop가 현재 실행 중인 Call Stack을 완료하기 이전에는 절대 호출되지 않음
  promise callback 함수는 Event Queue에 배치되는 엄격한 순서로 호출됨
: 비동기 작업이 성공하거나 실패한 뒤에 .then() 메서드를 이용하여 추가한 경우에도 위와 같이 동작
: .then()을 여러번 사용하여 여러 개의 callback 함수 추가 가능(Chaining)
   각각의 callback은 주어진 순서대로 하나하나 실행하게 됨
   Chaining은 Promise의 가장 뛰어난 장점

 

 

 

2023.04.26 JavaScript - 비동기 처리 with Django

● AJAX
 - Asynchronous JavaScript And XML(비동기식 JavaScript와 XML)
 - 비동기 통신을 이용하면 화면 전체를 새로고침 하지 않아도 서버로 요청을 보내고,
    데이터를 받아 화면의 일부분만 업데이트 가능
 - 비동기 웹 통신을 위한 라이브러리 중 하나가 Axios
 - 특징 
: 페이지 전체를 새로고침을 하지 않아도 수행되는 '비동기성'
: 서버의 응답에 따라 전체 페이지가 아닌 일부분만을 업데이트 가능
    1. 페이지 새로고침 없이 서버에 요청
    2. 서버로부터 응답(데이터)을 받아 작업을 수행