Frontend/Javascript (6) 썸네일형 리스트형 실행 컨텍스트 가볍게 이해하기 자바스크립트를 조금 공부하다보면 실행 컨텍스트라는 용어를 한 번쯤 들어보게 된다. 이 개념을 확실하게 이해하기 위해 간단한 예제 코드를 통해 실행 컨텍스택과 실행 컨텍스트를 저장하는 스택의 동작 방식을 알아보자.실행 컨텍스트(execute context)란?실행 컨텍스트는 말 그대로 코드를 실행할 때 필요한 정보(맥락)를 의미한다. 이 정보에는 구체적으로 변수, 함수 선언, this 값 등이 포함된다. 자바스크립트 엔진은 코드를 실행할 때 실행 컨텍스트를 생성하고, 이를 실행 컨텍스트 스택에 쌓아 관리한다.실행 컨텍스트의 종류는 크게 4가지로 구분할 수 있는데, 그 중 자주 쓰이는 전역 실행 컨텍스트(Global Execution Context)와 함수 실행 컨텍스트(Function Execution C.. [javascript] 객체를 불변하게 만드는 것이란?(feat.getOwnPropertyDescriptor()) 자바스크립트 개발을 하다 보면, 객체를 불변하게 만들어야 하는 경우가 종종 발생한다. 이런 상황에서 보통 우리가 사용하는 방법이 바로 Object.freeze()다. 그러나 단순히 Object.freeze()를 호출하는 것이 객체를 불변하게 만드는 이유일까? 사실 객체가 불변하다는 것은 객체가 가진 내부 속성에 따라 달라진다. 이번 글에서는 이 내부 속성에 대해 알아보겠다! Internal Slot과 Internal Method 내부 속성을 이해하려면 internal slot과 internal method 개념을 짚고 넘어가는 게 좋다. 다음은 ECMAScript의 6.1.7.2 Object Internal Methods and Internal Slots 내용을 참고해 internal slot과 inte.. [javascript] 정규 표현식 정복하기 다양한 곳에 쓰이는 정규표현식, 매번 봐도 헷가려서 정리하기 정규 표현식(regex)이란? 정규 표현식(regex)는 regular expression의 약자로 텍스트에서 특정한 규칙(패턴)을 가진 문자열을 찾을 때 사용할 수 있는 표현식이다. 정규 표현식으로 문자열에서 전화번호만 찾기, 유효한 이메일인지 확인하기 등 다양한 작업을 할 수 있어서 다양한 프로그래밍 언어에서 내부적으로 정규 표현식을 지원한다.💻 정규 표현식을 연습할 수 있는 사이트https://regexr.com/5ml92정규 표현식 사용하기정규 표현식을 나타내는 문법은 언어별로 조금씩 다르다. 그 중 javascript에서 정규식을 작성하는 방법은 다음과 같다.슬래쉬 사이에 패턴을 작성하고 종료 슬래쉬 뒤에 추가 옵션인 플래그를 붙인다.. [javascript] 프로토타입이 대체 뭔데 Javascript는 흔히 프로토타입 기반 언어(prototype-based language)라 불린다. 그래서 프로토타입을 이해하면 Javascript를 더 잘 이해할 수 있다던데...JS는 다중 패러다임 언어 프로토타입은 객체 지향과 관련이 크기 때문에 JS가 다중 패러다임 언어라 객체 지향적으로 코드를 작성할 수 있다는 사실을 넘겨 짚고 가자!그렇다면 객체 지향이 뭐야?객체를 여러 개 만들어서 프로그램을 더 쉽게 짜는 것을 지향하는 프로그래밍 방식이다.예를 들어, 코드로 차를 만드는 과정을 나타낸다고 했을 때 왼쪽처럼 차와 관련 있는 속성이나 기능을 순서대로 만들 수도 있지만, 오른쪽처럼 하나의 덩어리(객체)로 묶을 수도 있다. 객체로 묶으면 코드를 더 깔끔하게 정리할 수 있다. Class객체 지향.. [javascript] Export default? 📖 Export and Import javascript에서는 모듈을 만들어서 내보내거나 가져올 수 있다. 내보낼 때는 export 키워드를 사용하고, 가져올 때는 import 키워드를 사용한다. export는 2가지 방식을 사용할 수 있는데, 첫 번째는 export하고 싶은 개체의 이름을 모두 나열하는 방식(named export)이고, 두 번째는 default 키워드를 이용하는 방식이다. 1. named export 예시 const apple = "사과"; function banana() { console.log("바나나!!"); } export { apple, banana }; import { apple, banana } from "./module"; console.log(apple); banana(.. [Javascript] JS 기초 문법 정리 💡 정리하게 된 계기 이번에 노마드코더에서 react 스터디에 참가하게 되었는데 javascript를 복습할 필요성을 느끼게 되었다. 노마드코더의 '바닐라 JS로 크롭 앱 만들기' 강좌를 다시 들으면서 Javascript의 기초 문법을 대략적으로 정리하기로 했다. 강좌에서 배운 내용 이외에 추가하고 싶은 내용은 다른 블로그를 참고했다. 📖 정말 간략한 기초 문법 정리 변수 변수는 크게 const, let 2가지 키워드를 이용해 선언할 수 있다. const 키워드를 사용하면 변수에 값을 한 번 할당한 뒤, 다시 값을 변경할 수 없는 상수를 정의한다. let 키워드를 사용하면 변수에 한 번 값을 할당한 이후에도 나중에 값을 변경할 수 있다. 왠만하면 const 키워드를 기본으로 사용하기! let a = 5;.. 이전 1 다음
