코드사냥꾼의 전리품

리액트를 공부하고 본격적으로 개인 프로젝트를 진행하기 앞서 순수 자바스크립트만 사용해서 아주 간단한 프로젝트를 만드려고 한다. (사실, 프로젝트라고 하기에는 아주 민망한 수준이다ㅎㅎ) 내가 to do list를 만드는 이유는 다음과 같다. 내가 지닌 자바스크립트에 대한 지식수준 확인 및 복습 기능 구현에 따라 아주 멋진 포트폴리오가 됨 짧은 구현 시간 더보기 사실, 기본적인 지식에 대한 부족함으로 나중에 '취업하고 나서 민폐를 끼치는 동료가 되면 안 된다'라는 생각을 한 게 가장 크다. 하하하...😂 목표 시맨틱 태그 습관처럼 활용하기 30분 내 구현하기 시맨틱 태그 활용이 목표인 이유는 별거 없다. 물론 지금처럼 아주 작은 규모의 프로젝트에서는 필요 없지만 언젠가 입사 후 큰 프로젝트를 진행할 때 시맨..

배열과 오브젝트 두 가지를 나눠서 ES6에 새로운 문법인 비구조화 할당에 대해 알아보자 비구조화 할당 정의 우선, 비구조화 할당 문법은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 간단하게 말하자면 배열([ ])이나 객체({ }) 안의 값을 편하게 꺼내 사용할 수 있는 문법이다. 배열 비구조화 할당 비구조화 할당 시 다음과 같이 기본값을 지정할 수 있다. const [cat, dog, tiger, animal = "MONKEY"] = ["CAT", "DOG", "TIGER"]; console.log(cat); // CAT console.log(dog); // DOG console.log(tiger); // TIGER console.log(animal)..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트로 기능을 구현하다보면 값의 변형이 거의 없는 요소가 호출되는 불필요한 경우가 있다. 이런 경우 렌더링 성능이 떨어지게 되므로 좋지 않다. 따라서, 조건을 걸고 특정한 경우에만 호출 되도록 shouldComponentUpdate()를 사용한다. 해당 메소드는 오직 성능 최적화를 위해서만 사용한다. shouldComponentUpdate(newProps, newState) 해당 메소드의 기본값은 true이다. 조건을 통해 false로 지정하여 특정 경우에 호출되지 않도록 설정하면 된다. 우선, 위 메소드를 적용하기 전을 살펴보자 관리자 도구를 보면 홈페이지의 네비게이션 역할을 하는 TOC 컴포넌트의 렌더 함수도..

임의의 배열에 새로운 데이터를 추가하는 방법으로 자주 사용되는 push와 concat 의 특징과 차이점을 알아보자 push( ) push는 기존 배열에 새로운 데이터를 추가하는 방법이다. 데이터 추가 전과 후를 비교하면 true var arr1 = [1,2,3]; arr1.push(4); console.log(arr1); // 1,2,3,4 출력 var arr2 = arr1.push(4); console.log(arr1, arr2); // 1,2,3,4 와 1,2,3,4 출력 concat( ) concat은 기존 배열을 복사한 후, 새로운 데이터를 추가하는 방법이다. 데이터 추가 전과 후를 비교하면 false var arr1 = [1,2,3]; arr1.concat(4); console.log(arr1)..

자바스크립트는 event.target 속성을 통해 이벤트가 발생한 대상(요소)의 데이터 값을 가져올 수 있다. Event.target (=e.target) 예를 들어, 아래와 같은 코드가 있다고 예를 들어보자 $("a").click(function(e){ console.log(e.target); }); 실행시키면 콘솔창에 a 요소가 출력될 것이다. 즉, 위의 코드를 해석하자면 a요소 클릭 시 이벤트가 발생하며, 그 이벤트가 발생할 때마다 e.target 속성 때문에 이벤트의 대상인 a 요소가 출력된다. 만약, 데이터 속성 값(data-)을 지정한 요소의 이벤트 값은 어떻게 불러올까? e.target을 통해 현재 이벤트가 일어난 요소를 가져오고, 그 요소의 data-id로 저장한 데이터 값은 data 속성..

Data 속성 기술문서에 따르면, HTML5 버전부터 추가된 개념으로, HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정 데이터를 DOM 요소에 저장하기 위함이 목적이다. 브라우저는 해당 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자 스스로 어떠한 요소에 특정 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. 여기서 속성명은 data-value이지만 HTML의 표준 속성인 value와 전혀 관계가 없다. 임의로 만들어진 사용자 지정 데이터이기 때문이다. JavaScript에서 Data 속성 접근하는 방법 dataset 속성을 통해 접근할 수 있다. 이때, 'data-' 속성의 뒷부분을 사용한다. // ES6 let article = document.getEl..

본 내용에 들어가기 앞서 Window 객체에 대해 간단히 알아볼 것이다. JSC(Javascript core), DOM, BOM을 포함한 전역 객체이기 때문이다. 이때, F12를 눌러 콘솔 모드를 열어 Window 객체에 접근해보자 위의 예시를 보면 알 수 있듯이 모든 객체들이 Window 객체에 소속되어 있다는 것을 확인할 수 있다. 따라서 우리가 만든 변수, 함수이거나 브라우저가 제공하는 기본적인 내장 함수는 Window 객체의 메소드이다. alert('hello world!'); == window.alert('hello world!'); BOM이란? Browser Object Model의 약자이며, 웹 브라우저에 대한 모든 내용을 담고있는 객체이다. 뒤로 가기, 북마크, 웹 브라우저 새 창 띄우기,..

본 내용에 들어가기 앞서, 자바스크립트는 클래스라는 개념이 없다. 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다. 즉, 프로토타입을 사용하여 새로운 객체를 만들어낸다. (참고로, ES6 표준에서 클래스 문법이 추가되었다.) 프로토타입이란? 한국어로는 단순히 원형(원래 형태)으로 번역된다. 말 그대로 객체의 원형이라고 할 수 있다. 자바스크립트의 객체지향 프로그래밍을 지탱하고 있는 핵심 개념이며, 이를 활용하여 상속 개념을 제공하고 있다. [목표] 프로토타입의 기초를 다져보자 아래 코드를 보고 상상해보자. 'o' 객체의 'ultraProp' 프로퍼티에 접근했을 때 어떤 값이 출력될 것 같은가? function Ultra(){} Ultra.prototype.ultraProp = t..