JavaScript 주요 포인트 #13 Modules 규모가 큰 웹 애플리케이션을 만들기 시작하면서, 많은 기능과 함께 많은 함수가 만들어졌다. 많은 함수는 프로그램을 무겁게 만들었고 리소스 낭비로 개발에 불편을 줬다. 그래서 필요할 때만 가져다 쓰는 모듈을 만들게 되었다. node.js, Vue.js에서 많이 사용한다(자바스크립트 만으로는 잘 사용하지는 않는 것 같다). Class 클래스는 표준화된 틀을 제공해 준다.

JavaScript 주요 포인트 #12 자바스크립트는 AJAX(Asynchronous JavaScript and XML) 이전과 이후로 나뉜다. AJAX로 인해 비동기 통신 및 웹페이지의 특정 일부분만 랜더링 하는 것이 가능해졌다. 이로 인해 웹이 급속도록 발전하게 되었다. AJAX는 동적인 웹 페이지를 만들기 위해 사용한다. 여기에서 다루게 될 내용은 XMLHttpRequest, Fetch API, Promise, Async/Await로서 자바스크립트 전체 문법을 통틀어 매우 중요한 부분이다. 이번 실습은 테스트 서버가 필요하다. 따라서 JSON Server를 실행한다. JSON Server 실행 json-server --watch db.json XMLHttpRequest XMLHttpRequest(X..

JavaScript 주요 포인트 #10 Object Literal Syntax Extension [] 안에 변수를 넣어주면 변수의 문자열 값을 object의 키로 사용할 수 있다. Spread Operator Object Destructuring Array Destructuring 더보기 실습 소스코드 : https://github.com/postforty/bootcamp/tree/main/javascript

JavaScript 주요 포인트 #9 this 키워드 this 키워드는 사용되는 위치에 따라 바인딩되는 객체가 달라진다. this와 Window 객체 // this에 Window 객체가 바인딩 된 경우 this와 DOM 요소 클릭 A B C this와 object // this에 object가 바인딩 된 경우 object 내에 함수를 정의할 수 있고, 함수가 object 내에 정의된 다른 키에 접근할 때 this 키워드를 사용한다. 이러한 방식은 object 내에 이미 정의된 키로 새로운 데이터를 만들고자 할 때 많이 사용한다. Scope 선언된 변수에 대한 접근성을 의미한다. Default Function Parameter 함수 호출 시 인자를 넣지 않은 경우에 대한 기본값을 적용한다. 파라미터 값이 ..

JavaScript 주요 포인트 #8 내장 객체 - JSON 객체 JSON(JavaScript Object Notation)은 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다(출처: 위키백과). JSON 객체는 JSON 포맷을 자바스크립트에서 효율적으로 사용하기 위해 사용한다. stringify, parse 함수 // JSON 객체 내장 객체 - Window 객체 JSON(JavaScript Object Notation)은 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다(출처: 위키백과). JSON 객체는 JSON 포맷을 자바스크립트에서 효율적으로 사용하기 위해 ..

JavaScript 주요 포인트 #7 내장 객체 - Math 객체 Math 객체는 숫자 자료형만 지원하고, 수학적인 상수와 내장 함수를 가진 객체이다. 다른 객체와 달리 생성자가 아니다. round, ceil, floor, trunc, sign, pow, sqrt, abs, min, max, random 함수 ceil은 실무에서 "게시판 페이징시 총페이지 수 계산"을 위해 많이 사용한다. pow, sqrt, abs는 실무에서 많이 사용하지 않았다고 한다. random을 이용한 "범위 내 무작위 수를 반환하는 코드"는 유용하다. 이 코드를 이용해 가위바위보 게임을 간단히 만들어 본다. Math.random 이용한 가위바위보 게임 // Math.random 이용해 작성한 "범위 내 무작위 수를 반환하는 코드..

JavaScript 주요 포인트 #6 내장 객체 - Set 객체 Set 객체는 주로 중복값을 제거하기 위한 용도로 사용한다. 중복값 제거 1(오브젝트 이용) // 중복값 제거 1(오브젝트 이용) 위 코드는 오브젝트가 중복된 키를 가질 수 없다는 점을 이용해 중복값을 제거한 경우이다. if문을 사용하는 것 보다는 좋으나 set과 비교해 성능면에서 좋지 못한 코드이다. Set 객체가 없었을때 주로 사용하던 방식이다. 중복값 제거 2(Set 객체 이용) // 중복값 제거 2(Set 객체 이용) Set은 배열 처럼 데이터의 집합이지만 순서가 없고, 유일한 값을 가진다. Set 객체의 has, delete, clear 함수 // Set 객체의 has, delete, clear 함수 내장 객체 - Map 객체 Ma..

JavaScript 주요 포인트 #5 내장 객체 - Date 객체 자바스크립트에서 날짜와 시간을 다루는 객체이다. Date 생성자 / get 함수 / set 함수 시스템 시간은 개인 PC에서 조작 가능하다. 이는 심각한 문제가 될 수 있다. 따라서 실무에서는 서버에서 날짜 데이터를 가져오는 방식을 사용한다. 실무에서 get 함수는 많이 사용하나 set 함수는 쓸 일이 거의 없었다고 한다. 날짜 계산 함수 코드 오늘 날짜 기준으로 이전 날짜를 구하는 코드이다. 실무에서 많이 사용되는 코드이며, 이 코드를 복사해서 쓰면된다. 윤년도 고려하여 계산된다. 실무에서 날짜 조회 기능의 from ~ to에서 to는 기본적으로 오늘 날짜로 기본값 세팅한다. from의 경우는 담당자의 요구에 따라 일주일, 한 달 전 등..