자바스크립트 기초 TIL

챌린저스로 하는 김에 자스 기초부터 공부하는 중. \n기초 공부 하는 김에 헷갈렸던 개념들을 정리해서 기록한다.

나름의 TIL 기록이다. 오늘 내가 보고 들은 것들 중 핵심을 정리한다.\n 코드잇 강의\n console.log와 console.dir가 무슨 차이가 있는지 늘 궁금하긴 했는데 마침 소개 됐다.

코드잇 강의\n 맨날 innerHTML만 써서 몰랐는데 그 외에도 다른 요소 노드 프로퍼티들이 있음을 알게 됐다.

코드잇 강의\n CSS에서 특정 속성으로 선택하고 싶을 때는 [속성이름]을 사용할 수 있고 속성의 값으로 선택하고 싶을 때는 [속성이름="값"]으로 사용할 수 있다. 이렇게 태그에 구애받지 않는 요소 선택이 가능하다.

코드잇 강의\n 이벤트 핸들러 관련 내용을 늘 흐릿하게 알고 있었는데 이번에 확실히 이해하게 된 거 같다.특히 blur는 뭐지, 하며 흐린 눈 하고 있었는데 포커스가 없어진 뒤를 의미하는 걸 알게 되었다.대부분 아는 내용이지만 다시 정리한다.

코드잇 강의\n removeEventListener: addEventListener로 등록한 이벤트만 제거할 수 있다. (이걸 왜 이제 말해주는 것인지...) 단, 익명함수는 캐싱되지 않기 때문에 이렇게 제거되지 않는다.

코드잇 강의\n 이벤트 캡쳐링, 버블링: 캡쳐링은 버블링의 반대 개념. 이벤트 버블링은 타겟으로부터 DOM의 최상단 요소까지 올라가며 같은 타입이 호출되는 개념이다.

거의 한 달만에 작성하는... (그만큼 공부 안 했다는 의미임.)\n 코드잇 강의 \n 마우스 이벤트 프로퍼티아주아주 오랜만에 보는 프로퍼티. 예전에 드래그 한 영역의 문자를 클립보드에 자동으로 복사하는 기능을 추가로 구현할 때 사용해 봤다.

코드잇 강의\n 입력 값과 관련한 이벤트를 다룬 강의 하나를 들었는데 개념이 잘 정리 되지 않는다...\n Input: focusin, focusout / focus, blur(이벤트 버블링이 되지 않음)

코드잇 강의\n 스크롤이벤트: scrollY 프로퍼티를 활용하면 스크롤된 특정한 위치를 기준으로 이벤트 핸들러가 동작하게 하거나 혹은 스크롤 방향(위로 스크롤 중인지/아래로 스크롤 중인지)을 기준으로 이벤트 핸들러가 동작하게끔 활용 가능

내가 개다... 왈왈왈왈왈... (이 달걀은 이번 주도 공부하지 않았습니다...)

코드잇 강의\n 자바스크립트의 데이터 타입\n Truthy 값과 Falsy 값\n 논리 연산자왼쪽 피연산자 값의 유형에 따라서 두 피연산자 중 하나를 리턴하는 방식으로 동작\n 변수 선언 방식\n var: 변수 이름 중복선언 가능, 변수 선언 전에 사용 가능(호이스팅)

코드잇 강의\n 함수 선언 방식: 호이스팅으로 인해서 함수를 선언하기 이전에 함수를 호출해도 정상적으로 동작 \n 함수 표현식: 반드시 변수가 선언된 이후에 함수를 호출해야 정상적으로 동작

유데미 강의 destructing과 spread의 차이점은 대상이 전체이냐 특정이냐에 있다. 객체와 배열은 참조형 데이터다. map, filter, reduce를 잘 활용하면 리액트가 편해진다!

함수를 호출한 객체를 가리키는 키워드(메서드 내부에서 호출되는 편), 함수가 호출될 때 어떤 객체가 그 함수를 호출했는지에 따라 상대적으로 값이 변하게 됨\n arrow function에서는 this가 함수가 선언되기 직전 유효한 this 값과 동일하게 됨

단 하나의 사이드 프로젝트도 완성하지 못한 채로 해가 바뀌어버렸다니 믿을 수 없고... 근데 어쩔 수 없고... 곧 코드잇 멤버십도 만료되니 그 전까지 강의나 마저 들어야겠다... 의 일부.

배열 정렬 메서드(원본 직접 수정)sort: 배열을 유니코드 문자열 순서에 따라 정렬reverse: 배열의 순서를 뒤집어 줌

forEach: 첫 번째 아규먼트로 콜백 함수를 전달받음map: 첫 번째 아규먼트로 전달받은 콜백 함수가 새로운 배열 반환filter: 콜백함수가 리턴하는 조건과 일치하는 요소만 모아서 새로운 배열을 반환

코드잇 모던 자바스크립트 기초 수업 (드디어) 완료!!!마지막 토픽은 모듈에 대한 내용이다. React를 먼저 접하고 나서 이런 기초 지식을 알게 되었다는 사실이 묘하지만 '그래서 이걸 뭐라고 불러야 하냐???'에 대한 개념을 정리할 수 있었다.

Object Literal: method와 property로 만들어진 객체Factory Function: object를 생성하는 함수Constructor Function: object를 생성하는 생성자 함수

추상화: 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것. 캡슐화: 객체의 특정 프로퍼티에 직접 접근하지 못하도록 막는 것. 클로저: 어떤 함수와 그 함수가 참조할 수 있는 값들로 이루어진 환경을 하나로 묶은 것.

*캡슐화에서 추가적으로 참고할 내용!static property, static method: 클래스에 직접적으로 딸려있는 프로퍼티와 메소드(객체가 아닌 클래스 자체로 접근할 수 있음)이렇게 자바스크립트 객체 지향 기본기는 완료했다.

데이터 조회: GET데이터 추가: POST데이터 수정: PUT데이터 삭제: DELETEHead: Request에 대한 부가 정보(headers)를 담고 있는 부분(ex. 메소드)Body: 실제 데이터를 담고 있는 부분

Ajax(Asynchronous JavaScript And XML) 자바스크립트를 사용해서 비동기적으로(=사용자가 보고 있는 현재 화면에 영향을 미치지 않고 별도로 백그라운드에서 작업을 처리한다는 뜻) 리퀘스트를 보내고 리스폰스를 받는데 기반이 되는 기술들의 집합

Promise 객체는 비동기 통신의 결과 상태에 따라 다음으로 실행할 콜백 함수에 전달하는 객체의 상태가 달라진다.

all 여러 Promise 객체의 작업 성공 결과를 기다렸다가 모두 한 번에 취합하기 위해서 사용(하나의 Promise 객체라도 rejected 상태가 되면 전체 작업이 실패한 것으로 간주) > any 여러 Promise 객체들 중 가장 먼저 fulfilled 상태