목차 AJAX 비동기 적용하기 POST 요청 보내기 팔로워 & 팔로잉 수 비동기 적용 좋아요(like) 1. AJAX 비동기 통신을 이용하면 화면 전체를 새로고침 하지 않아도 서버로 요청을 보내고, 데이터를 받아 화면의 일부분만 업데이트 가능 이러한 '비동기 통신 웹 개발 기술'을 Asynchronous JavaScript And XML(AJAX)라 한다. AJAX의 특징 페이지 새로고침 없이 서버에 요청 서버로부터 응답(데이터)을 받아 작업을 수행 이러한 비동기 웹 통신을 위한 라이브러리 중 하나가 Axios 2. 비동기 적용하기 비동기 적용을 위한 준비사항 2가지 M:N 구현한 Django 프로젝트 준비 가상 환경 생성 및 활성화, 패키지 설치 팔로우(follow) 각 템플릿에서 script코드를 작..

목차 콜백 함수 (Callback Function) 프로미스 (Promise) 1. 콜백 함수 (Callback Function) 비동기 처리의 단점 비동기 처리의 핵심은 Web API로 들어오는 순서가 아니라 작업이 완료되는 순서에 따라 처리한다는 것! 그런데 이는 개발자 입장에서 코드의 실행 순서가 불명확하다는 단점이 있음 이와 같은 단점은 실행 결과를 예상하면서 코드를 작성할 수 없게 함 -> 따라서 콜백 함수를 사용하자 ! 콜백 함수란? 특별한 함수가 아니다 ! 다른 함수의 인자로 전달되는 함수를 콜백 함수라고 한다. 비동기에만 사용되는 함수가 아니며 동기, 비동기 상관없이 사용 가능 시간이 걸리는 비동기 작업이 완료된 후 실행할 작업을 명시하는데 사용되는 콜백 함수를 비동기 콜백 (Asynchr..

Axios JavaScript의 HTTP 웹 통신을 위한 라이브러리 확장 가능하나 인터페이스와 쉽게 사용할 수 있는 비동기 통신 기능을 제공 node 환경은 npm을 이용해서 설치 후 사용할 수 있고, browser 환경은 CDN을 이용해서 사용할 수 잇음 https://axios-http.com/kr/docs/intro https://github.com/axios/axios 기본 구조 get, post 등 여러 method 사용가능 then을 이용해서 성공하면 수행할 로직을 작성 catch를 이용해서 실패하면 수행할 로직을 작성 고양이 사진 가져오기 The Cat API (https://api.thecatapi.com/v1/images/search) 이미지를 요청해서 가져오는 작업을 비동기로 처리 re..

목차 동기 비동기 Javascript의 비동기 처리 blocking과 non-blocking 1. 동기(Synchronous) 모든 일을 순서대로 하나씩 처리하는 것 순서대로 처리한다 == 이전 작업이 끝나면 다음 작업을 시작한다. 즉, 함수 A가 B를 호출한 뒤, 함수 B의 리턴값을 계속 확인하면서 신경쓰는 것 B의 리턴값이 필요하다라고 볼 수 있다. 지금까지 작성했던 Python 코드가 작동되는 것이 동기식 이 때, 코드가 아래로 진행되지 못하는 것은 -> block 즉, 요청을 보내고 응답이 올때까지 기다렸다가 다음 로직을 처리한다. 웹에서의 동기 - 확인을 누르기전까지 p태그는 보이지 않는다. 2. 비동기(Asynchronous) 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것 (..

목차 alert prompt confirm 1. alert 이 함수가 실행되면 사용자가 '확인(OK)' 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있는다. 메시지가 있는 작은 창은 모달 창(modal window)라고 부른다. '모달'이란 다어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포 alert("Hello"); 2. prompt 브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받는다. result = prompt(title, [default]); title = 사용자에게 보여줄 문자열, default = 초깃값(선택값) 함수가 실행되면 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창의 띄워준다. promp..

목차 this? this INDEX 1. this? this 어떠한 object를 가리키는 키워드 (java에서의 this와 python에서의 self는 인스턴스 자기자신을 가리킴) JS의 함수는 호출될 때 this를 암묵적으로 전달 받음 JS에서의 this는 일반적인 프로그래밍 언어에서의 this와 조금 다르게 동작 JS는 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라짐 즉, 함수를 선언할 때 this에 객체가 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출 되었는지에 따라 동적으로 결정됨 2. this INDEX 전역 문맥에서의 this 브라우저의 전역 객체인 window를 가리킴 전역객체는 모든 객체의 유일한 최상위 객체를 의미 함수 문맥에서의 this 함수의 this..

목차 Event Event 취소 Event 종합 1. Event Event란 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 우리가 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것 예를 들어 사용자가 웹 페이지의 버튼을 클릭한다면 우리는 클릭이라는 사건에 대한 결과를 응답받기를 원할 수 있음 클릭 말고도 웹에서는 각양각색의 Event가 존재 키보드 키 입력, 브라우저 닫기, 데이터 제출, 텍스트 복사 등 Event object 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체 Event 발생 마우스를 클릭하거나 키보드를 누르는 등 사용자 행동으로 발생할 수도 있고 특정 메서드를 호출하여 프로그래밍적으로도 만..

목차 DOM DOM 조작 1. DOM 개요 브라우저에서의 JavaScript 웹 페이지에서 복잡한 기능을 구현하는 스크립트 언어 가만히 정적인 정보만 보여주는 것이 아닌 주기적으로 갱신되거나, 사용자와 상호 작용이 가능하거나, 애니메이션이 적용된 그래픽 등에 관여 참고 - 스크립트 언어 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어 Browser APIs 웹 브라우저에 내장된 API로, 현재 컴퓨터 환경에 관한 데이터를 제공하거나 여러 가지 유용하고 복잡한 일을 수행 종류 DOM Geolocation API WebGL 등 DOM "문서 객체 모델 (Document Object Model)" 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공 문서 구조, 스타일..

목차 개요 객체 관련 문법 생성 및 삭제 객체 메서드 1. 개요 객체는 속성(property)의 집합이며, 중괄호 내부에 key와 value 쌍으로 표현 key는 문자열 타입만 가능 key 이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현 value는 모든 타입(함수포함) 가능 객체 요소 접근은 점(.) 또는 대괄호([])로 가능 -> computed property(계산된 프로퍼티) key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능 식 자체를 넣는 것도 가능하다 ex _ [1+4], ['안녕'+'하세요'] let a = 'age' const user = { name = 'Mike', [a] : 30 // age:30 } 2. 객체 관련 문법 객체 관련 ES6 문법 익히기 1. 속..