이 글에서 알아볼 것 this란? this 사용시 주의점 1. this란? 함수 내에서, 즉 해당 함수가 객체의 일부인지와 상관없이 this 키워드는 해당 함수를 호출한 모든 항목을 참조한다 const newMovie = { info: { title: title, [extraName]: extraValue, }, id: Math.random().toString(), getFormattedTitle: function () { return this.info.title.toUpperCase(); } }; 객체내에서 객체의 프로퍼티에 접근하기 위해서 this를 활용할 수 있다. 2. this 사용시 주의점 앞서 설명했듯이 this는 자동으로 주위에 있는 항목을 참조하는 대신, 해당 함수를 호출한 주체를 참조한다..
React는 많은 자바스크립트 라이브러리 중 가장 인기있는 라이브러리이다. 내가 React를 처음 접했을 때는 정말 신기하고 재밌었다. 자바스크립트의 구체적인 지시가 필요한 명령형이 아닌 선언적 접근 방식이라는 점에서 처음에는 정말 이 코드가 정상적으로 돌아갈까? 했던 적도 있었던 기억이있다. 블로그를 시작하면서 자바스크립트를 모두 정리한 다음에 리액트를 정리하려했지만, 하나만 계속 하려니 금방 지겨워져서 리액트와 같이 정리하려 한다. 이 글에서 알아볼 것 React란? 왜 사용하는가? 컴포넌트 JSX React 작동 방식 props 1. React란? 왜 사용하는가? React란? 사용자 인터페이스를 구성하는 자바스크립트 라이브러리이다. 왜 사용하는가? HTML&CSS&JS를 통한 구축보다 좀더 간단히..
자바스크립에는 여러 중요한 데이터 구조들이 존재하지만, 그 중 객체는 가장 중요한 데이터 구조이다. 이번 글에서 알아볼 내용 객체란? 프로퍼티(추가, 수정, 삭제) 객체를 복사하는 두가지 방법 대괄호를 이용한 동적 접근 1. 객체란? 앞서 객체가 가장 중요한 데이터 구조라 하였는데, 왜일까? 현실에 존재하는 개체를 나타낼 때 사용되기 때문이다. 예를들어 아주 복잡한 코드가 존재한다할때..프로그래머가 아닌 다른 사람들이 볼때는 이게 도대체 뭘 의미하는지 모를것이다. 하지만, 아래 코드를 보자 const movieData = { title: "기생충", desc: "ㅁㄴㅇㄹ", rate: 5 } -> 누가 보아도 영화와 관련되어있는 것을 알 수 있다. 이처럼 객체는 현실에 있는 개체를 설명하고, 인간에게 있..
배열에 관한 나머지 내용을 알아보려한다. 이번 내용들은 기초적인 내용이 아닌, 심화 내용이므로 정확한 정리가 필요하다 느꼈다. 이번 글에서 알아볼 내용 reduce() 메서드 스프레드 연산자 배열 구조 분해 1. reduce() 앞서 두 글에서 배열 메서드에 대해 알아보았었다. reduce() 또한 배열 메서드 중 하나인데, 따로 정리하는 이유는 꽤..복잡하기때문이다. 따라서 자세히 알아보려 한다 redcue() 메서드란? 배열을 더 단순한 값으로 줄여주는 메서드 ex) 배열의 모든 숫자의 합등을 구해 단일 숫자로,, 또는 단일 문자열로,, reduce() 구조 const sum = prices.reduce((prevValue, curValue, curIndex, prices) ⇒ {}, 0) 첫번째 인..
앞에 글에서 살펴본 메서드들이 기본적인 메서드들이였다면, 이번에 다룰 메서드들은 조금 심화된 메서드들이다. 1. forEach() 자바스크립트에는 다양한 반복문이 존재한다. (for, for-of, for-in, while...) 이 중 배열에 사용하는 반복문은 for-of문이다. (물론 for, while도 가능하다) forEach() 또한 배열에 사용하는 반복문이다. 그렇다면 왜 for-of 말고 forEach()가 또 있으며, 언제 사용할까? 성능, 코드 길이등등의 이유가 있겠지만, 가장 중요한 for-of와 forEach의 차이점은 어떠한 이유로 인덱스가 필요할 경우 for-of문은 활용될수없다는 점이다. 반면 forEach()는 가능하다 (물론 기본 for문으로도 인덱스에 접근할 수 있지만,,,..
배열이라는 문법은 대부분의 프로그래밍 언어에 존재하고, 당연히 자바스크립트에도 존재한다. 또한, 배열의 활용도는 매우 높고 중요하기 때문에 정확히 알아둘 필요성이 있다. 1. Iterable, 유사 배열 객체 배열을 알기 위해서는 Iterable과 유사 배열 객체를 먼저 알아봐야한다. 1_1. Iterable Iterable이란 반복 가능한 객체로, for-of문을 사용할 수 있는 특징이 있다. 이러한 Iterable에는 대표적으로 배열, Map, Set..등이 존재한다. 1_2. 유사 배열 객체 유사 배열 객체란 배열과 비슷한 형태를 갖고있고, length 프로퍼티를 갖고있는 객체로, 아이템에 엑세스하기 위해 인덱스를 사용하는 객체이다. 이러한 유사 배열 객체에는 대표적으로 NodeList, Strin..
자바스크립트에는 여러 주요 기능이 존재하지만, 가장 중요한 기능은 html 문서와의 상호작용을 통한 브라우저에 렌더링하는 기능이 제일 중요할것이다. 이렇게 html 문서와 상호작용하여 브라우저에 렌더링 할 수 있는 이유는 무엇일까? 바로 DOM(Document Object Model)때문이다. 1. DOM이란? DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 즉, 자바스크립트등의 언어가 쉽게 웹 페에지에 접근하여 조작할 수 있게 연결시켜주는 역할을 한다. 또한, DOM은 모두 노드(Node)로 이루어져있는 객체이다. 이러한 노드에는 두가..
속성과 프로퍼티는 언뜻보기에 비슷해보이지만, 다르다. 이에대한 차이점을 간단하게 살펴볼려한다. 속성 vs 프로퍼티 1. 속성- 속성은 프로퍼티에 매핑되어있고, live synchronization이 설정되어있다. (단, 항상 그런것은 아님) ex) html 태그의 속성…id, class, value… 2. 프로퍼티 - HTML 코드를 기반으로 생성된 객체에 저장된 값 ex) const input = doucment.~ … input.id, input,className, input.value… 속성 설명에서 속성은 프로퍼티에 매핑되어있다는 것은 무슨 의미일까? -> 속성이 변하면 프로퍼티도 변하고, 프로퍼티가 변하면 속성도 변한다는 뜻이다.(live sync)..하지만, 예외도 존재 예를들어보자면.. - ..
