javascript
모던 JavaScript 튜토리얼 파트 1 :: 8장 - "프로토타입과 프로토타입 상속", 9장 - "클래스" 정적 메서드까지 정리
모던 JavaScript 튜토리얼 파트 1 :: 8장 - "프로토타입과 프로토타입 상속", 9장 - "클래스" 정적 메서드까지 정리
2023.02.01정리 시간이 없어서 텍스트로 내용을 정리하지는 못했습니다. 스터디 때 코어 자바스크립트 내용을 참고해서 쓴 자료를 올립니다. excalidraw에서 진행했습니다. https://excalidraw.com/#json=UPKDLXv3hxLCB5lt9MDKv,2NQftxJsB_qiK6Z2CnP3pw 1. 프로토타입 상속 프로토타입 상속 ko.javascript.info 2. 함수의 prototype 프로퍼티 함수의 prototype 프로퍼티 ko.javascript.info 3. 내장 객체의 프로토타입 내장 객체의 프로토타입 ko.javascript.info 4. 프로토타입 메서드와 __proto__가 없는 객체 프로토타입 메서드와 __proto__가 없는 객체 ko.javascript.info 프로퍼티를 이..
[JS] Lexical Environment로 알아보는 Closure
[JS] Lexical Environment로 알아보는 Closure
2023.01.16쓰게 된 계기 모던 자바스크립트를 요즘 정리하면서 얘기하는 스터디를 하고 있습니다. 그런데 이 부분 내용을 따로 공유하면 좋을 것 같아서 분리하게 되었습니다. 변수의 유효범위와 클로저 변수의 유효범위와 클로저 ko.javascript.info 자바스크립트는 함수형 프로그래밍을 지원합니다. 함수가 일급 객체이기 때문에 고차함수는 익숙하게 볼 수 있습니다. let과 const를 사용하면 block scope으로 사용하게 됩니다. (자바스크립트에서도 이런 용어를 쓰는지 모르겠지만) 이렇게 눈으로 바로 블록에 쌓인 변수 범위를 lexical scope이라고 부릅니다. 외부 scope에서 내부 scope에 있는 변수를 사용하지 못하기 때문에 실수를 많이 줄여줍니다. 사실 이런 Lexical Scope과 이것을 활..
모던 JavaScript 튜토리얼 파트 1 :: 6장 "함수 심화학습" 정리
모던 JavaScript 튜토리얼 파트 1 :: 6장 "함수 심화학습" 정리
2023.01.16모던 JavaScript 튜토리얼 파트 1의 6장을 읽으면서 정리하는 글입니다. 1. 재귀와 스택 재귀와 스택 ko.javascript.info 자바스크립트는 재귀 함수의 깊이를 제한한다. (엔진에 따라 다르지만 만개 정도는 확실히 허용한다고 합니다.) function A(i) { i = i - 1; if (i < 0) return 0; return A(i); } const result = A(10_000); // 허용! const result = A(10_956); // 허용! const result = A(10_957); // Uncaught RangeError: Maximum call stack size exceeded 크롬에서 간단하게 검사툴로 돌려보니깐 10,956까지만 허용하네용. 꼬리 재귀 ..
모던 JavaScript 튜토리얼 파트 1 :: 5장 "자료구조와 자료형" 정리
모던 JavaScript 튜토리얼 파트 1 :: 5장 "자료구조와 자료형" 정리
2023.01.09모던 JavaScript 튜토리얼 5장을 읽으면서 정리하는 글입니다. 5장 자료구조와 자료형 1. 원시값의 메서드 원시값의 메서드 ko.javascript.info 원시값과 객체는 다릅니다. 원시값은 Property가 없습니다. 하지만 편하게 객체처럼 속성을 호출할 수 있습니다. 속성이 필요한 경우 원시값이 Wrapper를 통해 일시적으로 객체로 변하기 때문입니다. 잠시 메서드를 제공하기 위해 만들어진 원시 래퍼 객체(object wrapper)는 일시적입니다. 이를 Auto Boxing이라고 부릅니다. 객체는 여러 속성을 정의할 수 있습니다. 자바스크립트에서는 함수도 객체입니다. // 원시 객체를 직접 만드는 법 if (new Number(0)) { // 객체이므로, true console.log("z..
모던 JavaScript 튜토리얼 파트 1 :: 3장 "코드 품질", 4장 "객체:기본" 정리
모던 JavaScript 튜토리얼 파트 1 :: 3장 "코드 품질", 4장 "객체:기본" 정리
2023.01.02모던 JavaScript 튜토리얼 3장, 4장을 읽으면서 정리하는 글입니다. 3장 코드 품질 Chrome으로 디버깅하기 Chrome으로 디버깅하기 ko.javascript.info 브라우저는 JS를 실행시켜줍니다. 이런 브라우저에도 Javascript에 대한 것을 디버깅할 수 있는 기능이 내장되어 있습니다. 왼쪽 탭을 보시면 Thread, Watch, Breakpoints, Scope, Call Stack, 등의 익숙한 용어들이 보입니다. 다른 개발 툴과 같이 Step in/out/into, break point 등 기능이 다 있습니다. 단축키와 같은 것은 모던 Javascript 책에 잘 설명되어 있기 때문에 스킵하겠습니다. ㅎㅎ 사실 컴포넌트라는 개념은 리액트 전에도 있던 개념입니다 ㅎㅎ. Web C..
모던 JavaScript 튜토리얼 파트 1 :: 1장, 2장 정리
모던 JavaScript 튜토리얼 파트 1 :: 1장, 2장 정리
2022.12.26https://ko.javascript.info/ 를 읽으며 정리하는 글입니다. 이 책을 천천히 정리하면서 제가 알고 있는 내용을 함께 적어봅니당. 1장 소개 자바스크립트란? "자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어"입니다. 보통 웹페이지의 HTML 안에 작성하거나 불러와서 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다. 자바스크립트는 자바스크립트 엔진에서 돌아간다. 브라우저엔 '자바스크립트 가상 머신'이라는 불리는 엔진이 내장되어있고 대표적으로 크롬에서 사용하는 V8 엔진이 유명합니다. 책에서는 자바스크립트는 안전한 프로그래밍 언어라고 표현합니다. 브라우저를 대상으로 만든 언어이기 때문에 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않습니다. 인터넷에서..
발전한 자바스크립트와 현재 jQuery의 위치
발전한 자바스크립트와 현재 jQuery의 위치
2021.07.10이틀 전에 '제이쿼리는 왜 FD 로드맵에서 삭제 되었을까?'라는 글을 재밌게 읽었습니다. 문득 jQuery의 흔적을 자주 볼 수 있는 인트라넷에 이 글과 제가 개발 공부를 하면서 느낀 JavaScript와 jQuery에 관해서 쓰면 좋을 거 같아서 남겨봅니다. 주의 부족한 경험과 기억에 의존해서 적는 글이라 틀린 부분이 있을 수 있습니다. 오류나 틀린 부분이 있다면 지적 부탁드립니다! jQuery가 개발되기 전의 웹 초창기(1995~1996) 웹 브라우저 jQuery가 개발되기 전의 JavaScript는 브라우저 제조사 별로 표준이 달라서 같은 JavaScript 코드라도 어떤 브라우저에서는 동작하지만 어떤 브라우저에서는 안 돌아가는 경우가 많았습니다. 그래서 개발자에게 JavaScript는 손이 여러모..
JavaScript 공부의 필요성을 느꼈다
JavaScript 공부의 필요성을 느꼈다
2021.01.02JS(JavaScript)에 관한 공부가 필요하다고 생각하게 된 과정 내가 알던 JS 나는 C언어도 오래 사용해봤고 C#으로 게임도 만들어보고 Python으로 과제나 여러 가지 장난도 친 경험이 있다. 객체지향도 아주 조금이지만 알겠고 함수형 언어에서 많이 사용해본 map, filter나 lambda 같은 경우는 JS(JavaScript) 문법만 봐도 바로 감이 왔다. 그래서 JS도 대충 봐도 알겠다 싶었다. 대충 문법만 익히고 바로 React도 써보고 Gatsby로 정적 사이트도 Tutorial 같은 것을 보면서 바로 빌드해봤다. 모르는 문법이 나오면 구글링 하고 Python이나 내가 익힌 다른 언어의 관점에서 납득하고 넘어갔다. 일단 결과물이 보이니 '아 이게 JS이구나' 싶었다. 결론적으로는 그러다..
티스토리 사이드바에 GitHub Contribution Graph 넣는 방법
티스토리 사이드바에 GitHub Contribution Graph 넣는 방법
2020.06.06GitHub Contribution 그래프를 아래와 같이 임베딩하는 방법 1. 사이드바에 HTML을 넣을 수 있도록 해주는 배너 출력 플러그인을 적용한다 "블로그 관리 페이지 > 플러그인"에서 적용할 수 있다. 2. 사이드바에 모듈이 추가됐는지 확인한다 사이드바 페이지의 기본 모듈 카테고리에 [플러그인] HTML 배너출력이 있어야 한다. 3. HTML 배너출력 모듈을 우측 사이드바에 배치한다 노출되길 원하는 위치에 HTML 배너출력 모듈을 배치해주자. 4. GitHub Contribution 그래프를 가져오는 HTML 코드를 나에게 맞게 수정한다. 아래 코드의 22번째 줄 있는 "사용자명"을 자신의 GitHub 사용자명으로 바꾸고 전체를 복사한다. 나는 GitHub 사용자명이 IamGroooooot이기 ..