use strict? ECMAScript5(ES5)가 등장하기 전엔 자바스크립트는 기존 기능을 변경하지않으면서 새로운 기능을 추가하며 계속 발전해왔다. 하지만 기존 기능을 변경하지 않으면서 새로운 기능을 추가하는 것이 장점이자 단점이되었다. 그 이유는 기존 기능을 변경하지 않으니 자바스크립트 창시자들이 실수 했던것들이나 불완전한 코드들이 지속적으로 남아있다는 것이다. 이 부분을 보완하고자 새롭게 제정된 것이 ES5이다. ES5에서는 새로운 기능이 추가되면서 기존 기능이 변경됐다. 그런데 ES5에서 새로운 기능이 추가됐다면 기존에 있던 기능들과 하위 호환성 문제가 생기지 않을까? 이 문제점을 고려해 변경 사항인 부분들은 ES5 기본모드에선 활성화 되지 않게 설계되어있다. 즉, 변경 사항 된 기능들을 사용하..

컴포넌트 생성 방법 리액트에서 컴포넌트란 화면상에 보여지는 UI 단위라고 한다. 그렇다면 컴포넌트는 어떻게 생성할 수 있을까? 리액트에서 컴포넌트를 만들기 위한 방법으로는 아래와 같이 두가지 방법이 있다. 클래스 컴포넌트 함수 컴포넌트 클래스 컴포넌트와 함수 컴포넌트의 역할은 동일하다. 다만 아래와 같이 차이점이 존재한다. 클래스 컴포넌트(class component) 클래스 컴포넌트는 State와 라이프사이클(Life Cycle)메소드를 사용할 수 있다. 또 리액트에서 제공하는 컴포넌트를 상속해야하고 render함수가 있어야한다. 함수 컴포넌트(function component) 함수 컴포넌트는 State와 라이프사이클 메소드를 사용할 수 없다. 또 return에 JSX를 사용하여 리턴해줘야 한다. 클..

Node.js node.js는 어느 곳에서든 자바스크립트로 프로그래밍을 가능하게 해주는 런타임 환경이다. 예전에는 자바스크립트를 브라우저 위에서만 실행할 수 있었다. 하지만 지금은 node.js가 있는 환경이라면 브라우저 밖 또는 운영체제 위에서도 자바스크립트 코드를 작성하고 실행할 수 있다. 따라서 요즘은 백엔드서버를 만들거나 서버 사이드 렌더링을할 때 또는 커맨드라인툴이나 스크립트를 작성할 때 node.js를 사용한다. npm 나중에 외부 라이브러리를 필요로할 때 외부 라이브러리를 직접 찾아서 다운받고 사용할 프로젝트 안에 넣고 import하고 굉장히 번거로울 수 있다. 그래서 이런 외부 라이브러리를 쉽게 관리할 수 있게 도와주는 것이 있는데 그것이 바로 npm이다. npm을 사용하면 아주 간단한 명..

🤔 React란? React란 사용자 인터페이스를 구축하기위한 작고 고립된 컴포넌트로 이루어진 효율적이고 유연한 자바스크립트 라이브러리라고 하는데 여기서 컴포넌트(Component)는 하나의 작업을 수행하기 위한 작은 단위라고 한다. React는 디자인 패턴 중 MVC패턴에서 사용자에게 보여지는 부분인 view를 담당한다. React 대중성 여기서 React의 실사용률을 가늠해보자면 Angular 그리고 Vue와 비교해봤을 때 다운로드 수가 4.5배나 높다. 이는 React가 대중적이고 가장 많이 사용되고 있단 걸 확인 할 수 있다. 이렇게 많이 사용되고 있다는 것은 그만큼 관련된 문서가 많고, 커뮤니티에 대중적이라는 것이다. React를 선택하는 이유 독립적이다. 재사용성이 높다. 성능이 좋다(효율적)..

시맨틱(Semantic) 시맨틱(Semantic) 마크업 "의미론적인"뜻을 가지며 의미를 잘 전달하도록 HTML태그로 문서를 작성하는 것을 말한다. 시맨틱(Semantic)태그 종류 tag description header 헤더를 의미한다. nav 내비게이션을 의미한다. aside 사이드에 위치하는 공간을 의미한다. section 본문 내용을 의미하며 을 포함한다. article 본문의 주내용을 의미한다. footer 푸터를 의미한다. 시맨틱 태그가 중요한 이유 SEO(검색 최적화) - Accessibility(접근성) Maintainability(유지보수성)

🤔 IntersectionObserver API? MDN에서는 아래와 같이 설명되어 있다. (developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. 웹 API에서 제공하는 API로 타겟 요소와 상위 요소 또는 viewport사이 intersection내의 변화를 비동기적으로 관찰하는 방법이다. 쉽게 말해 원하는 요소가 특정..

🤔 HTML5란? HTML(HyperText Markup Langauge)은 웹 페이지를 기술하기 위한 마크업 언어이며 웹 페이지의 내용과 구조를 담당하는 언어로 HTML태그를 통해 정보를 구조화하는 것이다. HTML5는 차세대 웹 표준으로 아래와 같은 기능들이 추가됐다. 시맨틱 태그 CSS3 멀티미디어 그래픽 통신 디바이스 접근 오프라인 및 저장소 📝 HTML5 문서 Hello World! HTML5입니다 HTML5는 문서에 대한 특징은 다음과 같다 HTML5는 반드시 으로 시작해 문서형식을 HTML5로 지정한다. 사이에는 title, 외부 파일 참조, 메타 데이터 등이 위치하며 사용자에겐 보여지지 않는다. 웹 브라우저. 즉, 사용자에게 보여지는 실질적인 요소는 와 사이에 위치한다. 👀 HTML 기본문..