JavaScript 주요 포인트 #11 JSON Server 만들기 XMLHttpRequest, Fetch API, Promise, Async/Await을 실습하기 위해서는 서버가 필요하다. 따라서 JSON Server를 설치한다. GitHub에서 JSON Server의 설치방법 및 사용법을 확인할 수 있다. JSON Server는 진짜 서버인 것 처럼 활용이 가능하며 실무에서 잘 활용할 수 있어야 한다. 유사한 툴로 Postman이 있다. JSON Server의 사용으로 얻을 수 있는 이점은 다음과 같다. 서버를 실제 구현하지 않아도 토이프로젝트 진행이 가능하다. 백엔드 개발자와 프론트엔트 개발자의 시간 불일치로 인한 리소스 낭비를 줄일 수 있다. JSON Server 설치 npm install -g ..

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의 경우는 담당자의 요구에 따라 일주일, 한 달 전 등..

JavaScript 주요 포인트 #4 내장 객체 - Array 객체 Array 객체는 실무에서 많이 사용하는 매우 중요한 객체이다. join join은 배열의 문자열을 하나의 문자열로 결합하는 기능으로서 실무에서 많이 사용한다. 아래의 코드는 좀 더 구체적인 예이다. 조회 음료 가격 많은 데이터를 다룰 때는 배열에 push한 후 join 함수를 이용해 문자열로 결합니다. 결합되는 양이 적을 때는 +=을 이용한 문자열 결합이 빠르지만, DB에서 데이터를 불러오는 경우라면 상황이 달라진다. 몇천에서 몇만 건이 넘어가는 데이터는 배열을 이용하는 것이 성능면에서 훨씬 유리하다. [그림 1]은 위 코드의 실행 결과이다. 조회 버튼을 누르면 데이터가 표시된다. pop / shift 실무에서는 shift를 pop 보..