기록하는 개발자

폴더 구조 1. frontend 폴더 내부에 index.html 파일 생성 후 아래와 같이 구성 // index.html Home Posts Settings - url 이동에 사용하게 될 a 링크들에 대하여 data-link 속성을 지정해준다. +) data-* 속성 참고 글 (https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes) 2. node.js project 생성 : Npm init -y 3. express 설치 : Npm i express 4. server.js 파일 root 폴더에 생성 후 아래와 같이 구성 const express = require("express"); const path = require("pa..

Checklist Load 구현 - list를 입력 받아 localStorage에 저장한다. - 새로고침 후에도 localStorage로부터 이전에 저장한 value를 load해서 list를 유지할 수 있다. - 이전 정보 load 후 추가로 list를 입력 받을 때 덮어쓰기 되지 않고 기존 list에 추가되도록 한다. Log in 00:00:00 const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); const toDoInput = toDoForm.querySelector("input"); let toDos=[]; const ..

아래와 같이 refresh 할 때마다 배경 사진이 바뀌는 기능을 추가해보자. Log in 00:00:00 const images=["img1.jpg","img2.jpg","img3.jpg"]; const chosenImage = images[Math.floor(Math.random()*images.length)]; const bgImage = document.createElement("img"); bgImage.src = `img/${chosenImage}`; document.body.appendChild(bgImage); 1. random image 저장 - 필요한 이미지를 프로젝트 폴더 내 img 폴더를 생성해 한 데 모아둔다. - string type..

10개의 명언 중 랜덤하게 하나를 골라 명언과 출처를 출력하는 js를 적용해보자. Log in 00:00:00 const quotes = [ { quote : "Laughter is timeless, Imagination has no age. And dreams are forever.", author : "Walt Disney", }, { quote : "The past can hurt, but the way I see it, you can either run from it or learn from it.", author : "Lion King", }, { quote : "You must not let anyone define your limits because ..