#7 자바스크립트 보충 수업
8.1 변수(let, const) 최종 정리 1. 익숙하게 배웠지만, 기본 타입 자료형은 원시형(primitive) / 객체형 number, string, boolean, null, undefined, symbol(es6부터) 을 제외한 모든 아이들은 object object는 적어도 1,2가지 이상의 여러 데이터를 한군데에 담고 있음. (함수, 배열도 오브젝트임) 그래서 변수를 선언해서 한 공간에 다 담아둘 수 없음. 양이 많으니까. key마다 각 공간이 있고 걔네들을 묶어서 가리키고 있는 주소가 따로 있음(reference: 참조값) 이 주소가 obj라는 변수에 할당되는거임. 예를 들어, obj.name은 obj라는 레퍼런스에서 name이 담고 있는(가리키고 있는) 밸류(ellie)를 호출함 2. 만..
2020. 12. 10. 17:54
생활코딩 - Ajax
* 브라우저는 ajax를 통해 웹서버와 통신함. ajax를 통해 필요한 정보만 부분적으로 가져오기 * 각각의 페이지가 모두 html코드를 가질 필요는 없다. 정적/동적(바뀔 수 있는 부분)인 부분을 분류해서 동적인 부분엔 ajax를 연결해서 서버로부터 동적으로 가져옴 그렇게 하면 index.html 하나로 관리하기 편함 = SPA(하나의 페이지로 여러정보들을 표현할 수 있는 어플리케이션) * ajax를 구현하는 여러가지 기술 중, 최신 방법인 fetch API fetch( ) -> 서버에 ( )을 요청 그런데, 서버가 응답하는데 시간이 많이 걸릴 수 있음. 그래서 서버가 응답할 때까지 다른 일을 함. .then() : 응답이 끝나면 ( )안의 일을 함. 웹 브라우저가 응답받는게 끝나면 then() 의 (..
2020. 11. 23. 01:26zerocho js 6 - 로또추첨기
6-1 45개의 값이 들어갈 수 있는 빈값의 배열 만드는 법. array(45) + 배열의 반복문(반복메소드) 배열.map(function(값, 자릿수) { 조건 }), 배열.forEach(function(값, 자릿수) { 조건 }) 1 2 3 4 5 6 7 8 9 var array = [1,2,3]; array.map(function(x) { return x+1; }); // [2,3,4] array.forEach(function(x, i) { alert(x + ':' + i); }); 배열의 항목들을 반복하면서 조작하는 함수입니다. map과 forEach의 매개변수로 함수가 들어가는데 함수 안에 배열의 항목들을 어떻게 조작할 지 적어주면 됩니다. 예시에서는 각각 1을 더하는 것과 alert하는 조작을..
2020. 11. 4. 00:52
프로그래머스 - 자바스크립트
Object number, string, boolean의 단순 자료형보다 더 복잡한 자료를 표현할 때 사용 객체를 만드는 법 중괄호 {} 를 사용해 정의 가능 객체는 속성의 집합으로 이뤄짐 각 속성은 이름과 값으로 이뤄짐 객체 정의 시 속성이름:값의 형태로 속성 정의 가능 속성의 값은 모든 자료형이 가능, object 포함 객체의 속성에 접근하는 법 객체 이름 뒤에 점(.)을 사용하고 속성 이름에 접근 할 수 있음 객체 이름 뒤에 대괄호([]) 안에 속성 이름을 문자열로 접근할 수 있음 객체의 속성의 값을 변경하는 법 객체 속성에 접근해서 변수에 값을 저장하듯이 사용 undefined와 null undefined 시스템에서 어떤 변수나 속성이 정의되지 않은 경우를 표현하기 위해 사용 선언만 하고 초기화가..
2020. 8. 30. 00:09
드림코딩 - 자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise
자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise Promise: JS에서 제공하는, 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트 정해진 장시간의 기능을 수행하고나서 정상적으로 기능이 수행되었다면 성공의 메세지와 함께 처리된 결과값을 전달해주고 기능을 수행하다가 예상치 못 한 에러가 발생했다면 에러를 전달해줌 콜백을 쓰지 않고 프로미스를 쓰면서 비동기 코드를 깔끔하게 처리할 수 있는지 배울거임 프로미스는 JS에 내장되어있는 오브젝트이고 비동기적인 것을 수행할 때 콜백함수 대신에서 유용하게 쓸 수 있음 중요한 포인트 2가지 1. state 상태 프로세스가 오퍼레이션을 수행하는 중인지(pending) 기능 수행이 완료되었는지 성공인지(fulfilled) 실패인지(rej..
2020. 8. 23. 18:03
드림코딩 - 자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON
자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON *HTTP Hypertext Transfer Protocal 브라우저 위에서 동작하고 있는 웹사이트/웹어플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지 정리한 것. (하이퍼텍스트 : 전반적으로 쓰여지고 있는 문서, 이미지 같은 리소스들을 모두 포함한 것) 어떻게 하이퍼텍스트를 주고 받을 수 있는지를 규약한 프로토콜의 하나. 클라이언트가 서버에게 데이터를 요청할 수 있고 서버는 클라이언트가 요청한 것에 따라서 그에 맞는 응답을 클라이언트에 보내주는 방식으로 진행되는 것 서버에게 데이터를 요청해서 받아올 수 있는 방법 : AJAX Asynchronous JavaScript And XML 웹..
2020. 8. 23. 01:35
드림코딩 - 자바스크립트 9. 유용한 10가지 배열 함수들. Array APIs 총정리
자바스크립트 9. 유용한 10가지 배열 함수들. Array APIs 총정리 Q1~10 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; } // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; } // Q..
2020. 8. 22. 12:50
드림코딩 - 자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리
자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 array 중요함. 많이 쓰임 -자료구조 프로그래밍 언어에서 비슷한 종류의 데이터들을 묶어서 한 곳에 보관하는 것 어떤 방식, 형식으로 데이터를 담느냐에 따라 다양한 타입이 있음 -오브젝트와 자료구조의 차이점? 토끼는 동물이고, 귀 두개 프로퍼티와 뛴다, 먹는다 라는 메소드가 들어있음 당근은 프로퍼티만 있음. 당근 자체로는 어떤 행동을 할 수 없어서 메소드는 없음 암튼 이런 식으로 서로 연관된 특징과 행동들을 묶어놓는 것 = 오브젝트 비슷한 타입의 오브젝트를 묶어놓는 것 = 자료구조 다른 언어에서는 동일한 타입의 오브젝트만 담을 수 있음. 하지만 js는 danamically typed language 이므로 타입이 동적으..
2020. 8. 18. 17:29
드림코딩 - 자바스크립트 7. 오브젝트 넌 뭐니?
자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6) -object 선언 방법 1. object literal syntax const obj1 = { } class가 없어도 바로 오브젝트 생성이 가능함 2. object constructor syntax new키워드를 사용하여 class를 이용하는 방법 const obj2 = new Object(); new 키워드를 사용하면 Object에서 정의한 constructor가 호출이 됨 JS는 타입이 Runtime(프로그램이 동작하고 있을 때)때 결정됨 그래서 이미 정의한 오브젝트에 속성을 뒤늦게 추가하거나 삭제할 수 있음 (혼란을 주거나 생각하지 못한 에러가 발생할 수 있어서 가능하면 이용하지 않는 것이 좋지만,,)..
2020. 8. 17. 23:39
드림코딩 - 자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리
자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 | 프론트엔드 개발자 입문편 (JavaScript ES6) -class는 연관있는 데이터(변수,함수)를 묶어놓는 아이 class Person { name; // 속성 (field) age; speak(); // 행동 (method) } 클래스는 필드, 메소드가 종합적으로 묶여있는 것. 메소드없이 필드만 있는 경우도 있는데 이걸 data class라고 부름 또한, 여기에서 내외부에서 보일 수 있는 변수를 나눠서 캡슐화라고 하고, 클래스를 상속할 수도 있는데 이 모든 것을 객체지향 언어라고 한다. 어떻게 클래스로 잘 정의할 수 있는지 고민하는 연습.. -class 붕어빵을 만들 수 있는 틀(템플릿, 청사진..
2020. 8. 16. 12:29