TIL

웹페이지에 생동감을 불어넣기 위해 만들어진 언어 자바와 자바스크립트는 다른 언어 자바스크립트는 처음에 LiveScript라는 이름을 가짐 당시 자바가 인기가 아주 높은 상황이라 Java의 이름을 통해 마케팅하기위해 JavaScript로 변경 지금은 ECMAScript

script 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.예시자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있다. 분해한 파일은 src속성을 사용한다.p.s. src속성이 존재하면 스크립트 태그 내부의 코드는

문은 어떤 작업을 수행하는 문법 구조와 명령어를 의미코드엔 원하는 만큼 문을 작성할 수 있다.서로 다른 문은 세미콜론 ';'으로 구분 줄 바꿈이 있다면 세미콜론은 생략이 가능하다. 자바스크립트가 줄바꿈을 하면 자동으로 세미콜론을 붙여주며 해석한다. 이런 것을 세미콜론

자바스크립트의 장점 중 하나는 버전업이 되어도 기존의 작성한 코드가 망가지지 않는다는 점이다. 기존의 기능을 변경하지 않고 새로은 기능이 추가 되기 때문이다. 이런 점은 ES5이전까지 지속되다가 ES5부터 새로운 기능의 추가와 기존 기능 일부가 변경되었다.하지만 기존

변수(variable)는 데이터를 저장할 때 쓰이는 '이름이 붙는 저장소' 입니다. 자바스크립트에선 let 키워드를 사용해 변수를 생성합니다.예전의 코드는 var키워드를 통하여 변수를 선언하였다.var와 let의 차이는 현재 내가 알고있는 것으로는 scope의 차이다l

자바스크립트에는 여덟 가지 자료형이 존재숫자형숫자형은 정수와 소수를 나타낼수 있다.숫자형은 다양한 연산이 가능하고, 대표적으로 \+, -, \* / 등이 있다.또한 숫자형은 특수한 형태가 존재하는데이것의 대표는 NaN이 있다.숫자와 숫자가 아닌 형태를 연산을 하였을

이 함수가 실행되면 사용자가 확인버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠 있다.메시지가 있는 창은 모달 창이라고 한다.모달이란 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다. prompt는 alert와 같이 모달창이 생성된다.다만 모달

이 블로깅은 모던 JavaScript 튜토리얼을 공부하며 적는 글입니다.모던 JavaScript 튜토리얼함수나 연산자에 전달되는 값은 대부분 적절한 자료형으로 형변환이 된다.String(value);String메서드에 값을 넣어주면 기본적으로 형변환이 가능하다.하지만

비교연산자의 종류는 아래와 같다.===, !==, <, >, <=, >=, !비교 연산자도 연산자이기 때문에 값을 반화한다.반환 값은 boolean Type이다.truefalse자바스크립트의 문자열은 비교를 할 수 있다.그 기준은 유니코드 순서이다. 즉a -

코드를 작성하다보면 어떠한 조건에 따라 다른 로직을 만들어야 할때가 있다.그 때는 IF와 ?를 사용할 수 있다.if뒤에 오는 괄호에는 조건식이 들어오게 되고, 그 조건이 참일 때 블럭({ })안의 코드가 실행이 된다.if문의 실행 코드가 한줄이더라도 블럭을 사용하여 감

OR , AND, NOT자바스크립트에는 세 종류의 논리 연사자가 있다.or연산자는 ||기호를 사용한다.피연산자중 하나라도 true라면 true를 반환한다.전체가 false일때는 false를 반환한다.만약 피연산자가 boolean타입의 데이터가 아니라면자동으로 형변환이

병합연산자를 사용하면 짧은 문법으로 null 또는 undefined가 아닌 변수를 찾을 수 있다.위의 값이 도출되는 과정은 간단하다?? 앞의 피연산자가 null 또는 undefined인지 구분을 한다.만약 !(null || undefined) 라면 앞의 피연산자가 리턴

코딩의 꽃 반복문조건이 true이면 로직이 실행된다.life가 하나씩 줄어들면서 0이되면 false가 되어 멈춤조건을 통해 아래 코드가 한번 실행되는 단위를 이터레이션(iteration)이라고 한다.여기서 중요한건 조건을 담당하는 life가 반복될때 마다 증감을 한다는

앞에서 나는 if문을 통한 조건식을 배웠었다.이번에 알아볼 switch는 if와 마찬가지로 조건문이다.if와 switch는 서로 호환이 된다.들어온 값과 case문의 값을 비교한다.일치한다면 case안의 로직을 실행, 일치하지 않으면 다음 case 비교모든게 일치하지

어떠한 하나의 기능을 담당하는것이 함수이다.비슷한 동작을 하거나 어떠한 조건을 위해 작성하는 여러줄의 코드를함수단위로 묶어 작성할 수 있다.또한, 함수를 사용하면 유사한 동작을 하는 코드를 줄여 사용할 수 있다(재사용성).앞에서 사용한 내장함수들은 alert, prom

함수는 자바스크립트에서 값으로 취급이 된다.그래서 함수또한 변수에 할당 및 복사가 가능하다.아래의 코드는 변수에 함수를 할당한다.함수는 값이고, 변수에 할당할 수 있다.함수를 만들고 그 함수를 변수 hello에 할당했다.함수 hello를 콘솔에 찍으면 안에 정의되어있는

함수 표현식보다 간단한 문법으로 함수를 생성할 수 있다.그것을 화살표함수(arrow function)이라 한다.위와 같이 작성을 하면, 해당 함수명을 가지는 함수가 생성된다.이 함수는 두개의 파라미터를 받으며 화살표 오른쪽의 표현식을 평가(연산)하고 그 결과를 반환(r

자바스크립트에는 8가지 자료형이 존재한다.그 중에서 7가지는 원시형이다.나머지 1가지는 참조형이라고 하는데 그 타입이 바로 객체(Object)다.객체는 원시형과 달리 다양한 여러개의 데이터를 담을수 있다.키(key)와 값(value)로 구분하여 저장할 수 있으며, 이렇

객체는 참조에 의해 저장되고 복사가 된다.원시타입의 데이터일 경우 number2라는 변수에 number1을 할당할 경우 number1의 값인 10이 복사가 된다. 즉 서로 연결되어있는것이 아닌 개별의 값을 가지고 있는것이다.반면에, 객체같은 경우는user에 객체가 만들

본 내용은 모던자바스크립트를 학습하며 정리하는 블로깅입니다.\>모던자바스크립트우리는 코딩을 하면서 만든 수많은 변수들과 객체들을 만들게 된다.만약에 우리가 앞서 만들었던 데이터들이 뒤에서 사용이 안된다면 이것은 더미데이터가 되고 성능적인면에서 부정적인 영향이 생길것이다

객체는 실제 세상에서 존재하는 개체를 표현하고자 할 때 사용한다.나라는 사람을 객체로 표현하기 위해서는이런식으로 표현할 수 있다.하지만 이러한 정적인 정보만이 아닌 어떠한 행동 행위도 할 수있도록메서드라는것을 만들어 줄 수 있다.메서드는 앞에서 내가 배웠던 함수가 객체

객체의 리터럴은 {...}이다.하지만 비슷한 객체의 틀을가진 여러가지 객체를 만들고 싶을 때가 있다.게임 캐릭터, 다양한 연필 등등이럴 경우 new 연산자와 생성자 함수를 사용하면 유사한 객체를 쉽게 생성할 수 있다.생성자(constructor)와 일반 함수는 차이가

최근에 추가된 문법인 옵셔널 체이닝 ?.옵셔널 체이닝을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 접근할 수 있다.여려명의 사용자가 존재하는데, 몇 명은 주소를 가지고 있지 않을 때또는 dom을 이용해 어떠한 요소를 가져와 정보를 접근하려할 때?.앞의 평가 대상이

자바스크립트 객체의 프로퍼티 키는 오직 문자형만을 허용하는데, 추가적으로 한가지 더 가능하다.그것이 바로 심볼형이다.심볼은 유일한 식별자를 만들고 싶을 때 사용한다.심볼은 Symbol()의 문법을 사용한다.심볼을 만들 때는 심볼 이름이라고 부르는 설명을 붙일 수 있다.

객체라는 타입은 원시형으로 형변환이 가능하다.예를들어 객체끼리 더하기 또는 빼기를 한다거나alert를 통하여 객체를 매개변수로 넣어준다거나이럴 경우에는 자동 형 변환이 일어난다.객체는 원시값으로 변환되고 연산이 수행된다.객체의 boolean타입은 무조건 true가 나온

모던자바스크립트 내용을 참고하여 학습하였습니다.모던자바스크립트자바스크립트를 만든사람은 다음과 같은 모순적인 상황을 해결해야만 했다.원시값을 다루어야 하는 작업이 많은데, 객체와 같이 메서드를 이용하면 편할것 같다.원시값은 가벼운 형태가 아이덴티티인데, 객체로 사용하려니

현재 자바스크립트는 숫자를 나타내는 두 가지 자료형을 지원한다. 배정밀도 부동소수점 숫자로 알려진 64비트 형식의 IEEE-754(부동소수점을 표현하는 표준)에 저장된다. 숫자형으로 담을 수 없는 큰 숫자도 존재할 수 있다. 그것을 BigInt라는 새로운 자료형으로

자바스크립트는 다른 언어와 다르게 문자하나와 문자열을 구분하는 자료형은 없다.길이에 상관없이 문자열(string)으로 저장된다.문자열은 페이지 인코딩과 상관없이 항상 UTF-16형식을 따른다.문자열은 큰 따옴표, 작은 따옴표, 백틱으로 감싸여 표현한다.작은 따옴표와 큰

순서가 있는 컬렉션을 다뤄야할 때 사용하는 데이터 타입이 배열이다.배열의 선언은 두가지 방법이 있다.또한 원시타입처럼 선언과 할당을 동시에 할 수 있다.배열의 요소는 인덱스로 접근할 수 있다.배열의 요소는 순서를 가지며, 이 인덱스는 해당 값의 키에 해당된다.또한 배열

배열은 다양한 메서드를 제공하고, 그 중 유용한것이 많은것 같아 따로 정리를 했다. 우선 앞에서 알아봤던 push, pop, shift, unshift가 있었다. 이 외에 요소 추가와 제거에 대한 메서드를 알아보자. splice 메서드 splice라는 메서드를 통하여 배열의 요소를 다양하게 핸들링 할 수 있다. 원하는 자리에 요소를 추가한다던지, ...

배열의 각각 요소에 공통적으로 무언가 해주고 싶을때 forEach를 사용할 수 있다.특이한 점이라면 매개변수로 받은 함수의 리턴값이 다 무시된다.위처럼 요소 하나하나에 함수를 적용해줄수 있지만 리턴값이 없는게forEach다.배열 내에서 무언가를 찾고 싶을때 사요하는 메

filter filter은 find와 다르게 한개가 아닌 여러개의 요소를 찾아 새로운 배열로 반환하는 메서드 이다. 매개변수로 받는 함수를 실행하여 해당 요소가 참이 나올경우 새로운 배열에 추가하여 반환한다. map map은 사용빈도가 매우 높은 메서드 중 하나

iterable객체란? 배열을 일반화 한 객체이다. 이터러블이라는 개념을 사용하면 어떤 객체든 for..of반복문을 사용할 수 있다. 배열은 이터러블객체중 대표적이다. 또한 문자열도 이터러블이다. 배열이 아닌 객체중에 컬렉션을 나타내는 객체일 경우, for..of문버

Map은 키가 있는 데이터를 저장하기 대문에 객체와 비슷하다.하지만, Map은 키에 다양한 자료형을 허용한다.맵의 주요메서드와 프로퍼티를 알아보자new Map() -> 맵 자료형을 생성한다.map.set(key, value) -> 해당 key에 해당하는 value를 저

가비지 컬렉션에서 배웠듯이 도달이 불가능한 값은 메모리에서 삭제한다.자료구조를 구성하는 요소도 자신이 속한 자료구조가 메모리에 남아있는 동안 도달 가능한 값으로 취급되어 메모리에 남아있다.객체의 프로퍼티나 배열의 요소, 맵이나 셋을 구성하는 요소들이 여기에 해당된다.만

워크셋은 셋과 유사하지만, 객체만 저장할 수 있다.또한 요소로 있는 객체는 도달가능할 때만 접근이 가능하다.위크셋에는 부차적인 데이터를 저장할 때 사용한다.다만, 위크맵과는 다르게 복잡한 데이터가 아닌 불린형태의 값을 저장하는 용도로 사용된다.아래 예시를 본다면위크맵

순회에 필요한 메서드 map.keys(), map.values(), map.entries()를 알아보았다.이 메서드들은 포괄적인 용도로 만들어졌고, 이것들을 사용할수 있는 3개의 자료구조가 있다.MapSetArray앞서 배웠던 map, set에 사용되었던 메서드들이다.

오늘부터 이머시브(다음기수부터는 SEB로 통합)코스가 시작되고,매일 배웠던 내용을 복습과 정리하는 블로깅을 작성할 것이다.좋은 질문을 하는 방법Package ManagerNode.js와 관련도구앞으로 내가 개발자가 된다고 한다면, 항상 선임개발자에게 물어보는것은 옳지

nano 간단 사용법Git 사용법CLI환경에서 사용하는 에디터에는 vim, emacs. nano등이 있다. 이 중에서 nano의 사용법이 간단하기 때무에 nano로 에디터를 사용해보려고 한다.vim을 사용하면 당연히 좋겠지만, 진입장벽이 있어 nano로 우선 진행하고

node.js vs browser npm과 package.json 화살표 함수 모듈화 node.js vs browser node.js 나는 node.js를 npm과 package.json Arrow Function module

Spread / RestDestructing(구조 분해)배열이나 객체의 데이터들을 풀어서 사용하기 위한 문법함수의 매개변수로 여러개의 인자를 배열로 묶어서 받을 수 있는 문법배열 합치기배열 복사구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에

* - OOP가 무엇인가? * * - Prototype은 무엇인가? * Object Oriented Programming Object Oriented Programing(이하 OOP)는 객체 지향 프로그래밍이라고 한다. OOP가 나오기 이전에 프로그래밍언어는 절차

자바스크립트는 Prototype기반의 언어이다.JavaScript에서 함수가 정의될 때는 Constructor가 부여된다.생성자가 부여된 함수는 new키워드를 통하여 생성할 수 있게 된다.그리고 Prototype Object가 생성되고 이 함수를 통해 만드는 오브젝트와

stack은 쌓다, 쌓이다와 같은 뜻을 가지고 있다.짐을 위로 차곡차곡 쌓듯한 형태와 비슷한 이 자료구조는말 그대로 data를 쌓는 자료구조다.실제로 자바스크립트에서 함수를 호출하는 방식은 stack방식을 이용한다.위의 코드를 본다면 call stack에 함수들이 쌓인

평가 -> 코드가 계산(Evaluation) 되어 값을 만드는 것 일급 -> 값으로 다룰 수 있다. -> 변수에 담을 수 있다. -> 함수의 인자로 사용될 수 있다. -> 함수의 결과로 사용될 수 있다. 일급 함수 -> 함수를 값으로 다룰 수 있다. -> 조합성

제너레이터 : 이터레이터이자 이터러블을 생성하는 함수제너레이터는 문장을 값으로 만들수 있고, 이런 값을 순회할 수 있게 만들수 있다.위처럼 홀수를 순회하는 이터러블을 생상하는 제너레이터위 코드는 명시적으로 홀수를 출력하는데 좀더 자동화가 되도록 만들어보자위의 코드는 무

컴포넌트를 만들기 위해서는 class를 통해서 만들수도 있고,함수로도 만들 수 있다.class는 react의 Component를 상속받아 만들 수 있고,함수는 일반 function키워드를 통하여 만들 수 있다.컴포넌트 내에서 상태(state)가 있고, 그 상태에 따라서

React의 스타트 프로젝트를 셋팅하는데 있어create-react-app이라는 툴을 이용하면 편하게 셋팅할 수 있다.!\[]위와 같이 터미널에 yarn create-react-app 프로젝트명을 입력하면 셋팅할 수 있다.

리액트의 컴포넌트를 작성할 때 함수 혹은 클래스 내에서 HTML과 같은 마크업 언어를 사용하는것을 볼 수 있다.이것을 JSX라고 한다.처음 React가 나왔을때는 JSX가 없어 React.createElement('h1, {}, 'Hello')이런식으로 작성해야 했던

컴포넌트의 UI를 위한 데이터를 보관하는 오브젝트해당 컴포넌트가 동적으로 표시될 데이터를 상태(state)로 저장하여 관리하기 위한 리액트의 문법이다.state에 관리되는 데이터가 업데이트가 발생하면 render()함수를 자동으로 호출한다.또한, state의 값을 변경

컴포넌트들을 map을 이용해 반복하여 생성할 경우 브라우저에는 해당 에러가 발생한다.해당 에러를 살펴본다면 리스트에서는 고유한 key를 가져야 한다고 나온다.이러한 키를 필요로 하는 이유는 리액트가 key를 인식하여 해당 컴포넌트의 변화를 쉽게 감지하기 위함이라고 한다

React는 자바스크립트의 라이브러리이고, 컴포넌트 단위로 구성되어진다. 그런데, 브라우저는 html, css, javascript만을 인식한다. 그러하면 이러한 컴포넌트는 웹브라우저가 어떻게 이해하는가? 그것은 바벨이란것을 이용하여 컴포넌트에서 렌더되는 태그들을

인프런 강의를 보며 공부한 내용을 작성하고있습니다.기본기를 다시 공부하면서 작성하는 블로깅입니다.자바스크립트의 데이터타입에는 크게 2가지가 있다.Primitive TypeReference Type기본형 타입의 코드를 작성할때 일어나는 원리를 알아보자위의 코드를 작성했을

인프런 강의를 보며 공부한 내용을 작성하고있습니다. >기본기를 다시 공부하면서 작성하는 블로깅입니다. 자바스크립트 선언과 할당 - 기본형 Reference Type 앞에서 기본형타입의 데이터가 선언및 할당이 되었을때 일어나는 일을 살펴보았다. 그럼 이제 참조형타입

사전적으로는 맥락 또는 문맥이라고 나와있다.자바스크립트에서 실행 컨텍스트란 무엇일까?아마도 코드 흐름 또는 코드 맥락,문맥을 뜻하는것 같다.동일한 조건 또는 환경을 지니는 코드 집단이라고 볼 수 있다.이게 무슨말인가? ES5 기준으로 함수를 보면 이해할 수 있다.코드를

해당 블로깅은 인프런의 강의(https://www.inflearn.com/course/%ED%95%B5%EC%8B%AC%EA%B0%9C%EB%85%90-javascript-flow실행 컨텍스트가 활성화 될 때 바인딩이 발생한다컨텍스트에 대한 게시글은 앞의 게시

해당 블로깅은 인프런의 강의를 들으며 공부한 내용을 정리한 글입니다. * ES5 * 기준 핵심 내용을 공부하면서 작성하는 블로깅 실행 제어 인자 this 콜백함수의 특징 주의할 점(메서드로 호출, 콜백함수로 호출) 제어권 콜백 함수는 함수의 실행 제어권을 넘긴다.

해당 블로깅은 인프런의 강의를 들으며 공부한 내용을 정리한 글입니다. * ES5 * 기준 핵심 내용을 공부하면서 작성하는 블로깅 CLOSURE 클로저의 사전적 정의 - 닫힘 / 폐쇄 / 완결성 mdn에선 이렇게 정의한다. > 클로저는 함수와 그 함수가 선언될 당시의

스코프란 무엇일까? 유효공간, 허용공간, 살아있는 공간 등 내가 영향을 미칠수 있는 영역이라고 볼 수 있다. 이 스코프를 벗어나면 나의 영향력은 끝이난다. 자바스크립트에서 스코프를 알아보자. 함수 스코프(function scope) ES6이전의 자바스크립트에서는

웹 표준, 접근성, 호환성에 대하여 공부한 기록

시맨틱 웹(Semantic Web) 과 태그

깃을 CLI에서 사용하기위한 간단한 VIM 명령어 정리