emayom.log

오늘은 자바스크립트 ES6에 추가된 배열 메서드 Array.from()에 대해서 알아보자! 🦖🦕 ... 우선 쉽게 예제로 바로 들어가 보자. 우연히 모던 자바스크립트 강의를 보다가 풀게 된 문제인데 내용은 아래와 같다. html 내부에 ul 태그를 살펴보면 문자열을 가진 li 요소들이 있다. 요소들을 자바스크립트 코드로 "e"를 포함한 요소들만 배열로 리턴하는 함수를 만들어라! (Array.from(), filter(), includes()를 사용!) 이걸 보시는 분이 계시다면,,,, 한 번 풀어보길 추천한다,,,,! ✳︎ let lists = document.querySelectorAll("li")으로 li 모두를 가져오게 되면 lists는 우리가 생각하는 배열이 아닌 NodeList라고 하는 유사 배..

자바스크립트 코드를 작성하며 클릭 이벤트에 이벤트 리스너(핸들러)를 등록하고 싶을 때 onclick과 같은 이벤트 핸들러로 처리를 할 수 도 있고, addEventListener()와 같은 메소드로 이벤트 리스너를 연결할 수도 있다! 그렇다면 둘의 차이는 무엇일까? 👇🏻 더보기 'on~ 이벤트 핸들러'의 경우, 하나의 이벤트에 하나의 콜백 이벤트만 발생시킬 수 있다. 'addEventListener() 메소드'의 경우, 하나의 이벤트에 여러개의 콜백 이벤트를 발생시킬 수 있다. 예시로 화면 어디든 클릭할 경우 이벤트로 alert()를 띄워주고싶을 때! 를 가정하고 코드를 작성해보자. 형식은 둘 다 비슷하다. 이벤트 리스너를 연결할 대상 + 어떤 이벤트에 반응할 것인지 + 콜백 함수 순서로 정의했다. 위의..

우리는 Vue.js, React, Angular 등으로 SPA를 구현할 수 있다! 오늘은 SPA에 대해 알아보자. SPA ? SPA는 Single Page Application의 약자로 이름 그대로 '단일 페이지 응용 프로그램'으로 해석한다. 단일 페이지 응용 프로그램이란 사용자가 여러 페이지를 옮겨 다니는 것이 아니라 한 페이지 내에서 머무르고, 서버로부터 전달받은 데이터로 필요한 부분만 동적으로 업데이트해 보여주는 방식을 말한다. (☝🏻 이러한 방식이 '클라이언트 사이드 렌더링') 이러한 방식 덕분에 리액트의 특징에 대해 이야기하며 언급한 웹을 앱처럼 사용하는듯한 빠르고 부드러운 사용자 경험(UX)이 가능한 것이다. +) 만약 페이지를 이동할 때마다 서버로부터 새로운 html을 요청해 다시 DOM트리..

컴포넌트란 ? 리액트는 컴포넌트 기반의 구조이다. 리액트 공식 문서에 따르면 컴포넌트는 UI를 독립적이고 개별적으로 관리할 수 있는 재사용 가능한 조각으로 나누어 준다고 설명한다. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 컴포넌트의 개념을 쉽게 생각한다면 웹페이지의 메뉴바, 버튼, 모달 창 같은 UI 요소들이 레고 한 블록, 부품과 같이 구조화한 것으로 간주할 수 있다. 컴포넌트 구조의 경우 유지 보수가 편리하다. 예를 들어 아래와 같은 html의 코드가 있다고 가정하자. , , 를 구성하는 많은 코드들이 내부에 존재할 텐데 더 많은 섹션을 가지게 된다면..

자바스크립트에서 html DOM에 접근하여 제어하기 위해 getElementById, querySelector, querySelectorAll 등의 Document 메소드를 통해 객체를 가져온다. querySelector ? getElementById는 주어진 id를 가진 엘리먼트(요소)를 찾아오지만, querySelector의 경우 id 혹은 class 중 주어진 선택자에 만족하는 요소를 찾아올 수 있다! //id 선택자 document.querySelector("#id"); //class 선택자 document.querySelector(".class"); 유의해야 할 점은 중복되는 id를 가진 경우 첫 번째의 요소만을 가져올 수 있는 것이다. 그렇다면 같은 선택자를 가진 모든 요소를 가져오고 싶을 때..

Date는 자바스크립트 표준 내장 객체로 날짜와 시간을 다룰 때 사용되는 객체이다. 생성자 정적 메소드 인스턴스 메소드 1. 생성자 (Constructor) - Date( ) 함수로 호출 할 경우, new Date().toString()과 동일하게 현재 날짜와 시간을 나타내는 '문자열'을 반환한다. - new Date( ) 생성자로 호출 할 경우, 새로운 Date 객체를 반환한다. 2. 정적 메소드 (Static methods) 인스턴스 생성 없이 아래와 그대로 사용! - Date.now( ) : 1970년 1월 1일 00:00:00 UTC로부터 현재까지 경과시간을 밀리초 단위 숫자 값으로 반환 - Date.parse( ) - Date.UTC( ) 3. 인스턴스 메소드 (Static methods) 인스..

지난 포스팅에서 리액트를 쓰는 이유와 특징에 대해 간략히 알아봤다. 우리는 리액트 프로젝트를 시작하기에 앞서 프로젝트를 생성하고 실행하기 위해 아래와 같이 npm의 도움을 받았다! //프로젝트 생성 명령 설치 npm install -g create-react-app //프로젝트 생성 create-react-app [react-app] //프로젝트 실행 cd [react-app] npm start 오늘은 npm에 대해 자세히 알아보자. 아래의 내용은 생활코딩 npm 수업을 토대로 정리한 내용이다. npm npm이란, Node Package Manager의 약자로 명령어를 통해서 컴퓨터를 제어하는 방식인 CLI(Command Line Interface)방식으로 동작하는 프로그램이다. npm은 앱 스토어에 비..

자바스크립트는 다른 프로그래밍 언어와는 다르게 전통적으로 함수 레벨 스코프를 지원하였고, 블록 스코프는 지원하지 않았다. ES6 이후부터 let, const가 등장하면서 블록 레벨의 스코프를 지원하기 시작했다. 유효 범위 (Scope ) ? 프로그램이 커질 수록, 선언된 변수가 많아질수록 여러가지 이유로 충돌이 발생할 수 있다. 이때 변수 사이의 충돌을 방지할 수 있도록 암시적으로 구분해놓은 것을 유효 범위라고 한다. 즉, 해당 변수를 사용할 수 있는 범위를 유효범위라고 한다! 변수는 선언 위치에 따라 변수를 참조할 수 있는 범위가 달라진다. 전역 변수 (global variable) 통상적으로 프로그램의 내부 (함수 내부, 외부) 어디서든 사용할 수 있는 변수를 의미한다. 지역 변수 (local var..

자바스크립트 엔진 ? 자바스크립트는 인터프리터 언어로 코드 해석하고 실행하기위한 엔진이 필요하다. 즉, 자바스크립트 엔진이란 JS 코드를 번역해 실행할 수 있게 해주는 인터프리터를 의미한다. SpiderMonkey, JavaScript Core, Rhino, V8 를 포함한 다양한 JS 엔진이 존재한다. V8 엔진 구글에서 제공하고, 클라이언트(Chrome)와 서버(Node.js)측 모두에서 사용하는 C++로 작성된 오픈소스 고성능 자바스크립트 엔진이다. 구글 크롬 웹 브라우저를 개발하면서 함께 개발한 엔진으로 웹 브라우저 내부에서 자바스크립트 수행 속도향상을 목표로 고안되었기 때문에 속도가 빠른 편이다. V8 엔진의 속도가 빠른 이유 ? (tmi - V8 엔진은 이름부터 8기통의 엔진이다.) 인터프리터..

태그는 내에 혹은 최하단에 위치할 수 도 있지만 보통 태그의 최하단에 를 위치하는 것이 좋다고 한다. 그렇다면 왜일까? 1. 첫번째 이유를 알아보기 전에 우선 브라우저 동작 과정을 간단하게 다시 한 번 상기시켜보자. HTML parser -> DOM tree CSS parser -> CSSOM DOM + CSSOM => Render tree Layout Paint 일련의 과정 중, HTML 파싱 과정에서 script 요소를 만나게 되면 ? HTML 파서는 파싱을 멈추고 자바스크립트 코드를 로드 후 파싱이 완료되고 나서야 다시 HTML 파싱을 재개한다. => 이렇게 중단되며 화면 표시에 지연이 생기는 것을 방지하기 위해 body 최하단에 작성한다. 2. 두번째 이유는 자바스크립트 코드 내에서 DOM을 조작..