Web/JS

    [JS] 콜백 Callback
    Web/JS

    [JS] 콜백 Callback

    콜백(Callback) 은 함수의 인수로 사용되는 함수를 뜻합니다. function timeout(cb) { setTimeout(() => { console.log('HEROPY!') cb() // callback 함수 }, 1000) } timeout(() => { console.log('Done!') }) 위 코드의 cb() 처럼 특정한 실행위치를 보장해주는 방법으로 활용합니다. 참고문헌 https://developer.mozilla.org/en-US/docs/Glossary/Callback_function Callback function - MDN Web Docs Glossary: Definitions of Web-related terms | MDN A callback function is a fu..

    [JS] 호이스팅 Hoisting
    Web/JS

    [JS] 호이스팅 Hoisting

    JavaScript 는 특이하게도 호이스팅(Hoisting) 이라는 기능이 탑재되어 있는데, 이는 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 일컫는 말입니다. const a = 3 // 함수 출력단 double() // 함수 선언부 function double() { console.log(a * 2) } 이해하기 쉽게 설명하자면, 어떤 프로그램이던 코드를 위에서부터 아래로 읽어내려가지만 JavaScript 의 경우 호이스팅을 통해서 함수 출력을 선언보다 상단에 입력하더라도 문제없이 컴파일 되는 것입니다. 만약 코드를 해석함에 있어서 '왜 선언이 되지 않은 함수가 이곳에 출력되있지?' 라고 의문을 품을 필요 없이 '이 출력단 이후 어딘가에 함수를 선언해두었구나' 라고 생각하시면 되겠습니다. 참고..

    [JS] 화살표 함수 Arrow function
    Web/JS

    [JS] 화살표 함수 Arrow function

    // 화살표 함수 // () => {} vs function () {} const double = function (x) { return x * 2 } const doubleArrow = (x) => { return x * 2 } double 과 doubleArrow 변수 둘 다 같은 결과를 도출하지만 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고, 화살표 함수는 항상 익명이라는 점에 차이가 있습니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다. const doubleArrow = x => x * 2 화살표 함수는 return을 지정해주지 않아도 실행문을 출력할 수 있으며, 매개변수가 하나..

    export 문으로 내보내기 / import 문으로 가져오기
    Web/JS

    export 문으로 내보내기 / import 문으로 가져오기

    export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다. 다시말해 .js 파일을 만들어 export default function functionName() {} 선언하면 내보낸(export) 함수의 기능을 다른 .js 파일에서 import funcionName from'./fileName' 를 통해 가져다 사용할 수 있습니다. 이 기능을 왜 사용하나요? 어떠한 함수를 여러 개의 .js 파일에서 사용해야 하는 경우, 일일이 함수 선언을 복사 붙여넣기 하는 것보다 더 효율적이기 때문입니다. 참고문헌 https://developer.mozilla.org/ko/docs/Web/JavaScript..

    [node.js] nvm install error
    Web/JS

    [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
    Web/JS

    [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
    Web/JS

    [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
    Web/JS

    [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
    Web/JS

    [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
    Web/JS

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

티스토리툴바