명왕성의 공전기록

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

오늘은 쇼핑몰 만드는 반응형 웹페이지를 다시 만들었다. 그 중에서 이미 학습했지만, 당시에도 어려웠던 개념에 대해 다뤄본다. : after .card:after { content: ""; display: block; width: 100%; height: 100%; color: black; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; opacity: 0; z-index: 1; } 먼저 :after의 기본활용은 이렇다. 내가 기존에 만들었던 요소에 어떤 특정효과를 주기 위해 활용한다. 가장 큰 이유는 굳이 효과를 주기 위해 HTML 내에 불필요한 요소를 집어넣는 이유가 큰 것 같다. :after 활용에서 주의해야 할 점..

오늘은 예전에 만들어둔 싸이월드 사이트를 새로 만드는 복습을 하다가, 전에는 완성하지 못했던 로또번호 생성기를 완벽히 만들어보기로 했다. 해야 할 것 중복 없는 랜덤 번호 생성하기 오름 차순 정렬하기 HTML 에 띄우기 중복 없는 랜덤 번호 생성 const lottoArr = [] function lottoRender () { for(let i = 0 ; i < 6 ; i++){ const lottoNum = Math.floor((Math.random()*45)+1) if(lottoArr.includes(lottoNum) == false){ lottoArr.push(lottoNum) } else { console.log("중복값 생성되었음") i-- } } } lottoRender() 먼저 로또번호를 생..

어제 풀던 문제를 다시 돌아본다 문제 내용은 이렇다 '임의의 문자열을 입력받아, 문자열에 각 단어가 몇 번 등장하는지 기록한 객체를 리턴하라.' * 대소문자는 구분하지 않아야 하며, 단어가 존재하지 않는 경우 빈 객체를 리턴. * trim 메서드의 사용은 금지. function wordFinder(str) { // 여기에 코드를 작성하세요 let sssAtr = str.toLowerCase().split(" ") console.log(sssAtr) let sameArr = [] for(let i=0; i { return 다음누산값; }, 초기누산값); reduce 메서드는 위와 같은 형태를 띄며, forEach / map 과 같은 메서드처럼 배열을 순회한다. 다만, forEach / map 과는 달리 특..

API 어떤 프로그램에서 제공하는 기능을 사용자가 활용할 수 있도록 만들어둔 인터페이스 Geolocaiton API 받아오기 mdn web docs 에 따르면, 위와 같은 정보가 수록되어있음 어떤 코드가 어떻게 동작하는지는 알 수 없지만, 위도와 경도를 가져오는 코드 같음 const accessToGeo = function (position) { const positionObj = { latitude : position.coords.latitude, longitude : position.coords.longitude, } weatherSearch(positionObj) } // latitude 위도 // longitude 경도 geolocation API const askForLocation = func..

잠깐 HTML, ul태그와 ol태그의 차이 ul Unordered List ol Order List 종속 태그로는 둘다 li 태그 사용 DOM(document object model) 브라우저가 HTML 문서를 파싱하는 과정에서 생겨나는 객체 아래처럼 나무와 비슷하게 생긴 모양 때문에 트리 구조라고 함 그리고 각각의 나뭇잎처럼 생긴 요소들은 노드라고 함 그리고 이 노드들은 객체 형태를 띔 onkeydown() 키보드가 눌릴 때마다 실행시켜줌 -- const keyCodeCheck = function () { console.log(window.event.keyCode === 13) if(window.event.keyCode === 13){ const inputValue = document.querySele..