prpos 로 상위에서 하위로 내려줄수있음. 루트요소에 리턴해주는게 중요하군. 모듈단위로 잘 나눠야한다. Example 같은 컴포넌트 작성의 네이밍 규칙도 있고, 컴포지션(합성)의 개념이라는 것도 있다. 스타일이 중복되고 재사용되는걸 아 이렇게 표현하는구나. 다 비슷비슷하네 묶어주는걸 의미하는군 children 이란 예약어가 있어 와 이걸 이제알았어. props.children ...ㅠㅠ 어쩐지 여기저기서 말도안하고 쓰더라 .. 요즘은 모든 파일에 react import 하진 않는구나. 과거엔 reactCreateElement 같은것도 있었군. JSX 문법은 대안이었구나. 하지만 명시적으로는 import react 다 써주는게 좋군. 컴포넌트 파일 구성은 보자... 그냥 정리하는거네 체계적인 폴더구분이 중요. state. ... 선언적 접근법... 인터렉티브의 기본이라. 모듈로 이벤트 정의 상태변경의 핵심은 이벤트를 어떻게 전달하는냐겠지. on으로 시작하는 이벤트들이 JSX에 내장되어있어. 이게 중요하네. 함수를 컴포넌트에 바인딩하는것. 그럼 이벤트 리스너에 등록 된다. 이걸 헨들러 방식이구나. () 로 해버리면 실행되니 주의.(포인터로 전달됨) 함수 이름의 관례는 뭐시기핸들러(clickHandler) 프로젝트에 따라 알아서 할것. 클릭핸들러가 컴포넌트에 반영된것이 왜 적용이 안된걸까 DOM에? 리액트는 이런식으로 동작하지 않음... 펑션콜을 React에서 평가할 때 실행 순서가 다르구나. 그럼 어캐바꾸는데? ㅇㅇㅇ.. 재평가 되는 방법은 state를 쓰는거구나 그래서 아ㅏ아....... 어쩑지 트리거되지 않았군 그래서 ..useState 라는 훅을 쓰는거구만 그냥 썻더니 아휴... 재호출되도록 하는 좋은 친구ㅏ. 배열과 업데이트 함수가 순서대로 인자에 반환됨. 그래서 title, setTitle 썼던거구나. 뷰랑 다르네 ㅇㅇ.. 스벨트가 좋다. 아무튼 훅으로 관리한다는 개념이 저런거구나.. state를 다시 보네 여기서. ㅇㅋㅇㅋ.재평가됨. 평가는 예약인것이고 바로 바뀌지 않는다. UX에서는 후에 바뀌기때문에 반영되는 개념을 기억해. 재평가 되는 과정은 빠름. 키컨셉임. const로 쓰는 이유는 컴포넌트 인스턴스로 등록하기 때문인거같은디? 변경되지 말라고 하는거 아냐? ㅇㅇ.. 그렇네. 잘못건드릴수있으니 특정 컴포넌트에서만 재평가하라고. 다른곳에 영향받지말라고. 결론은 useState 훅에 상태를 잘 등록해두자. 그리고 초기상태를 추적하는 형태가 있으니, state 추적이 가능한거군. 상태값과 업데이트함수를 기억해! 자. 이건 또 여러가지 로 업데이트 될 수 있구나. 입력값을 위한 폼 모듈에 대해 export default 로 정의한다. (하나밖에없으니까 ㅇㅅㅇ) 폼 만드는건 기본적이고... 잘 분리해서 관리하면 좋다. 사용자 입력은 어찌 관리하나... onChange 같은걸로 하긴 하네. changeHandler 에는 자동으로 event 가 넘어와 편리하긴하구나.state 다중관리도 있는데.... 방법은 뭐 useState 여러번 쓰는거아닌가맞네ㅋㅋㅋ event.target.value 오랫만~ 컴포넌트당 여러 상태를 가지는것은 좀 중요한듯... 근데 이 대신 쓰는 방법이 있다. 대안 대안 대안...같은개념으 반복되니 객체로 전달하면 한번에 된다. 아... 1키에 1벨류로 잘 관리하게 하려면 업데이트하지 않은 값은 수동으로 복사하는 구린 방법이 있는데, 아니면 스프레드연산자로 ...값을 잃어버리지 않게 채워주면 되네. *구려 흠... 좋은 방법의 이전 state에 의존하는 state 갱신은? function으로 이전 상태와 다음 상태를 업데이트하면서 얻는 방법이군.... prevState 개념이 이렇게 들어오는구나. 잘못된 스냅샷 상태를 손수 관리하는건 수동적일 수 있으니 함수로 작업하도록 하는게 좋다.
onSubmit에 핸들러 다는것도 있고...근데 이벤트가 쏴 지면 안되니까 .event.preventDefalut()로 만들어서 디폴트 시켜버리는구나. 쏘지말라고 ㅇㅇ.. 양방향바인딩~~~~ useState로 저장한 경우, 값을 초기화 하고 싶은데~ value를 초기화 하면 되겠지. 어... 어~ 무한루프 안빠지는구나... 의외네 .. 자. 부모에서 위로 올리는 방법. 끌올이랬지? 여기도 emit을 쓸까요? 글쎄요... .... . .... .... .. .. 아... 위에서 만들어준다음 아래로 내려서 거기서 리턴한다고? prpos로 핸들러에 담아 내려주고 값받아서 재정의한다. 으흥. 체인을 걸어서 또 위로 올려 app.js 까지 올릴 수 있긴하겠네. 관습은 on어ㅓㅉ구로 정한다. state 끌올~ (State up -lifting 이라 부르기도 함.) 아무튼 컴포넌트간에 직접적인 전달은 없긴함. 그치만 맨날 루트로 끌어오리진 않고 필요한 트리까지만 올리면 된다 'ㅅ' - 아... 사용자 지정으로 prpos 정해서 투방향 바인딩하는게 이 이래서 중요하군.
- setTimeout : 일정 시간 후 호출함. 사용법은 간단함. 함수를 실행하지 말고 함수 자체를 넘길 것 이란 경고 정도와 id 반환해서 clearTimeout(타이머식별아이디) 정도로 스케쥴 관리 하는 것만 하면 될 것 같다.
setTimeout(sayHi, 1000, "인자", "인자2");
- setInterval : 위랑 동일한 문법인데, 계속 반복하는가, 1회성인가 차이이다. (인터벌은 계속 반복), clearInterval 할 때 까지 지속 반복하니 잘 쓸것.
- 중첩 setTimeout : 일정한 간격으로 실행하는 방법인데, 딜레이 증가 시킨 후에 성공하면 딜레이 초기화 하는것도 넣어주는게 좋다. (뭐 별개 이야기로는 셋인터벌은 너무 작은 시간에 대해 반복되는경우, 반복카운터도 구현해야하고, 그게 근데 딱 잘라서 동작한다는 보장도 없기도하지만..하단에 그림으로 잘 설명 되어 있음.)
clear 하기 전까지 둘 다 메모리에 존재하는 것. 잊지않길.
- 대기시간이 0초인 setTimeout : 🙂한국말로 써있는거 맞지? 즉시 실행 한 것 과 같은 효과를 내는 것 처럼 보인다고 어필하는 것 같아. (실제론 0이 아니라 밀린다고 표현되고)
하단에 브라우저 환경에서 실제 대기시간은 0이 아니라는 부분은 "5번재 중첩 타이버 이후 대기시간을 4ms 로 강제" 하라는 부분이 명시되어 있어서인데, 그냥 넘어가도 된다. 구형브라우저 레거시 대응에 대한 것 때문에 명세변경을 못하고 있어서...🥺
- call/apply 데코레이터, 포워딩 : 재밌는 주제다. 데코레이팅 - 꾸며주고, 포워딩 - 이어주고 어떻게 하는지 알아본다고 한다.
- 코드 변경없이 캐싱 기능 추가하기 : 핵심은 코드 변경 없이 이다. 뭘까 좀 더 살펴보면 메모라이제이션과 흡사하다.
메모라이제이션이란? -> 9 * 7 = 63인데 이걸 계속 반복 할 때 마다 9 를 7번 곱하고 하고 있으니, 63이란 결과를 어디 저장해놓고 key나 인자로 9, 7 이 들어오면 첨에 한번 계산했던걸 서랍에서 쨘 하고 꺼내주는 걸 말한다. (즐겨찾기, 북마크 비슷하다고 볼 수 있다.)
- func.call 를 사용해 컨텍스트 지정하기 : 실행컨텍스트를 잘 생각해 보면 함수에서 worker.slow 를 받아서 func로 바꿔서 실행 하려고 해도 캐싱을 하려고 데코레이터를 만든 부분에서 func 자체의 this가 undefined 라고 표시하고 있다. 맞는 말인데 이렇게만 써두면 어 그런가보다 하고 넘어갈 수 있는데... 지금까지 잘 따라 온 사람들은 함수의 실행 위치에 따라 this 값이 바뀌는 부분을 생각 해 낼 수 있을거라 느낀다. - 근데 바로 아래 내려가면 설명 함 ... 아니 다음쪽 🔥 사라진 this 컨텍스트를 call을 통해서 원하는 범위로 고정할 수 있는 방법에 대해 설명을 하고 있다.
파랗게 선택 한 function (x)
하단의 설명한 부분에 문제는 없는 것으로 생각 됨.
- 여러 인수 전달하기 : 캐싱데코레이터를 조금 더 가지고 놀아본다. 인자를 2개를 받는걸 만들어 보려고 하는데, 이 경우 중첩맵을 쓰거나, 키를 중복으로 쓰는 라이브러리를 쓰거나, 두 키를 합해서 하나의 키로 만들어 해싱함수로 만든다고 세가지에 대해 소개하면서 마지막걸 썼다.
- func.apply : 아래 16줄 대신 쓸 수 있다고 한다.
스프레드로 args를 펴 발라 하나하나 분해해서 call에 넣어줬는데 apply를 쓰면 유사배열객체가 넘어가도 하나하나 분해해서 끄집어내 넣어주니 이 얼마나 좋은가. 하여 이것을 쓴다.
- 메서드 빌리기 : 앞에서 구현한 해싱을 개선해보자고 한다. args 대신 여러 인자를 받는 낡은 arguments 를 활용해서 해결하려 함. 유사객체배열에는 join이 없기 때문에, 이걸 사용하기 위해서 빈 array에서 join 메서드 call 을 통해 빌려 와 해결했다.
- 데코레이터와 함수 프로퍼티 : 음... 뭔가 주어를 살짝 빼먹고 하는 것 같아서 이해가 살짝 안되넹, 오리지널인이 되는 원본 함수에 func.calledCount 속성이 있으면, 중복된 친구인 데코레이터 속성은 감싼 래퍼이기 때문에 사용할 수 없는 그런 문제가 있나본데, 예시까지 들어서 slow 가 속성으로 있으면 데코레이터의 slow 는 래퍼라서 쓸수 없다는 소리같은데 확신을 못내리겠네... 뭔가 말을 장황하게 한 것 같은데 -_- 한국어 맞아?? 일어는 아예 해석을 포기했나 항목이 없고... 영어도 이상하고.. 일단 넘어가고 나중에 확신이 서면
- 함수바인딩 : 잃어버린 this를 찾아서... 맨날 사라지는 친구 어떻게 가져와서 잘 쓸지 고민될 때! !!!여러분은 바인딩을 합니다!!! 라고 광고...
- 사라진 this 🥺 : 사라지는걸 구경 해보자. 사용자라고 유저 객체를 만들고, 프로퍼티로 퍼스트네임에는 존 메서드 (ES6 문법으로) 세이하이라는 친구를 만들어서 내부의 this로 유저 객체에 접근하게 한 후, 퍼스트네임을 찍어주는 친구를 만들었다.
자 일단 그래 열심히 만들었으니 확인해보면 언디파인드가 뜨니 당황스럽다.
함수 실행 위치를 잘 생각해서 user.sayHi가 window가 있는 전역에서 실행이 되었다. sayHi 친구는 전역! 전역... global 에서 실행이 되었으니, 본문에서 말하는 부분인 window 에서 실행이 된 것이다. sayHi는 global 에서 firstName을 찾기 시작하지만, 집(user 라는)안에 들어있는 firstName 을 불러도 찾을 수 없...
그래서 해결책이라고 제시하는데
- 방법 1: 래퍼 : 가장 간단하다고 한다. (당신으 ㅣ입장에서) setTimeout을 사용해서 user를 받아 호출하기나 화살표 함수로 똑같이 구현 하는 등. 전역 렉시컬에서 벗어나게 하는 방법이다. 1000ms라는 1초의 시간 사이에 user의 firstName이 바뀔 수 있고, sayHi가 바뀔수도 있는 부분이다. 다른 사람을 부른다던가, 다른 내용을 동작하게 될 수 있다는것이다.
- 방법 2: bind : 모든 함수는 this를 수정하게 해 주는 내장 메서드 bind가 있다고 함. - 간단하게 함수.bind(this로 지정할대상컨텍스트) 지정하면 해당 내용으로 지정 된 함수가 실행되게 된다고 한다. 리액트에서 class 문법으로 작업 시, 엄격모드가 적용되어 bind가 안되어 있는 경우가 있기도 한다.
- 부분적용 : 인수 바인딩을 이야기 하네. 사용법은 간단. 기본 this로 바인딩할 컨텍스트 부분을 bind(null, 뒤에 인수를 넣는다) 써본적 없는데 써봐야징.
- 컨텍스트 없는 부분 적용 : bind의 컨텍스트 null 같은게 아니라 아예 없는걸 하고 싶단건데, 헬퍼 함수 partial 을 만들어 주면 된다.
모던JS 튜토리얼 읽으면서 드는 생각 메모 6장의 마지막 메모.
- 화살표 함수 다시 살펴보기.🔁 : 짧고, 독특하고, 유용하다. 현재 컨텍스트를 잃어버리지 않는다. (가장 스코프 체인 상의 가까운 컨텍스트에 쫄래쫄래 디스있니? 하고 놀러 가기 때문에)
- 화살표 함수에는 this 가 없다 : 두둥. 본문에서 접근하면 외부 값을 가져온다... 두두둥! forEach에 화살표 함수를 썼기에, 바깥의 group와 같아짐. 반대로 일반 function 을 쓰는 경우, 일반 함수 실행 컨텍스트에 따라 global 에서 찾게되고, title을 못찾거나 name을 찾게되면 엉뚱하게 빈값을 출력하는 모르는 경우 기가막힌 상황이 연출 될 수 있다.😭
기타 - 생성자가 없어서 new 불가(만들고 컨스트럭터 걸려있나 보던가..) 화살표 vs bind(this) - 바인드는 범위가 있고 화살표는 묶어서 한정짓지 않는다. 단지 this를 빌료와서 가장 가까운 스코프체인상 실행 컨텍스트에 가서 찾을 뿐.
- 함수의 구분 : ES6 이전과 ES6 이후의 함수를 사용하는 목적과 몇가지 종류로 구분하는 이야기를 한다. 참... 과거엔 복잡했구나 싶다. ........ 그래서 ES6부터 크게 3개로 나눴구나...
화살표 함수 부족한 사람은 여기서 익혀가면 좋고... 생성자도 없고 프로토타입도 슈퍼도 agruments 도 없는 그런 슬픈 친구 하지만 깔끔한친구. 가장가까운곳에 척을 두고있는 친구... 언제나 생각하지만 얘 없었으면 코드 많이 너저분해지지 않았을까.(빌드기준) 뭐, 메서드의 부작용은 this 위치만 잘 알고 함수 생성 표현도 메서드쪽에 간단한 친구도 생겼으니 적재적소에 뭐든 잘 사용해야한다는 생각이 들었다.
아 근데 이 앞장에 클래스에서 생성자 없이 쓰면 사파리는 왜 안되거지? 크롬 72 이하에서도 안되던데... 미구현이 확실한건지 뭐라고 딱 말을 못하겠는게 아직 안되는게 많나보네? 음... 이건 좀 더 상세하게 알아봐야겠는데 요즘 잠깐잠깐 이 책에서 듣는거 말고 시간이 별로 없군... 음 Rest 파라미터, 함수에 요즘 새로나온 (이건 좀 아닌가)
급 회고 ???? 실은 읽는게 너무 느린거같아서 이 책 천페이지 넘는데 어느 세월에 하나하나 나눠서 읽고있어... 기존에 책 읽던 방식대로 훑고 넘어가고 아 전에 저기에 뭐가 있었는데 하고 인덱스 기억하는 식으로 해야겠다... 핵심적인 부분은 일단 차근차근 짚어서 넘어갔고, 이번달에 스스로 정한 CSS도 보는 진도율과 목표치에 부합하지 않으니 다시 기존 방식으로 돌아가야곘다. 하나 하나 짚어보고 생각하고 적자니 너무 오래걸렸다. 되풀이 하면서 생각해봐야지. ㅠㅠ
- static을 메서드명 앞에다가 잘못쓰면 에러도 안나고, 동작이 안되는 경우가 있네.. 아무래도 해당 클래스 내에서만 써야하는것 같은데 이렇게 잘못 제한을 잡아 막은 경우에는... 동작 안하는 건에 대해 어떻게 디버깅 하면 될까나... 흠~..... static 코드에서 안써야지.....에러로그로 안남네. - ref는 사용법이 뷰랑 비슷한듯. - 리액트 공식 한글 문서 11장 12장 내용 왜이렇게 헷갈리게 써놓은건지 모르겠네 자습서에 틱택토 해보면 해결되고 이해할 수 있는 내용을 꼬아놓은 것 같다. A는 B다 하면 되는데 A는 블라블라해서 와하니 B한걸 우리는 B라 하고, A' 라고 하는걸 그럼 이제 B' 라고 부를 수 있게 된거다. 라고 써둔거 같아서 보는데 너무 힘들었다. 공식문서는 뷰가 진짜 보기 편했다.
- 리액트에서 그럼 리플로우랑 리페인트(리드로우) 대신에 종합적인 리콘실리케이션(재조정 or 조화과정)으로 납득하고 넘어가면 되는것인가. 갈아끼우면 끝인가... 나는 헷갈린다 -ㅅ- ... render 함수가 대충 이전과 이후 컴포넌트 돔 트리 꼬라지를 보고 다른 부분이 있으면 그부분을 교체하는건 알겠는데... 복합이야 이거? 진짜? DOM 자체는 문제가 없는데 리페인트 할 때 어떤걸 하는진 까봐야하나..
아무튼 성능면에서는 다들 짱이니까 쓰고있겠지? 맨날 편하다고 뷰만 쓰다보니 거의 생각없이 코드짜곤 했네. 최적, 효율, 그런걸 만들었나보다. 하고 지금은 생각 중... (그래 그거 가상돔 그거, 뷰도 있는 그 가벼운 버춸돔 그거)
- 아직 그리고 JSX가 익숙하지 않다. 한달쯤 지나면 익숙해질 수 있을까? 흠... 이제 곧 한달인데... -ㅅ- 책산걸 꺼내서 훑어보자. 옛방식을 쓰고있네... ㅠㅠㅠㅠ 전자책이면 전자내용도 업데이트 되면 좋겠다
var(--변수명); 써서 잘 만들고, 동작하나 확인하자. 마지막으로 필터까지 먹이면 완성~ 아. 클래스 h1 ... JS 글자까지 먹이기 ^^
CSS 변수를 업데이트 해보자꾸나.
도쿠먼트 쿼리설랙트 올~ (.countrols input)~ 😓 ... 해서 각 컨트롤러의 값을 받자. 이것은 유사 배열 객체요. 상속받은 메서드들이 참 많다. 핸들 업데이트를 하나 만들고, 반복을 돌며 변경되는경우, 핸들을 건드리면 이벤트를 받는 콘솔을 찍어보자. 드래그 해도 체인지 하고 싶으면 마우스무브로 바꿔라. 난리난다.
😭 아무쪼록, 근데 이 CSS와 input을 바인딩해서 연결을 해야할 것 같은데 어떻게하느냐가 중요하니까 dataset을 통해서 돔에 data-어쩌구저쩌구로 하면 에 저장해둘 수 있는 공간이 생긴다.
... 아 똥같네... 예제가 ㅠㅠ 아무쪼록, suffix 를 하나 만들어서 사이즈를 받아보자. 없으면 || '' ; 해서 초기화 하는걸로
아무튼 사이즈를 다 가져오고 아닌경우 안받아오니 좋은 예제이다.
가지고온 네임을 이용해서 document 의 set property를 위에서 만든 변수명으로 지정한다. 이런식으로 바뀌는 변수명을 업데이트 할 수 있다.
20장 - 엄격모드 : 🙂 적용 할거면 다하고, 부분적으로 섞어 쓰지말고, 린트를 쓰는것도 좋다.
21장 - 빌트인 객체 : 여러가지 객체의 분류를 다루어 주었다. 빌트인 객체, 원시값이 있는데 왜 있는지, 전역객체(새로나온 globalThis), eval은 쓰지말고, 암묵 전역의 경우도🙂... 음...😓 개인적으로 사람들이 안썼으면 좋겠다.
22장 - this ✨디스! 이것! 이건... 이거다! 이 챕터도 중요한 챕터다. 자기자신! 식별자가 없으면 식별할 수 없잖어... 그치만 함수의 경우 기명 함수 표현식으로 재귀 식별해도 되긴하는데 쫌 모양새라고 해야하나... 어렵잖아... 사람이 보기에... 그래서 클ㄹㅐㅅㅡ..... 함수호출 방식에 따라 정적(렉시컬) 스코프에선 this 바인딩 시점이 좀 다른거랑... 뭐... 프레임워크 다루게 되면 일반함수 호출은 거의 안할거고 메서드나 생성자로 많이 쓰게되니, 오해하는 경우가 있다. 호출 방식에 따라 바인딩 되는곳이 다르다. 아. bind는 은근 꽤 많이 쓰인다... 그러니까 마지막의 표 주의깊게 볼 것.
23장 - 실행 컨텍스트 : 중요한장이다. 이 실행 컨텍스트라는 친우의 역할을 알려준다. 전역 객체 생성(객체환경레코드) -> 전역 코드 평가 -> 전역 코드 실행 -> 함수 코드 평가 -> 함수 코드 실행의 과정을 익히고 실행스택, 스코프, 렉시컬환경의 이해도를 높여주었다.🔥🔥🏓 렉시컬 환경은 - TL;DR... 컴포넌트로 구성되어있고, 전역환경레코드, 객체환경 레코드랑 선언적 환경 레코드 이런건 첨듣네 ㅠㅠㅠㅠㅠㅠㅠ 얼마나 이 무지했단말인가 ㅠㅠ그냥 메모리 저장인줄알았지ㅠ레코드가 있었구나ㅠ ES6에서 그럼 선언적 레코드 환경이 새로 추가된건거구나. let const 를 위해서.. .. ㅠㅠㅠㅠㅠㅠㅠ그림 23-24 ㅠㅠㅠ 참 친철하네..
24장 - 클로저 : 얘도 중요하잖아... 아니 이책에 안중요한게 없는 것 같다. 근데 앞에 실행컨텍스트랑 렉시컬 환경 험한거 지나와서 정말 책에 써있는데로 쉽네. 그림 24-1을 참고하자. 이전 실행컨텍스트 장에서 나왔던 내용을 환경을 추가해서 더욱 잘 설명하고 있다. 외부함수보다 ㅁㅁㅁㅁ가 긴 내부함수. 이러한 중첩 함수가 클로저. 캡슐 정보화 은닉의 경우, 직접 접근하면 안되는 정보를 대표적인 우리들의 모던한 예제인 makeCount 함수로 표현하고 있다. 이건 모던 자바스크립트 튜토리얼에도 나오는 좋은 예제. 거기에 더해서 두번 호출하는 딥다이브를 보여주는군...🥺 두번 호출 하면서 생기게 되는 자유변수 공유 문제 해결을 표현하고... predicate MDN: 클로저는 함수와 함수가 선언 된 렉시컬환경의 조합이다. 😇
25장 - 클래스 : 문법적 설탕인가? ... ㅇㅇ 난 설탕이라도 맛있으니 새로운 객체 생성 방법으로 필요한 절차라고 생각했다.🙂 418쪽에 4번이 최근 당한 내용이네... 암묵적으로 strict 적용 되는 부분.😓 클래스명에 파스칼 케이스는 쓰는것을 권장 함.
함수로 평가되는것과 호이스팅이 되는구나. 다른 언어의 교육에서 붕어빵틀로 표현하... 는 클래스... 인스턴스 생성 안하면 무용지물이니까 new 연산자 없이 쓰면 ... 음 그렇군...🙂
클래스 문법에 익숙해지면 프로토타입으로 했던것보다 손쉽게 구현할 수 있구나. Prototype 메서드와 Static 메서드의 차이점을 이야기하는구나.. Static 공간이다 보니까 내꺼만 쓸 수 있군. Math.max 같은걸로.
옹...✨클래스 몸체에 정의하는 방식이 ....... 생겼는데 25-69예제 super는 여기서부텉 다시 좀 봐야겠네 졸리나 ㅠㅠ...
오, 이곳 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'))
아무튼 스태틱하게 객체가 가지는 것도 만들 수 있다는걸 보여주고... 간단하겐 그 객체의 프로토타입 체인에 속하지 않은 친구들이라 연결해서 상속받아 호출할 수 없다는것. 이뮤터블만 ㅇㅇ(책사서 읽자)가능하다는것 등등. 좋은 장이였다.
제곱을 바탕으로 설명하고 있다. a 를 2번 곱하면 제곱, a * a * a 하면 세번 곱하니까 세제곱
pow 이란거는 power의 약어 같은데... 음.. 본문을 보면 아무튼 2 를 2 번 곱하면 4가 나올거고 2를 4번 곱하면 16이 나오는 결과를 만들려고 pow 라는 함수를 만들려고 하는 것 같다.
첫번째는 반복문으로 뺑뺑이 횟수를 채우는 것이고
두번째 예제는 스스로를 한번 결과 출력하는거 이외에는 자기 자신을 횟수(n)만큼 실행 시키는 예제이다.
n - 1 은 왜 나왔는가, 생각을 해 보면 이걸 하지 않으면 자기 자신에 빠져서 무한히 돌지 않을까 생각을 하며 아래 플로우를 보고 한번 그려보자.
n의 숫자는 1.~4. 순서대로 숫자가 줄어가며 반복을 할 것이고, 최종적으로 n == 1이 되었을 때 남은 결과를 돌려주게 된다.
처음 중첩하는 최대 개수는 재귀 깊이 라고 하고, 이 깊이는 너무 깊으면 엔진에서 제한하니 적당히 쓰자. (아, 이거때문에 가끔 브라우저 멈추면서 Maximum call stack size exceeded 났었지 ㅋㅋ)
- 실행 컨텍스트와 스택
좀 뭐라고 해야할까 중요한 내용이 나오는데... 함수 실행 절차란 무엇인가? 하면서 = (실행 컨텍스트)는 함수 실행에 대한 세부 정보를 담고 있는 내부 데이터 구조. this 값 등이 상세 실행 컨텍스트에 저장된다.
함수가 하나 호출되면 하나의 실행 컨텍스트가 생성 되고...... 중첩 호출이 있으면....!! 현재 함수가 일시 중지되고, 실행 컨텍스트 스택에 자료구조에 쌓이고, 중첩 함수가 호출되어 실행 되고, 실행컨텍스트에 일시 중단 된 함수를 다시 꺼내와서 중단 된 함수를 실행한다. 라고 써있네... 그려보면 되는데,
생각해보자쌓인 친구들이 실행 되었다
실행 종료 후(쌓인) 재귀의 깊이가 3 이었던 것을 볼 수 있다.
깊이가 너무 깊은 무한 루프를 돌면 아까 위에같은 에러 메세지가 나며 브라우저나 프로그램이 멈출 수 있다. = 메모리사용에 유의해야한다
반복문 기반으로 하면 메모리가 절약된다는걸 보여주고 있다. 실행 컨텍스트에 사용되는 메모리가 줄어드는걸 보여준다.
마지막에는 결국 가독성이 좋은 코드와 유지보수, 성능이나 실행컨텍스트 관리 등 종합적인 관점에서 적절하게 재귀를 쓰고, 반복문을 쓰고, 해야한다고 설명 중... -ㅅ-ㅎ
- 재귀적 순회
재귀적 순회란 무엇일까? .. 재귀나 순회나 같은거 같지만 ㅎㅎ 본디 태어난 곳으로 돌아가는 뺑뺑이라.
샐러리 합을 구하는 프로그램의 예시를 보여주며, 구조를 설명하고 있다. 코드만 보면 잘 안와닿으니 밑에 설명을 같이 보면서 그림을 보며 따라가면 된다.
리듀스랑(합계산), object.values를 써서 develpment 아래에 있는 sites, internals 이외에 어떤 이름의 부서가 하위에 nested로 붙더라도 접근 할 수 있도록, 해준다.
- 연결 리스트 (링크드리스트)
빠르게 삽입 / 삭제를 해야할 때 사용하는 자료구조.
배열의 단점은 스스로가 인덱스(순번)을 가지고 있기 때문에 이걸 다 갱신해주고 바꿔줘야한다면
링크드리스트의 경우에는 너와 나 사이의 연결 고리만 끊어주면 된다.✨ 손에 손 잡고 죽 연결 되어 있다가 가운데 딱 끊고 다른 친구와 손잡으면 되는 그런 구조이다. 옆사람이 누구인지만 기억하고 있으면 되는 삽입/삭제가 편한 구조.🥺
뭐.. 자료구조는 설계에 따라 적절하게 사용해야 한다고 설명하고 있으니, 고민을 많이 해 보자. 재귀를 쓸 곳과, 반복문을 쓸 곳.
가독성을 어느정도로 올릴 까. 복잡하게 반복을 할지. 데큐를쓸지, 큐나 스택을 쓸지, 링크드리스트를 쓸지.
개발의 설계는 다양한 길을 보여주는 것 같다.
- 나머지 매개변수(Rest parameters)와 전개 문법(Spread operator)
🥺자바스크립트는 역시나 구렁이 담넘어가듯 은근슬쩍 인수에 제한을 두지 않고 받으려면 다 받을 수 있는 구조를 사용 할 수 있는데, 이게 나머지 매개변수라는 부분이다. 본문의 번역과 원문을 잘 보면, Rest parameters와 Spread operator다. 그래서 한글만 적지 않고, 제목을 바꾸어 영어를 추가해서 적었다...
일단, 나머지매개변수 "..." 부분은 매개변수, 즉, 파라메터라는것을 기억하고 본문을 읽으면 이해에 도움이되고 좋을 것 같다. 본문의 내용을 따라가보면 기본적으로는, 함수에 받고자 하는 (a, b) 만 해두면 이것만 이용해 계산된다. 😰
레스트 파라메터 라고 불리는 점 세개로 불리는 ... 라는 말줄임표와 같은 이 친구의 특징은 위에서 처럼 추가로 더 넣고 싶은 경우, 가변의 인자를 넘기는 경우에 대해 지원을 할 수 있도록 도와준다. 즉, 남은 매개변수를 줍줍 주워 모아서 넘겨보내는것이 가능하다.
두번째 예시를 보자.
...args
이것에 집중하면 된다. args 는 arguments 의 줄임말이니까 매개변수들을 모아서 함수에서 쓸 수있도록 도와준다.
특징은 맨 마지막에 있어야 하는것을 잊지 말자.
하단에 나올 친구와 약간 반대되는 속성이니 나머지 매개변수는 명시적으로 추가 파라메터들을 쓸 수 있도록 해 준다. 하고 기억하고
바로 밑에 나오는 arguments 변수 이것과 헷갈리는 경우가 있는데
- arguments 변수
분명 함수에는 아무것도 받는다고 선언 하지 않았다.
그렇지만 본문 코드, 선언식 아래 11번째 줄, 14줄을 보면 받을 수 없는데 넘기고 있다. 과거에는 이런 식으로 그러니까 묵시적으로 넘어오면 받아서 사용 했다고 설명하고 있다.
그리고 에로우 함수는 이게 없다는걸 알아두자.
아 그리고 args(ie6도 지원) 에 와서 뒤늦게 ...(rest params..)이 비교적 최신 문법이라고 설명 하고 있는데, 이렇게 써도 될지 안될지 감이 안올때는 이 사이트를 참고하자.
각 브라우저별 지원여부를 판단할 수 있다. Date relative 탭을 누르면 더 상세하다.
rest parameters 지원여부
한국의 개발자라면 ie를 미워해도 좋을듯. 그래도 나중에 보통은 babel 로 ES5 급으로 변환해서 쓸테니 괜찮을지도.
ㅠㅠ..
- Spread 문법
아니 위에는 한글로 전개문법이라 해놓고... 밑에선 Spread 라고한다. 코드에서 뭐가 달라? 하지만 잘 보면 아차! 싶을것이다.😳
함수 선언하는 부분에 매개변수로 넣은것과 달리, 이것은 함수를 호출할 때 ... 을 넣는 문법이란 것이다. (위 그림에 아래에 해당)
arr이 인수 목록으로 알아서 길이 조절해서 최대 배열까지 Spread(좌아아악 펼치는 빵에 버터를 발라 펴듯 전개!) 된다고 한다.
배열을 받는 함수가 아니라, 인수를 받는 함수에서 이터러블한 배열을 하나하나 접근해서 풀어서 넣어야 하는 일을 줄여주었다.
Array.from 으로 유사객체를 Array 능력을 빌려와서 이터러블하게 폼에 맞춰 바꿔주는것에 대해 설명도 하고 있고..
미묘한 차이가 있다는것을 설명하고 있는데, 말을 꼬았지만, 정리하면 Spread 써야할 시점에서 DOM Element List (<div>나 <li> 줄줄묶인 친구들)같은 유사 배열 객체를 넘겨서 처리해야하는 함수를 쓸 때 Array.from으로 하면 된다는 소리이다.
- 새 배열/객체 복사하기
지난시간에 Object.assign() 이 기억나는지 묻고있다. 전개문법(Spread)으로 같은 효과를 낼 수 있다.
상단코드는 배열
하단코드는 객체에 대해 설명하고 있는데,
1. 상단코드 배열을 보면 2번째 줄에서 전개(Spread)로 풀어서 arrayCopy에 arr 내용을 빵에 바르는 잼처럼 푹 떠서 새로 해체해서 펴 발라 풀어 넣어주었다. 그러니 당연히 6번째 줄에서는 내부 내용을 비교하면 같은 내용이고 9번째 줄에서는 서로 다른 배열이니 틀리다고 나온다.
최종적으로 12번째에서 4를 넣어서 배열을 참조하는 메모리의 주소가 다른 것 까지 확인 사살을 하고 있다.
2. 객체도 위에랑 배열이랑 같다는 샘플 예제이다.
그렇기 때문에, 복사할객체 = Object.assign(빈 객체에, 기존객체) 가지고와서 할당하는거나, 복사해서쓸배열 = Object.assign(빈배열, 원본배열) 하는것 보다 짧게 쓸 수 있다고... 번역이 안되어있네.
옛날엔 6개였는데.... Symbol 때문에 7개로 늘었다. 심볼은 진짜 특이한 녀석이야. 아직도 적응 안되긴 하는데, 모르는 사이 조금씩 쓰고 있었고.. 조만간 익숙해질 것 같다고 생각한다.
객체에 대해서도 설명 중...
객체에 대한 개인적인 생각은 늘상 객체를 사용하면서 느끼는 거지만, 다른 언어에 비해 정말 간편하고 뭐든 구겨넣을 수 있어 좋지만, 잘못쓰면 더럽고, 다른사람도 알아보기 힘든 곤란한걸 만들 수 있기 때문에 주의해야한다는걸 느낀다.
- 원시값을 객체처럼 사용하기
해당 챕터에서는 설명이 좀 긴데, 한줄요약하면 원시값을 잘 쓰기 위해 (잘 가공하기 위해) 도와줄 수 있는 방법을 고민했고, 래퍼 객체(원시값들을 서포트하는... 즉 감싸는 랩으로 감싸듯 둘둘 래핑하는 래퍼객체)를 붙이게 되었다.
그러니까, 중간 처리는 임시로 객체이지만, 최종적으로는 원시값으로 되돌려주니 이런 제목이 붙은 것 같다.
하단에 ⚠️부분에서 생성자로 new(또 새로운 객체 생성) 키워드 써서 "신규객체"로 만들어 쓰지 말라고 경고한다. 원시값 반환할까? 생각하지만 그게 아니라 타입을 찍으면 어쨌든 신규로 만든 객체이니까... 이부분만 주의하면 될 것 같다. ⚠️⚠️ 두번째로 나오는 부분은 한번 고민해보자. (=> 별로 조작할 일이 없으니까 메서드도 안만든거겠지?)
- 숫자형
숫자형에 대해 설명을 하고 있다. 다른 언어에서 하다 온 사람은, 혹은 처음 접하는 사람은... 아 범위가 매우 크긴 한데, 일단 범위가 있구나. 정도로만 이해하고 넘어가도 좋을 것 같다.
그리고 더 큰 숫자를 받기 위해 최근 추가 된 bigInt라는 자료형도 추가되었다고하니, 나중에 알려준다고.
나도 별로 적을 내용이 없으니... 위 블로그 혹은, 구글검색으로 "진법에 대해서" 라고 검색해서 참고하도록 하자. 우리 사는 세상은 10진법, 컴퓨터가 생각하는 세상은 2진법. 정도로 요약. 색상표현은 16진법을 주로 쓰고.
- toString(base) 이거 이거, 설명이 좀 갑자기 튀어 나오긴 하는데, 위에랑 연결해서 말하면, 지금 튀어나온 이 항목은 숫자형의 래퍼객체 중, toString 이라는 녀석을 설명하고 있다. 그러니까 숫자형을 도와줄 수 있는 친구이며, (base)값에 따라 진법을 변환 해 줄 수 도 있다고 설며 중. (base의 기본값은 우리가 흔히 접하는 10진법이라고 써있군.)
⚠️숫자는 점 두개! 숫자는 점 두개!!!!! 아니면 괄호로 묶어서 호출
본문에 잘 설명을 해 두었으니, 실수하지말자... 실수랑 헷갈리는 실수.
- 어림수 구하기
아 이거 정말 많이 써야하니 두번봐도 안 부족하고 기억해 두면 좋은 래핑객체의 메서드 친구들이다 ㅠㅠㅠㅠ 정말 고마운 친구들
소수부 자르고 정수부만 남기는 trunc 는 ie에서 안먹으니까 폴리필 만들어서 처리할 것.
if (!Math.trunc) {
Math.trunc = function (v) {
return v < 0 ? Math.ceil(v) : Math.floor(v);
};
}
별건 없다. 없으니까 Math 객체에 추가해줘서 잘 돌게 해줬다고 보면 된다.
- 부정확한 계산
바로 위에서 어림수 구하기 많이 쓴다고 했는데, 그게 이거 때문이다..... ㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠ....
ㅠㅠㅠ 왜 그... 늘 묻는것이 소숫점을 더하면 계산이 틀려요? 인데, 다른언어에서도 발생하는 실수형 계산의 문제이다.
'문자' 를 나타내는것이 별도로 존재하지 않으니, 그냥 한 글자만 있어도 문자 배열의 가장 조그만한 배열을 쓰는구나. 하고 이해하면된다.
자 본문에 보면 3가지 따옴표 뭐 표현 방법이 나오는데, 백틱을 요즘 많이 쓰니까, 백틱표현을 어떻게 하는지 눈여겨 보면 도움이 많이 될 것이다.
백틱은 다른말로 백쿼터 라고도 부르기도 한다. 나이드신분들은 리눅스 백쿼터 백쿼테이션 이라고 부르시더라.
- 특수기호
이부분도 꼭 한번 읽고 넘어가면 좋다. 캐리지 리턴이란것이 있는데, 일단 고대의 유물 타자기라는 전설적 기계에서 나온 유물이라 요즘은 맨위에 줄바꿈만 해도 잘 된다고 생각해도 무관하긴하다. ... 간혹 리턴을 안하면 출력 라인이 꼬이는데, .. 일단.. 아직까지 브라우저에서 본적은 없는 것 같다.
뭐 나머지들은 특수문자를 그냥 쓰면 입력이 안되니까 저렇게 써야한다고 가이드를 해 준 부분이니 기억해두자.
- length 는 프로퍼티인거도 기억해두면되고... (함수아니니까 실행하려 들지 말 것)
- 특정 글자에 접근하기
문자 배열이라고 했으니까, 배열 접근하듯이 접근하고, 이터레이션(뺑뺑이)돌릴 려면 돌릴 수 있다는 내용을 설명 중. charAt가 좀 더 안전성있긴 하다는 점. 기억해두면 되고...아 이건 뭐 구현 목적에 따라 다를 것 같은데....
undefined 에러가 나야하면 [] 로 접근하자.
- 문자열의 불변성
문자배열로 한번 할당해두면 직접접근해서 수정이 불가능하다는걸 이야기한다.
- 대소문자 변경하기
영어의 대소문자를 변경할 수 있는 메소드를 2개 제공 해주고 있다.
- 부분 문자열 찾기
substring 이라고 하는데, 몇가지 있으니 한번 보고 가자.
- str.indexOf
못찾으면... 아~ 나는 못찾았으니 인덱스가 -1이다 하고 반환해주는 친구
indexOf(찾아야하는 문자열, 시작위치 position) 라고 볼 수 있다. 기본 위치는 당연히 0부터 시작한다. (글자보다 앞에 커서위치로 보자.)
str.indexOf(searchValue[, fromIndex])
아, 엠디엔엔 위에처럼 되어있다. (뒤가 옵셔널)
- 커서가 뒤 부터 시작해서 찾아들어가는 lastIndexOf 도 있다.
- 비트연산자를 사용한 기법 (부분 일치 문자열)
이건 잘 안쓰이긴 하는데, ~str.indexOf 로 들어가서 -1 이상의 값으로 떨어지면, 일치하는 문자열이 있다는 소리고, 위치도 알 수 있다.
-1이면 시작부터 맞다는 소리.
0이면 어디도 없다. + 문자열이 긴 경우 오류가 발생할 수 있음.
- includes
많이쓴다. 있는지 없는지만 받을 때 쓴다.
- startsWith
잘 안쓰긴 하는데, 정규표현식 쓰기 싫을 때 쓴다. 시작하는 글자가 이게 맞는지 할때.
- endsWidth
마찬가지다. 끝나는 글자가....ㅎ
- 부분 분자열 추출하기
아주 많이 많이 쓰인다. substring, substr, slice
본문과 다르게 ㅋㅋㅋ 메소드 길이순서대로 나열해보았다.
slice - 범위 지정 반환인데, 끝부분을 위치를 지정하면 (양수인 경우 얼마나 선택해서 반환할지이고, 음수면 끝에서 뒤부터 해당위치까지 반환하는 특징이 있다.) 끝부분을 지정 안하면 끝까지 간다.
substr - 시작 포지션부터 지정한 길이(음수포함)만큼 추출하는 친구
substring - (음수는 0으로 취급하는 특이한 녀석) slice 와 비슷한데, end에 음수를 사용못해서 뒤집어 역선택이 불가능한 부분이 있는걸 알면 쓰기 쉽다. 실수나 오동작을 안하려면 이쪽을 개인적으로 요걸 자주 쓰고있다.
- 문자열 비교하기
문자열은 아스키 코드에 대응된다고 예전에 한번 쓴 것 같은데......... . . . 아 요즘은 유니코드....
같은 영글자의 대문자가 더 크단걸 기억해두면 좋고...
유니코드 전환도 가능하고
- 문자열 제대로 비교하기
부분은 지금은 좀 넘어가자. 다양한 표기법이 있고, 각 국가별로 다룰 내용도 참 많다. localeCompare 는 지금보다 밑에가서 배열 메서드 부분에서 한번 더 다루자.
- 심화 서로게이트 쌍(Surrogate pair)
스킵. 일단 간략하게 문자 표현의 사이즈 문제로 표시 불가능한 문자에 대해 좀 더 많은 부분을 쓴다. 정도로 하고 넘어갈 것.
자세하겐 못파고 있는데, 일반적인 문자는 길이가 1인데, 저런 서로게이트쌍에 포함되는 글자는 길이가 2가 되어 출력된다.
서로게이트쌍으로 표현한 기호라서 그렇다는데... 스킵! 자세한게 알아보고싶으면 직접 찾아봐야할 것 같은데,.. 아.. 나 몇년전에 분명 이 문제 때문에 QA에서 20글자 카운트 어쩌구 안들어간다고 뭐라 그래서 어떻게 해결했던거 같은데 기억이 잘 안나네. (였는데 하단에 추가 메모 해 둠.)
- 발음기호와 유니코드 정규화
유니코드 UTF-16의 빈 부분을 추가해서 데코레이션 하여 발음기호를 만들고 조합을 하여 하나의 문자로 만드는 부분인데,
윗점 아랫점 순서를 다르게 붙이면 다르다고 인식하니까 (보기엔 같은데말이지) 노멀라이즈(일반화)해서 같은건지 보자는 거잖아. 써로게이트 쌍보다 낫네.
>>> 써로게이트상을 알기 위해 유니코드를 친절하게 가르쳐주는 국민대 소공 강승식 교수님의 강의를 보고와서 적겠다. 그냥 넘어갈 사람은 아래까지 쭉 넘어가도 좋다. 와 이런걸 유투브에 올려놓아주시다니 너무 감사하다. 정말... 덕분에 유니코드에 대해 레벨업 한 느낌.. 빅데이터나 머신러닝, NLP 등 CS(computer science)기초 지식을 다루는 추가적으로 다른 강의들도 너무 좋아보였다. 시간날 때 마다 꼭 봐야지
그래서 서로게이트쌍인지 써러게이ㅌ쌍인지 (본론은 여기부터) 위에서 BMP 영역 중 (D8-DF) 영역을 써로게이트 영역이라고 하는데 2048개로 미리 빼놓았고. SMP 판에는 1024*1024 해서 100만자(1,042,576)가 정의 되어 있다. -> 요기서 100만자를 2바이트의 쌍으로 표현 하고 싶다는게 요지인데, 아 미쳤다 ㅋㅋㅋㅋㅋㅋㅋ 와 이게 이렇게 되는구나!
->> ㅎㅎ 위에서 미리 빼놓은 2048개 ㅋㅋ BMP 영역을 둘로 쪼개서 앞부분을 high 서로게이트 라고 정의하고 1024개 D800 - DBFF 뒷부분을 low 서로게이트 라고 정의하고 1024개 DC00 - DFFF 나눠서 SMP영역에 대응 되는 코드를 불러 오도록 하는 주소부 할당 기법이었던것이다...
그래서 SMP 영역에
첫번째 글자는 D800DC00
두번째 글자는 D800DC01
이런식으로 소환해서 백만자를 표현할 수 있으니... SMP판의 주소를 4바이트(16비트"쌍")로 만들 수 있어서 ㅋㅋㅋㅋ 와
21비트를 (계산편하게 하나 버리고) 20비트로 만들어서 + 12 비트 더해서 32비트 4바이트 조합으로 대응한다는게 원리구나.
그러니까 JS에서 반으로 쪼개면 SMP영역에 도달할 수 없으니 정상적인 글자가 안나오지 -ㅁ-.... 길이는 당연히 2개짜리가 되어야 정상이고
따라서 본문에 있는 사용빈도가 낮은 상형문자 중국어를 예시로 한번 해체해보면 이상한 기호가 출력된다는걸 말하고 있다.
넘어갈 사람은 여기까지 넘어오면 된다. 원문에서 어렵게 써놓아서 직접 찾아보게 하다니 속이 시원...
다음 페이지로 넘기자.
- 배열
배열 어레이. 배열 생성방법엔 늘 두가지가 있는거 익숙하니 넘어가고... 인덱스를 기반으로 하는 접근 방법에 설명을 하고 있다.
컴퓨터는 주로 숫자에 대한 인덱스 순서를 0부터 시작하니까 이제 좀 자연스럽게 익지 않았을까.
본문에서 배열 선언 방법에 대해 설명에 대해 알려주고 있다. 생성자로 초기화 하는 방식은 잘못 사용하면 문제가 생길 수 있으니 유의.
하단에 new Array() 라는 부분에서 나올텐데 예를들면 공간에 대한 초기화만 하고 주소부 데이터를 할당 안하면 길이는 2인데 내용은 접근하면 데이터를 할당 안했으니 언디파인드가 없는 문제가 생긴다. 자바나 다른 언어에서는 문제를 뾰롱 뾰록 내겠지만...
가능하면 90% 이상은 대괄호로 그래서 선언하는거같다.
넣을 수 있는 자료형은 제약이 없다는거 알아두고, trailing 쉼표는 일단 저렇게 붙일 수 있지만 특정 팀이나 회사의 룰에따라 제거하는게 lint로 적용될 수 도 있으니 그냥 이렇게도 쓸 수 있다. 하고 넘어가자.
- pop·push와 shift·unshift
배열 이야기하면서 큐 나 스택 이야기를 하고 있는데, 자바스크립트의 배열은
데큐다. ( 간단하게 요약하면 스택 + 큐 = 데큐 ) -> 고민이 되고 잠시 하늘을 보고 한숨이 들면 자료구조에 대해 알아보는게 좋다. 혹은 일단 넘어가거나 본문내용을 종이에 따라서 그려보면 된다. 잘 설명해주고 있긴하다.
왜 저걸 밑에 적어놓아서 처음보는 사람 헷갈리게 하는지ㅎ...
일단 큐나 스택에서 사용하는 방법을 배열에서 사용할 수 있다는걸... "갑자기!?" 설명하고 있다.
큐 -> 뒤에서 밀어넣는(끝에 데이터를 추가흐는) 푸시와 맨 앞에 (인덱스가 0인 숫자)를 제거하는 시프트로 구성
스택 -> 위에 나온 뒤에서 밀어넣는 푸시와 끝에 넣은 친구를 팝~ 하고 빼주는 팝이 있다. pop인지... 폽인지 퐙인지 알아서 읽...
그럼 하나 빠졌는데 맨앞에 역으로 (인덱스가 0인 숫자)에다가 꾸겨밀어 넣어주는 것이 있지 않을까?
그래서 unshift 라는 언시프트가 있다.
- 배열 내부 동작 원리
차근차근 읽어보면 별 문제 없을 것 같다. 참조를 통해서 배열 객체가 있는 부분을 하나 더 만든거니까 둘이 같은 배열 데이터 주소 영역을 참조하며 바라본다는 내용과 중간에 있는 내용은 배열을 쓸데없이 객체처럼 활용해서 오동작을 만들지 말라고 경고하는 내용이다.
- 성능
아... 이건 정말 그려보거나, 공간박스 (이삿짐박스)에 맨 밑에 들어있는 책이 0이라고 생각하면 미친듯이 공감하면서 이해야가 쉬워진다.
본문이 잘 설명 해두었다.
- 배열 친구의 반복문
for 사용법을 복습한다. 배열은 in으로 돌리지 않는걸 추천하는데, 쓸 때는 써야한다. 나중에 거품물며 싸우지말자.
앞에서 객체할때 말했는지 모르겠지만 말버릇처럼 말하는 팁인데,
오브젝트를 오브로 돌리려 하지말고 (안도니까),
인덱스가 있는 배열(유사배열포함)을 인으로 돌리려 하지 않는다면 평온을 얻을지어다.
...
너무했나?
- ‘length’ 프로퍼티
멀쩡한 프로그램이라면 length를 읽는 곳에만 쓸 것 이다. 쓰기가 가능하지만.. 싸우지말고 지양하면 괜찮을거 같기도하고
아 맞아 근데 arr.length = 0; 이라는 코드를 만났을 때 당혹감이란..ㅎㅎ;
보통은 배열 참조하는 변수를 []로 새로 할당해서, 기존에 배열이 들어있는곳을 알아서 청소하고 외딴섬으로 가비지로 만든다.
언제나 사람의 취향차이는 존중하자.
- 다차원 배열
설명이 짧네, 우리 사는 세상의 위도 경도 같은걸 저장할때 쓰면 좋다.
2차원 이상의 배열이다.
- toString 배열을 빠르고 깔끔하게 출력하는 방법이다. 가끔 오브젝트가 끼어있으면 출력안되기도..
아무튼 배열 부분은 끝! 메서드로 넘어가보자.
- 배열과 메서드
에 대한 내용 중 요소 추가·제거 메서드 는 했던 내용이고
아.. 배열의 메서드를 못쓰는 경우가 있다. 본문에서 중간에 유사배열인 경우인데, forEach 같은게 돌고 싶어도 안돌때가 있다. 브라우저에 따라 될 수 도 있던가? 나중에 어딘가에서 이야기할텐데, 배열 객체에서 빌려와서 렌탈을 한다거나하는 식으로 순회할 수 있긴하다.
( Array 객체가 어디까지 기본적으로 탑제되어있는지... 확인을 해야.. isArray 같은것도 .. 나왔으니, 유사 배열여부는 쉽게 체크 되겠지 )
- splice
delete 랑 설명하면서 문제점을 보여주며, splice를 씁시다. 하고 강의 중이다.
원본이 되는 배열을 재설정하고
- slice
이 친구는 원본이 되는 배열은 보존하고 새로 값을 만들어주니, 자른 후, 원본을 덮어쓰거나 (가능하면 안하는게좋지), 잘라 둔 값을 가공된 내용이라고 잘 이름을 지어둔 변수에 담아서 사용하도록 하자.
- concat
원본이 보존된다. 연결하고 합치고 내부에 배열이 있으면 복사도해서 새로 가공해서 잘 쓸 수 있도록 도와준다. 잘 가공해서 이름 잘 지어서 담아서 써주자.
유사 객체는 사용에 유의...
거기다가 Symbol.isConcatSpreadable 값이 true 라면 프로퍼티 값을 주워간다고 써있긴한데, 이거도 잘 만들어진 유사 배열이어야지 동작 안하기도한다. (쉽게말하면 0으로 시작하는 인덱스 같은 숫자로 시작하는 key가 있어야한다.)
안되는 짭 유사 배열
저런 식으로 잘못 만들면, empty 같은걸 만들어서 참조 오류같은 문제를 만들 수 있으니 잘 합치자.
- forEach 로 반복하기
배열을 돌면서 출력하자. 본문의 예제를 따라 해 보자.
- 배열 탐색하기
- indexOf, lastIndexOf와 includes
indexOf랑 라스트인덱스 오브는 검색 순서 차이 뿐이고,
결국 값이 있으면 인덱스 위치표시해주는 좋은 친구, 없으면 -1
인클루드스는 포함되어있는지 반환할 뿐이군.
- find와 findIndex
이게 좀 쓸만한 메서드 친구다.
객체로 구성된 배열을 돌면서 내부를 탐색하려면 for 2번을 쓰기도 하는데, 요걸로 하면 깔꼼하거든.
(...얼리 리턴 좋아하는 분들이 잘 쓰던데)
파인드 인덱스는 또 위치를 돌려주는 친구다.
- filter
뭐라고 하면 처음보는 간단하게 사람들에게 와 닿을까..., 위에 find의 진화버전? ㅎㅎㅎ
조건이 맞으면 즉시 결과를 돌려주는(비슷한걸 얼리 리턴이라고 했던가) find와 다르게 거름망에 필터로 걸러서, 싹 다 홅어서 필요한 내용을 반환하는 친구가 필터친구다.
- 배열을 변형하는 메서드
- 맵 map
말을 좀 어렵게 써놓았네. 위에서 본 filter 같은 기능을 직접 만들 수 있다는거다.
1. 첫번째 예제는 return 을 꼭 써서 result에 원하는 값을 배열로 반환 받을 수 있는 예제고 2. arrow function을 쓰면 return 을 쓰지 않아도 lengths 에 반환이 되니, 저렇게 써 둔 예제.
- sort(함수)
원본 배열 자체가 변경된다.
숫자 예시를 들어서 비교 문제에 대해 언급 중이니 기억해두자. 즉, 숫자정렬을 sort로 바로 하면 안된다. - 그래서 본문 하단에서 이걸 사전 편집 순으로 요소 정렬이라고 설명하고 있다. 그래서 위에 (함수) 라고 써 준 부분으로 정렬조건에대한 함수를 만들어서 숫자오름차순 기준 정렬을 적용하는걸 보여준다.
(!) 로 각종 방법에 대해 설명 중.... 앗 ^^; 위에서 스킵한 localeCompare 내용도 다시 나오네... 동등레벨로 비교하는 부분이 참 좋은 예제라 여기서 보는게 좋다.
- reverse
역순 정렬인데, 아까 위에 sort(함수) 처럼 compareFunction 영역이 없어서 좀 쓰기 좀 그렇다 ^^;
- split 와 join
split : 문자열을 특정한 패턴으로 잘라서 배열화, + 길이제한이 가능한 친구
join : split 의 반대, 아무것도 안하면 문자열로 붙에고, 패턴을 인수로 넘기면 그걸로 접착제 역할
- reduce와 reduceRight
본문 설명이 좀 부족한데, 리듀스는 보통 4개의 인수가 있다.
accumulator - 지금까지 누적된 계산을 합친 결과 (누산합)
item - 현재 배열 요소인 아이템
index - 현재의 인덱스
array - 원본이 되는 배열
이렇게 네개를 가지고 뱅뱅뱅뱅 반복을 돌게된다.
누산값을 초기화 하는 옵셔널로 initial 값이 있는데, 비어있는 배열을 돌리자고 하면 없이 호출하면 오류가 난다. 빈 경우 예외처리로 누산 옵션을 0으로 넣는다거나 하는 방법이 예외처리법으로 쓸 수 있기도. 즉, 오류없이 빈 배열을 돌아도 초기값을 394 로 해두면 누산 결과로 394를 뱉는다.
아무쪼록 잘 쓰길... 리듀스는 (함수)를 받을 수 있는데, sort처럼 가공안하고 원하는 결과(??) 라는걸 나오겠지 하고 그냥 쓰게되면... -> 예를들어 문자열 중간에 넣으면 누산이 아니라 toString 같은 결과를 얻으니 알아둘 것.
거기다 초기값까지 0으로 해두면 0 + "문자열" 이 붙는 골치아픈 상황까지 완성~
잘 가공해서 쓰자.
리듀스라이트는 배열의 오른쪽(?) 끝에서부터. 동일한 수행을~
- Array.isArray로 배열여부 알아내기
배열도 객체니까 할말이 없긴한데, 유사배열인지 순혈 배열인지 알아보는 방법이 이것이다.
- 배열 메서드와 'thisArg'
콜백용으로 써야하는데, 일단 스킵~ this 위치에 대해 익숙해지면 이해가 될 것.
users.filter(army.canJoin, army) 로 쓰는게 더 명시적인 이유가 현재 this 위치를 army 에 있는것으로 쓰겠다고 하는거라 그렇다.
뭐 일단 익숙해질때까지 스킵
- iterable 객체
순환 가능한 뺑뺑이 돌 수 있는 객체에 대해 이야기 하고 있다.
그렇다면 반복문 for ... of를 쓸 수 있다고 이야기를 하고 있고, 나는 오브젝트는 이터러블 하지않으니 못돌린다고 말버릇처럼 말하고있고...
배열은 이터러블한 객체!
문자열 이터럽르한 객체!
좋다ㅋㅋㅋ
아... 전에 심볼이라는 친구로 여러 각종 외부 컴포넌트같은거 네임스페이스 형태로 만들 수 있다 했던가... 본문 참 길게 이터러블 이란 녀석의 심볼을 한번 만들어보려고 하네! + _ + 따라해보자.
음... 이터러블한 객체는 from 이랑, to랑 next랑 done 라는 정보를 가지고 있다는걸 설명을 좀 해줘야지
그 이터레이션 프로토콜에 대해 검색 해 보자. (이터러블 프로토콜, 이터레이터 프로토콜) 이걸 준수해야한다.
넘 복잡할 수 있으니 지금은 ... 어? 하고 머리아프면 넘어가자. 다시 돌아와서 읽었을 때 이해하면 그걸로 더 성장할 수 있다.
- 이터레이터를 명시적으로 호출하기
여기도 설명이 좀 부족해서 어쩔 수 없다. 위에 내용이랑 비슷하다. 문자열로 실험을 해 본 것이다.
- Array.from
위쪽에 배열과 메서드에서 언급한 내용이다. 빌려온다는 표현을 쓰긴 했는데, 유사 배열인 친구들도 돌고 싶으면 돌려야할 때가 있다.
Array.from을 이용해서 깔끔한 새 배열 객체로 만들어주니, 돌릴 수 있는것이다.
서로게이트쌍에 대해서는 위에 설명했으니 문제없겠지? 멍하다면 위로 올라가서 주황색 부분을 읽거나, 넘어가자.
- 맵과셋
이터러블한 객체 순회에서 쓴 맵 메서드랑은 다르다. 새로운 자료구조를 가지는 객체들이다. 특징은
맵 - 배열과 비슷하지만 키와 벨류로 순서쌍으로 된 자료형.
셋 - 맵과 비슷하지만 순서가 의미 없는 중복을 허용하지 않는 값의 모임(set, 세트? 본문의 컬렉션?).
- 맵
객체도 키가 될 수 있는 특징일 가진 자료구조
순서가 있다고 map[key] 같은 접근하는게 불가능하지 않지만 제발 순서로 접근하지 않으면 좋겠는 자료구조.
set을 이용해 key, value 를 잘 저장하자.
map.set(key, value)
map.get(key)
map.has(key)
map.delete(keyl)
map.clear()
- 셋
중복을 허용하지 않은 특별한 컬렉션이고, 이터러블 객체를 받으면 담아서 내부에 저장한다.
순서에 의미가 없다했는데 넣었다고 값이 사라졌다고 하면 곤란하다.
set.add
set.delete
set.has
set.clear
set.size
---
set.keys - 셋 내 모든 값 포함
set.values - 맵과 호환성
set.entries - 맵과 호환성
맵과 비슷하게 위의 메서드를 잘 활용 되고,
- 구조분해 할당
즐겨 쓰는 기능 중 하나이다.
구조분해 할당인데, 이거 이용하면 짥고 빠르게 내용을 할당할 수 있다.
아, 잘못쓰면 에러가날 수 있으니, 순서를 잘 기억하고 있거나 오류가 없을 것 같고 정확하게 반환되는 경우 연계해서 쓰자.
- 배열 분해하기
선언 된 배열을 신나게 쪼개보자. let 뒤에 대괄호를 이용해서 공간을 만들고, 변수명을 입력해서 할당한다.
그럼 각 인덱스에 일치하는 내용이 들어가게 되는데, 안 맞는 경우 선언이 안되었으니 undifined 가 되는걸 기억해두자.
(!) 빈 쉼표를 사용해서 띄워 줄 수 있고 할당을 스킵해서 할당할 수 있다.
(!) 할당연산자 우측엔 모든 이터러블이 올 수 있다.
반복 가능한 객체면 다행이도 분해해서 할당하는게 된다는걸 이야기하고 있다. 예제에 있는 내용은 셋이니까 중복없이 할당되겠지.
(!) 좌측에는 뭐든 할당 가능
객체의 프로퍼티 에다 할당하는 짓도 가능하다는걸 보여주고 있네..... ㅎㅎㅎ
(!) 쩜 엔트리스()로 반복하기
해당 객체의 어떤 엔트리들이 있는지 k, v 로 받아볼 수 있는 메서드였는데, 이걸 써서 반복돌리면서 오브젝트를 배열화 하고, -오브젝트는 of로 돌리지 말 것- 배열에 있는 내용을 분해! 할당! key, value 로 해당 반복에서만 사용하는 스코프를 가진 채 출력하는 놈을 만들었다.
(!) 변수교환 트릭
구조분해 할당의 트릭으로.. 개발자가 자리를 옮길 때, 이젠 3개의 의자가 필요 없다.
...
...
... 로 나머지 요소 가져오기...
...
할당하고 싶은 변수에 할당 한 친구 말고 남는 친구들은 ...나머지새로운배열 에 담아서 다양하게 활용할 수 있다.
... 은 마지막에 있어야 한다는 것. 혹은 아예 처음부터 쓰던가.
- 기본값
위에서 할당이 안되면 undefined 라고 했으니, 기본값을 지정한다는 내용.
- 객체 분해하기
지금까지는 배열을 분리했으니 객체도 분리해보자는 것.
사용법을 한번 쭉 살펴보면 양만 많지 위에 배열 분리 잘 따라왔다면 비슷하게 분리되는걸 알 수 있다.
(!) let 없이 사용하기 - 가독성이 안좋아서 조심해서 쓸 것. 실행구문으로 감싸서 문법오류를 피하자는 내용.
- 중첩 구조 분해
영어로 nested destructuring 라고하는데 살다보면 어떤 사람들은 '네스티드' 항목들, 네스티드 객체 라고 부르고 있더라고. 이부분이다.
다른것은 다 괜찮아 보이는데, extra (할당 연산자 좌측의 패턴에는 없음) 이라고 표시되어 있는데, 요걸 제외한 부분이 거슬린다.
설명을 따라가면 네스티드 된 객체를 해체해서 네스티드가 아닌 변수들로 뽑아서 할당했지, 네스티드로 만든것이 아니다. 라는 걸 알 수 있다. 그래서 전용변수(초록색으로 된 네모)가 없다고 이야기 하고 있다.
- 똑똑한 함수 매개변수
어떤 함수에는... 매개변수가 많다고 한다. => 그렇지.. 만들기 나름이니까 말이다. 이 중에는 디폴트가 지정되어있으면 선택적으로 골라서 넘기면 되는 부분을 설명하고 있다.
중첩객체와 콜론을 조합해서 기본값을 피하면서(undifined 로 작성한 부분) 넘어가는 부분들을 이야기 하고 있으며,
마지막 항목에서 매개변수에 = {} 를 디폴트로 먹여서, 객체가 들어가지 않아도 디폴트로 객체로 먹이는 방식을 하고 있는데..
그냥 에러내고 예외처리하는게 안전하지 않을까 싶기도 하고, 개인의 구현 선택과 프로젝트 방향과 가치관에 맡기겠다. 이건....
- Data 객체와 날짜
날짜다 젤 복잡고 어렵고 힘들고 눈물나는 자바스크립트 날짜다. 다양한 국가별 시간에 대응해야하고, 각종 표시기법, 포멧팅 방법 등등을 다루긴 하는데 옛날에는 이런 번잡한 컨트롤이 어려워서 moment.js 라던가를 써서 쉽게 해결했고 (요즘은 쓰지 않는 추세)
요즘은 day.js day.js.org/ 같은걸 사용해서 해결하고 있지만 여기선... 배운다.
- 객체 생성하기
new Data()
새로운 시간 객체의 메세드를 호출해서 동작을 시켜주고,
이거 만들어서 뭐하니, 보통은 let now 라고 결과를 현재 시간을 가져오는 용도로 쓴다.
시간은 자리 timestamp 라고하는 unix 타임스탬프 기준으로 좀 가공해서 사용하는데, 보통 10자리(초) 13자리(밀리초-밀리세컨드)를 쓴다. 아래쪽에서 한번 더 보자.
UTC 라는 부분이 나오는데, 이건 타임존에 대한 부분을 설명 해야하고, 한국 타임존이 일단 +9인걸 아는 사람들은 OK
영국 그리치니 천문대 기준 시간이 +0 인지 알면 오케이.
모르는 경우 구글에서 "UTC 타임존" 이라고 쳐서 학습을 하고 오는것이 좋다.
아 우리는 계속해서 new를 사용해서 필요할 때 마다 조작할 시간 객체를 새로 생성해서 사용할건데, Data를 내장 객체를 직접 건드리는 일을 별로 발생하지 않을 것으로 보인다. (해당 웹앱이나 어디에서 Date 내장객체에 뭔가 기능을 추가해 가면서 까지 쓰려면 해야지... 그래야 먹고살지)
- new Date(밀리세컨드)
UTC+0 기준에 대한 내용이네. 0 이라는 기준 시간은 1970년 01월 01일 0시 0분 0초 (영국시간)을 나타낸다고 보면 된다.
date.getTime() 을 쓰면 13자리 밀리세컨드로 된 현재 시간을 가져올 수 있다고 하단에서 다룬다는데 별거 없다.
- new Date(datestring)
구문을 분석해서 날짜로 만들어주는 방법이다. 현재 지역의 타임존이 나온다.
- 날짜 구성요소 얻기
날짜 조작 방법 중 주의 해야할 부분은... (0월 ~ 11월 부분)
그리고 getDate() ... 전체 날짜를 가져오는게 아니다. 일 만 가져온다. 와 getDay() - 숫자로된 요일 -_- ... 0이 일요일인 것...
어... 메서드연기 메쏘드연기 뭐 그런말 들어 봤을거다. 캐릭에 몰입해서 특정한 행동을 하는....... 그런 것 처럼.. 앞에서 배운 객체 내부에서 특정한. 정해져있는 연기를 하는 녀석(함수)을 말한다.
this - 아래에서 후술
---------------------------------
메서드 만들기
코어자바 스크립트 페이지에서... 연기를 시키는 과정을 설명하고 있다.
user 객체에 sayHi를 표현식으로 할당. 이렇게 객체 속, 프로퍼티에 할당 된 함수를 메서드 라 함.
단축해서 쓰는 방법이 있다.
요즘 프레임워크에선 단축해서 전부 작성하는듯.
메서드와 this
this를 이용하면, 지금 여기 이곳의 객체의 동등한 선상에 존재하는 프로퍼티에 있는 정보에 접근하는게 가능하게 하는 키워드
이 메서드를 호출할 때 사용한 객체가 이것. 을 말하고 있음. => 현재 객체
물론 this를 사용하지 않고, 외부에서 참조해 접근하는 방법도 쓸 수 있다.
- 이 경우 객체를 잘못 덮어쓰면 참조하는 부분이 문제가 발생할 수 있다고 함.
this는 실행 하는 곳(컨텍스트)에 따라 결정된다.
동일한 기능을 하는 메서드를
어떤 데이터를 소지하고 있는 객체에 따라 결과가 달라진다.
그래서 단순하게는 이런 기능을 만들 수 있다.
동일한 기능을 하는 this.현금뿌리기총(머니건)을
돈을 많이 소지하고 있는 사람에게 할당하면 1억을 뿌리고
돈을 적게 가지고 있는 사람에게 쥐어주면 동작하지 않듯...
.
화살표 함수는 this 가 없음. 외부에서 this를 가져옴.
- new 연산자 생성자 함수
생성자 함수는 첫글자가 대문자에 new 가 붙는거
생성자란 무엇인가... 사수가 붕어빵틀이라고 했는데. 근데 다른곳에서 클래스랑 헷갈릴듯.
예를들면 동일한 기능을 하지만, 이름만 다른 여러객체를 쉽게 만들 수 있게 한다.
온라인모바일게임에서 계정 리세마라 하는 경우 많이 호출 될 함수다...
new.target 생성자 함수에 대한 내용인데, 음.. 잘 안쓰인다고 함.
잉는 뭐, new 생성자로 만들어졌는지 확인하는 친구라서 근데 이걸 쓰면 반대로 hack 같은 느낌으로
그, 모던 JS 본문에 나와있듯 편법으로 new 생성자를 이용해서 객체를 만든 것 처럼 활용해서 쓸 수 있다.
function User(name) {
if (!new.target) { // new 없이 호출해도
return new User(name); // new를 붙여줍니다.
}
this.name = name;
}
let john = User("John"); // 'new User'를 쓴 것처럼 바꿔줍니다.
alert(john.name); // John
위에 코드가 그 코드니까... (원문에도 있고. 쓸 사람은 필요하면 쓸 것 같음.)
아무튼 생성자에도 return 구문을 때릴 수 있는데, 보통은 없다.
원래 되돌려주는게 this에 다 저장되어 있는데, 그래서 강제로 객체를 리턴하면 this대신에 객체가 리턴될거고
원시형은 무시!
반대로 처음으로 돌아가서 빈 return을 하면 this가 리턴 됨.
let add = new Add() 처럼 써야하지, let add = new Add괄호생략은 좋지 않음.;;;;;;;
describe 구현 기능에 대한 "설명"을 이야기 하며 함수단위로 묶는다. 즉, 보통 어떤 행동을 하는 테스트 꾸러미인지 이름을 적는다 "pow" 라고 썼으니, 이 테스트의 이름은 제곱근을 테스트 하기 위한 묶음이라 볼 수있다.
묶음 안에 여러 묶음을 넣을 수 있는데, 별로 추천은 안함.
it 테스트에 대한 구체적인 내용을 적어주고 해당 행동을 적어주면 된다. 특이한건 처음의 describe 와 다르게, 이 함수에는 done를 콜백으로 넣어, 끝이나면 호출하는 포인트로 제공한다.
위에서 묶이라 하였으니, 여러개를 작성할 수 있다.
assert 제일 안쪽에 있는 친구인데, 핵심부분이라고 할 수 있다.
첫번째 파라메터로 value1, ...................... pow(2, 3) 두번째 파라메타로 value2를 받는다....... 8 위에서 🚩실행결과와 기대결과를 받는다고 했는데
실행의 결과가 value1, 기대하는 결과가 value2 라고 보면 되겠다.
assert에 보면 쩜 찍고, equal 을 호출하는데, 미리 만들어져있는 equel(=)이꼴,이퀄, 아무튼 같은지 체크하는 친구를 이용해서 둘이 같은지 실행 및 기대의 꿈을... 걸었다.
실행방법은 아까 위에서 test.js 에 저장하라 했었는데, 터미널에서 해당위치로 이동해서 거기에서 > mocha 라고 치면 테스트가 동작은 하면서 일단 에러가 날거다. 상단에 2줄을 추가해주자. - 물론 당연히 모카 설치 필수다.
let assert = require("assert"); //모카의 assert 함수를 사용하기위해 불러온다고 기억해두자.
let pow = (a, b) => a ** b; // 6번째줄 안에서 실행해야하는 제곱근을 만드는 함수이다. 연산자를 써서 후딱만들었다.
describe("pow", function() {
it("주어진 숫자의 n 제곱", function() {
assert.equal(pow(2, 3), 8);
});
});
뫄? 모카 설치 명령어 부터 안된다고? ... 일단 넘어가자. 🥺 인터넷에서 npm 이라는 것이 무엇인지부터 알아야한다.
개발순서
뭐 크게 첨언을 할 부분이 없다. 아- 그렇구나. 하고 넘어가자. 한두번 읽어두면 직접 자신도 모르게 그렇게 하고있는걸 볼 수 있다.
스팩실행하기
아 여기서 라이브러리를 골라서 테스트를 하는 부분이 나온다.
각 라이브러리의 설명과, HTML 파일로 만들어서 테스트 하는 부분을 복사 붙여넣어 한번 실행해보자.
코드초안
아까 위에 let pow = (a, b) => a ** b; 급보다 더한 닌자급 테스트 코드이다
스팩 개선하기😶
it를 더 추가해서 여러가지 테스트 스팩(여러가지 험난한 세상 환경)에도 문제가 없도록 설명하고 있다.
코드 개선하기
pow 의 코드를 개선하는 부분이다. 직접 pow를 구현하면 이렇게 길다고 자랑 중.
자동으로 it 블록을 만드는 ...😶 -> loop 문을 이용해서 it를 여러번 호출하는 코드 작성.
중첩 describe
테스트 가독성이 떨어져서, 개인적으로 별로 추천은 안하지만,
저렇게 하면 쓸 수 있긴하다. 결과는 서브그룹으로 표시 됨.
아래쪽에 BDD 느낌의 before(), after(), beforeEach(), afterEach() 라고 불리는 친구들을 소개중인데, 이 친구들은 hocks라고 부른다.
훅이라고 그 후크의미가 맞고, 걸어두다 걸린다 뭐 그런 의미가 맞다. 어떠한 특정한 시점에서 반응해서 돌아가는 친구들이다.
각각 실행순서에따라 배열했다.
before() - 전체 테스트 실행전에 반응해서 실행 됨.
beforeEach() - 각 테스트 실행 전 반응해서 실행
afterEach() - 각 테스트 실행 후 반응해서 실행
after() - 전체 테스트 끝나고 나면 반응해서 실행
스팩 확장하기
몇개의 기능을 더 추가하는 경우를 이야기 함.
테스트의 단점
각 함수에 대해 테스트를 만들다보면, 개발기간이 길어질 수 있다. 반대로 테스트를 잘 만들어 두었더니, 개발기간이 짧아질 수 있다.
사실 이건 사람과 상황, 프로젝트, 함수의 개수, 테스트의 개수, 작성난이도 등등 많은 이슈에 따라 언제라도 달라질 수 있다.
// todo : jest에 대해서도 소개할 것
2. 폴리필
오래된 브라우저에서 돌릴 방법.
브라우저가 오래된것이 무엇이냐 할텐데, 현재 2021년 기준으로 대부분의 브라우저들은
모던브라우저라고 불린다. = 자동으로 최신 사양과 정보가 각종 기능이 업데이트가 되는 모던한 브라우저.
5대 브라우저라고 불리는 크롬, 사파리, 파이어폭스, 오페라, 인터넷익스플로러엣지가 여기에 해당된다.
일반 인터넷 익스플로러가 특히 문제가 되는데, 윈도우XP를 사용하는 사람은 internet explorer 8 버전 이상 사용할 수 없다.
인터넷익스플로러 종류별 사용자 사용율
종류가 참 많다. 6,7,8,9,10,11,edge 까지.
edge를 제외하곤 버전에 따른 브라우저 엔진 특성을 많이 타기 때문에 모던브라우저라 불리지 않고, 구형브라우저들이라고 부른다.
그래도 처음하는거라서 한번에 안와닿을 수 있다. 이것만 머릿속에 기억하자. 아 나는 일단 최소한 eslintrc 라는 이름을 가진 설정 파일을 만들어야 쓸 수 있구나. (아니면 웹팩 모듈번들러 package.json에서 eslintCongif를 만들어야하는구나.) 하고 외워두자.
이 프로젝트를 참고해서, 아 최소한 이건 있어야겠구나. 정도만 알아두고 넘어가자. 아님 지금은 바로 위 프로젝트 깃헙주소의 파일을 받아서 자신의 기본프로젝트로 설정하고 바꾸거나 개발해나가자. 왜냐면 JS가 문제가 아니라, 웹팩이니, 빌드니, node package manager 니... (아니 JS를 빌드한다고?)의문을 가지며 설정 대해서도 공부해야 하기 때문.
문서를 다시 읽어봐도 조건문이라는 친구를 알아보는 과정이라고 소개해야 할 것 것 같지만, 조건을 평가하는데 아래 내용을 쓰면 된다고 훅 치고 들어온다.
즉, if 문과 ? 연산자를 사용하면 된다고 말하고 있다.
조건문은 🐈 만약 (조건이❓이러이러) 하다면, (다음과 같이 반짝반짝🌟) 하게 행동 하라... 라고 하는 개발의 꽃이다.
조건문을 잘 만든 예시 *'ㅁ '* (???)
'if'문
설명에서 if(조건식) 문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true 이면 코드 블록이 실행된다. - 라고 if 라는 조건 문법을 사용해, 괄호안의 조건식을 평가해서 결과가 참한녀석이면, 코드를 실행하는구나! 하고 이해하면 되는 간단한 친구다. (뭐가 다른데?)
if (year === 2021) {
alert( "백색소의해라고합니다! 한우맛있쩡" );
}
실행 부분은 짥게 줄여서 중괄호를 안쓰고 한줄로 쓰기도하는데, 가능하면 가독성을 위해서 한줄이라도 묶어주자.🥺
year === 2021
이라고 표현한 부분이 조건식인가? 조건과 조건문 조건식은 다른가? 이라는 부분을 헷갈릴 수 있는데, 이렇게 보고 본문을 읽어보자.
조건문 (if 조건 문...법...)
조건식(표현식)
평가 된 값
if(year === 2021) { ...뭔가 할 일... }
year === 2021
true
조건문에 조건식을 넣으면 참/거짓을 평가해서 동작한다고 설명하려 한 것 같다고 느꼈다 🤔
구글 검색해보면 사람들이 조건문이랑 조건식이랑 섞어쓰는것 같으니까 이것도 헷갈릴 수 있을지도 모르겠고...
조건식(표현식)이라 써 두었는데, 표현식으로 confirm() 정도는 쓸 수 있지만 가능하면 이렇게 즉시즉시 받아서는 가독성이 떨어지니 안하는편이 좋다고 생각되었다.
매개변수의 기본값을 설정해 줄 수 있는 부분도 참고해두자. 아무것도 않들어오는 경우, 코드가 오류날 수 있으니 이런 경우를 막아준다.
매개변수 기본값을 설정할 수 있는 또 다른 방법
오래된코드 등 보통은 저렇게 많이 구현을 해 둔다.
반환값
함수는 반환값이라는것을 결과물로 생성한다.🌺 파라메터로 받은 내용을 연산하고 그 결과를 내어준다.
반환값에따라 변수 이름도 잘 지어주면 좋다.
return 키워드를 사용해서 반환 할 변수를 지정해주자.
return을 안하거나 변수를 지정안하면 undifined 인 것을 알아둘ㄱ것
함수이름짓기
언제나 이름짓는게 젤 힘들어..
규칙예시를 잘 해뒀는데, 해당 룰을 기반으로 만들고, 언제나 부득이한 경우가 생기면 주석을 활용하자.
함수는 동작 하나만 담당해야하는데, 어쩔 수 없는 경우 두개가 될 수 있다. 왜 그렇게 되었는지 꼭 써두자.
함수==주석
한줄로 요약하면 함수를 기능을 잘 나눠서 이쁘게 잘 만들면 주석과 같다는 의미이다.
함수 표현식🌺
앞에는 선언이라고 했고, 뒤에는 표현식이다. 개인적으로 표현식의 '표' 가 = 랑 느낌이 비슷해서 = 로 할당하고 구문의 끝을 알리는 ; 세미콜론이 있으면 표현식이구나 하고 외웠다.
let sayHiPyoHyun = function() {
alert( "Hello" );
};
alert( sayHiPyoHyun ); // 함수 코드가 보임
선언문이랑 다른 특징은 끝에 세미콜론도 있고, 미리 선언해두지 않는다인데, 문서의 코드 보면서 진행해보면 알 수 있을것이다.
선언은 미리 선언이고 표현식은 다음과 같다.
내가 그의 이름을 불러주기 전에는 그는 다만 하나의 몸짓에 지나지 않았다. 내가 그의 이름을 불러주었을 때, 그는 나에게로 와서 꽃🌺이 되었다. 내가 그 함수를 불러주기 전에는 그건 다만 하나의 표현식에 지나지 않았다. 내가 그 함수명을 호출했었을 때, 그건 나에게로 와서 실행🌺 되었다.
표현은 해당 위치에 코드가 🌺닿아야 표현되어 불러주어야 온다. 😂 쓰고나니 오글거린다. 사람이 잠을안자고 정리하면 이렇다.
콜백함수
예문을 기반으로 공부하자. 교과서기반으로 따라가자.
매개변수 3개를 제시하고 있다.
첫번째 코드라인부터 보면 ask 애스크라는 질문을 받는 함수하나가 1-4줄에 있다.
파라메터로 question을 받는데, 2번줄을 보면 한줄짜리 짧은 if문으로 조건식에 컨펌으로 질문을 받고있다. 뒤에 바로 yes 라고 파라메터로 받은 yes를 ()를 써서 호출(실행)하고 있다. yes()를 부른것이다.
이런 방식을 콜백방식(나중에 부름)이라고 부른다.
yes는 어디에있나?
함수의 인자 순서는 실행할 때와 같으니 15번째 줄에 두번째 파라메타로 showOK 로 yes에 해당된다.
두번째 예제는 너무 짧게 썼는데.. 솔직히 이렇게 쓰면 가독성이 떨어진다.
함수표현식 vs 함수 선언문
차이에 대해 위에서 간단하게🌺 설명하긴했다. 이곳에서 좀 더 상세하게 다루고 있다.
1. 문법차이
선언문 - 코드 중간에 독자적인 구문... JS 코드 어딘가에 당당하게 쨘 하고 선언되어있다.
표현식 - 할당연산자 우측에 구문이 잘 표현되어 있음.
2. 생성차이
선언문 함수선언문이 정의되기 전에 호출이된다고 써두었는데, 호이스팅 개념이 없다면 일단 넘어가고
간단하게는 선언문은 순서상관없이 어디서든 코드 저 밑에 선언을 해두어도 위에서 호출해서 쓸 수있다.
모던JS를 처음 읽어보는 사람이 옆에 같이 띄워놓고, 읽으면서 부담 없이 학습을 진행할 수 있으면 좋을 것 같아서 쓰는 메모 조각
alert, prompt, confirm을 이용한 상호작용
상호작용이라 써있다. 🤔사용자와 반응을 주고받는 느낌으로 접근하면 쉽다.
브라우저마다 형태는 다르지만, 브라우저에서 만들어서 제공하는거라 사용자가 통일시킬 수 없다. 나중에 커스텀하게 알아서 만들어야..
alert
⚠️메세지와 일방적인 OK 버튼을 함께 둔 기본적인 확인 창
alert sample.
prompt
창의 타이틀과 사용자에게 입력받을 텍스트 (기본값-선택값 optional)을 받는 창
사실 타이틀도 옵셔널이라 아무것도 안넣고 써도 돌아가긴 돌아간다. 사용자에게 title 대신 yaong22222.도메인.컴 같은 주소가 뜨기도 한다.
아, 예제에 [...] 지금 저렇게 보이는 부분 [default] 가 디폴트로 넣을 수 있는 선택값을 위한 공간정도라고 생각하고 넘기는 편이 좋다. 나중에 [...] 문법이랑 헷갈릴수가 있다.
🌱사용자가 아무것도 안넣고 엔터나 확인을 누르면 빈 'string', 취소를 누르면 'null' 형태의 결과가 나온다.
confirm
🌿사용자가 확인을 누르면 true, 취소나 esc 누르면 false 반응을 받을 수 있다. 불린형이다.
형변환
앞에서 소개한 여러가지 타입들을 강제로 바꾸거나 할 때 사용한다. 보통은 적절하게 바뀌는데, 원하지 않는 자동형변환이 되는 경우, 오류가 날 수 있다. 이런경우 명시적으로 형변환을 해준다.
문자형으로 변환
보통 불린이나 숫자형을 바꾸는데 사용한다.
let value = true;
alert(typeof value); // 여기의 타입이 그러니까 boolean형 상태인걸 직접 확인해보고,
value = String(value); // 강제로 문자열 형태로 바꾸어서 value엔 문자열 "true"가 저장되니
alert(typeof value); // 그걸 꼭 찍어서 확인 해 보는 좋은 예제.
숫자형으로 변환
문자로 입력한 123456 같은걸 연산에 제대로 활용하려면 확실히 변환해주는게 좋다.
NaN type을 체크해보자.
숫자로 못바꾸는걸 바꾸면 NaN(Not a Number) 이라는 문자같지만 숫자형인 숫자가 아니라는 숫자형 타입의 글자 나온다.
undefined는 바꾸면 뭔지 모르겠으니 NaN
true는 바꾸면 1 - (참, on)
false는 바꾸면 0 - (거짓, off)
비어있는 "" string 타입이나, null 은 숫자형으로 바꾸면 0, 변환에 실패하면 NaN
불린형으로 변환
문자열 "0"을 제외하고 (❗true❗) 비어있다고 느껴지는 그 모든것은 false 라는것. 만 알아두면 되지않을까.
나누기 10 / 3을 하면 무한대로 0.333333333.... 으로 떨어질텐데 JS에서 계산하면 일단 3.3333333333333335 같은 끝자리가 묘하게 나오는데, 언젠가 나중에 js의 float 64비트 연산과 관련된 내용을 하다보면 아, 적당히 자르고 써야겠구나. 할것이다.
컴퓨터에서 수학을 계산하는 비트연산을 보러 당장 가면 개발을 포기할 수 있으니
일단은 간단하게 계산할 수 있는 표시 자리가 부족해서 적당히 끊었다로 이해하고 넘어가자.
세상엔 익힐게 왜이렇게 많을까...
나눈 값의 나머지를 뽑는 연산자 %,
일반적으로 10을 3으로 나눈다고 하면 1이 남는데, 그냥 계산기로 나누면 3.3333333333333335 이 되고 나머지가 안보이기 때문에, 나머지를 출력하기위해 쓴다.
나머지없이 잘 나눠 떨어졌는지, 🐣그러니까 소수점없이 깔끔하게 나눠졌으면 0이 나올테니까 이런걸 구분할 때 쓴다.
거듭제곱에 사용하는 연산자 **
거듭제곱, 이제곱 세제곱 네제곱 을 할 때 쓴다.
문서의 하단을 보면, 이걸로 제곱근도 구할 수 있는데, 제곱과 제곱'근(=root)'은 다르다!!! 기억이 날지 가물가물한데, 아무튼 제곱근을 원래 구하면 ± 플마를 나타낸다고 배웠지만
JS 개발에선 일단 양의 제곱근을 구해준다. (다른언어에선 어떻게 주는지 모르니...)
이항연산자 '+' 로 문자열 연결
더하기는 문자열을 연결하는 특수한 기능이 있다.
문자열과 숫자열을 더하면 문자열로 합쳐져 연결!
단항 연산자 +와 숫자형으로의 변환
더하기 연산자는 문자열 연결 말고 하나 더 있는데, 예시를 들면 단독으로 숫자값이 있는 문자열 단항에 쓰이면 숫자형으로 변환 해 준다. 숫자형 변환 룰을 따르니, 이미 숫자형인 경우 아무것도 영향이 없고, 다른형의 경우 숫자형 변환 룰에 따라 영향을 준다.
연산자 우선순위
다시 수학시간인데, 괄호안의 내용을 먼저 처리하고, 곱셈이 덧셈보다 먼저인걸 알테니, 수치화해서 보려면 아래 우선순위 테이블을 참고하자. 😇
모던JS를 처음 읽어보는 사람이 옆에 같이 띄워놓고, 읽으면서 부담 없이 학습을 진행할 수 있으면 좋을 것 같아서 쓰는 메모 조각 2장 처음부터 2장 자료형까지
Hello, world!
검색을 해 보면 유구한 역사(?)를 자랑하는 출력문자.
HTML이라는 문서를 모르면 자바스크립트 기본을 읽기전에, HTML에 대해 대충이라도 익히고 와야겠구나. 하고 잠시 다른차원으로 여행을 다녀올 것을 권장한다. 예시로 아래 내용을 출력해보라고 하고 있다. 파일의 이름은 index.html 이나, test.html 같은 파일을 UTF-8 인코딩으로 저장 할 것.
🍓<script> 라는 태그를 이용해서, 저기는 자바스크립트의 자리야. 라고 명시적으로 HTML 문서에서 자리를 깔아주면 된다. 옛날(?, 2016년 이전 쯤)에는 <script type="text/javascript"> 형식으로 공간을 마련 해 주기도 했는데, 요즘은 필요하지 않다.
잘 열고, 문법에 맞게 </script>로 잘 닫아주자.
외부에 스크립트 (에 파일이 있는 경우, 로드하는 방법)
대충 폴더구조
HTML 파일이랑 Javascript 파일을 나누는걸 소개하고 있다.
src 속성을 이용해서 index.html 파일에다가 넣어주는 과정. 웹에 올라가있는 주소나, 상대경로, 여러개를 넣고싶으면 여러번 순차적으로 넣어주면 된다.
index.html 파일 속의 내용
<!DOCTYPE HTML>
<html>
<body>
<script src="./catholic.js"></script>
전설에 따르면, 본문의 글자가 출력되는 부분이라고 전해진다.
외부 js 파일의 내용을 소환하는 방법은
body에 넣거나 head에 넣거나 하는데, 일단 우린 기초를 배우니 body에 넣자.
</body>
</html>
catholic.js 파일 속의 내용
<script>
alert( '고양이, 세상!' );
</script>
아, alert('어쩌구 출력할 문구'); 라는 친구는 함수라는 친구로, 익스플로러나 크롬같은 브라우저 친구들에서 경고창을 띄우는데 사용한다.
코드구조
문
문! moon 도 아니고 door도 아닌, statement 라고 하는 문법 구조. 자바스크립트 구문에 대해서 이야기 하고 있다.
문서를 잘 읽어보면 ; (세미콜론) 으로 해당 구문, 문장의 끝을 명시적으로 나타내고 있다는걸 알아두자.
세미콜론
사실 ; 를 생략하기도 하는데, 묵시적으로 아 이게 문장의 끝이야.
또는, 어~ 이 문장은 여기서부터 여기까지야 라고 확실하게 추정할 수 있는 경우 생략하기도 한다.
프로젝트를 하다보면, 같이 일을하는 팀 약속이나 linter 룰에 따라 그런게 있다. 나중에 언젠가 알아보자. 세미콜론을 제거하는 경우도 있다.
alert("에러가 발생합니다.")
[1, 2].forEach(alert)
🍆이런 에러예제 같은걸 잘 알아두면, 어디서 문제가 생기는지 알 수 있다. 👻
주석
// 일단 슬래시 두개로 작성하는 이런것을 주석이라고 말한다.
alert("에러가 발생합니다."); // 이렇게 쓰기도 하고.
/*
이렇게 쓰기도
하니까, 알아두자. 아주좋다. 주석기반코딩(!?) 을 하기 좋다.
*/
주석, 코멘트, 뭔가 설명을 해야할 때 개발자가 문서에다가 어 이거 이런거야 하고 적어두는 설명서에 가까운 그것.
자바스크립트 엔진은 이걸 무시하고 구동된다.
엄격모드
use static 이라는데, 보통 자바스크립트를 능구렁이 담넘어가는 유순한 언어라고 한다.
거기에 조금 족쇄를 달아서 빡세게 쓰는 방법이다.
보통 js 파일 최상단에다
'use strict';
이런식으로 제일 먼저 작성한다.
나중에 알아들을테니 못알아들으면 넘어가자.
이걸 선언해두면, 언젠가 개발자가 변수를 선언하는 키워드를 사용하지 않고, 대충 선언없이 변수를 만들고 값을 구겨넣어 할당 한다던가 하는 경우, 에러가 발생시켜주는 착한친구.
개발자 콘솔창은 보통 이 엄격모드가 적용되어있지 않고, 👿구렁이 담넘어가듯 유연하단것도 알아두자.
변수와 상수
변수 : 변하는 값 💫
상수 : 한번 꽂히면 변하지 않는 값. (고정값) 💦
변수(variable)라고 부르는 친구는 예전엔 var 라는 키워드로 선언했다.
지금은 let 라는 키워드 친구로 선언한다.
각종 예시를 들면서 변수를 "선언" 하는 방법들을 말하고 있다. 언제나 무언가를 담을 수 있는 박스에 나는 물건을 담았다고 생각하자.
let message;
message = 'Hello!';
message = 'World!'; // 값이 변경되었습니다.
alert(message);
1. 예제에서는 메세지라는 박스를 만들고, 2. 메세지 박스에 '헬로' 를 담았다가
3. '월드'를 담는데, 메세지 박스에 담긴 글자를 버려버리고 다른걸로 바꿔 담았다고 생각하면된다. 4. 그리고 내용물을 alert 를 이용해서 보여준다.
한번 선언을 하면, 두번다시 같은 이름으로 선언할 수 없다는 특이사항을 알아두고, 밑으로 내려가서 이름을 짓는 방법도 알아보자.
변수 명명 규칙
다양한 규칙이 있는데 한번 정리하면 다음과 같다.
// 주석을 써보자.
let 사실한글도된다;
let 1234test; // 이런건 못쓴다.
let $ = 1; // '$'로 이름 만들기.
let _ = 2; // '_'이것도 된다고 했다.
let my-name; // 하이픈 '-'은 안된다.
let cat;
let cAt; // cat와 cAt는 같은것이 아니라 다른 변수공간이다.
let return // 예약어 (키워드) 같은건 사용할 수 없다.
상수
고정값
let 대신 const 로 쓰면 되고, = 으로 한번 할당되면 변하지 않아서 유용하다.
// 상수
const ERROR_MESSAGE = '오류!경고!';
보통 이런식으로 사용한다. 상수의 이름을 대문자로 쓰는건, 어디가서 변수와 쉽고 빠르게 구분하기 위해서.
이름짓는 방법에 대한 고찰은 언제나 해도 좋다.
자료형
변수에다 자꾸 = 으로 값을 할당 해 주었는데, 이런 값의 종류가 8가지가 있다. 이걸 자료형이라 한다. 가볍게 요약을 하면 다음과 같다.
================= 1. 숫자형 2. 빅인트형 (아주 큰 숫자를 담아두는 형태) 3. 문자형 (따지자면 문자열 형태이다.) 4. 불린 (참 거짓만 담는 형태) 5. 'null' - 비어있다 6. 'undefined' - 값이 할당이 되지 않았다. 7. 객체
8. 심볼 이들을 확인하기 위한 typeof 연산자 =================
숫자형 🔢
변수에 보통 숫자를 입력해서 넣는 값이다. 소수점도 숫자형에 포함된다.
일반적인 사용방법 이다. 변수의 이름은 넘버박스라고 만들었다.
let numberBox = 3939;
numberBox = 999.8765;
🤖특수한 숫자형도 있다는걸 알아두자.
// Infinity, -Infinity, NaN 같은 '특수 숫자 값(special numeric value)'
각각 무한대 ♾️, 마이너스무한대 -♾️, 숫자가 아님을 나타 냄.
BigInt
일반적으로 자바스크립트의 숫자형은 특정한 범위 이내에서만 저장하고 표현할 수 있었는데, 최근에 몇몇 브라우저에서 이 제약이 풀렸다.
BigInt를 사용하는 것이다. 표준이 된지 얼마 안되었다고... 사용에 주의를 하자.
// 끝에 'n'이 붙으면 BigInt형
const bigInt = 123456789012345678999999999n;
문자형
자바스크립트에서 문자+문자열 다 합쳐서 문자형으로 지정해두었다.
세 종류의 따옴표를 사용한다는 부분을 잘 익혀두자. 특히 백틱 부분을 잘 기억해두자.
나머지 싱글 쿼테이션과 더블쿼테이션 두개는 쉬우니까...
// 백틱은 문자열 가운데에 변수를 구분해서 표현할 수 있는 방식이다.
const CAT_NAME = 'Nabi';
alert( `안녕, 네 이름은 ${name}야!` ); // 안녕, 네 이름은 Nabi야!
// 변수대신 표현식 넣어서 결과를 표현할 수도있다.
alert( `결과 값 = ${1 + 2}` ); // 결과 값 = 3
❤️🔥위 예제를 참고해서 한번 더 복습해보자.
불린
참(true)과 거짓(false) 두가지의 정보만 담고 있는 자료형이다.
각각 긍정 / 부정을 뜻한다는걸 알 수 있다.
null
헷갈릴 수 있으니, 다른언어는 넘어가고 자바스크립트에 대한 내용만 알아두자. null이라는 형(태)는 널값 이라고 부르기도 한다. 보통 비어있다는걸 표현하거나. 알 수 없는 상황을 표현할 때 사용한다.
typeof 에서 유의사항을 확인하자.
undefined
🤔할당되어있지 않은, 정의가 되어있지 않은 뜻을 가지는 자료형이다.
null과는 다르다. null과는... 변수가 만들어져 있지만 null이 담겨있는것과, 아예 선언이 되어있지 않은것은 다르다.
약간 책읽어주는 클로버램프 느낌으로 모던JS를 사람들과 같이 읽은 기록에 대한 메모. 뒤로 갈 수록 파트 진도가 나가는게 느려지니, 다른 입문자가 볼 때 대충 아 이렇구나 알 수 있을 듯(?)
주제 : 모던 Javascript 읊어보기 목적 : 한번 리딩 시 ======>> 예를들어 30분정도 읽었을 때, 이 책을 어느정도로 진도를 쫙 쫙 뺄 수 있는지 연구ㅋㅋㅋㅋㅋㅋ
참석자 : 리유(읽는사람), 호에, 유버그, 영롱, 모니 효과 : 한번에 배우는 만능 학습은 없다. 따라서 반복학습이 목적이므로, 얼마나 훑어볼 수 있는지, 다들 따라올 수 있는지 확인 해 보는 연구이다(!?) 시작시간 : 24일 오후 21시 10분 시작파트 : 1-1 자바스크립트란 부터 종료시간 : 24일 오후 22시 00분 종료파트 : 2-5 자료형까지 읽음
================= 1. 숫자 2. 빅인트(아직까진 사용을 지양) 3. 문자형 4. 불린 5. 'null' 6. 'undefined' 7. 객체와심볼 8. 타입오브 =================
[2회차 로그] 참석자 : 리유, 호에, 유버그, 영롱, 으악 시작시간 : 28일 오후 21시 10분 시작파트 : 2-6 alert, prompt, confirm을 이용한 상호작용 종료시간 : 28일 오후 22시 00분 종료파트 : 2-8 기본연산자와 수학 후기 : 1. UB에 대해. Undefined Behavior 2. 시간이 점점 오래 걸리기 시작했다. - 9개 1시간 -> 4개 1시간. 3. 쉼표연산자 왜 쓰지? => 늘상 for 에서 자주 쓰는 친구였다. 4. 시작시간은 어떠세요? 21시~22시 괜찮다는 의견.
[3회차 로그] 참석자 : 리유(독자), 호에, 람쥐, 유버그, 영롱, 모니 시작시간 : 12월 30일 21시 10분 시작파트 : 2-9 비교연산자 종료시간 : 12월 30일 22시 10분 종료파트 : 2-12 Null 병합 연산자 메모 : 나중에 Re:할 때 연산자 과제 꼭 해 볼것. 후기 : Null병합연산자 아직 시기 상조 같았지만 잘쓰면 될 듯 ?? = 삼항연산자의 진화형이지만, 역시 아직 맘에 안와닿는다. 남발하면 가독성을 해칠 것 같은 기분이 들었다. 언제나 잘 써야한다.
[4회차 로그] 참석자 : 리유(낭독자), 유버그, 모니, 람쥐, 영롱, 호에 시작시간 : 2021년 01월 01일 21시 10분 시작파트 : 2-13 while 과 for 종료시간 : 2021년 01월 01일 21시 50분 종료파트 : 2-15 함수 / 기본값 후기 : label -> same goto
모던JS를 처음 읽어보는 사람이 옆에 같이 띄워놓고, 읽으면서 부담없이 학습을 진행할 수 있으면 좋을 것 같아서 쓰는 메모 조각
자바스크립트란?
누가 읽을지 모르겠지만 나랑 같이 읽어보자. 오, 자바스크립트에 대해서 구구절절하게 최근 쓰임세 등 뭔가 적혀있다. javascript 를 초기 브라우저용 동적 언어라고 소개. 서버용으로도 쓸 수 있다고, 요즘은 엔진이 여기저기 들어있어 어디서든 쓰이는 추세라고 설명함. 역사나 자바스크립트를 분석하기위한 인터프리터 엔진들에 대한 간략한 소개들, 파생언어에 대한 소개가 있다.
앞으로 접할 JS(약어)친구는 이렇구나 정도, JAVA와 앞에 영문자 4글자만 같지 전혀 다른 친구라는 것을 말하고있는 페이지.
메뉴얼과 명세서
자바스크립트의 근간이되는 규약문서(ECMA-262 명세)에 대해 소개하고 있는데, 눌러서 보다보면 머리 아프니, 아 이런게 있음 이런거 보고 예전엔 브라우저를 만들었었다. 하고 넘어가자.
살다보면 JS에검색할모던자바스크립트를 보다가 이해되지 않는 경우 MDN을 참고해서 검색해보자. 하나 더 예를들면 구글에다가
