데브코스5기 스터디 - JS deepdive
1.딥다이브 스터디 10,11,12(객체,함수)
일주일에 두번 발표. 참여자는 4명. => 차례가 2주싸이클로 돌아간다.보통 두챕터씩 하기로 했지만, 이번 10,11챕터가 둘다 객체기때문에 한번에 묶어서 진행.객체란 무엇일까?JS는 객체기반언어다. 원시타입을 제외한 나머지 모두는 객체!원시타입은 단 하나의 값. 객체
2.딥다이브 스터디 13,14,15(스코프, 전역 변수, 변수)
우린 스코프를 이미 알고있다.함수 매개변수는 내부에서만 참조 가능하다.이것이 스코프다. 참조가 유효한 범위를 알려준다.=> 모든 식별자는 선언된 위치에 의해 다른 코드가 자신을 참조할수 있는 유효범위를 가진다.폴더와 파일을 생각하면 편하다.게임폴더에 롤이라는 파일이 있
3.딥다이브 스터디 16, 17, 18(프로퍼티 어트리뷰트, 생성자 함수에 의한 객체생성, 일급객체)
프로퍼티 어트리뷰트 두개의 개념을 먼저 살펴본다. 내부 슬롯 내부 메서드 JS엔진 내부에 존재하는 프로퍼티와 메서드다. 보통 [[Something]] 이렇게 이중대괄호로 감싸져있다. 원칙적으로 은닉화 시킨 녀석들이다. 일부는 특별한 접근자를 제공하여 접근 가능하다.
4.딥다이브 스터디 19(프로토타입)
대망의 프로토타입. 사실 이전에 OOJS를 다루며 설명해놓은 글이 있긴하다.더 간략히 요약해보는 시간을 가져보자.클래스 기반 객체지향이 아닌 프로토타입 기반 객체지향=> 원시타입을 제외한 모든 것이 객체.명령,함수 목록으로 보는 절자치향에서 벗어나 여러개의 독립적 단위
5.딥다이브 스터디 20,21(strict mode, 빌트인 객체)
엄격 모드(strict mode) 엄근진하게 코드를 평가해주는 모드다. 개발자가 실수하는걸 용납하지 않을 것이다. 우리는 Vscode를 사용할때 ESlint나 Prettier같은 코드 검사 도구를 사용한다. 그거와 비슷한게 JS에 내장되어있다고 보면 된다. 적용법
6.딥다이브 스터디 45, 46(프로미스, 제너레이터, async-await)
동작원리에서 봅시다동기, 비동기, 블로킹, 논블로킹의 개념을 알게되었다면, 프로미스의 시간이다.콜백함수는 비동기 함수내부의 값을 꺼내쓰기위해 고안되었다.프로미스는 프로그래머스 데브코스 강의시간에도 배웠었지만, 콜백지옥을 해결하기 위한 방법으로 도입되었다.한 두줄이면 괜
7.딥다이브 스터디 23(실행컨텍스트)
현재 어떤 상태에서 수행되고 있는지 정확히 파악하고자 함.컨텍스트 === 문맥.OS에서 프로세스도 컨텍스트를 가지듯, JS도 자신만의 컨텍스트를 가진다.이를 실행 컨텍스트라 함.js의 동작원리를 담고있는 핵심 개념이를 알면호이스팅태스ㅋ큐와 함께하는 이벤트 핸들러 + 비
8.딥다이브 스터디 22,24(this, 클로저)
대망의 this!!!!!!!!!!!!!!!!!!내가 너무 알고싶었던 this!!!!!!!!!!!!!!!!객체지향의 최고존엄 this!!!!!!!!!!!!!!!!!!!!!!!!!!!를 알아보자메서드는 자신이 속한 객체를 참조할 수 있어야 한다=> 아하! 자신이 속한 객체
9.딥다이브 스터디 25 (클래스)
자바스크립트는 프로토타입 기반 객체지향언어이다.이는 곧 클래스가 필요 없는 객체지향언어임을 의미한다.하지만, 사람이 있어야 프로그래밍 언어도 있는 법이다.클래스에 익숙했던 프로그래머들은 프로토타입 기반 프로그래밍 방식에 혼란과 어려움을 느꼈다.이를 위해 ES6에서 클래
10.딥다이브 스터디 26,27초반(ES6함수, 배열)
es6이전 함수는 구분 없이 다양한 목적으로 사용됨.생성자 함수메서드그냥 함수각각 명확히 구분되지 않았다. 또한 모두 construct를 가지고있었음.=> 실수가 나올 수 있음. 또한 construct를가지면 prototype도 생성됨. 비효율적.ES6부터는 명확히 구
11.딥다이브스터디 28,29,30 (Number, Math, Date)
Number 부동소수점 부동
12.딥다이브 스터디 31,32,33 (RegExp, String, Symbol)
RegExp(Regular Expression) 정규표현식! 이란 일정한 패턴을 가진 문자열을 뽑아내기위한 형식 언어다. 대부분의 프로그래밍언어에 내장되어있음! 장황한 조건문을 쓰지않아도 문자열 패턴 매칭이 가능하기에 용이함. 참고로 정규표현식은 백트래킹기법을 활용
13.딥다이브 스터디 34,35 (이터러블, 스프레드)
ES6에서 도입된 순회 가능한 자료구조를 만들기 위해 도입됨.ES6이전에는 각자 for..in, for...of, for등으로 순회를 하였으나 이젠 이터레이션 프로토콜(순회 규약)을 준수하게 만듬.따라서 순회 가능한 자료구조는 모두 이터레이션 프토로콜을 준수함.이터레이
14.딥 다이브 스터디 36,37(디스트럭처링 할당, Set과 Map)
구조화된 배열같은 이터러블 또는 객체를 구조 파괴하여 변수에 개별 할당함.보면 바로안다.배열은 인덱스 순으로할당, 객체는 키를 뽑아와 사용하면 된다.기본값 설정, 스프레드 문법을 사용할 수 있음객체는 키 이름 변경이 가능함.중첩객체 추출은 이렇게...Rest프로퍼티,
15.딥 다이브 스터디 38 (브라우저 렌더링)
이미 따로 깊게 공부해본 파트긴 한데, 복습겸 다시 진행해보자 ㅎㅎ브라우저는 HTML,JS,CSS파일을 받아서 해석하여 화면을 보여준다. 어떻게 해석해서 보여주는지 알아보자!https://developer.chrome.com/blog/inside-browser
16.딥다이브 스터디 39(DOM)
Document Object Model. 문서객체모델. HTML을 브라우저가 이해할 수 있는 자료구조(트리)인 DOM으로 파싱한다.또한 DOM API라는 기능을 브라우저가 지원하여 DOM조작을 수행할 수 있게 해줌.출처:https://tcpschool.com/
17.딥다이브 스터디 40 (이벤트)
브라우저가 처리해야할 특정 사건. ex)마우스 이동, 키보드 입력, 클릭...등. 이를 감지하여 특정한 타입의 이벤트를 발생시킴.이벤트에 반응하여 어떤 일을 하고싶다면 함수를 브라우저에게 알려 호출을 위임함.이 함수를 이벤트 핸들러라고 하고 호출을 위임하는 것을 이벤트
18.딥다이브 스터디 41,42(타이머, 비동기 프로그래밍)
일정 시간이 경과된 후 함수를 호출하는 방식.setTimeout, setinterval을 사용한다.빌트인 객체는 아님(Node.js, 브라우저).JS는 싱글스레드기에 이를 비동기방식으로 처리한다. 비동기라는 말은 42장에서 살펴본다.setTimeout(callback,
19.딥다이브 스터디 43,44(ajax, rest api)
자바스크립트와 XML의 비동기. XML는 eXtensible Markup Language의 약자로 다목적 마크업 언어이다.기존의 HTML과는 달리 웹 상에서 구조화된 문서를 전송 가능하게 설계되었다.무슨 의미냐면 HTML에서는 서점이라는 데이터를 기술하기에 마땅한 태그
20.딥다이브 스터디 47,48(에러 처리, 모듈)
에러가 발생하지 않는 코드를 작성하는건 불가능하다. 따라서 에러를 대처하는 게 개발자의 덕목이자 필수요소다.위처럼 try-catch를 이용하여 에러처리를 할 수 있다. 참고로 try-catch-finally가 한 셋트다.finally는 에러가 나지 않아도 내부 블록의