개발 성장 일ブl

this 어떤 특정 객체를 가리키는 값자바스크립트는 동적으로 결정(함수가 호출되는 시점)this 바인딩 규칙기본 바인딩 (Default Binding)일반 함수 호출에서 this는 전역 객체엄격 모드에서는 undefinedfunction showThis() { console.log(this);}showThis(); // 브라우저 환경에서는 window 객체 출력// strict 모드에서는 undefined 암묵적 바인딩 (Implicit Binding)객체의 메소드 호출에서 this는 해당 객체const person = { name: 'Alice', greet() { console.log(`Hello, my name is ${this.name}`); }};person.greet(); // A..

✅13장 스코프스코프란🤔식별자가 유효한 범위또는자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙*식별자 : 변수, 함수, 클래스의 이름 스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 🌟중요한 개념🌟👻 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있음변수, 함수와 깊은 관련이 있음function add(x,y) { //매개변수는 함수 몸체 내부에서만 참조할 수 있다. //즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x,y); // 2 5 return x + y;}add(2,5);//매개변수는 함수 몸체 내부에서만 참조할 수 있다.console.log(x, y) // ReferenceError : x is not d..

git 커밋할때 메세지 키워드가 있는지 사실 몰랐다...🙉feat: 새로운 기능 추가예: feat: Adding a new featurefix: 버그 수정예: fix: resolve login page crash issuerefactor: 코드 리팩토링 (기능 변화 없음)예: refactor: remove unnecessary functions and clean up codestyle: 코드 스타일/포맷 수정 (동작에 영향 없음)예: style: adjust indentation in CSS files chore: 빌드 작업 또는 개발 환경 설정 변경예: chore: remove unnecessary files docs: 문서 수정예: docs: README 파일 업데이트test: 테스트 코드 추가 또..

1. 북마크 리팩토링북마크 버튼의 핸들러 함수를 따로 함수로 빼고, 함수명도 좀더 가독성 있게 바꿈클릭 이벤트는 공통 함수 파일로 뺌👻북마크 페이지에서 로컬 스로티리지에 저장된 데이터를 뿌릴때 순서가 랜덤으로 됨ㅜㅜ👉객체로 바꾼후에 push로 붙여서 저장// 전bookmarkButton.addEventListener("click", () => { if (window.localStorage.getItem(data.title)) { window.localStorage.removeItem(data.title); alert("북마크에서 삭제되었습니다."); bookmarkButton.innerHTML = "Add bookmark"; const event = new C..

✅10장 객체 리터럴자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든것이 객체!객체란🤔 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합 *메서드 : 프로퍼티를 참조하고 조작 할 수 있는 동작객체생성➕객체 리터럴중괄호를 사용하여 객체를 생성let person = { name: 'Lee', gender: 'male', sayHello: function () { console.log('Hi! My name is ' + this.name); }};Object 생성자 함수object 생성자를 사용하여 객체를 생성// 빈 객체의 생성let person = new Object();// 프로퍼티 추가person.name = 'Lee';person.ge..

동기 : 작업이 순서대로 처리, 앞에 순서가 끝나야 뒤에 작업 가능비동기 : 작업이 병렬적으로 처리, 앞에 순서가 오래걸리면 다른 작업 동시에 가능 자바스크립트는 Non-Blocking I/O 를 가진 비동기를 지원하는 언어* Blocking : 시간소요 + 동기 함수 ㄴ console.log는 시간소요x , 동기* Non-Blocking : 시간소요 + 비동기 함수* I/O : 입출력 시스템(input/out)프로미스비동기 처리를 위한 패턴매개변수 : resolve(성공시), reject(실패시)setTimeout은 비동기함수이나, 프로미스는 아님❌결과 처리 : then, catch생성자 함수(new Promise)는 동기, 결과 처리(then,catch)는 비동기console.log('1');new ..

이제 마지막...!!!1. 대소문자 구분없이 검색input의 value를 정규표현식 [a-zA-Z가-힣]으로 match메서드로 대소문자 구분없이 검색해서 join으로 합치기*가-힣을 안넣어주면 한국어는 제외가 됨* || [] 을 안하면 null이 반환되고, 그상태에서 join을 사용하면 에러가 뜸const handleSearch = () => { let searchInputValue = searchInput.value; const regexValue = (searchInputValue.match(/[a-zA-Z가-힣]/gi) || []).join(""); if (regexValue) getMovieData(regexValue);}; 2. 리팩토링2-1. 실시간 검색시 스로틀링 또는 디바운싱을 ..

어제 다른 수강생들과 얘기하면서 코드를 잠깐 봤는데 파일 분리를 잘하신분이 계셨다내 코드는 현재 너무 길고 가독성이 떨어지는 것 같아서 파일분리를 했다!js폴더를 만들고- api(api처리)- movieList(api에서 가져온 데이터를 뿌리는 기능)- modal(모달창)- search(검색기능)- main(호출, 기타 기능)- bookmark(북마크 기능)이렇게 파일분리를 하였다!👻경로 에러GET http://127.0.0.1:5500/js/api net::ERR_ABORTED 404 (Not Found)GET http://127.0.0.1:5500/js/search net::ERR_ABORTED 404 (Not Found)💢 원인 : 파일경로가 잘못됨💫 해결 : import { getMovieD..

windowwindow는 DOM, BOM,JavaScript로 구성, 브라우저의 전역 객체-DOM(문서객체모델) : html 태그들을 브라우저가 읽을 수 있는 tree형태로 변경-BOM : 브라우저에서 제공하는 API 집합체-JavaScript : DOM, BOM을 조작DOM노드(Node) : DOM Tree에서 각각의 DOM 요소돔요소 선택 : document.querySelector(selectors)돔요소 추가끝에 추가 : document.createElement(tagName) => element.appendChild(child)중간에 추가 : lement.insertBefore(newNode, referenceNode)돔요소 삭제 :element.removeChild(child)돔요소 교체 : ..

✅7장 연산자🔸단항 산술 연산자x++; // 선할당 후증가 x--; // 선할당 후감소 ++x; // 선증가 후할당 --x; // 선감소 후할당🔸할당 연산자let x; x += 5 // x = x + 5 x -= 5 // x = x - 5🔸비교 연산자== 동등 비교 : 값이 같음=== 일치 비교 : 값,타입이 같음🔸삼항 조건 연산자🔸논리 연산자//논리합 연산자true || true; // truetrue || false; // truefalse || true; // truefalse || false; // false//논리곱 연산자true && true; // truetrue && false; // falsefalse && true; // falsefase && false // false//논리..