2023.03.26 자바스크립트 스터디 10회차 공부 사이트: https://poiemaweb.com/ 5. 향상된 객체 리터럴 ES6에서는 객체 리터럴 프로퍼티 기능을 확장하여 간편하고 동적인 객체 생성 기능을 제공한다. 1) 프로퍼티 축약 표현 ES5 : 객체 리터럴의 프로퍼티는 "프로퍼티 명 + 프로퍼티 값" 으로 구성 ES6 : 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 명을 생략할 수 있다. (프로퍼티 명은 변수명으로 자동 생성됨) let x = 1, y = 2; const obj = {x,y}; console.log(obj); // { x : 1, y : 2 } 2) 프로퍼티 키 동적 생성 ES5 : 프로퍼티 키를 동적으로 생성하려면 객체 리터럴 외부에서 대괄호 표기법을 사용해주어야 함...

2023.03.26 자바스크립트 스터디 10회차 공부 사이트: https://poiemaweb.com/ 4. 확장 파라미터 핸들링 1) 매개변수 기본값 함수 호출 시 매개변수 개수만큼 인수를 전달하지 않아도 에러가 발생하진 않는다. 함수가 매개변수의 개수와 인수 개수를 체크하지 않기 때문인데, 인수가 부족한 경우 매개변수의 값은 undefined가 된다. 그래서 매개변수의 개수에 맞게 인수가 전달되었는지를 확인하는 로직이 필요했었다. 그러나 ES6부터는 인수 체크 및 초기화를 간소화할 수 있게 되었다. // 매개변수 x와 y를 0으로 초기화 (기본값) function sum(x=0,y=0){ return x+y; } console.log(sum(1)); //1 console.log(sum(1,2,)); ..

2023.03.26 자바스크립트 스터디 10회차 공부 사이트: https://poiemaweb.com/ 3. 화살표 함수 function 키워드 대신 화살표를 사용하여 간략한 방법으로 함수를 선언할 수 있다. // 매개변수 지정 () => {...} // 매개변수가 없음 x => {...} // 매개변수가 한개. 소괄호 생략 가능 (x,y) => {...} // 매개변수가 여러개, 소괄호 생략 불가능 // 함수 바디 지정 x => { return x * x } x => x * x // 함수 바디가 한 줄의 구문이라면, 중광호 생략 가능. 암묵적으로 return // 예시 () => { return {a : 1}; } () => ({a: 1}) // 위 표현과 동일한 의미 () => { const x = ..

2023.03.26 자바스크립트 스터디 10회차 공부 사이트: https://poiemaweb.com/ 1. ECMAScript 6 ES5까지는 변수를 선언하기 위해 var 키워드를 사용했다. 그러나 var 키워드로 선언된 변수는 몇 가지 문제점이 존재한다. (이전 포스팅) ① 함수 레벨 스코프 - 전역 변수의 남발 문제 - for loop 식에서 사용한 변수를 for loop 외부/전역에서 참조할 수 있음 ② 중복 선언 허용 - 의도치 않은 변수값 변경 ③ var 키워드 생략 허용 - 의도치 않은 변수의 전역화 ④ 변수 호이스팅 - 변수 선언 전에 참조가 가능 대부분의 문제는 전역 변수로 인해 발생한다고 한다. 유효 범위(scope)가 넓고, 비순수 함수이기에 의도치 않게 변경될 수 있기 때문이다. 복..

2023.03.19 자바스크립트 스터디 9회차 공부 사이트: https://poiemaweb.com/ 36. SPA & Routing SPA(Single Page Application) - 단일 페이지로 구성 - 배포가 간단함 - 네이티브 앱과 유사한 사용자 경험 제공 가능 SPA는 웹 애플리케이션에 필요한 정적 리소스를 최초 접근시에만 다운로드한다. 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하기에 전체적인 트래픽 감소가 가능하다. 그러나 구조적인 단점을 가지고 있다. 초기 구동 속도가 상대적으로 느리다는 것과 SEO 이슈이다. SEO는 검색엔진에 키워드를 검색했을 때 웹 사이트가 노출되는 것을 의미한다. 그러나 SPA는 CSR(Client Side ..

2023.03.19 자바스크립트 스터디 9회차 공부 사이트: https://poiemaweb.com/ 35. REST API REST(Representational State Transfe) · REST(REpresentational State Transfer): 자원을 이름으로 구분하여 자원의 상태를 주고받는 모든 것. URI로 자원을 구분하고 해당 자원에 CRUD Operation을 적용한다. · REST API: REST 아키텍처 스타일을 준수하는 API · CRUD Operation: Create, Read, Update, Delete > GET 요청으로 레코드 검색 > POST 요청으로 레코드 작성 > PUT 요청으로 레코드 업데이트 > DELETE 요청으로 레코드 삭제 HTTP request의..

2023.03.19 자바스크립트 스터디 9회차 공부 사이트: https://poiemaweb.com/ 34. Ajax (Asynchronous JavaScript and XML) Ajax는 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식이다. 서버로부터 웹페이지 반환 시 화면 전체를 갱신하지 않고, 일부만을 갱신할 수 있도록 하는 것이 Ajax. 1) JSON(Javascript Object Notation) 클라이언트와 서버 간 데이터 교환을 위한 데이터 포맷 { "name" : "홍길동", "gender" : "male", "age" : 20 } ※ 키는 반드시 큰 따옴표를 사용해야 함 ① JSON.stringify(value [, replacer] [, sp..

2023.03.19 자바스크립트 스터디 9회차 공부 사이트: https://poiemaweb.com/ 32. 이벤트 이벤트가 발생하면 이를 감지하고, 대응하는 처리를 호출해 주어야 한다. 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지를 해준다. 이런 과정을 통해 사용자와 웹 페이지가 상호작용이 가능하다. 발생한 이벤트에 맞게 반응하기 위해 함수를 사용한다. ← 이 함수가 이벤트 핸들러 1) 이벤트 루프와 동시성 브라우저는 단일 스레드에서 이벤트 드리븐 방식으로 동작한다. ＃단일 스레드: 스레드가 하나이므로 하나의 작업만을 처리할 수있다. 그러나 웹 애플리케이션은 많은 작업이 동시에 처리되는 것처럼 느껴지는데, 이는 자바스크립트의 동시성 때문이다. 동시성을 지원하는 것이 이벤트 루프이다. ..