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는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이기 때문에 객체의 메서드 내부, 생성자 함수 내.. 자바스크립트 실행 컨텍스트 복습 및 정리하기 자바스크립트 문법을 공부하면서 가장 이해가 어려운 부분을 손에 꼽으라고 한다면 실행 컨텍스트 부분이 아닐까 싶다. 낯선 단어들과 이해가 어려운 내용들로 되어있지만 자바스크립트 엔진이 코드를 실행하는 방식을 이해하는데 중요한 역할을 하기 때문에 꼭 짚고 반복학습하면서 넘어가기로 결정했다. 이해하고 정리한 내용을 작성하려고 한다. 실행 컨텍스트실행 컨텍스트란 무엇인가? "실행 컨텍스트는 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역" 혹은 "실행할 코드에 제공할 환경 정보들을 모아놓은 객체"라는 설명이 많다. 무슨 설명인지 하는 마음이 크지만 예시 코드와 그림들을 보면 좀 더 이해가 쉬워질 수 있다. 보통 자바스크립트가 실행되는 런타임은 브라우저 혹은 Node.Js .. 자바스크립트 자료형 Set 학습 및 정리하기 코드에 현실 세계를 반영하기 위해서 다양한 자료구조들이 있지만 기존의 것들 만으로는 부족하기 때문에 Map, Set이 추가되었다. 이 Map과 Set은 기존의 자료구조와 비슷한 점이 있으면서도 다른 점이 있다. 기존에 사용하던 객체와 배열로는 구현하기 어려웠던 특정한 기능들 또한 제공한다. SetSet은 중복이 없는 값들의 집합이라고 볼 수 있다. 모든 유형의 고유한 값을 저장할 때 사용한다. Set은 배열과 유사하게 순서를 가지지만 서로 인덱스가 달라 동일한 값을 여러 번 저장할 수 있지만 Set은 중복된 값을 허용하지 않는다. 1. 특징각각의 값들은 Set 내에서 한 번만 나타날 수 있다. 즉 유일한 값이다.데이터의 삽입 순서를 가지고 있다.NaN을 포함한 모든 데이터를 저장할 수 있다. 2. S.. 자바스크립트 자료형 Map 학습 및 정리하기 코드에 현실 세계를 반영하기 위해서 다양한 자료구조들이 있지만 기존의 것들 만으로는 부족하기 때문에 Map, Set이 추가되었다. 이 Map과 Set은 기존의 자료구조와 비슷한 점이 있으면서도 다른 점이 있다. 기존에 사용하던 객체와 배열로는 구현하기 어려웠던 특정한 기능들 또한 제공한다. MapMap은 객체와 같이 key-value의 형태로 데이터를 저장한다는 점에서 객체와 유사하다. 하지만 몇 가지 중요한 차이점들이 존재한다. 1. 차이점키의 값으로 모든 타입의 값을 사용할 수 있다. (객체는 문자열 형태로 저장)데이터의 삽입 순서를 가지고 있다.크기를 쉽게 얻을 수 있다.반복이 쉽다. 2. Map 생성하기const myMap = new Map(); Map( ) 생성자를 통해 Map을 생성하고 반드.. 자바스크립트와 객체 지향 프로그래밍 자바스크립트를 공부하다 보면 "자바스크립트는 객체지향 언어이다" 혹은 "객체는 자바스크립트의 모든 것이다"라는 이런 내용이나 문구를 많이 보게 된다. 대체 객체지향 프로그래밍이 무엇이고 왜 객체지향 프로그래밍이라고 하는지 알아보고 자바스크립트에 대한 이해도를 더 높일 수 있도록 정리하려고 한다. 객제치향 프로그래밍객체 지향 프로그래밍(Object-Oriented Programming)은 프로그래밍의 하나의 방법론으로 객체라는 기본 단위로 나누어 이들이 서로 상호작용을 통해 프로그래밍 하는 방식이다. 이때 객체는 관련이 있는 데이터, 함수, 변수 등을 하나의 단위 즉 객체로 묶는 것을 의미하는데 이 객체지향 프로그래밍에는 캡슐화, 상속, 다형성 등 다양한 특징을 가지고 있다. 객체지향의 반대의 의미를 가진.. React 무한 스크롤 기능 구현해 보기 React를 공부하면서 "코딩 알려주는 누나"라는 유튜브 채널에서 React 무한 스크롤 기능을 잘 설명해 준 내용이 있었다. 무한 스크롤이 어떠한 형식으로 구현되는지 공부하고 다시 한번 반복 학습하기 내용을 정리하며 복습하려고 한다. 무한 스크롤그렇다면 무한 스크롤은 대체 어떤 기능일까? 처음 말만 들었을 때는 무한으로 스크롤을 한다? 라고만 이해되었다. 이게 무엇일까? 고민하던 찰나에 페이지 네이션 기능과 무한 스크롤의 차이를 알게 되었는데 너무 쉽게 이해되었다. 특히나 인스타그램, TicTok 등 다양한 애플리케이션에서 무한스크롤을 지원하면서 사용자 경험을 향상시킨다고 볼 수 있다. 페이지네이션 : 사용자가 직접 페이지를 이동하면서 데이터를 볼 수 있다.무한 스크롤 : 페이지가 특정 하단에 도달했을.. JavaScript 변수 선언 var, let, const의 차이와 활용 자바스크립트 변수의 선언 방식은 시간이 지남에 따라 많이 발전해 왔다. ES6에서 let과 const가 도입되면서 변수 선언에 많은 선택지를 가질 수 있게 되었고 활용법도 다양해졌다. 오늘은 var, let, const의 차이와 활용방법에 대해 확실하게 공부하고 넘어가려고 한다. varvar는 자바스크립트에서 가장 오래된 변수 선언 키워드이다. 현재의 코드 구현에서는 자주 만나볼 순 없는 키워드이지만 레거시 한 코드를 만진다면 만나볼 수 있는 키워드이다. 이러한 var 키워드에는 몇 가지 주요 단점이 있는데 이러한 단점들을 보완하기 위해 let, const 키워드가 추가되었다. 1. 함수 레벨 스코프 지원var로 선언된 변수는 함수 레벨 스코프 혹은 전역 레벨 스코프를 지원한다. 블록 레벨 스코프를 지원.. 이전 1 2 3 다음
