기록하는 개발자

https://mingmeng030.tistory.com/244 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-1. 라우팅 설정하기 폴더 구조 1. frontend 폴더 내부에 index.html 파일 생성 후 아래와 같이 구성 // index.html SPA with no framework Home Posts Settings - url 이동에 사용하게 될 a 링크들에 대하여 data-li.. mingmeng030.tistory.com ↑위 글과 이어지는 내용이다 파일 구조 1. AbstractView.js 생성 후 아래와 같이 추상화된 view 작성 export default class { constructor() {} setTitle(title) { document..

폴더 구조 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..

react 사용에 필요한 것 - nodeJS, npm, npx, git, code editor - nodeJS 설치 시 npm이 함께 설치된다. (yarn과 npm은 동일한 역할을 수행한다.) - 원하는 code editor 사용 ex) VSCode, Sublime Text, Brackets, Atom, Vim etc.. react를 배우기 전 기본적으로 알아야 할 것 - html, css, vanillaJS 1. npx install > npm install npx -g 2. create app > npx create-react-app ex) npx create-react-app myapp 3. app 실행 > cd myapp > npm start import React from "..

- 주어진 팔레트 내에서 색상을 변경할 수 있다(default : black). - 주어진 range 내에서 브러쉬 크기를 변경할 수 있다(default : 10). - fill 버튼을 누르면 버튼이 paint로 바뀌고, canvas를 클릭하면 배경색이 채워진다. - paint로 바뀐 버튼을 누르면 다시 text가 fill로 바뀌고, canvas에 선을 그릴 수 있다. - clear 버튼을 클릭하면 canvas가 초기화 된다. Fill Clear @import "reset.css"; body{ background-color: #f6f9fc; display: flex; flex-direction: column; align-items : center; padding-top : 30px; } .canvas{ ..

- openweathermap으로부터의 api를 통해 오른쪽 상단에 현재 위치, 날씨, 온도를 띄워준다. Log in 00:00:00 // https://openweathermap.org/ 가입 후 개인 api key를 복사해 API_KEY 변수에 저장 const API_KEY = "4b4a6452c8e528ead6fa2fa823527423"; function onGeoOk(position){ const lat=position.coords.latitude; const lon=position.coords.longitude; const url=`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=$..

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