내용 정리

하이퍼텍스트 마크업 랭귀지Hyper Text Markup Language.웹 브라우저의 통해 표시되는 웹 페이지의 콘텐츠를 정의하기 위해 사용하는 언어.하이퍼텍스트와 콘텐츠를 표시하는 언어로, 웹 페이지에 어떤 내용이 나타나야 하는지 정의한다. 웹 브라우저는 HTML

계단식 스타일 시트Cascading Style Sheets.웹페이지에 시각적 표현(디자인)을 입히는 언어이다. 실제 화면에 표시되는 방법을 지정해 콘텐츠를 꾸며주는 시각적인 표현을 담당한다.HTML + CSS로 만들어진 웹 페이지는 웹 브라우저에게 전달되어 코드가 해석

CSS의 효과가 적용될 태그를 지정해주는 요소.ID 선택자, 전체 문서에서 하나의 태그를 식별하기 위해서만 사용하는 선택자.\-> 우선순위가 가장 높음.\-> css 선택자에서는 \-> 다음 예제는 id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함.Class

HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는데 이것을 가르켜 박스모델이라고 하고, 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다.박스모델의 속성margin (마진)\-> 엘리먼트와 엘리먼트 간의 여백, border를 기준으로

박스 내 요소 사이의 공간 배분과 정렬 기능을 위한 1차원 레이아웃, 한번에 하나의 행이나 열만을 다룬다.flexbox은 flexcontainer라고도 하는데, 이를 만들기 위해서는 display: flex; 속성을 설정해주어야 한다.기본적으로 요소들을 가로 정렬한다.

상위 엘리먼트의 속성을 하위 엘리먼트가 물려 받는다.속성 중에는 상속이 되는 것과 되지 않는 것이 있다.inHerited가 yes인 경우만 상속된다.속성의 값으로 inhert를 지정하면 상속되지 않는 속성도 강제로 상속할 수 있다.엘리먼트는 다양한 CSS 선언의 영향을

웹 브라우저는 HTML 문서를 해석하고, 이 결과를 화면을 통해 보여준다. 이 과정을 렌더링이라 한다.브라우저는 HTML을 해석하여 요소들을 트리 형태로 구조화해 표현하는 문서 객체를 생성한다. 이를 DOM이라 한다.브라우저는 DOM을 통해 웹 콘텐츠들을 렌더링한다.D

HTML, CSS와 함께 웹을 개발하는 3요소 중 하나.HTML : 웹 요소들의 배치 혹은 내용을 기술하는 언어. 웹 콘텐츠를 정의.CSS : 웹 요소들의 색, 크기 등의 스타일링을 정의하는 언어. 웹 콘텐츠를 스타일링.JS : 웹 요소들의 기능을 부여하는 언어. 웹

대입 연산자 =산술 연산자 + - \* /\+는 산술 연산자이기도 하지만 연결 연산자로도 사용된다. 2개 이상의 문자열을 이어붙이는데 사용된다.\+는 사용되는 변수 자료형에 따라서 산술 혹은 연결 연산자로 적용된다.문자열 자료를 사용한다면 명시적 형변환을 해야 원하는

비원시 데이터의 한 종류생성자를 사용하는 방법.배열 리터럴을 사용하는 방법.forEach, 전달받은 요소의 수만큼 수행.map, 반환받은 결과값을 모아 새로운 배열을 생성한다. 전체 배열을 순환하며 원하는 값으로 가공.배열의 특정 값을 확인하는 함수 includesin

\-> 숫자\-> 문자열\-> Boolean\-> null\-> undefined\-> Symbol (New! ES6+)\-> 객체\-> 함수\-> 배열\-> 정규표현식\-> Set, WeakSet (New! ES6+)\-> Map, WeakMap (New! ES6+)

어떤 코드가 그 자리에 어떤 역할을 수행하는지 이해하는 방법, 이 코드에 영향을 주는 주변 코드나 변수들을 파악한다. 해당 코드의 배경이 되는 조건 혹은 환경. '어떤 동일한 조건과 환경을 가진' 코드 뭉치가 있다면, 이들을 실행하는 데 필요한 조건과 환경적 정보가 존

실행 컨텍스트 내부에 있는 환경 정보 중 마지막 요소.ThisBinding은 실행 컨텍스트가 활성화 될 때에만 동작하는 것으로 말 그대로 This가 무엇인지 연결Binding해준다.This는 무엇을 가르키는가?This는 정해진 것을 가르키는 것이 아니라 함수가 호출 될

콜백 CallBack 함수.회신되는 함수, 함수의 처리를 요청하면 요청받은 대상은 함수의 제어권을 위임받아 모든 과정을 알아서 수행한다.제어권.함수의 실행 시점, 매개변수, this가 포함되는 개념.setInterval은 콜백함수를 인자 1로, 함수의 실행 주기를 인지

결합, 조화, 조합.에워싸여 함께 묶여져있는 함수들, 둘러쌓인 LexicalEnvironment를 참조한다. 내부함수와 LexicalEnvironment의 조합이다.가령 실행 컨텍스트 A, 내장 함수 B가 있을 때, A에서 B를 선언하게 되면. 여기에서 클로저란 A의

Array 생성자 함수를 이용하여 배열 인스턴스를 하나 만들었다. 사용자는 그 배열에 새로운 값을 넣을 때 push 메서드를 사용할 수 있다. 그런데 이 push 메서드를 호출하는 주체는 사용자가 생성자 함수로 만든 인스턴스이다. 그렇다면 이 인스턴스는 push라는 메

계급, 집단, 집합. 공통적인 속성을 모아 한데 묶은 덩어리.해당 클래스의 속성을 지닌 구체적인 객체.사과, 바나나, 감 등은 모두 과일이다. 과일은 음식의 한 종류이다.사과, 바나나, 감 등은 과일이면서 음식이다.음식과 과일은 실질적인 형태가 없는 추상적인 개념이다.

Redux는 JS를 사용하는 어느 환경에서도 사용이 가능하다. 따라서 React.js에서도 사용할 수 있는데, 바닐라 JS와 개별 환경이 다르다보니 Redux를 그냥 사용하는 것은 다소 복잡한 일이다. 그래서 React.js에서 더 편하게 Redux를 사용하기 위한 추

웹 개발에서 어느 컴포넌트에서 발생하는 값을 다른 컴포넌트로 이동시켜야하는 일은 흔하게 발생한다. 이 이동 작업을 이해하기 위해서는 2가지 개념을 알아야 한다. 1. Props. > 부모 컴포넌트로부터 자식 컴포넌트로 전달되는, 일방적인 방향만으로 전달되는 변경 불

프로젝트가 복잡해지면 코드가 길어진다. 코드가 길어지면 더 이상 하나의 파일에서 작동 코드와 Redux 관련 코드들을 모두 관리하기가 힘들다.따라서 필요에 따라서 action과 reducer를 분리할 수 있어야 한다.그런데 Redux 상에서 Reducer는 여러 개가

Redux는 각각의 state를 철저하게 통제하고, state를 변경할 때 원본값을 바로 수정하지 않고 값을 복제한 다음 수정하여 불변성을 유지한다.이는 Redux의 불변성 유지를 위해 새로운 state를 만들기 앞서 기존에 존재하던 state를 복제해야하기 때문이다.

이전까지 redux와 react-redux에 대해 알아보았다. 그런데 redux에는 redux-toolkit이라는 또 다른 개념이 존재한다. 서로 이름이 비슷한 놈들이 왜 이렇게 많은가 싶지만 이들의 차이점을 간단하게 정리하면 다음과 같다.

타입스크립트Typescript.타입type이 입혀진 자바스크립트. TypeScript는 변수, 함수, 클래스 등의 요소에 명시적인 데이터 타입을 지정할 수 있다. 이로 인하여 타입 관련 오류를 미리 방지할 수 있고 코드의 안정성을 크게 높일 수 있다.명시적으로 타입이

타입을 정의하는 것은 매우 간단하고 쉬운 일이다. 변수나 함수의 명칭 뒤에 :을 사용하고 타입을 작성해주기만 하면 된다.배열 타입은 제네릭을 사용하지 않으면 타입 선언이 불가능하다. 제네릭에 대한 내용은 뒤에서 다룬다..튜플?배열의 길이가 고정되고 각 요소의 타입이 지

특정 값들의 집합을 의미하는 자료형. 드랍다운 같이 미리 정해져있는 목록의 값을 지정하는데 사용된다.enum의 경우 초기값을 따로 부여하지 않으면 숫자형 이넘을 선언했다고 간주한다. 숫자형 이넘의 기본 초기값은 0, 사용자가 다른 값을 명시적으로 대입해주면 그 값이 초

자바스크립트 컴파일러. 브라우저에서 실행이 가능한 형태로 변환해준다.\-> 최신 JS 문법의 겨우 각 브러우저마자 호환성이 다를 수가 있다.\-> 바벨은 이를 위해 변환 과정을 대신해준다.최신 브라우저는 대부분 최신 JS 문법을 호환해주려고 한다.\-> IE 같은 경우

var, let, const는 모두 JavaScript에서 변수를 선언할 때 사용하는 키워드. 다만 동작 방식과 범위에서 중요한 차이점이 있다.var는 함수 스코프. 함수 내부에서 선언되면 해당 함수 내에서만 접근할 수 있지만, 함수 밖에서 선언된 경우 전역 스코프를

데이터를 구조화하고 관리하는 기본적인 데이터 타입.같은 기능을 수행하는 메소드가 왜 여럿인가?원본 배열/객체를 수정하는지, 결과값이 필요한지, 모든 데이터를 처리하는 지 등의 이유로 메소드들이 나누어진다. 필요에 따라 맞는 메서드를 선택하면 된다.수많은 메소드들의 기능

긴 이름을 작성해야 코드의 의도를 명확히 해서 가독성을 높일 수 있다!VS짧은 변수 이름이 코드 작성을 더욱 간결하게 만들어 준다!개발에서 의외로 힘든 작업 중 하나는.. 변수/함수/클래스 등지에 적절한 '이름'을 지어주는 것.Javascript에서는 대략 아래와 같은

함수의 실행을 중간에 멈추었다가 재개할 수 있는 기능을 제공하는 특수한 함수.일반 함수와는 다르게, Generator는 호출 즉시 실행되지 않고, 실행 컨텍스트를 유지하면서 특정 시점에서 멈추거나 다시 실행할 수 있다.비동기 처리, 반복 제어, 데이터 스트림 같은 작업

작업이 완료될 때까지 기다리지 않고 다음 작업을 계속 수행하는 방식.자바스크립트는 단일 스레드로 동작한다.작업은 순차적으로 진행되지만, 작업의 결과를 기다렸다가 다음 작업을 실행하는게 아니라..뒤에 있는 작업을 바로 실행시켜버린다!그렇기에 HTTP 요청 등의 이유로 요