명왕성의 공전기록

if문과 동일한 역할을 함. 허나 실무에서는 자주 사용되지는 않음 // 스위치-케이스 문법이라고도 부름 const day = '목요일' switch(day) { case "월요일" : // case 는 조건식을 의미함 "월요입입니다." break // break 미처리 시 정상 출력되지 않음 case "화요일" : "화요일입니다." break case "수요일" : "수요일입니다." break default : // 예외 처리할 때 사용 // 맨 아래 있어야 함 "로직에 없는 요일입니다." }

null과 undefined 차이 null == 변수를 선언하고 '의도적으로' 빈 값을 할당한 상태 (빈 객체) undefined == 변수를 선언하고 값을 할당하지 않은 상태 // 값이 없는 변수에 자동으로 undefined 할당됨 가볍게 정리하면 이와 비슷하지 않을까 싶다. null 은 그 말마따나 '값이 없음' 이며, undefined 역시 그 말마따나 값이 없음으로도 '정의되지 않음'이라고 볼 수 있다.

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

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..

이전 포스팅에서 클론 코딩을 할 때 생소하게 보였던 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 ..