코드사냥꾼의 전리품

리액트를 공부하고 본격적으로 개인 프로젝트를 진행하기 앞서 순수 자바스크립트만 사용해서 아주 간단한 프로젝트를 만드려고 한다. (사실, 프로젝트라고 하기에는 아주 민망한 수준이다ㅎㅎ) 내가 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)..

임의의 배열에 새로운 데이터를 추가하는 방법으로 자주 사용되는 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..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트 앱을 배포하기 전에 파일의 용량을 줄여주는 작업(빌드)을 수행한다. 실제 서비스할 때 파일이 용량이 무거우면 사용자 관점에서는 불편함이 생기기 때문이다. 우선, 관리자 도구의 네트워크 탭을 주목해보자 빈 캐시 및 하드 새로 고침 (=캐시 비우기 및 강력 새로고침) 버튼 클릭 후 네트워크 탭을 보면 단순 텍스트가 적힌 웹 페이지임에도 불구하고 1.7MB의 용량을 차지하고 있다. 그 이유는 create-react-app으로 개발 환경을 구축할 때 개발의 편의성을 위해 여러 가지 기능을 자동으로 추가하기 때문이다. 그래서 위와 같이 불필요한 용량을 줄이기 위해 빌드를 하는 것이다. 리액트 앱 빌드하기 npm ru..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트로 웹 애플리케이션을 만들기 위해서 개발환경 세팅이 필요하다. 리액트는 npm(node package manager)으로 설치되기 때문에 사전 작업으로 Node.js와 VSCode(필수 X)를 설치하도록 한다. Node.js 설치하기 본인 운영체제 환경에 맞게 설치하면 된다. 최신 버전을 다운받아도 되지만, 안정화 등의 이유로 LTS 사용을 권장한다. 설치 후 윈도우의 cmd창을 열어 npm 설치를 확인한다. npm -v 6.5.0 위와 같이 버전 정보가 출력된다면 성공적으로 설치가 된 것이다. 이후 create-react-app을 활용하여 리액트를 설치해보자 리액트 설치하기 리액트를 설치하는 방법은 두 가지..

본 내용에 들어가기 앞서 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..

리팩토링이란? 비효율적인 코드를 가독성이 높고, 유지보수가 편리하며, 중복된 코드의 수가 낮은 효율적인 코드로 개선하는 작업이다. 틈틈이 리팩토링 작업을 하는 것이 좋은 프로그래머의 자세이자 좋은 프로그램을 만들 수 있다. [목표] 비효율적인 코드를 제거하는 리팩토링 작업 학습 우선, Night 버튼 기능을 웹 페이지 하단에서도 동작하도록 해보자 이때, 하단 버튼을 클릭하면 버튼의 값이 바뀌는 대상은 상단에 위치한 버튼이다. 그 이유는 input 태그의 id의 값이 동일하기 때문이다. 이 경우 하단 버튼의 id 값을 'night_day2'로 수정하면 정상 작동한다. 그러나, 버튼이 여러 개라면 수많은 버튼을 일일이 변경해줘야 하는 불편함이 발생한다. 이 불편함을 해결하기 위해 this 키워드를 사용한다...