전체 글
![[node.js] nvm install error](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fce1dtb%2Fbtq9Y4644bC%2FlIgDVpXSbNuisM72XflxKK%2Fimg.png)
[node.js] nvm install error
터미널에서 nvm install 을 통해 node.js의 각 version을 설치할 때 위 문구가 뜨면서 설치를 할 수 없는 오류가 발생합니다. 이 경우 nvm 의 설치 경로 설정이 잘못되어 프로그램이 설치할 위치를 찾지 못하고 있는 것이기 때문에 명령어를 통해 수동으로 경로 설정을 해주어야합니다. nvm root "파일 위치" 를 통해 올바른 경로를 설정했습니다. 이 오류의 경우 PC 사용자 이름에 특수기호가 들어있거나, 공백이 있는 경우에 발생하기 때문에 수동으로 경로 설정을 다시 해주면 정상적으로 node.js 의 version 설치가 가능합니다. 참조 문서 https://github.com/coreybutler/nvm-windows/issues/334 nvm install - errors · Is..
![[Vanilla JS] create To do list](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLi3QM%2Fbtq9Ct1Ag9c%2FcfSym9RxXhRLpk3truOA31%2Fimg.png)
[Vanilla JS] create To do list
Setup const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event) { event.preventDefault(); const newTodo = toDoInput.value; // input의 현재 value 를 새로운 변수에 복사 toDoInput.value = ""; // input 을 받고나면 비우기 // toDoInput.value = "" 를 통해 input을 비우더라도 이미 저장된 값은 비워지는 것이 아님! /..
![[Vanilla JS] 인용구 나타내기 Math.random](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRKa1V%2Fbtq9IwQgS0O%2FsA5onHTegdc78MkfKHz8vk%2Fimg.png)
[Vanilla JS] 인용구 나타내기 Math.random
웹사이트에 유명인사의 여러 명언들을 나타내주는 화면을 구현하는 코드입니다. 여러 개의 인용구들을 랜덤으로 나타나게 하기 위해서 Math.random를 사용합니다. Math.random 은 0~1 사이의 무작위 실수(float)를 반환해주기 때문에 Math.random() * n 의 형태로 수를 곱해주어 랜덤 숫자의 범위를 정할 수 있습니다. const quotes = [ { quote: "1 Stand up straight with your shoulders straight", author: "Jordan B Peterson", }, { quote: "2 Treat yourself like someone you are responsible for helping", author: "Jordan B Pete..
![[Vanilla JS] create clock - setInterval, date, padStart](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAj7Bu%2Fbtq9C89Oj4C%2FOOy6OjIq2RU8oKSVH2IGR0%2Fimg.png)
[Vanilla JS] create clock - setInterval, date, padStart
디지털 시계를 만들기 위해서는 Date 와 Interval 을 사용합니다. 일정 시간 이후 함수가 호출되도록 하는 방법은 대표적으로 timeout과 interval 로 나뉘지만 시계는 지속적으로 시간이 흘러야하기 때문에 interval 을 사용합니다. setTimeout : 을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 setInterval : 을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 00:00:00 const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); // 한국 표준시를 date 변수에 저장 clock.innerText = (`${date.getHours()}:..
![[Vanilla JS] localStorage - setItem, getItem, removeItem](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkwHyq%2Fbtq9uByi1ee%2Fkgk99zUxgi3sPiGV4NIHLK%2Fimg.png)
[Vanilla JS] localStorage - setItem, getItem, removeItem
const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; function onLoginSubmit(event) { event.preventDefault(); const username = loginInput.value; // 유저 이름 저장 loginForm.classList.add(HIDDEN_CLASSNAME); localStorage.setItem("username", username);..
![[Vanilla JS] Form Submission & Events](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc4ZvHJ%2Fbtq9xMsbWV0%2FPKKEdZeFDjOheT0WGx5OFk%2Fimg.png)
[Vanilla JS] Form Submission & Events
html 에서 지원하는 form 태그를 이용하여 JS 에서 따로 button 상호작용에 대한 함수를 추가하지 않아도 input 과 button 을 통해 얻는 value 를 저장할 수 있습니다. 하지만 form 의 기본 동작은 submit event 가 발생할 경우 브라우저가 자동으로 초기화(새로고침) 되기 때문에 이와 같은 현상을 제어하기 위해서는 html 의 form 을 토대로 가져가되, JS 에서 함수를 추가하여 세부 옵션을 조정해야합니다. const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form input"); function onLoginSubmit(even..
![[Vanilla JS] CSS in Javascript](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKqxwr%2Fbtq9uCb72Sy%2FIuKrulx7sKvn5jXObUBgn1%2Fimg.png)
[Vanilla JS] CSS in Javascript
CSS in Javascript Click me! const title = document.querySelector(".hello h1"); function handleTitleClick() { const currentColor = title.style.color; let newColor; if(currentColor == "blue") { // true or false newColor = "tomato"; } else { newColor = "blue"; } title.style.color = newColor; // 함수 조건 적용 } title.addEventListener("click", handleTitleClick); CSS 의 기능을 Javascript 에서도 관리할 수가 있습니다만, 본 포스..
![[Vanilla JS] Events](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkWsIP%2Fbtq9lm2vlg6%2F6PSX6UZPQDknPbzOINqs30%2Fimg.png)
[Vanilla JS] Events
Click me! const title = document.querySelector(".hello h1"); function handleTitleClick() { title.style.color = "blue"; } function handleMouseEnter() { title.innerText = "Mouse is here!"; } function handleMouseLeave() { title.innerText = "Mouse is gone!"; } function handleWindowResize() { document.body.style.backgroundColor = "tomato"; } function handleWindowCopy() { alert("copier!"); } function ..
![[JS] Searching For Elements](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuzwaM%2Fbtq9pDP274o%2Fa1p6ZshsO06gJp0AL69VrK%2Fimg.png)
[JS] Searching For Elements
Grab me! const title = document.querySelector(".hello h1"); // or ("div h1") console.log(title); querySelector 는 CSS 방식으로 요소(element)를 검색하는 가장 효율적인 방식입니다. Grab me! Grab me! Grab me! const title = document.querySelectorAll(".hello h1"); console.log(title); 여러개의 요소를 모두 찾으려는 경우에는 querySelectorAll 을 사용합니다. // querySelector 는 첫번째 요소만 찾아주기 때문 const title = document.querySelectorAll("#hello"); console...
![[JS] 조건문 Conditionals](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbOiAk8%2Fbtq9kPRvRjg%2FQtutSkmhR0f6Fw6EIitypk%2Fimg.png)
[JS] 조건문 Conditionals
// age calculator const age = parseInt(prompt("How old are you?")); if (isNaN(age) || age = 20 && age 60 && age 80) { console.log("You can do whatever you want"); } 위의 나이 계산기 코드를 통해 조건문과 연산자에 대한 기초 지식을 이해할 수 있습니다. 개발자 도구의 console 을 통해 입력값에 기반한 출력값을 비교합니다.