[JS.개발일지] 12. 자바스크립트9 (비동기) 동기와 비동기의 차이 동기 : 순차적으로 실행되는 프로그램비동기 : 특정 시점 (타이머 3초후)에 실행되는 프로그램.I/O 작업시 : 파일 읽기, 쓰기 , 네트워크 요청 등.타이머 : setTimeout, setInterval 등.이벤트 처리 : 클릭이벤트비동기를 다루는 대표적인 방법 1. 콜백함수 2025. 1. 22. [JS.개발일지] 11. 자바스크립트8 (this) this의 조건들이 바뀐다. lexical scope를 사용하기 때문에 함수의 상위 스코프가 정의시점에 평가된다. this 키워드는 바인딩 객체가 생성되는 시점에 결정된다. 2025. 1. 17. [JS.개발일지] 10. 자바스크립트 7(프로토타입 체인. 메모리저장구조) 프로토타입 체인이란?먼저 나누어서 살펴보자.1. 프로토타입은 객체안에 있는 '보이지않는객체'이다. 가장 상위에 Object.prototype이다. 2. 체인은 이 보이지 않는 객체가 연결되어있다는것을 의미한다. 두 단어를 연결해보면객체에 있는 메서드나 속성을 찾기위해 체인에 연결된 객체들을 차례대로 탐색하는것을 프로토타입 체인이라고 한다. 왜 귀찮게 prototype을 쓰는거지? prototype에 메서드나 속성을 추가하는 이유는 메모리 효율성과 재사용성 때문객체 내부에 메서드를 직접 정의하면 객체를 생성할 때마다 메서드가 복제된다.하지만 prototype에 메서드를 정의하면, 모든 인스턴스가 같은 메서드를 공유하여 메모리를 절약할 수 있음.단점 : 메모리는 줄어들지만 더 객체를 더 검색해야하므로 연.. 2025. 1. 13. [JS.개발일지] 9. 자바스크립트 6(프로퍼티 어트리뷰트) 1. 프로퍼티 어트리뷰트.1) 데이터 프로퍼티 : key : value - 일반 프로퍼티2) 엑세서 프로퍼티 : getter setter - 다른 값을 가져오거나 설정하는 프로퍼티 왜 알아야 하는가? 객체안에 프로퍼티를 더 세밀하게 제어할 수 있다. writable : 수정 (true / false) enumerable : 열거configurable : 삭제 가능여부 Object.defineProperty() 함수를 사용하면 해당 속성값을 설정할 수 있고Object.getOwnPropertyDescriptor() 함수를 사용하면 해당 속성값들을 확인할 수 있다. 활용방안1) 라이브러리나 프레임워크 설계시 내부적으로 감춰야하는 속성이나 사용자가 수정하면 곤란한 속성에 제약을 건다.2) 불필요한 프로퍼티.. 2025. 1. 13. [JS.개발일지] 8. 자바스크립트 5(상속) 상속객체들간에 관계를 구축하는 방법 부모클래스는 User이고 자식은 Student, Teacher 이다. 자식은 상속받을때 extends라고 손을 뻗어야 부모로부터 상속받을 수 있다. 부모를 호출할때 super를 사용한다. 생성자뿐만 아니라 함수를 호출 할수도 있다. 객체를 생성하는 방법 3가지불변객체 (immutable Object ) 정의하기1) preventExtension : 객체가 추가되는것을 막는다. (수정하고 삭제는 가능)2) seal : 객체의 구조가 봉인된다. (수정만 가능)3) freezed : 객체를 완전 얼려버려 아무것도 할 수 없도록 한다. :: 참고로 해당 명령어를 실행하면 다시 원래대로 되돌릴수는 없다. 객체를 복사해서 수정해야함. 2025. 1. 11. [JS.개발일지] 7. 자바스크립트 4(class) 이제 클래스를 공부해보자. getter와 setter. 외부에서 내부필드에 직접 접근하지 못하도록 하고 오직 getter와 setter를 통해서만 데이터에 접근하고 수정할 수 있도록 한다. (보안성을 높일 수 있다는 장점이 있음)이것을 통해 '유효성검사, 로그기록, 변경이력추적' 등의 다양한 로직을 구현 할 수 있다고 하는데일단 기본적인것들만 우선 테스트 해보자. 위 코드에서 몸무게는 출력되지 않는다. #을써서 private속성을 줬기 때문인데 get을 써야만 해당 속성값을 가져올 수 있다! static 메서드클래스 인스턴스에 의존하지 않고클래스 이름을 통해 직접적으로 호출이 가능하다. static 메서드를 사용하는 이유1. 객체 생성의 유연성 - 동일한 클래스라도 다양한 입력방식으로 객체 생성 가.. 2025. 1. 4. [JS.개발일지] 6. 자바스크립트 3-2(배열메서드) 배열 메서드1. map() : 배열의 각 요소에 (괄호)안에 있는 함수를 실행시켜서 새 배열로 반환. 이렇게 {return num * 2} 리턴문을 써도 되지만 수식이 단순할때는 생략해서 num * 2로 표현한다. 내가 지정한 값만 변경해서 반환하기도 가능 이렇게 ...(스프레드연산자)를 이용해 기존 객체를 수정하지않고 새로운 객체 2배수로 반환한다.({...item, 속성: 새로운 값}) 2. filter() : 조건을 만족한 요소들만 새 배열로 반환 다음은 소수를 필터링하는 재미있는 예제다. (소수, 자신과 1외에는 나누어 떨어지지 않는 수) 소수를 구하는 함수를 필터메서드 안에 대입시키면 소수를 구할 수 있다! 3. reduce() : 배열의 모든 요소를 하나로 줄인다는 뜻.배열을 순회하며, .. 2024. 12. 30. [JS.개발일지] 5. 자바스크립트 3-1(변수와객체) 변수와 객체의 차이!Primitive 의 값이 변경되는것과 Object의 주소가 변경되는것의 차이. 변수(스트링, 넘버,불리언,널, 언디파인, 심볼)에 값이 변경되는것은 메모리의 값이 직접 변경되는것이고객체 {객체, 배열, 함수} 에 key:valul가 변경되는것은 주소가 변경되는것이기 때문에 관련된 객체들은 모두 그 주소를 참고하게 된다. 항목Primitive 값Object 값저장위치스택(Stack)힙(Heap)에 객체, 스택에 참조값.저장내용값 자체를 저장 참조값 (메모리주소)저장크기고정크기가변크기속도빠른편느린편독립성값 복사시 독립적참조값 복사시 동일 객체 참조 사칙연산중에 %(나머지)를 활용하는 다양한 예시! 1) 홀짝 만들기 2) 배열 순환시키기 3) 순환을 이용해서 특정 n 번째만 실행시.. 2024. 12. 25. [JS.개발일지] 4. 자바스크립트 2(객체와 콜백) 객체의 비구조화 할당매개변수를 할당하는 재미있는 방법.{} 를 활용하면 객체의 특정 키값을 찾아서 할당해준다. name, age, hobby 등 변수를 선언 할때도 비구조화 할당을 사용할 수 있다. 바로 실행되는 함수 (constructor 안에서 함수 실행) 와내가 호출 시키는 함수를 비교해봤다. 1. 바로 호출하기2. 특정시점에 호출하기전원켜주면 poweron 하고행동하게 하면 집을 청소하는 로봇 ---------------- 1초당 1번씩 짖는 강아지를 코딩하는데 실수를 했다!. 둘다 5초동안 1초에 1번씩 짖으라고 했지만 첫번째 강아지는 4번만 짖었다! 오마이갓! 첫번째 강아지. 5번째 짖는 동시에 클리어되버리는 이슈 ㅠㅠ. 물론 5001 이라는 숫자를 쓰면 되겠지만다른 방법으로 5번 짖.. 2024. 12. 20. 이전 1 2 다음
