오, 이곳 JS30이라는 곳은 🙂 30개의 예제를 통해서, 프레임워크 없이, 라이브러리 없이, 바닐라로만 사랑스럽게 따라해 볼 수 있는 강좌를 주는 사이트이다. 쉽다. 쉬워! 무료니까, 이메일로 코스 등록하고, 스타트파일 받아서 영상 보면서 따라하면 됨. 순서없이 재밌어 보이는 것 대로 할 예정. 그래도 일단은 드럼은 해보려고 함. 아참... 영어다. 등록후엔 오른쪽위에 my account 들어가서 wesbos.com 에 코스진행하면 된다. 들어가면 스타터파일이랑, 슬랙빼고 ㅠㅠ 코스 들으면 된다.
자바스크립트 드럼 킷
최종목표 : 키보드를 누르면 소리내고, 키를 누른 효과를 내는 드럼을 만들자.
과정 : 첫 시간이니 좀 상세하게 적어야지.
git clone 해서 로컬저장소에 개발에 필요한 자료들을 받자. 드럼킷이니 소리가 나야한다.
일단 아저씨가 말하는걸 들어보면 키보드로 드럼을 만드는건데, 키보드 이벤트가 필요할 것이다. css랑 html은 준비를 해 줄 것 같고 폴더나 한번 열어봐야징.
아저씨가 말하기를 🙂 데이터 키에다가 키를 누르면 클래스에다 플래잉을 걸면 CSS로 눌려진 효과를 뽱하고 낸다.
일단, 키코드랑 클래스랑 소리만 맞으면 되겠네.
keycode.info 에서 키보드와 아스키 키코드에 대한 정보를 획득하는 샘플을 보여준다. 어 일단, index-Finished 는 해답이니까 제껴놓고😓
Index-start 화면을 열어보고.... 손델게 좀 있어보인다.
3분 54초 부터 같이 생각하면서 스크립트 좀 짜보자고 이야기를 한다.
스크립트에 키다운 이벤트를 핸들러로 전역에 등록하고 이벤트 핸들러 리쓰너로 들어올 function을 정의한다. e는 이벤트의 약자
4:39초까지. 그리고 테스트해봄 ... 한글인 경우 한글들어온다 ㅠㅠㅠ 그래도 키코드는 같다.
function(e) {
console.log(e.keyCode);
}
각각 키에 대한 오디오를 받아야 하니, 데이터key랑 연결을 해주고, 쿼리셀렉터를 통해 해당 오디오의 주소와 data-key와 바인딩을 시킨다.
data- 부분은 원하는 데이터를 html에 저장할 때 적당하다. 백틱을 이용해서 셀랙터의 해당 오디오 엘리먼트를 로드하고
src 부분에 있는 주소를 추출해서 실행하는 구조.
오디오가 없으면 빠르게 얼리리턴 해버리고, 🙂 소리도 기존 소리가 끝나고 재생되는걸 처리하기 위해 이벤트 들어오자 마자 소리도 빠릿하게 실행하도록 변경
키이벤트 효과처리 .key class 친구들을 선택해서 key로 만들고, 요거 효과내기위해 위해서 CSS도 살짝 수정하고, 이벤트 리스너로 클래스 추가.
키 누른후 전체 다 키를 축소하기위해 모든 키를 선택해 전역에 keys로 복수형이지 🥺 쿼리셀렉트all🔥로 가져온다.
(제이쿼리 비교도 해주네)
일단은 전체 선택한 키를 애로우 펑션으로 짧게 이벤트 리스너를 추가해서 트랜지션 엔드를 받고, 삭제시 호출할 removeTransition을 달아놓고
뒤에 removeTransition을 만들어줬다. 테스트 15:10초.
변환이 일어나는 프로퍼티 네임이 transform으로 바뀐걸 볼 수 있다. 변환이 되는 과정에 계속 누르면 이건 건들면 안되니 예외처리 먼저 해주고 (얼리리턴)
- 변수의 유효범위와 클로저 : 먼저 다루는건 let, const만 다룬다... 😩var 선언 유효범위 이탈하고, 전역으로 메모리에 꽂아 넣어서 여기저기서 호출하는바람에 생기는 문제들을 알려주고있네 ㅠㅠ 😓 var는 함수 스코프의 생명주기만 가지고 나머지는 전역이니라 스코프가 뭐야? 클로저가 뭐야? 거의 다 씹어먹고 움직이니까 먼저 제외하고 이야기를 미리 못박고 해당 챕터를 시작하는구나 😱
- 코드블록 : 코드블록으로 묶어서 선언하면 그 내부에서만 접근 가능한건 지금까지 잘 따라온 사람들은 다들 알 것 같고...🧐 🥺블록 없이 let 중복선언 하면 전역으로 중복 만들어지니 에러 나는것도 알 것이고...
- 중첩함수 : 네스티드 함수라 부르는건 잘 못듣긴 했는데, 이렇게 말하기도 하는구나... 네스티드 json이나 네스티드 객체(오브젝트)는 자주 듣는데... 그리고... 상단 예제 코드에선 .. 코드 정리에 쓸 수 있다고 하는군....☀️ 흔히 사용하지 메서드라는 이름으로 *(ㅇ0ㅇ)~ 설명 중 ... 하면서 내부에 만든 getFullName 위치에 있는 함수는 밖에서 쓸 수 없고 해당 함수 내에서만 접근 가능하다고 해당 함수의 스코프가 이렇게 지정된에 대해 설명을 하고 있다.
대신 하단 예제에서는 함수를 반환하고, 계산값을 반환해서 카운터를 만드는 과정을 설명하고있구.... 음... 아래에서 카운터를 여러개 만들면 이 함수들은 서로 독립적일까? 답은 안알려주고 묻고만 있는데, 😩 아이고.. 지금처럼 일반 함수가 아니라 생성자 방식 등을 통해서 인스턴스를 생성하게 되면 독립적이게 된다. 나중에 이해하면 될껄?
- 렉시컬 환경 이라 써져있고, 정적환경, 렉시컬 인바이런먼트 등등 부르는 이름은 책마다 검색마다 다르다. 처음 설명부터 🐯굴에 들어가야합다. 하며 호오랭이를 언급하다니 ㅠㅠ 호랑이 잡기 어렵다.
일단 키워드는 "레코드" 🐱 갑자기 뜬금없이 왜 레코드냐!! 싶지만 레코드 일단 기억해두자. 네이버나 구글에 검색하면 레코드는 옛날 오디오 기록 장치 중에 LP판이라 불리는 그 친구인데, 여기서는 침착하게 저장하는 메모리의 기억장소 쯤의 저장할 수 있는 자료구조로 생각하자. 레코드도 다양한 깊이가 있는데... 글로 설명하긴 어렵고, 모던JS딥다이브 책과 거의 같은급의 블로그 글이 있길래 링크를 달아둔다.
그림으로 그리기 참 어려운곳에다. 렉시컬 환경도 종류가 여러개라 호출위치에 따라 전역 렉시컬환경, 함수별 렉시컬 환경 등 (eval) 다양하게 나누어진다. 😩 지금 막 눈이 감길 시점인데 또 내부는 크게 둘로 나눠지고 (현재 실행중인 그곳의 ... 전역이나 함수같은) 렉시컬 환경 레코드와 바깥의 상위 환경을 참조하는 아웃터 렉시컬 환경 레퍼런스 라는 둘로 나눠진다. (디스 바인딩은 여기 일단 없으니 패스) 세부적으로는 내부 '뫄뫄뭐뭐어쩌구 렉시컬 환경 레코드'들은 또 속으로 들어가서 여러가지 객체 환경 레코드나 함수 환경 레코드, 선언적 환경 레코드 등으로 세분화 되어있다. ... 후ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 다른 블로그 좋은곳을 소개해야지...
.... 일단 모던JS 튜토리얼 가이드 설명에서는 전역 렉시컬 환경 부터 설명 하면서, 변수.
변수 :변수가 환경레코드라는 프로터피일 뿐 😱 이란 말로 퉁쳤는데, 맞는말이다. 너무 요약했어ㅋ큐ㅠㅠ 근데 이렇게 안쪽부터 설명해도 되는거야?
두줄 중, 1개는 현재 전역 객체 환경 레코드에 저장되고, phase: "hello" 아우터 렉시컬 환경에는 현재 이 렉시컬 환경이 전역이기 때문에 바깥에 더 이상 최종적으로 더 연결해서 참조할 수 있는 환경이 없어서 null 이라고 표시하고 있다.
긴 코드를 살펴보자는데 더 헷갈리네. 이것도 전역 렉시컬 환경이다. 하고 그림을 뒤에 보여주란 말이다...ㅠㅠ.. 밑에다 써두었다. 잘 참고해야할 것 같고 큰일이네 큰일이야 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
제일 먼저 스택에 글로벌 실행 컨텍스트가 동작하면 렉시컬 환경을 생성하고, 전역 렉시컬 환경(전역 환경 레코드, 외부 렉시컬 환경 참조를 가짐.)이 생성된다.😱 그 후 여기서 말하는 전역 환경 레코드(의 선언적 환경 레코드..는 지금 무시하고 큰틀로 보자고 하는거구나 튜토리얼이라 )에 선언한 변수들이 올라가서 undefined 되고(1), 그 후 값 할당 과정(2)을 거치고, 값 변경되는(3)것도 보여준다.
함수 선언문 : 변수랑 같은데 표현식이 아닌 선언문이라 선언을 쭉 먼저 해서 초기화 시킨다는데, 전역 환경 레코드에 올라가며 선언문 function은 say 라는 키로 해서 초기화된다. let(변수) 만나도 쓸 수 없다는 이야기도 나오는데, 위에 변수를 보면 (1) 만 되어서 그렇다. 표현식은 코드가 식을 평가해야 실행되니 아직 멀었다.
내부와 외부 렉시컬 환경 :함수를 호출해서 실행하면 새 렉시컬을 자동으로 만든다고 했는데, ㅇㅇ, 맞다. 근데 일단 현재 전역 환경 레코드에서 외부 렉시컬 환경 참조도 한번 확인 해 줘야한다. 현재는 say: function과 phase: hello가 있는 전역의 외부는 전역이라 더 이상 연결(참조) 될 외부가 없어서 null 이다. (본문 그림 오른쪽 빨간선 오른쪽)
본문 오른쪽이 먼저 만들어져 있고, 자 이제 내부 렉시컬 환경이 생기는데, 함수를 호출 하면서 내부 렉시컬 환경이 생기고 (실행 컨텍스트는 당연 현재 글로벌 환경 컨텍스트 돌다가 위에 해당 함수에 대한 실행 컨텍스트가 생기고) 호출한 새로운 함수의 그러니까 전역이랑 비교하면 내부에 해당하는 내부 렉시컬 환경이 생성된다. 즉 따라서, 내부 렉시컬 환경의 스코프체인을 통해 외부 렉시컬 환경을 참조하게 되고, 이 외부는 확인해보면 어디다? 글로벌 렉시컬 환경이다.
다시 정리하면 본문에서 말하는 내부 렉시컬 환경의 외부는 전역 렉시컬 환경 전역 렉시컬 환경의 내부는 내부 렉시컬 환경
내부에서 먼저 내부에 변수가 있나? 함수가 있나? 쭉 살펴보고, 찾을 수 없으면 외부 렉시컬 환경으로 가서, 함수있니~? 변수있니~? 찾게된다.
전역까지 못가고 못찾으면 엄격모드에서 에러가나고, 비엄격 모드에서는 새 전역 변수가 만들어진다.
반환함수 : makeCount로 돌아가네.. 결국 return 부분인데, 내부의 내부에서 return 할 때 count ++ 을 return 하는 함수를 만들어서 나중에 실행하면 전역 -> 메이크카운터 -> 리턴펑션으로 볼 수 있다. 실행환경에 물리는걸 기억해야한다. 반환 된 리턴펑션이 어디에서 실행 되는가? 전역이기 때문에, 아래 그림에서 보면 makeCounter를 실행해서 counter 를 만든다. 그럼 이 counter(리턴펑션) 친구는 실행하는곳이 어디인가?
메이크 카운터 속에서 자신의 환경에서 찾고, 찾았지만 ++ 할 것이 없으니 메이크 카운터 환경으로 간다. 그리고는 메이크 카운터 내부에 있는 count: 0 값을 계속 ++ 하며(후위연산 0부터 출력) 바꿔주는 것 이다.
(느낌표 하나 넣고) 클로저(폐쇄... 되는상황) ✨ : 그럼 자바스크립트 클로저란 뭔가? 위에 봤던 메이크 카운터를 만들어 실습 해 보았다. 일을 처리 할 때. 변수에 직접 접근하지 않고, 함수로 상태를 안전하게 변경하는 예 중 하나 이다. 특정 함수에게 딱 일을 지정해서 변수를 직접적으로 조작하지 않게 안전하게 함이다. 그래서 숨김 프로퍼티라고 하고, 환경을통해서 자신이 실행 된 환경을 기억하며, 그 실행 된 환경에서 외부 변수를 찾아 접근한다.
- 가비지 컬랙션 : 다 썼으니까 렉시컬 환경이 제거되고 실행 컨텍스트 스택에도 내려가면서 끝난다. 그럼 메모리에서 제거되는데, 이걸 가비지 컬렉션이라고 한다. 도달할 수 없는 섬이 되어버렸으니까 말이다. 🔥
그렇지만 스코프체인 등으로 다른곳에 여전히 도달할 수 있으면 이 중첩함수는 환경에 남아있기 때문에 도달 가능한 상태가 되어 함수는 호출이 끝났지만 다른곳에서 쓸 수 있기 때문에 여전히 렉시컬 환경은 남아있고 실행 컨텍스트 스택에서만 내려간다.
- 최적화 프로세스 : 이론상으론 살아있으면 모든 외부변수는 메모리에 유지되는데, 실제론 디버깅 시 최적화 과정에서 제거된 변수를 쓸 수 없는것이 V8엔진의 주요 부작용이라고 보여주고 있구나... 음......... 왜저래? 나중에 더 자세하게 살펴볼 것.
- 오래된 'var' : 아이고... var는 함수 스코프만 존재한다는거... ㅠㅠㅠ“var” tolerates redeclarations 그래... 재선언도 좋다 이거지 let랑 다른 유도리 많은 친구구나. 이친구가 선언이 전역평가가 되어서 신명나게 올라가고 할당은 호이스팅이 안되고.. 즉시실행함수로 블록스코프 잡았던 옛날일들을 돌아보며, 현재 환경이 좋아졌다는걸 체감한다.
- 전역 객체 : globalThis 로 이름이 최근에 통합해서 바뀐 것 같다. window(브라우저), global(node.js) 였는데, 전역을 합쳐서 헷갈린 부분을 잡았다. let, const는 선언적 렉시컬 환경에 저장될거고 이친구 var는 기존대로 window 까지 연결되었나보다. 하위호환성땜에 남아있다고...😭 그렇구나.
그래도 전역 변수는 쓰지 않는게 좋고... 구형브라우저를 대응하기 위한 폴리필까지 이야기 되어있네.
- 객체로써의 함수와 기명함수표현식 : 아... 함수는 객체이고 익명함수와 기명함수방식이 있는데 대부분은 식별자가 없는 익명함수에 식별자를 붙여 let aaaaaaa 하고 이름을 잘 붙여서 aaaaaaa 하고 호출한다. aaaaaaa의 컨텍스트가 생기는거고. ES5랑 ES6의 name처리부분이 달라서, 이 부분은 조심해서 사용해야하긴한다만 요즘 다 ES6지원 브라우저 쓸거라 실습엔 문제가 없을지도. 함수객체 프로퍼티의 length를 찍어보면 몇개를 받을 수 있나 명확하게 명시적인 친구들만 표시 해 준다는 내용이랑...
- 커스텀 프로퍼티 부분에서 프로퍼티의 값을 변경하는 부분을 보여주고 있다. 한국어 어렵게 써두었다.😢 저 위에서(이 메모 위쪽) makeCount 클로저 예제를 실습해보는 대신에 프로퍼티에다가 저장하면 어떤 결과를 보여주는지 실습으로 나타내고 있다. 따라가 보면 9번째줄에서 counter.count라는 친구가 5번째 줄 function counter 친구에다가 걸어버려서 함수가 반환되면 함수의 프로퍼티에다가 count 가 반환되기 때문에 외부에서 접근을 할 수 있어서 노출된다는 소리이다.
- 기명함수 표현식 함수에다가 이름을 줬네? 음...😩 어렵게 생각하면 어려워지니... 어렵게 생각말고 보통 표현식으로 쓰면은 익명으로 하는데 기명으로 하면 어떤 차이가 있는지 한번 알아보자는 취지에서 진행을 하면 좋을 것 같다. 무기명함수에서 .......... 코드를 만약 이름이 있으면, 얼럿을 찍고, 없으면 해당 함수를 식별자로 나타내는 sayHi를 한번 더 호출해서 이름이 guest 로 출력을 하도록 생각 한 부분인데, 1번째 줄 표현식에서 sayHi랑 전역나라에 사는 익명함수친구친구둘이 잘 알고 지내는 친한 친구였는데, 9번째 줄에서 이름이 없던 전역나라에 사는 익명함수친구친구를 welcome에다가 참조로 어 이친구 좋아! 하고 소개 해 놓고서는... 10번째 줄에서 갑자기 sayHi랑 익명함수친구친구랑 싸웠는지 null;;;;;;; 했는데🤬 12번째 줄에서 웰컴이가 "익명함수친구친구야" SayHi 좀 불러봐 하면 튀어나오겠냐고........... --- 아래쪽 코드에서 웰컴이가 너 가서 func 모자라도 쓰면 못알아보니 불라봐라 해서 이친구는 해당 환경에 있던 모자 주워서 쓰고 갔더니 sayHi가 너가 이름이 없어서 나한테 기대는 친구인 줄 알았는데 func라는 멋진 이름이 있구나~ 하면서 앞으론 그렇게 불러 줄 께 해서 그랬다는 이야기아녀?
... 뭐래...는거니 나
- new Function : 함수 표현식과 선언문 이외에 방법이 하나 더 있습니다. 라고 써져있다. (제목이겠지뭐) 이거 enum이랑 ... 두친구... 거의 뭐 동일한 그룹의 ... 같이 쓰면 좀 곤란한 친구임. 하나는 코드 받아다 아예 완전 별도의 환경을 구축하고.... 하나는 동적으로 전달받아 막 함수 만들어서 전역이에게 자꾸 매달리고..... 나중에 코드정리하다보면 충돌나고.... 어이구야...
혹시나하고 foo, bar 가 뭔지 찾아보는 사람들을 위해 찾지말고 철수, 영희, 홍길동 같은 식별자나, 함수명 같은거라 생각할 것.
1장 : 문제해결 능력, 컴퓨팅사고에 대한 중점에 대해 이야기 하는 장이다. 언어란 뭔지, 재미를 붙여주기 위해 작가의 노력이 엿보인다. 세세한 개발 언어의 문법에 대해 설명해주어서 좋다.
2장 : 자바스크립트에 대한 역사를 익힌 좋은 시간이었다. 아. 정적언어(컴파일러언어), 동적언어(인터프리터언어) 둘 중 하나씩은 배워둬야하는데... 하고.. 정적언어 JAVA 얼른 해야지 생각 한 시간.
3장 : VSCODE를 통해 개발환경을 세팅하는 과정을 보여준다. 오 매우 좋은 자료였다. Node.js에 대해서 상세하게 이야기를 해주어서, 클라이언트 사이드 웹브라우저 API 와 HOST APi 같은 차이를 확인할 수 있고...점유율도 보여주고 실습해보면 좋다. 실습해보자. 여기는
4장 : 일반적인 변수에 대한 설명인데, 메모리 주소부 영역 및 사이즈를 할당하는 부분, 그걸 왜 하는지 이유까지 상세하다. 선언과 실행시점, 호이스팅에 대해 말한다. 할당은 기본
5장 : 선언이 아니라 표현하는 부분에 대해... 평가결과=값, 실행 스택이 다다른 경우에 대한 내용들. 리터럴이란 뭔지.
6장 : 원시타입 6개와 심벌, 그리고 객체타입(객체, 함수, 배열) 들에 대한 내용이군. 문자(배)열이 변경 불가능하단것과 해당언어는 동적타이핑이라는걸 이야기 하는 시간.
49장 : 바벨과 웹팩은 꼭 실습 해봐야한다. 스터디 때문에 실습을 목적으로 먼저 49장을 미리 갔다왔다. 특히 책 설명이 잘 되어있어 폴리필과정에 대해 차근차근 잘 따라할 수 있었다. 다른 검색이나 이런거 필요없고, 그냥 VSCODE랑 하나하나 타이핑 해보면 된다. 버전도 현재와 호환 됨. 문제없음.
7장 : +_*/%== 수학시간, typeof 를 쓸 때 null을 체크하면 object를 넘겨준다는 것 같은 주의사항을 잘 숙지하고.
8장 : 블록,조건,반복 등등 일반적인 개발 문법. 레이블까지 써서 break 정말 자세하게 써져있다.
9장 : 장 이름이 특이하지... 타입변환과 단축 평가라니.... 타입캐스팅(명시적)과 암묵적 변환을 다루고.. 논리연산자를 통해 짧게 평가할 수 있는 부분을 다룸. (확실히 짧아지긴한데, 가독성은 언제나 잘 정리해야 함)
TL;DR 을 쓸껀데, 길어서 안 읽었다 보다, ... 길어서 안적었다로 이해해주시길...바라며.
10장 : 객체란, 객체란!!!!!! 오브젝트란!!! (함수, 배열, 정규표현식, 등등등등, 6개 + 심벌 을 제외한 모든 것), 프로퍼티를 조작할 수 있는 함수 친구를 메서드라 이름짓는것까지.. 와 이거 진짜 설명하는 책 몇 없는데...(자바의 정석에서 본 것 같은 느낌이 든다.) 아무튼 k, v 프로퍼티 집합체. [ 예제 10-15 ] 하단의 퀴즈 중요. TL;DR - 라고 썼지만 진짜 중요. (window.name)
int+int 인지 알면 좋고, 아님 slow case.. 그래 이래서 성능 이야기가... hotspot (대용량 스트리밍 반복처리 == 자바) 언어 특성이니... 아... 그래서 Adaptive JIT Compilation 등장이구나 꼬리재귀 처리라던가 저기서 변환하는거일지도. 요즘 웹의 대응하기 위해 히든클래스도 이런 문제 해결을 위해 나왔구나... 그래서 히든클래스 -> 인라인캐싱 ...음음... 근데 인라인캐싱은 읽어봐도 어셈블리 부분이 나에겐 당장 안 와닿네 넘어가야징..
아무튼 11장도 중요하다. 할당 시 메모리 참조하는 콜바이 레퍼런스에 대한 설명도 하고 있다. 근데 JS는 역시 조금 다르지? 한단계 더 값의 주소가 있으니. (값에 의한 전달 == 콜바이벨류 , 참조에 의한 전달 == 콜바이 레퍼런스) 재 요약은, ←객체님이 콜바레인데, 실제로 다른 언어랑은 다름.
12장 : 함수~ 블랙박스. 슈뢰딩거 냥이 박스. 왜 함수 배워야 하는지 알려주네. 5.6절 표현식인 문과 표현식이 아닌 문. 암묵적 식별자 법칙. 나도 보통은 기명식은 안쓰고. 대부분 익명함수 리터럴 이름 색략해서 식별자에 연결. 표현식의 호이스팅은 변수선언이 선언되어 undefiend로 초기화 후 실행에서 평가 되는구나. 다시 읽으니 알겠네.. 어찌됐건 호이스팅은 발생한다. 콜바레 짭이긴 해도. 함수 선언의 차이가 있는데, TL;DR (선.표아.문 표=표문 쉽게 외우기위한 꼼수, 식;이면 식캬; 값을; 뱉어야지; -ㅁ-;;;;;... undefined 니까 너희는 문이다. 식;시익;) 이론으로 구분하니 와닿네. 음... 그래서 표현을 빌리면 표현식이 변수 호이스팅이구나. 와 이걸 한글로 정리가 되는거네 내가 어리석었다. 12-30은 러스트랑 다르네. 타입스크립트 이야기를 했다. 좋지 타입스크립트. 178쪽 하단내용은 12-41을 말하는 내용임. 팩토리얼 구현시 자신이 쓴 함수가 식별자라고 소개하는 부분이 재밌네. 별게 다 재밌네. 부수효과 없는걸 순수함수라고 하는구나 오.. 이런것도 이름이 있었어... 비순수함수 외부상태 의존 및 변경을 하는... 오오...
13-15장 여긴, 같이 봐야하는 친구라서 묶었다. :뒤에 22~24장 볼 때 필요한 친구들이다. 스코프 체인, 전역변수(var) 문제, 그래서 그 해법인 let, const 나온 걸 다룬다. 식별자라는 네이밍 이야기도 감명깊군. JS특징 함수레벨스코프도 있고, 렉시컬(정적) 스코프 설명도 있어 좋네...(어디서 정의했는지에 따라 상위 스콥이 결정되는 호출위치는 관계 없는 JS의 GOD특징. 동적언어에서 빌드 된 정적언어마냥 환경을 제공하는... 스코프 내부에서 식별자를 컨트롤 하는 스토어가 되는... ...는 틀릴 수 있으니 지적 환영) 모듈 클로저, 중복선언 허용 등 각종 고질적인 문제점을 다루고 있다. 음... 이거랑 이 위에 12장 모르면 뒤에가서 큰일남.
16장 :프로퍼티 어트리뷰트 - 이름 겁나 거창함. 둘다 소유물, 속성 이런 뜻이라 (가지고있는..) 그런가 프로토타입 내부슬롯에 대해 알하야 한다고 명언들 던짐. 아무튼 "프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트라는걸 기본값으로 정의한" TL;DR ...값, 내부 상태에는 쓸 수 있는, 줄줄히 나열 가능한... 설정 가능한... 뭔가 만들면 이 친구들에 대한 정보가 주렁주렁 달려있으니, 이걸 보려면 뭐가 필요한데 그건 책 사서 보자. get set 접근자도 친구도 있네 여기도 줄줄이랑 설정있고. 커스텀 플퍼티's 추가, 제한 정보도 있군.
17-18장 여기도... 같이 봐야하는 친구라서 묶었다. : 생성자 -ㅅ-)..... 즉, 생성하는놈이지... 아주 다양한걸 만들 수 있도록 미리 만들어두었다. 대부분의 빌트인 생성자 함수 객체나, 날짜, 정규식 등등... 왜 이걸 쓰느냐, 객체 인스턴스 (TL;DR 이하생략 책사서보자.) 음... 너무 좋은 내용이라. 설명 진짜 잘해뒀네... 코뿔소 책이 수면제면 이건 다시보니 선녀네. 아니 생성자는 디스 암묵적으로 바인딩해주면서 클래스는 왜 엄격모드라며 바인딩 안해주냐... 리액트하면서 클래스 보다가 할 때 식겁했잖아... 나중에 뒷장 클래스가면 이유 써 있겠지? 함수이기위한 환경, 일반적인파라메터, 호출, 생성자 등등.... 음... 거의 뭐 사골 곰탕 급으로 우려내주시네. 애로우펑션의 특수성 등등. 상당한 고부가가치의 알짜배기 생성자 사용법들을 알려주고있고, 이친구가 생성자로 어야하는데 함수호출로 new 연산자없이 호출 된 걸 막아서 확인해서 해주는 친구도 갈쳐주시고. (스코프세이프생성자패턴 IE 대응도 만들어주시고...) 일급객체에 대해서도 설명 해 주시고... 감격이었다. 역시 짱짱 1급 객체야. arguments(es3) -> rest parameter(es6)
19장 : 대망의 프로토타입장. - JS는 객체(Object)기반(Oriented) 프로그래밍(Programming : OOP) 언어라 JS를 이루고 있는 거의 "모든 것"이 객체다. 라는 명언으로 시작한다. 객체의 릴레이션쉽이 역시 포인트 일 것 같다. 전체적인 설명도 차분하다. 이번장이 젤 중요하기 때문일지도 모르겠다. OOP부터 설명하는걸로봐서 그런 기분이 들었다. 🙏상속(인허뤼턴스)를 위하여🙏 __proto__ 가 ㅇㅇㅇㅇ프로퍼티 라는 것, ㅇㅇㅇㅇㅇ 내부 ㅇㅇ에 접근할 수 있는것 등 도 좋은 내용.
순환참조 만들면 안되니까 단방향 링크드 리스트까진 좋았는데, obj 객체가 종점이라서 Object.__proto__ 상속을 받을 수 없다는 표현이 잘 안와닿으며, 뭘 써야 안전한지. 19.11절까지 모르니 음... 이걸로 대체하자.
안전하지 않은 이유 (1)
안전하지 않은 이유 (2)
일단 위 아래는 4번 라인의 주석 차이.
__porto__ 그리고 prototype 서로... 떼 놓을 수 없는 관계....최근에 생긴 삼각관계 setPrototypeOf(타겟Obj, 가져올대상Prototype) <- 이거 설명 빼먹으신듯ㅋ... 274page 좀 중요하네. 번호 잘못 쓴 줄 알았는데 의도가 보였다. Ordinary Object ... 아주 평범하고 일상적인 보통의 객체를 생성해서 프로토 타입을 연결한다라... 해당장은 정말 앞뒤로 왔다갔다하면서 봐야하네, 뒤까지 안보면 뭔가 이상하다 뭔가 빠졌는데, 하는 경우 다음장을 넘기면 있다.
아참, 도저히 이해가 안되면 19.6절부터 세네번 왔다갔다해서 넘기며 보고, 코드 따라서 타이핑 해 보고 난 후, 19장 처음부터 보는것도 좋다.
const Animal = (function() {
function Animal(name) {
this.name = name
}
Animal.prototype.sayHello = function () {
console.log(`야옹이 ${this.name}`)
}
return Animal
})();
const neko = new Animal('Nabi')
neko.sayHello()
neko.sayHello = function (){
console.log(`멍멍?한다? ${this.name}`)
}
neko.sayHello()
섀도잉.. 지난 프로젝트 lint 버릇들어서 ; 자꾸 없네냥냥
아 이래서 클래스 나왔구나. 그렇군... 옛날 사람들 대단해.. 진짜 요즘 한 3-4년 대격변이었네. 우오ㅏ 예제 19-51 직접상속ㅋㅋㅋㅋㅋ직접구현ㅋㅋㅋㅋㅋㅋ 아 ㅋㅋㅋ 1955 랑 비교해 보면 그냥 기절ㅠㅠ
// let obj = Object.create(null)
// let obj = {}
obj.a = 1
console.log(Object.getPrototypeOf(obj) === null)
console.log(obj.hasOwnProperty('a'))
//console.log(Object.prototype.hasOwnProperty('a'))
아무튼 스태틱하게 객체가 가지는 것도 만들 수 있다는걸 보여주고... 간단하겐 그 객체의 프로토타입 체인에 속하지 않은 친구들이라 연결해서 상속받아 호출할 수 없다는것. 이뮤터블만 ㅇㅇ(책사서 읽자)가능하다는것 등등. 좋은 장이였다.
