Dev

https://sweetalert2.github.io/ SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 위와 같이 '삭제' 버튼을 클릭시 예쁜 Alert 창을 띄우기 위해 SweetAlert를 사용하였다. ( 리액트환경 ) 위의 ui를 구현시 사용했던 Code 이다. 특이한점은 swal과 .then을 위와 같이 사용하여 입력값을 받을 수 있었던 점이다. 기본 형태는 Swal.fire({ .. 옵션들 }).then((result)=>{}) 이며 ( 형태에서 알 수 있듯이 형태변환을 통해 비동기 통신이 가능할 ..

위 4개의 checkbox의 check 순서대로 value 값을 array 담아서 db로 연결하고 싶어서 일단 javascript로 순서대로 array에 담는 function을 구현하였다. import React from 'react' import { useState, useEffect } from 'react'; export default function Test(){ // rendering 관리하기 위해 설정한 message parameter const [message,messageUpdate]=useState(); // checked된 value값을 받기 위해 checkedValueList Array setting const [checkedValueList,checkedValueListUpdate]..

import React from 'react' import { useState, useEffect } from 'react'; export default function Test() { const [message,messageUpdate]=useState(""); const [checkedValueList,checkedValueListUpdate] = useState([]); // var [checkedSkill,checkedSkillUpdate] = useState([]); // var query = 'input[name="skill"]:checked'; // const selectedElements = document.querySelectorAll(query); const inputCheckedVal..

https://yeolceo.tistory.com/4 간단하게 설명하는 async 와 await 을 쓰는이유 with js -YEOL - 동기 & 비동기란 먼저 이해를 돕기 위해 아주 쉽게!! 동기와 비동기에 대해 설명드리겠습니다. 동기는 동시에 실행된다는 의미입니다. 비동기는 말 그대로 동시에 실행이 되지 않는다는 말입니 yeolceo.tistory.com https://dololak.tistory.com/630 [HTTP] HTTP 헤더 중 Content-Type 헤더와 Accept 헤더의 용도와 차이점 Content-Type 헤더 Content-Type은 말그대로 HTTP 메시지(요청과 응답 모두)에 담겨 보내는 데이터의 형식을 알려주는 헤더입니다. 세상에 모든 브라우저와 모든 웹서버가 그렇다고는 ..

https://xiubindev.tistory.com/100

https://velog.io/@sdc337dc/0.%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

import React , { Component }from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faPlus } from '@fortawesome/free-solid-svg-icons' export default class QuickMenu extends Component { constructor(props){ super(props); this.state = { isClick : true, classNm : ' mt-2' } } render() { const toggleStatu = () => { this.setState({ isClick : !this.state.isClick}) if(this...

import React, { Component } from 'react'; import { Navbar, NavbarBrand, Nav, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap'; import ScrollspyNav from "react-scrollspy-nav"; class Header extends Component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.state = { isOpen: false }; } toggle() { this.setState({ isOpen: !this.state...

https://velog.io/@bangina/%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EA%BF%80%ED%8C%81-%EB%A7%88%EC%9A%B0%EC%8A%A4%EC%BB%A4%EC%84%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EB%A7%8C%EB%93%A4%EA%B8%B0%EC%89%AC%EC%9B%80