JavaScript
-
페이지 처리JavaScript 2022. 2. 11. 15:43
페이지 처리 페이지네이션 (Pagination) 무한 스크롤 (Infinite scroll Pagination 페이지네이션이란? 콘텐츠를 여러 페이지로 나누고, 이전 혹은 다음 페이지로 넘어가거나 특정 페이지로 넘어갈 수 있는 일련의 링크를 페이지 상단이나 하단에 배치하는 방법이다. 페이지네이션 구현하기 필요 조건 총 데이터 수 = totalItem 현재 페이지 = currentPage 총 페이지 수 = pageLength 한 페이지에 나타낼 데이터 수 = itemPerPage // 총 페이지 수 = Math.ceil(전체 개수 / 한 페이지에 나타낼 데이터 수) const pageLength = Math.ceil(totalItem / itemPerPage) // 데이터 가져오기 getData = () ..
-
이벤트 핸들러 (EventHandler)JavaScript 2022. 2. 11. 15:20
이벤트 핸들러 (EventHandler) 이벤트(Event) 란? 이벤트는 웹 브라우저에서 DOM 요소와 사용자가 상호작용하는 것을 의미한다. 사용자가 버튼을 클릭하거나 입력창에 정보를 입력하거나 하는 행위들은 모두 이벤트로 볼 수 있다. 즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다. 이벤트 핸들러(EventHandler) 란? 특정 요소에서 발생하는 이벤트를 처리하기 위해 사용하는 함수 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한다. 이벤트 핸들러 등록 방법 HTML 요소의 속성으로 등록하는 방법 이벤트 처리 함수 종류 onclick 마우스 클릭 시 ondbcl..
-
비동기적 방식 처리 방법 (Callback, Promise, async &await)JavaScript 2022. 2. 11. 13:36
비동기적 방식 처리 방법 Callback 함수 Promises async & await Callback 함수 Callback 이란? 다른 함수가 실행을 끝낸 뒤 실행(call back)되는 함수(⇒ 나중에 호출되는 함수)를 말한다. 다시 말해 코드를 통해 명시적으로 호출하는 함수가 아니라, 함수를 등록해놓은 후 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다. 파라미터로 함수를 전달받아, 함수의 내부에서 실행된다. 콜백함수 (Callback Function) 사용 이유 자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문이다. 자바스크립트는 싱글스레드를 사용하는데, 멈춤을 방지해준다. 즉 블록킹을 방지하여 싱글스레드가 논블록킹으로 동작하게 한다. 💡 싱글스레드 ⇒ 싱..
-
비동기 프로그래밍JavaScript 2022. 2. 11. 11:39
비동기 프로그래밍 동기(Synchronous)와 비동기(Asynchronous) 동기와 비동기는 주로 어플리케이션에서 자주 다뤄지는 개념이며, 다음 작업이 요청되는 시간과 관련되어 있다. 동기(Synchronous) 현재 작업의 응답이 끝남과 동시에 다음 작업이 요청된다. 함수를 호출하는 곳에서 호출되는 함수가 결과를 반환할 때까지 기다린다. 작업 완료 여부를 계속해서 확인한다. 비동기(Asynchronous) 현재 작업의 응답이 끝나지 않은 상태에서 다음 작업이 요청된다. 함수를 호출하는 곳에서 결과를 기다리지 않고, 다른 함수(callback)에서 결과를 기다린다. 작업 완료 여부를 확인하지 않는다. 블록킹(Blocking)과 논블록킹(non-blocking) 블록킹 (Blocking) : 자신의 수..
-
JavaScript 동작원리JavaScript 2022. 2. 7. 15:24
JavaScript 동작원리 JavaScript는 싱글스레드로 동작하는 언어이다. “자바스크립트의 V8 엔진은 싱글스레드를 가지고 있어서 stack을 하나만 가진다” 싱글스레드란? 하나의 프로세스* 에서 하나의 스레드* 를 실행한다. 하나의 레지스터와 스택으로 표현한다. 💡 * 프로세스란? 프로그램을 실행시켰을 때, 즉 정적인 프로그램이 동적으로 변할 때 프로그램이 돌아가고 있는 상태를 말한다. 컴퓨터는 프로세스마다 자원을 분할해서 할당한다. 크롬 브라우저로 검색을 하며 VS code로 코드 작성을 해도 컴퓨터에 렉이 걸리지 않는 이유는 운영체제가 여러 개의 프로세스를 동시에 돌리고 있기 때문이다. (⇒ 멀티테스킹) 💡 * 스레드란? 프로세스가 할당받은 자원을 이용하는 실행의 단위이다. 하나의 프로세스 ..
-
JavaScriptJavaScript 2022. 2. 7. 14:56
자바스크립트(JavaScript)란? 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어로 HTML로 웹의 내용을 작성하고, CSS로 웹을 디자인하며, 자바스크립트로 웹의 동작을 구현할 수 있다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있으며 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다. 자바스크립트의 특징 객체 기반의 스크립트 언어이다. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다. 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다. 💡 자바스크립트 언어에 대한 자세한 설명은 모질라 개발자 사이트 (MDN)를 ..