HTML, CSS, JS만을 활용한 영화 검색 페이지 구현(2) HTML, CSS, JS만을 활용해 영화 검색 페이지를 구현하면서 기본적인 구현 과제를 제외하고 추가적인 기능으로 무한 스크롤을 구현하려고 했다. 기존에 React를 공부했을 때 연습해 본 경험이 있어서 쉽게 구현할 거라 생각했지만 생각 외로 너무 고민했던 부분들이 많았기에 정리하고 복습하려고 한다. 이벤트 등록 if (currentPage === "movieList.html") { $searchResults.addEventListener("click", (e) => { bookMarkCheck(e); }); $searchInput.addEventListener("input", async (e) => { inputSearch = e.target.value.toLower.. Web API LocalStorage 활용해서 데이터 저장하기 Web API인 LocalStorage를 활용해서 브라우저 상에 데이터를 저장하고 저장한 데이터를 활용하는 방법을 공부하기 위해 내용을 정리하고 복습하려 한다. LocalStorageLocalStorage는 브라우저 내에 데이터를 키-값의 형태로 저장할 수 있도록 해준다. LocalStorage를 사용하면 웹 페이지를 끄고 다시 브라우저를 실행해도 데이터가 지워지지 않고 그대로 유지된다. 또한 브라우저를 여러 탭 혹은 여러 창을 띄워놔도 서로 데이터가 공유된다. 다만 이러한 데이터가 공유되고 유지되는 것은 같은 브라우저를 사용하는 경우에 해당한다. 데이터 저장하기localStorage.setItem(키, 값)localStorage.setItem('movie', '해리포터')localStorage.set.. 자바스크립트 얕은 복사와 깊은 복사 완벽 이해하기 자바스크립트를 배우면서 중요한 개념이라고 할 수 있는 얕은 복사와 깊은 복사에 대해 이해하고 활용할 수 있도록 공부하려고 한다. 특히나 리액트 같은 경우는 원본 데이터를 변경하지 않고 데이터를 복사해서 새롭게 사용하기 때문에 이 개념에 대해 정확하게 알고 있어야 한다고 생각한다. 얕은 복사와 깊은 복사 복사는 그냥 = 해서 할당하면 되는 거 아닌가?라고 생각했었던 사람으로 얕은 복사와 깊은 복사는 많은 차이를 가지고 있다. 얕은 복사는 최상위 에서만 복제가 되는 것을 말하고 깊은 복사는 객체의 끝까지 모두 복사가 되는 것을 말한다. 예시 코드를 보면서 더 자세하게 살펴보자 const bookshelf1 = { 책1: "해리포터", 책컬렉션: { 소설1: "반지의제왕", .. HTML, CSS, JS만을 활용한 영화 검색 페이지 구현 + 반성문 독학으로 여러 강의들을 들으며 공부를 할 때 클론 코딩으로 쉽게 만들었던 영화 검색 페이지를 클론 코딩이 아닌 아는 지식을 활용해서 구현하는 과제를 받았다. 클론 코딩으로 공부하면서 당연히 다 완벽하게 할 줄 아는구나라고 생각했는데 이번 과제를 구현하면서 정말 수박 겉 핥기 식으로 공부했다는 걸 다시 한번 뼈저리게 느꼈다. 우선 각각의 역할을 분리하고 분명히 하라는 조건을 받았다. 모듈화를 통해서 코드의 재사용 성과 유지 보수성을 높이기 위해서 나름의 구조를 아래와 같이 분리했다. SPA를 만들어봐야 하나 MPA를 만들어야 하나 많은 고민을 하다가 여태까지 해왔던 기초적인 부분들을 다시 한번 다지고 따라간다는 마음으로 MPA를 만들었다. styles 디렉토리에 각 구역별로 css 파일을 분리하고 fon.. 자바스크립트 클로저 완벽하게 이해하기 자바스크립트의 어려운 문법 중 하나로 손꼽히는 클로저에 대해 자세하게 알아보려고 한다. 특히나 React 를 공부하는 사람으로써 클로저의 개념이 다양한 부분에서 활용되는 만큼 확실하게 이해하고 넘어가야 한다고 생각한다. 그럼 이제 클로저에 대해 좀 더 상세하게 알아보려고 한다. 클로저클로저는 함수와 함수가 선언된 렉시컬 환경의 조합을 의미한다. 좀 더 쉽게 말해 내부 함수가 외부 함수의 변수에 접근할 수 있는 구조를 의미하는데 이러한 클로저는 데이터를 숨기고, 캡슐화하는데 주로 사용된다. 클로저를 사용하는 이유let num = 0;const increase = function () { return ++num;};console.log(increase()); // 1num = 100; // num에 다시.. 자바스크립트 함수 호출에 따른 this 와 명시적 바인딩 자바스크립트에서 헷갈리는 내용을 뽑는다고 하면 가장 우선순위에 들어갈 내용이 바로 this 키워드라고 생각한다. 자바스크립트에서의 this는 호출 방식에 따라 다르게 사용되기 때문에 헷갈리더라도 정확하게 공부하고 용도에 맞게 사용할 수 있도록 알아두어야 한다. thisthis 키워드는 자신이 속한 객체를 가리키는 식별자이다. 하지만 자바스크립트에서의 this는 다른 언어와 조금 다르게 동작한다. 자바스크립트에서의 this는 함수가 어떻게 호출되었는지에 따라 this가 가리키는 객체가 결정된다. 즉 this 바인딩은 함수의 호출 방식에 따라(누가 어떻게 호출했는지에 따라) 동적으로 결정된다. this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이기 때문에 객체의 메서드 내부, 생성자 함수 내.. 이전 1 2 3 4 ··· 6 다음
