YounglanHong

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

YounglanHong

<a
  href="https://github.com/YounglanHong/FinalProject_Custard"
  target="_blank">
  https://github.com/YounglanHong
</a>

/*
※ Error:
41:53 warning Using target="_blank" without rel="noreferrer" is a security risk: see
https://html.spec.whatwg.org/multipage/links.html#link-type-noopener react/jsx-no-target-blank

YounglanHong

import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import axios from 'axios';

import Button from '@material-ui/core/Button';

axios.defaults.withCredentials = true;

// GetMsg

YounglanHong

import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import axios from 'axios';

import Button from '@material-ui/core/Button';

axios.defaults.withCredentials = true;


// SendMsg

YounglanHong

import React, { useState } from "react";
import "./hook.css";

function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
    
    useEffect(() => {
      console.log("useEffect1");
    });

YounglanHong

// A, An, The로 시작하는 경우, 해당단어들을 공백으로 대체
  function strip(bandName) {
    return bandName.replace(/^(a |the |an )/i, "").trim();
  }

// sort 함수 내부에서 strip 함수로 인자를 감싸주면, 실제 데이터는 변화하지 않으면서 조건에 따라 정렬 가능
const sortedBands = bands.sort((a, b) => (strip(a) > strip(b) ? 1 : -1));

YounglanHong

document.querySelector("#bands").innerHTML = 
  sortedBands
    .map((band) => `<li>${band}</li>`)
    .join("");

YounglanHong

/* 사용자 지정 데이터 특성([data-time]) 예시
  <li data-time="4:04">
        Video 58
  </li> 
*/

const timeNodes = Array.from(document.querySelectorAll("[data-time]"));

//1️⃣ Map
  const seconds = timeNodes

YounglanHong

//2️⃣ Reduce

const seconds = timeNodes
        .map((node) => node.dataset.time)
        .reduce((acc, time) => {
          const [mins, secs] = time.split(":").map(parseFloat);
          time = mins * 60 + secs;
          return acc + time;
        }, 0);
      

YounglanHong

class Coffee {
  // constructor로 객체 초기화
  constructor(menu, origin, roasting) {
    this.menu = menu;
    this.origin = origin;
    this.roasting = roasting;
  }
  order() {
    console.log(this.menu, "주문이 완료되었습니다")
  }