JavaScript

자바스크립트에는 다섯가지 가장 기본적인 데이터 타입이 있다.numbers : 4, 9.3, -10strings “Hello World”, “43”Booleans : true, falsenull : nullundefined : undefinednull = explicit

프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다. 이때 비교 연산자를 사용하는데 비교 연산자의 결과는 true나 false 중의 하나다. true는 비교 결과가 참이라는 의미이고, false는 거짓이라는 뜻이다. ==는 동등

스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다. 사용자가 로그인이나 로그아웃을 했을 때 안내 메시지를 보여주는 동작 같은 경우다.함수는 프로그램을 구성하는 주요 '구성 요소(building block)'다. 함수를 이용하면 중복 없이

순서가 있는 컬렉션이 필요할때 배열을 이용할 수 있다.index number은 0부터 시작한다.push, pop맨 뒤에 item을 더하고 빼는 methodshift, unshift맨 앞 item 부터 더하고 빼는 methodpush와 unshift는 요소 여러 개를 한

Document Object Model의 약자로 Javascript와 HTML+CSS 사이의 인터페이스를 의미한다.tag.textcontent : 텍스트만을 가져옴tag.innerHTML : <></> 태그도 가져옴to read and write attrib

엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리 \_생활코딩Fixes “broken” DOM APIBrevity and ClarityEase of useCorss-Browser Support

jQuery 로 만들어봤던 To-do List를 순수 Javascript로 다시 만들어본다.To-do List 페이지To-do List 깃허브자바스크립트에 비해 코드가 훨씬 간단해진다.

WeCode 그룹 리뷰를 통해 새로 배운 것들을 정리한다.Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 \[key, value] 쌍의 배열을 반환한다. (for-in 루프가 다른점은 프로토 타입 체인의

Udemy의 The Web Developer Bootcamp 코스에서 진행한 실습이다.Github : https://github.com/MiaJLee/colorgamePage : https://miajlee.github.io/colorgame/init

참고자료 : https://ko.javascript.info/jsMDN JavaScript ReferenceMozilla 재단이 운영하는 웹페이지로 다양한 예제와 정보를 찾아볼 수 있다. 특정 함수나 메서드에 대한 깊이 있는 정보를 얻을 수 있다. MSDN J

참고자료 : https://ko.javascript.info/js자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔고, 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었다. 덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었다. 2009년

let newNum = num++;위의 한 줄짜리 코드에서 일어나는 과정을 스텝별로 보면1\. newNum 변수에 num변수를 할당해서 newNum에 1이 할당 되었고,2\. 그 후 num++; 가 실행되어 변수 num이 2가 된다.위의 스텝을 풀어서 작성하면 아래와

typeof 연산자 typeof 연산자를 통해 이 값, 이 변수는 무슨 데이터 타입인지 알 수 있다. typeof 연산자를 적용하면 다음 문자열 중 하나를 반환한다. "undefined" : 정의되지 않은 변수 "boolean" "string" "number" "o

날짜 객체를 호출하면 쉽게 시간과 날짜를 얻을 수 있다. 날짜 객체를 생성하는 방법은 다음과 같이 new 연산자 다음에 Date 생성자를 쓰면 된다.브라우저마다 표현하는 법이 조금씩 다르지만 어떻게 표현되었는지는 중요하지 않다. 일반적으로는 위와 같이 년, 월, 일,

JavaScript에서 scope이란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미한다.어떤 변수는 여기저기서 쓸 수 있는 반면에, 어떤 변수는 특정 함수 내에서만 쓸 수 있다. 이런 개념이 바로 scope이다.block이란 중괄호({}, curly brace)로

클래스는 객체지향 프로그래밍의 핵심이다. 객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호작용하도록 작성하는 방법이다. 객체는 영어로 object, 말그대로 사물을 뜻한다.클래스는 결국 { num: 1 } 처럼 생긴 객체(object)를 잘

Object (객체) 위의 표에 나타난 데이터를 자바스크립트 언어로 구현한다면 아래와 같이 저장해야 한다. > var 객체이름 = { property이름1: property값, property이름2: Property값 }; let plan1 = {

ES6란? ES는 ECMA Script의 줄임말이다. ECMA Script는 JavaScript를 표준화시키고 규격화하기 위해 만들어졌다. 현재는 ES10 버전까지 나왔으며 주로 쓰이는 것이 ES6이다.

array methods arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때다. callback 함수는 인자로 전달되는 함수를 의미한다. array 반복문으로 사용되는 메서드로는 map과 forEach가 있다. Array.map()

지난 TIL에서 배운 객체의 키를 사용하는 방법을 이용하면 객체의 특정 키의 값을 가져오는 것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는 것도 가능하다.

DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.

좋은 웹사이트는 오류가 없고, 모션이 자연스러우며, 빠르게 반응하여 사용자로 하여금 좋은 서비스 경험을 제공해야 한다. 요즘에는 화려하고 다양한 기능이 들어가는 웹사이트가 늘어나면서 프론트엔드 개발자가 처리해야 할 interaction이 더 많아졌다.

인스타그램 클론 코딩을 하며 만든 로그인 페이지에서, 자바스크립트 코드의 if문이 포함된 EventListener를 "이벤트 위임", "삼항 조건 연산자"를 활용하여 더 간단하게 수정해보자!i

인스타그램 클론 코딩 프로젝트의 추가 구현 사항중, 피드에 달린 댓글을 삭제하거나 좋아요를 누르는 기능을 추가하는 것을 진행하고 있다. (역시나..) 추가한 자바스크립트 코드에서 여러가지 이슈가 발생하였고 그 중에 꼭 기억해야 할 것들을 정리한다.

인스타그램의 search input을 구현하는 작업이었다. 값을 입력할때마다 그 값을 포함하는 배열을 새로 만들어 리스트로 보여주는 형식이다.

인스타그램 클론 코딩에 관한 포스팅 이후 계속해서 더 나은 코드로 리팩토링하는 과정을 거치고 있다. 지난번에 댓글에 좋아요, 삭제 기능을 구현하면서 새로운 댓글을 추가하는 함수가 엄청나게 복잡하게 길어졌다

리액트 웹팩으로 개발환경 구축하기(without CRA)

시대의 명작 코어 자바스크립트를 읽고 자바스크립트 마스터에 도전합니다...

시대의 명작 코어 자바스크립트를 읽고 자바스크립트 마스터에 도전합니다...

시대의 명작 코어 자바스크립트를 읽고 자바스크립트 마스터에 도전합니다...

객체 프로퍼티는 값(value)에 더해 플래그(flag)라 불리는 특별한 속성 세가지를 갖는다.

객체의 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나뉜다.

시대의 명작 코어 자바스크립트를 읽고 자바스크립트 마스터에 도전합니다...

미루고 미루던 프라미스를 뿌셔보자!

클론 프로젝트를 하면서 async, await를 사용했었는데, 정확히 프라미스의 .then 메서드를 사용하는 것과 어떻게 다른지 이해 없이 그냥 외워서 썼다. 항상 찝찝함이 남아있었는데, 이번 기회에 에이싱크 어웨이트 완전히 뿌셔보리라....... 💥💥💥

Debounce와 Throttle은 자주 사용되는 이벤트나 함수들의 실행되는 빈도를 줄여서 성능을 개선하는 decorator이다.

실행 컨텍스트(execution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.

클로저는 자바스크립트 고유의 개념이 아니라 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이다. 클로저는 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상이다.

자바스크립트는 프로토타입 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다.

자바스크립트는 프로토타입 기반 언어라서 '상속' 개념이 존재하지 않는다. 클래스 기반의 언어에 익숙한 많은 개발자들을 혼란케 했고, 이러한 불편함을 해결하기 위해 ES6에는 클래스 문법이 추가되었다.

udemy의 ES6, ES7 & ES8, TIME to update your JavaScript / ECMAScript 강의를 보고 정리한 내용입니다.

Tagged Template Literals는 Template Literals를 이용하여 함수의 인자를 파싱하여 넘겨주는 것을 의미한다.문자열은 첫번째 파라미터의 배열로 들어가고, 나머지 변수 값은 각각 값이 대입된다. 변수는 여러개가 될 수도 있다.

ES6에서 업데이트된 편리한 문법들 다시 정리해보기

알아두면 쓸모있음

Map 인터페이스의 한 종류로, key-value 형태의 데이터를 저장하는 형태를 가지고 있다. Map이란 키와 값을 하나의 쌍으로 묶어서 저장하는 컬렉션 클래스들을 구현하는데 사용된다.

ES6에서는 Symbol 이라는 원시형 데이터 타입이 새로이 도입되었다. 자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용한다. 숫자형, 불린형은 불가능하다. 심볼은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다.