[javascript] 웹개발, frontend, JavaScript 목차

* 오버라이딩(overriding) : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식

(프로퍼티 섀도잉 : 상속관계에 의해 프로퍼티가 가려지는 현상)

* 오버로딩(overloading): 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식

 

* Emmet + visual studio code extensions : ksj12172.tistory.com/1060

[ 웹 개발 개념들 ]

CDN : https://ksj12172.tistory.com/1160

 

[ 개념들 ]

* JavaScript란 : ksj12172.tistory.com/953

* 함수형 프로그래밍 : ksj12172.tistory.com/232

* 컴파일 언어 vs 인터프리터 언어 : ksj12172.tistory.com/952

* 에뮬레이터 : 장치 지원이 안되는 하드웨어에서 소프트웨어를 실행시키기 위한 도구

* mutable, immutable ( 가변, 불변 객체 ) : https://ksj12172.tistory.com/735

* 순수함수 : https://ksj12172.tistory.com/691

* 영어는 어려워- computation, evaluation : https://ksj12172.tistory.com/1148

 

* What happens when you type a URL in the browser and press enter : ksj12172.tistory.com/1050

* Critical Rendering Path ( 브라우저 렌더링 과정 ) : ksj12172.tistory.com/19

* javascript engine이 코드를 실행하는 과정 : ksj12172.tistory.com/748

* <script> 태그를 어디에 둘까, async, defer : ksj12172.tistory.com/893

* 'use strict';를 사용하자 : ksj12172.tistory.com/894

 

* javascript 성능 : joshua1988.github.io/web-development/javascript/javascript-best-practices/

[ 모듈, 빌드 툴 체인 ]

* ES6(2015), ES11(2020) : ksj12172.tistory.com/3

* 모듈 : ksj12172.tistory.com/16

* 모듈 로더, 모듈 번들러 : ksj12172.tistory.com/753

* cors와 webpack-dev-server : react.vlpt.us/redux-middleware/09-cors-and-proxy.html

webpack-dev-server : reload the page whenever the codes changed

* css, file 등 번들링 : www.zerocho.com/category/Webpack/post/58ac2d6f2e437800181c1657

**** webpack 설정 : poiemaweb.com/es6-babel-webpack-1

*** webpack handbook : joshua1988.github.io/webpack-guide/getting-started.html#%EC%8B%A4%EC%8A%B5-%EC%A0%88%EC%B0%A8-%EC%9B%B9%ED%8C%A9-%EB%B9%8C%EB%93%9C%EB%A5%BC-%EC%9C%84%ED%95%9C-%EA%B5%AC%EC%84%B1-%EB%B0%8F-%EB%B9%8C%EB%93%9C

* webpack : ksj12172.tistory.com/317

* module import export : https://ksj12172.tistory.com/16

* 개별 모듈로 분할하기: CommonJS vs ECMAScript module : ksj12172.tistory.com/988

* dynamic import, webpack에서 dynamic import : ksj12172.tistory.com/985

* babel :ksj12172.tistory.com/764

* craco: ksj12172.tistory.com/1059

* test : ksj12172.tistory.com/1073

terminal에서 npm help init 치면 나오는 사이트 있음

* npm, npm cli 명령어, package.json, npm으로 프로젝트 시작하기 :  ksj12172.tistory.com/948

* 빌드 툴 체인 ( bundling, compile, transpile, profile, coverage, testing ) : https://ksj12172.tistory.com/757

* dist 폴더 : distribute, 배포되는 파일이 들어있는 디렉토리

( Maven 프로젝트의 target 폴더와 유사하다 )

* babel : ksj12172.tistory.com/764

* parcel로 프로젝트 구성하기 : ksj12172.tistory.com/756

* ESLint : ksj12172.tistory.com/769

* husky & prettier : https://ksj12172.tistory.com/1154

* SCM, Mono Repo : https://ksj12172.tistory.com/1155

 

[ 데이터 타입 ]

* javascript 데이터 타입 7가지 : 숫자 문자열, 불리언, null, undefined, 심벌, 객체 타입

* 원시값vs 객체 : ksj12172.tistory.com/937

* 레이블문 사용해서 이중 for문 탈출하기 : ksj12172.tistory.com/958

* 객체 생성 방식 : ksj12172.tistory.com/959

* 이터러블 객체 : ksj12172.tistory.com/986

* 데이터 프로퍼티, 접근자 프로퍼티 : ksj12172.tistory.com/1008

 

* var, let, const : ksj12172.tistory.com/983

* 전역 객체, 전역 변수 : ksj12172.tistory.com/1051

* 실행 컨텍스트 (실행할 코드에 제공할 환경 정보들을 모아놓은 객체 ) : ksj12172.tistory.com/801

* 호이스팅 - environmentRecord 관련 : ksj12172.tistory.com/849

* 스코프 ( Scope, 식별자에 대한 유효 범위 ) - outerEnvironmentReference 관련 : ksj12172.tistory.com/4

* this 바인딩 : ksj12172.tistory.com/15

this가 어떤 객체를 참조하느냐

* closure - lexical environment를 포함하고 있는 함수 : ksj12172.tistory.com/31

* 메모리 누수, GC : ksj12172.tistory.com/1052

 

* (javascript 시작할 때 보는 거) 바닐라 자바스크립트 : ksj12172.tistory.com/321

* [ weird javascrip ] type coercion : ksj12172.tistory.com/313

* 같음 비교 : ksj12172.tistory.com/766

* array - top 8 array manipulation : ksj12172.tistory.com/6

* array-api(join, split, reverse, splice, slice, filter, find, map, some, every, reduce, sort) : ksj12172.tistory.com/897

* prototype : ksj12172.tistory.com/40

* object vs Map : ksj12172.tistory.com/928

* object : https://ksj12172.tistory.com/8

* Object.defineProperty, enumerable, nonenumberable : ksj12172.tistory.com/851

* call, apply : ksj12172.tistory.com/815

* how to create random numbers : ksj12172.tistory.com/714

* lodash : ksj12172.tistory.com/798

( todo : 읽어보기 )

* 변수, 연산자, 타입의 종류 : gmlwjd9405.github.io/2019/04/18/javascript-variable-and-type.html

* type check : ksj12172.tistory.com/1129

* 비교, 반복, 문자열 이해 : gmlwjd9405.github.io/2019/04/19/javascript-if-switch-for.html

* String : ksj12172.tistory.com/5

* template literal : 

* javascript 복사 : ksj12172.tistory.com/222

* rest parameter vs spread operator : ksj12172.tistory.com/730

* 비구조화 할당 : ksj12172.tistory.com/365

* 정규표현식 : ksj12172.tistory.com/127

* generator : ksj12172.tistory.com/732

* arguments : ksj12172.tistory.com/762

* prototype 대신 class 사용하기 : ksj12172.tistory.com/41

* instance 생성 방식 : https://ksj12172.tistory.com/1141

* escape(이스케이프), unescape :  ksj12172.tistory.com/771

* HTML entity(HTML 엔티티), 이스케이프 : ksj12172.tistory.com/874

 

[ Function ]

* 함수 객체 : https://ksj12172.tistory.com/14

( todo : 읽어보고 정리하기 )

* 함수표현식, 함수 선언문 : gmlwjd9405.github.io/2019/04/20/function-declaration-vs-function-expression.html

* arrow function : ksj12172.tistory.com/752

* 생성자 함수 : ksj12172.tistory.com/987

* Pure function : ksj12172.tistory.com/691

* Higher-Order-Function : ksj12172.tistory.com/738

* Function Caching : ksj12172.tistory.com/739

* Lazy Function : ksj12172.tistory.com/740

* Currying : ksj12172.tistory.com/741

* Function Compose : 

 

[ 비동기 처리 ]

* 비동기 처리, 이벤트루프, 호출 스택, 이벤트 기반, 싱글 스레드, non-blocking : ksj12172.tistory.com/161

* Event Loop란?

* task queue들 : ksj12172.tistory.com/1058

* ajax : ksj12172.tistory.com/351

* axios, axios.cancelToken : ksj12172.tistory.com/990

* callback : ksj12172.tistory.com/29

* Promise : ksj12172.tistory.com/352

* Promise 에러처리 : ksj12172.tistory.com/1055

* async/await: ksj12172.tistory.com/354

* async/wait try-catch hell & solution : https://ksj12172.tistory.com/1153

** 비동기 요청 한꺼번에 여러 개 보내기 => await Promise.all([프로미스들])

* setTimeout : ksj12172.tistory.com/377

* setTimeout point / 주의할 점 :  ksj12172.tistory.com/919

 

[ form 처리 ]

* new FormData(form), Object.fromEntries(iterable), how to seriazlie form data : ksj12172.tistory.com/963

* how to submit serialized data to an API: send JSON or queryString with window.fetch() method : ksj12172.tistory.com/964

 

[ editor 관련 동작 ]

* selection & selection 하위의 anchor, focus, range : ksj12172.tistory.com/195

* cursor position : ksj12172.tistory.com/135

 

[ node, element 관련 ]

* 기본 : ksj12172.tistory.com/326

* make an copy of an element : ksj12172.tistory.com/367

* recursion, element.matches : ksj12172.tistory.com/252

 

[ event ]

* common events, 이벤트 생성/제거 : ksj12172.tistory.com/20

* 이벤트 버블링이란? ksj12172.tistory.com/989

* MouseEvent, CustomEvent : ksj12172.tistory.com/1011

* debounce, throttle : ksj12172.tistory.com/1012

 

* proxy : ksj12172.tistory.com/398

* URL API, history API, urlSearchParams : ksj12172.tistory.com/294

* service worker : ksj12172.tistory.com/623

* escape, unescape : ksj12172.tistory.com/771

* check dom active : ksj12172.tistory.com/979

 

[ 웹, data ]

* js-cookie : ksj12172.tistory.com/853

* 쿠키, storage : ksj12172.tistory.com/1035

* session(cookie) vs JWT : ksj12172.tistory.com/1039

* base64 인코딩 : ksj12172.tistory.com/905

* blob : ksj12172.tistory.com/892

* JSON : ksj12172.tistory.com/9

* file : ksj12172.tistory.com/151

* API란 : ksj12172.tistory.com/236

 

* ASCII, ANSI, UNICODE, UTF-8 : ksj12172.tistory.com/502

* url, 문자열 인코딩이 필요한 이유 : ksj12172.tistory.com/1057

* rest API : ksj12172.tistory.com/311

 

[ date ]

* Date, time : ksj12172.tistory.com/387

* moment : ksj12172.tistory.com/991

 

[ 활용 ]

* CORS : ksj12172.tistory.com/992

* visualization : ksj12172.tistory.com/1108

* Intl 객체 : ksj12172.tistory.com/1069

* ramda library : ksj12172.tistory.com/827

* caret, selection, range : ksj12172.tistory.com/195

developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

* random number 만들기 : ksj12172.tistory.com/714

* state-based UI component : ksj12172.tistory.com/440

* mark.js, 하이라이팅 : ksj12172.tistory.com/980

* 이미지 로딩 : ksj12172.tistory.com/166

* html2pdf: ksj12172.tistory.com/1001

* new IntersectionObserver : css-tricks.com/table-of-contents-with-intersectionobserver/

 

[ style 관련 ]

* DOM API, javascript로 node 조작하기 : ksj12172.tistory.com/326

* 요소사이즈와 스크롤 : https://ksj12172.tistory.com/129

* offsetHeight, clientHeight, scrollHeight, getBoundingClientRect() : ksj12172.tistory.com/152

* element.getBoundingClientRect(), viewport 너비/높이 알아내기 : ksj12172.tistory.com/400

 

[Next.js 목차]

* github.com/iamshaunjp/nextjs-tutorial/blob/lesson-5/comps/Layout.js

* What is Next.js, getStarted : ksj12172.tistory.com/1061