TodayILearned/javascript
-
실행컨텍스트와 클로저TodayILearned/javascript 2021. 6. 25. 17:33
poiemWEB,제로초님의 블로그글을 읽고 공부한 내용을 정리했습니다. 실행컨텍스트 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념 브라우저가 스크립트를 실행하는 순간, 전역 컨텍스트가 생성됨( 모든것을 관리하는 환경) 이후 함수를 호출할 때 마다 함수 컨텍스트가 하나씩 생성된다. 컨텍스트의 네가지 원칙 전역 컨텍스트 생성 후, 함수 호출 시 마다 컨텍스트가 생성 컨텍스트 생성 시 컨텍스트 안에 변수객체(variavle, argument), scope chain, this가 생성됨 컨텍스트 생성 후 함수 실행, 사용되는 변수들을 변수 객체 안에서 찾고 없다면 스코프 체인을 따라 올라가며 찾는다. 함수 실행이 마무리되면 해당 컨텍스트는 사라짐(클로저 제외) 페이지가 종료되면 전역 컨텍스트는 사라짐. ..
-
자바스크립트는 싱글스레드인가?TodayILearned/javascript 2021. 6. 24. 17:22
자바스크립트는 싱글스레드 언어이다. 그래서 코드가 위에서부터 아래로 순차적으로 실행된다. 하지만 정작 웹페이지를 만드려고 코딩을 하다보면, 비동기와 같은 단어가 등장한다. 자바스크립트의 작동원리 자바스크립트는 싱글 스레드 언어가 맞다. 메인스레드가 하나이기 때문이다. 그래서 한번에 한개의 작업만을 처리하는데, 이것을 동기적이라고 한다. 이러한 특성 때문에 오래걸리는 작업이 콜스택에 걸리게되면, 유저는 느린 작업을 경험하게 된다. 그러나 자바스크립트의 런타임이 이러한 단점을 보완해준다. 자바스크립트를 실행시키는 엔진은 브라우저마다 다르다. SpiderMonkey : 파이어폭스 / V8 : 크롬 / Webkit : 사파리 / Chakra : 익스플로러, 엣지 자바스크립트 엔진은 변수와 객체에 대한 메모리를 ..
-
The Complete JavaScript Course 2021(2)TodayILearned/javascript 2021. 6. 23. 23:30
2021.06.22 - [TodayILearned/javascript] - The Complete JavaScript Course 2021(1) The Complete JavaScript Course 2021(1) 유데미의 the complete javascript course를 듣고 정리한 내용입니다. 자바스크립트란? 자바스크립트는 고수준 언어이고, 객체 기반의 언어Object-oriented programming (OOP)이며, 멀티 패러다임 언어이다. 자바.. tuigun.tistory.com 이어서 쓰는 글 Function calling other Fucntion, 함수내에서 또다른 함수 호출하기 함수 내에서 또다른 함수를 호출하여 사용이 가능하다. DRY (Don't repeat your sel..
-
The Complete JavaScript Course 2021(1)TodayILearned/javascript 2021. 6. 22. 23:05
유데미의 the complete javascript course를 듣고 정리한 내용입니다. 자바스크립트란? 자바스크립트는 고수준 언어이고, 객체 기반의 언어Object-oriented programming (OOP)이며, 멀티 패러다임 언어이다. 자바스크립트의 역할? 웹 상에서 HTML은 콘텐츠를 표시하고, CSS는 어떻게 보여줄 지 구현하고, 자바스크립트는 웹 앱을 운영하는 프로그래밍 언어 역할을 한다. 자바스크립트의 원시타입? 1. NUMBER 2. STRING 3. BOOLEAN 4. Undefined 5. Null 6. Symbol (ES2015) 7. Bigint (ES2020) 이 중 1~3이 가장 중요한 원시타입이다. Javascript has dynamic typing 자바스크립트는 직접 ..
-
랜덤한 알파벳과 숫자가 나오는 HEX CODE 작성하기TodayILearned/javascript 2021. 1. 29. 23:34
2021/01/25 - [TodayILearned/javascript] - Random HEX COLOR CODE 만들기 Random HEX COLOR CODE 만들기 book.vanillacoding.co/starter-kit/step-4/mini-web-projects/background-changer Background Changer 기간: 최대 3일 book.vanillacoding.co 를 참고하여 작성한 코드임을 밝힙니다. Random HEXCOLOR CODE COD.. tuigun.tistory.com 의 코드를 수정했다. 수정내용 기존에 여섯자리의 숫자만 나오는 hex code를 작성했는데, tostring() 과 substring()를 이용해 숫자와 알파벳이 랜덤하게 나오는 hex cod..
-
airbnb JavaScript Style Guide 적용하여 코드 수정하기TodayILearned/javascript 2021. 1. 27. 00:04
2021/01/25 - [TodayILearned/javascript] - Random HEX COLOR CODE 만들기 Random HEX COLOR CODE 만들기 book.vanillacoding.co/starter-kit/step-4/mini-web-projects/background-changer Background Changer 기간: 최대 3일 book.vanillacoding.co 를 참고하여 작성한 코드임을 밝힙니다. Random HEXCOLOR CODE COD.. tuigun.tistory.com 의 코드를 수정했다. 수정내용 Indent 편집기마다 탭사이즈가 달라서 보통 스페이스를 이용해 indent한다고 한다. 이거 맨 처음 코딩 배울 때 들었던 것 같은데 왜 그동안 탭키를 애용했었..
-
Random HEX COLOR CODE 만들기TodayILearned/javascript 2021. 1. 25. 23:58
book.vanillacoding.co/starter-kit/step-4/mini-web-projects/background-changer Background Changer 기간: 최대 3일 book.vanillacoding.co 를 참고하여 작성한 코드임을 밝힙니다. Random HEXCOLOR CODE CODE HTML 더보기 What is this color? CSS 더보기 body { display: flex; align-items: center; flex-direction: column; } javascript const CODE = document.querySelector(".js_code"), INPUT = document.querySelector("input"), BODY = documen..
-
노마드 코딩 Momentum clone coding(1)TodayILearned/javascript 2021. 1. 8. 01:29
nomad coding의 momentum 클론 강의를 듣고 작성하는 게시물입니다. localStorage 유저의 웹 상에 데이터를 저장, window가 닫힌 후에도 데이터가 저장되어있다. setItem(): Add key and value to localStorage getItem(): Retrieve a value by the key from localStorage removeItem(): Remove an item by key from localStorage clear(): Clear all localStorage key(): Passed a number to retrieve nth key of a localStorage setItem() 웹상에 데이터를 저장할 때 사용한다. 2개의 파라미터(key,..