목록분류 전체보기 (305)
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 ..
오늘은 쇼핑몰 만드는 반응형 웹페이지를 다시 만들었다. 그 중에서 이미 학습했지만, 당시에도 어려웠던 개념에 대해 다뤄본다. : 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..