명왕성의 공전기록

let, const, var 차이 (scope 개념, 호이스팅) 재할당과 재선언에 대한 차이 재할당 재선언 var O O let O X const X X 스코프 (함수 또는 변수의 동작 범위) 전역스코프&지역스코프 전역 스코프 : 스크립트 전역에 선언된 변수 / 어디서든 참조 가능 지역 스코프 : 함수 내에 선언된 변수 / 함수 내에서만 참조 가능 전역스코프&지역스코프 예시 블록스코프 & 함수스코프 let / const , var 사이의 가장 큰 차이점 중 하나는 스코프와 관련이 있다. let / const 는 '블록 스코프, 함수 스코프'라는 특징을 가지고 있는데, 블록 스코프는, 함수 안에서 선언된 let / const 의 경우 함수 안에서만 처리될 수 있다는 의미를 지니고 있다. 말 그대로 블록(중..

오늘은 이메일 탬플릿 만드는 방법에 대해 강의를 들었다. 등장한 주요 개념 템플릿 리터럴 숏핸드 프로퍼티 (shorthand-property) 구조분해할당 (= 비구조화할당) export / import 이메일 탬플릿이라 함은, 아래와 같다. 겉으로 보기에는 이미지처럼 보이나, HTML 코드로 구성되어 있다고 한다. 그리고 이 HTML 코드들은 변수에 저장되어 있고, 이때 HTML코드들을 묶기 위해 백틱(템플릿 리터럴)을 사용한다. 템플릿 리터럴은 백틱(``) 과 함께 사용해야 하며, 정적값과 동적값을 함께 표현할 때 사용한다. 이때, 동적값은 ${ } 으로 묶어 표현한다. 템플릿 리터럴의 특징으로는 변수와 함께 쓰기가 가능하며, 텍스트를 여러줄로 만드는 것이 가능하다는 것 기억해두자. 활용 예시는 다음..

ES6의 특징 구조 분해 할당 가능 let person = { name : "철수", age : 7, } // 위와 같은 객체에서 name값의 value와 age의 value값을 가지고 오기 위해서는 // person.name 혹은, person.age로 접근을 해야 했지만 다른 방식도 존재한다. let name = person.name let age = person.age // 위와 같은 방식으로 객체 안 요소를 직접 변수에 할당해줄 수 있다. template literals == '백틱'을 활용한 동적값과 정적값을 함께 보여주기 가능 let name = "jinho" let age = 18 console.log(`제 이름은 ${name}이며, 나이는 ${age}입니다.`) 위와 같은 경우, 동적값으로..

1. == , === 차이점 두 연산자 모두 '비교'를 하는 것에 있어서 동일한 역할을 수행한다. 비교하는 두 값이 동일할 경우는 true를 반환하며, 그렇지 않은 경우에는 false값을 반환한다. 허나, 두 연산자의 차이는 '어디까지 동일한 것으로 볼 것인가에 대한 기준'이 다르다는 것. 이번 포스팅에서는 두 연산자의 차이에 대해 간단히 언급한다. == 느슨한 연산자 (이중 등호) 등호가 두번 쓰여진 '==' 는 '느슨한 연산자'라고도 말한다. 그 말마따나 엄격한 '===' 연산자에 비해 유한 편인데, '==' 연산자의 경우, 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환한다. // 예시 10 == '10' // true 반환 true == '1' // true 반환 nul..

JavaScript / Node.js / npm / yarn javascript :브라우저, 문서 등을 다루는 프로그래밍 언어(또는 스크립트 언어)로, 브라우저에서만 동작이 가능하다. node.js : 자바스크립트 실행 프로그램 / 브라우저 없이 실행할 수 있다는 장점을 가진다. (공식 문서에서는 크롬V8 javaScript 엔진으로 빌드된 javascript 런타임(환경)이라고 설명하고 있다.) 쉽게 말해, node.js 는 javaScript를 실행할 수 있는 프로그램이라고 볼 수 있다. **node.js를 이용하여 자바스크립트 언어로 서버를 구축하기도 하나, node.js 자체가 서버라고 볼 순 없음 npm : node package manager의 준말로, Node.js 기반에서 실행될 수 있는 ..

이전 포스팅에서 클론 코딩을 할 때 생소하게 보였던 class 문법에 대해 학습했다. 클래스 문법은 '객체'를 생성할 때 효과적인 방법이라고 볼 수 있었다. class member { constructor(name, number, gender) { this.name = name; this.number = number; this.gender = gender; } } 먼저 클래스 문법의 형태는 위와 같다. 클래스 문법의 이름, 그리고 constructor()으로 이루어진다. 소괄호 안에는 매개로 받을 변수를 입력하고, 중괄호에서는 해당 객체가 받게 될 요소들을 입력한다. 아래 형태는 객체에 키와 밸류를 할당할 때 사용하는 방식으로 코드를 작성해주면 되긴 하지만, 콜론(:) 이나, 반점이 사용되지 않는다는 것..

유튜브에서 흥미로운 걸 발견해서 따라해보았다. 본 영상은 공룡이 선인장을 피하는 게임이지만, 이미지만 바꿨다. 어쨌든 오늘 해본 클론 코딩에서 흥미로운 점이 있다면, HTML에 무언가를 그려낼 수 있다는 점이었다. 캔버스 태그는 기본적으로, 자바스크립트 등을 이용하여 그래픽 콘텐츠를 그릴 때 활용한다. 사실 태그 자체로 무언가를 한다고 하기보다는, HTML 내에 도화지를 제공한다는 개념에 가깝다. canvas 의 사이즈는 이렇게 잡았다. 이 정도가 딱 보기 편했다. let canvas = document.querySelector("canvas"); canvas.width = window.innerWidth - 200; // 네이게이션 창을 제외한 너비 canvas.height = window.innerH..

오늘은 투두 리스트를 복습하는 시간을 가졌다. 강의를 들으며 만들었던 페이지는 개인적으로 다소 볼품 없다고 느껴서, 이번에는 css에 신경을 썼다. (만족스럽다) 오늘 다루는 내용은 저번에 다룰 내용과 크게 다르지 않을 것 같긴 하나, 복습할 당시에는 어렵게 느꼈던 부분이니 다뤄보도록 한다. createElement / appendChild / 토글 추가 및 하위요소 삭제 로컬스토리지 / 하위요소 (children) / contains fetch / then / catch createElement / appendChild / 토글 추가 및 하위요소 삭제 먼저 JS를 통한 하위요소 추가에 대한 부분이다. 하위 요소 추가는 createElement 메서드로 활용이 가능하다. // 하위 요소 생성 const ..