인생 1회차 (First-Life) Ing

90년생 HTML과 웹 웹의 고향 스위스 1990년도 웹의 등장 Tim Bernes-Lee 가 만들었음 효율적으로 정보를 주고 받기 위해 탄생 1990.10 세계 최초의 웹 페이지 에디터 1990.11 세계 최초의 웹브라우저 (www) 1990.12 세계 최초의 웹서버 (info.cern.ch) - 웹의 시작 Q. 왜 웹서버가 필요할까? A. 콘텐츠 관리 : 웹에서 다양한 컨텐츠를 불특정 다수에게 공개할 때 여러 곳에 분산되어 있으면 업데이트를 파악하기도 어렵고 동시 갱신이 어렵고 비용도 많이 듦 -> 웹서버컴퓨터 하나에 정보를 모아두자 => 데이터 상태를 효율적으로 관리하고, 변경된 데이터를 클라이언트에게 효율적으로 공유하기 위해 1. 요구사항 분석 2. 웹서버 실행시키기 fetch('url', opt..

canvas html5 의 한 요소로 context를 가짐 (요소안에서 픽셀에 접근할 수 있음) 2개의 사이즈를 가져야 함(CSS사이즈, pixel modifier(실제픽셀사이즈)) strokeStyle( ) : 기본색 lineWidth( ) : 선의 너비 beginPath( ) : 클릭하지 않을 때 선을 만듦 => 경로생성 moveTo(x,y) : x,y 좌표로 path를 옮김 => 선 시작 좌표 lineTo(x,y) : 이전 위치에서 지금 위치까지 선을 만듦 => 선 끝 좌표 stroke( ) : 선을 그음 - 마우스를 움직이는 내내 발생 => 선 그리기 * Canvas MDN https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

1. 요구사항 분석 2. 로컬스토리지 개념 localStorage : 브라우저에 저장할 수 있는 저장소 (url 별로 저장 / key:value 형태로 저장) setItem() : 저장 getItem() : 가져오기 JSON.stringify() : 로컬스토리지는 문자열로만 저장되기 때문에 객체 형태를 문자열로 저장 상태(=데이터)관리 : 변할 수 있는 데이터 > 변하기 때문에 관리를 해줘야 하는구나! 3. 메뉴상태 저장하여 관리 (추가, 수정, 삭제, 불러오기) map() : 배열을 순회(리턴한 값으로 새로운 배열로 만듦) join() : 문자열을 하나로 합쳐줌 상태 초기화를 해주는 이유 : 어떤 데이터를 넣을지 정의하고 관리하는지 명확히 알 수 있음 data- : html마크업에서 어떤 데이터를 저장..

☕ 블랙커피 Vanilla JS Lv1. 문벅스 카페 메뉴 앱 만들기 메이커준님 유데미 강의 시작! 강의도 여러개 끊어놓고 책도 읽고 있지만 그저 따라치고 뭘 어떻게 만들어야 할지 갈피를 잡지 못하던 나에게 딱 필요한 강의인 것 같아서 유데미 할인할 때 저렴하게 질렀다!! (이렇게 산 것만 수두룩^^*) 강의 목적 바닐라 자바스크립트를 아는 걸 넘어 자바스크립트를 잘 사용하는 방법(사고하는 방법) 바닐라 자바스크립트로 상태관리가 가능한 애플리케이션 만들기 1. 요구사항 분석 요구사항의 목적을 명확히 체크 (기능 구현을 위한 필요한 지식과 개념이 무엇인지 파악) 기능을 세부적으로 쪼개서 (메뉴추가/수정/삭제) 순서대로 적어보기 ※ 요구사항 예시 ※ 에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입..

getCurrentPosition() : 장치의 현재 위치를 가져옴 openwhathermap 사이트 : https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweat..

JSON.stringify () : javaScript 값이나 객체를 string(문자열)으로 만들어줌 JSON.parse() : JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성함 fliter() : 지우고 싶은 (배열)아이템을 제외함, 넣고 싶은 아이템은 반드시 true로 리턴함, filter 는 원래 array를 변경하지 않고 새 array를 생성함 // filter 예제 function abc(item) { return item !==3 } [1,2,3,4,5].filter(abc); // 결과 [1,2,4,5] parseInt() : 문자열을 숫자로 바꿔줌 to do list 만들기 const toDoForm = document.querySelector("#..

Math.random() : 랜덤한 숫자 Math.ceil() : 올림 Math.round() : 반올림 Math:floor() : 내림 랜덤하게 노래 / 가수 제목 표시하기 ( Quotes 대신) const quotes = [ { title : "꽃길만 걷자", singer : "버블 사운드" }, { title : "있잖아", singer : "데이식스" }, { title : "너를 생각해", singer : "주시크" }, { title : "savage", singer : "aespa" }, { title : "My Universe", singer : "방탄소년단" }, { title : "나의 첫사랑", singer : "다비치" }, { title : "Only You", singer : "..

setIntervals : '매 n초/분…마다' 무언가를 실행하고 싶을 때 사용 setTimeout : 일정 시간 후에 실행하게 함 new Date : 오늘 날짜 (getDate/Day/FullYear/Hours/Minutes/Second) padStart() : string에 쓰는 함수로 원하는 글자수를 만들 때 (앞부분에 string을 추가하여) 사용 ↔ padEnd() "1".padStart(2,"0") // padStart(원하는글자수, "추가할 글자") // 결과 "01" 시계만들기 const clock = document.querySelector("#clock") function getClock (){ const date = new Date(); const hours = String(date...

username 입력받고 저장하고 불러오기 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function onLoginSubmit (event){ event.preventDefault(); // 브라우저 기본동작 막기 loginForm.classList.add(HIDDEN_CLASSNAME) // form 다시 숨겨주기 c..

DOM : Document Object Model 자바스크립트로 HTML를 object 형태로 제어(읽고 수정하고 추가 등)할 수 있음! const hello = document.getElementById("Hi"); const hello = document.getElementByClassName("Hi"); querySelector - element를 CSS 방식으로 가져올 수 있음, 단 하나의 element를 가져옴 (여러개의 경우 제일 첫번째 것만 가져옴) querySelectorAll - 조건에 부합하는 모든 element를 가져옴 const title = document.qeurySelector(".hello h1"); addEventListener const h1 = document.query..