개발 성장 일ブl

실행 컨텍스트 🛠️실행할 코드에 제공할 환경 정보들을 모아놓은 객체=>  쉬운말로, 자바스크립트가 코드를 잘 이해하고 실행할 수 있도록 도와주는 중요한 도구 실행 컨텍스트 구성요소1. Variable Environment현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보초기값을 유지구성 : environmentRecord + outer-EnvironmentReference2. Lexical Environment처음엔 Variable Environment와 같지만 변경 사항이 실시간으로 반영됨구성 : environmentRecord + outer-EnvironmentReference3. ThisBinding식별자가 바라봐야 할 대상 객체this로 지정된 객체가 저장(지정되지 않은 경우 : 전역 ..

실행 컨텍스트자바스크립트 코드를 실행하는데 필요한 환경을 제공하는 객체자바스크립트 엔진이 코드를 평가 하고 실행 하는 데 필요한 정보를 담고 있는 공간실행 단계평가 단계(컴파일 단계): 레코드 수집(호이스팅) 및 상위 스코프(Outer) 결정→ Record: 선언된 변수, 함수, 클래스 등이 기록되는 공간. 식별자와 그 값이 저장됩니다.→ Outer : 상위 스코프를 가리키고 있는 공간. 스코프체인을 형성하는 역할을 합니다실행 단계(런타임 단계): 함수 실행 시 실행 컨텍스트를 콜 스택에 푸쉬하고 변수에 값 할당이벤트 루프비동기 작업을 관리하고 순서대로 프로그램의 실행 흐름을 제어하기 위한 장치콜 스택과 큐를 관리하면서 순차적인 코드 실행을 위한 비동기 처리 매커니즘fetch.then(task Queue..

스크립트 로딩 속성이란🤔script태그에서 자바스크립트 파일이 브라우저에 의해 로드되고 실행되는 시점과 방식을 제어하는 역할 *html 자체 기능임!속성예시설명로드 방식실행 시점실행 순서주 사용 목적없음HTML 파싱 중단 후 로드 및 실행순차 로드(HTML 파싱 중단)로드 완료 즉시HTML 선언 순서대로단순 스크립트, HTML 상단에 배치되는 경우 주로 사용deferscript src="example.js" defer>script>HTML 파싱과 병렬로 로드, HTML 파싱 완료 후 실행병렬 로드HTML 파싱 완료 후HTML 선언 순서대로DOM 조작이 필요한 스크립트asyncscript src="example.js" async>script>HTML 파싱과 병렬로 로드, 로드 완료 후 즉시 실행병렬 로드..

✅17장 생성자 함수에 의한 객체 생성객체 리터럴에 의한 객체 생성 방식을 배웠다!(참고)👉가장 일반적이고 간단한 객체 생성 방식 [DeepDive]10~12장 객체 리터럴/원시 값과 객체의 비교/함수✅10장 객체 리터럴자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든것이 객체!객체란🤔 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합 *메서드 : 프로퍼bom-na.tistory.com이번엔 생성자 함수를 사용하여 객체를 생성하는 방식을 알아보쟈! Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성// 빈 객체의 생성var pers..

const team = { name: 'Developers', members: ['Alice', 'Bob'], introduceTeam() { this.members.forEach(function(member) { console.log(`${member}는 ${this.name} 팀에 속해 있습니다.`); }); }, introduceTeamArrow() { this.members.forEach(member => { console.log(`${member}는 ${this.name} 팀에 속해 있습니다.`); }); },};team.introduceTeam();// Q1. 콘솔에 어떻게 출력이 될까요?t..

로컬 스토리지란🤔웹 브라우저에 데이터를 저장하는 방법 중 하나로, 브라우저를 닫거나 다시 열어도 유지되는 데이터 저장소 저장 용량 : 일반적으로 약 5MB 정도의 용량을 제공문자열 형태로 저장: 모든 데이터는 문자열(string) 형식으로 저장동기적 동작: 로컬스토리지는 동기적으로 작동하므로, 데이터를 저장하거나 가져오는 작업은 즉시 완료영구적 저장: 사용자가 직접 데이터를 삭제하거나 브라우저 데이터를 초기화하지 않는 한, 데이터는 유지언제 사용🤔사용자 설정 저장: 테마, 레이아웃 설정 등 웹사이트의 사용자 설정을 저장할 때사용자 세션 유지: 로그인 상태 또는 쇼핑 카트 정보를 유지할 때오프라인 데이터 저장: 오프라인 상태에서도 사용할 수 있도록 데이터를 미리 저장해 둘 때문법💫setItem로컬스토..

프로젝트를 하면서 이벤트가 자주 발생시킬때, 성능 최적화를 위해 디바운싱 or 스로틀링을 사용하라는 숙제가 있었다.이때 처음으로 알게된 성능 최적화 기법이다! 디바운싱어떤 이벤트가 짧은 시간에 여러 번 발생할 때, 마지막 이벤트만 실행되도록 하는 기법예를들어 사용자가 입력 필드에 글자를 계속 입력할 때마다 검색 요청을 보내면 성능에 문제가 생길 수 있음👉디바운싱을 사용하면 사용자가 일정 시간 동안 입력을 멈출 때만 요청을 보내게 함언제 사용🤔입력 필드에서 실시간 검색: 사용자가 입력할 때마다 API 요청을 보내지 않고, 사용자가 입력을 멈출 때만 요청을 보내고 싶을 때.창 크기 조정 이벤트: 브라우저의 창 크기가 변경될 때, 변화가 멈춘 후에만 계산하거나 처리를 실행하고 싶을 때.// 사용자가 입력을..

정규 표현식이란🤔 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴  자바스크립트에서는 정규 표현식도 객체로서 밑에 메서드 가능RegExp의 exec() , test()String의 match(), matchAll(), replace(), replaceAll(), search(), split()정규 표현식 만들기💫정규 표현식 리터럴 (주로 사용)정규 표현식이 코드가 실행될 때 바로 컴파일됨👉즉, 정규 표현식이 고정된 경우 성능이 더 좋음bbb가독성 굿특수 문자를 그 자체로 사용가능ex : \dconst regex = /pattern/;RegExp객체 생성자패턴을 동적으로 생성해야 할 때 유용👉예를 들어, 변수에 따라 정규 표현식을 생성해야 하는 경우에 사용문자열로 입력받기 ..

코테를 하면서 가~끔 최대 공약수를 구하는 문제가 나오는데, 이번엔 둘다 구하는 문제였다.내힘으로 풀었다가 예외 케이스에서 자꾸 틀려서 결국 구글링의 힘을 빌렸다ㅠㅠ...그런데 잘한듯! 유클리드 알고리즘을 이용하면 쉽게 구할 수 있다유클리드 알고리즘이란🤔두 정수의 최대공약수(GCD)를 효율적으로 계산하기 위해 고안된 고대 그리스의 방법 알고리즘의 기본 원리는 다음과 같다.기본 원리1. 정의두 정수 ( a )와 ( b ) (단, ( a > b ))의 최대공약수는 ( b )와 ( a )를 ( b )로 나눈 나머지인 ( r ) (즉, ( r = a \mod b ))의 최대공약수와 같다이를 수식으로 표현하면 다음과 같다gcd(a,b) = gcd(b,r)2. 알고리즘의 단계두 수 ( a )와 ( b )를 가지고..

프로젝트 개요🎬이번 프로젝트는 영화 검색 사이트로, 인기영화, 영화 검색 리스트를 목표로 구현했다.사용자는 인기 영화, 영화 상세 정보를 얻어갈 수 있다.기술 스택🧷프론트엔드 : html, css, vanilla.jsAPI : TMDB개발과정🎈아이디어 구상스파르타 내일 배움 수업을 듣다가 바닐라 자바스크립트 + TMDB API를 사용하여 영화 리스트를 보여주는 사이트를 구상함디자인여러 영화 리스트 사이트를 벤치마킹하여 피그마에 디자인함마지막 구현하다가 디자인이 단조로워서 폰트랑 팝업 레이아웃를 수정함colorbg #0d0d0d 검정계열point #f2c94c 노랑 (버튼, 링크, 강조 텍스트에 사용)font #a9a9a9font기본 SpoqaHanSansNeo-Regular로고 Bad Script네..