syleemomo의 IT 블로그 syleemomo의 IT 블로그

컴포넌트가 리렌더링된다고 해서 state 값이 초기화되는 것이 아니다. 아래와 같은 상황을 생각해보자!import React, { useState, useEffect } from 'react'import './App.css'function App(){ const [weather, setWeather] = useState(null) const [reset, setReset] = useState(true) const handleClick = () => setReset(false) useEffect(() => { console.log("날씨") if(reset){ setWeather("맑음") } // return ()..

async function connectData(url, method, data = null, token = null){ const dataJson = await fetch(url,{ headers:{ 'Content-Type':'application/json', 'Authorization': `${token? 'Bearer' + token : ''}`, }, method: method, body: data? data : null }) const result = await dataJson.json() return result }API 데이터 요청하는 유틸리티 함수입니다. utils 폴더 생성하고, api.js 파일에 작성..

File -> Preferences -> Settings 로 이동한다.Workspace 탭에서 Extensions 메뉴를 열고, Emmet 을 선택한다.Preferences 에서 Edit in settings.json 링크를 클릭한다.{ "emmet.preferences": { }, "emmet.includeLanguages": { "javascript": "javascriptreact" }}settings.json 파일에 위와 같이 작성하고, 비주얼 스튜디오 편집기를 끄고 재시작한다.

function 으로 생성한 함수에는 항상 this 와 prototype 속성이 존재한다. const Shadow = function(){ console.log(this) } console.log(Shadow()) this 는 윈도우 객체이다. console.log(new Shadow()) this 는 생성자함수이다. var Human = function(type){ this.type = type || 'human' } Human.isHuman = function(human){ return human instanceof Human } Human.prototype.breathe = function(){ alert('h-a-a-a-m') } 자바스크립트에서는 객체 복사로 상속한다. 복사하는 원본객체를 프로토..

https://www.nextree.co.kr/p7323/ JavaScript : 프로토타입(prototype) 이해 JavaScript는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이 www.nextree.co.kr

축제소개 Festival 소개 행사장 안내 조직위원회 예약안내 예약하기 예약확인/취소 단체예약문의 아티스트 고릴라즈 메이저 레이저 아우스게인 타임로드 header > nav{ display: flex; } header > nav > ul{ list-style: none; } header > nav > ul:hover .sub_menu{ display: block; } .sub_menu{ display: none; }

* async 함수 async, await 문법을 사용하면 프로미스를 조금더 편하게 사용할 수 있다. async function f() { return 1 } function 앞에 async 를 붙이면 해당 함수는 항상 프로미스를 반환한다. 프로미스가 아닌 값(return 1)을 반환하더라도, 내부적으로는 해당 값(1)을 프로미스로 감싸서 반환한다. return 이 resolve 호출과 동일하다. async function f() { return 1 } f().then(alert) // 1 해당 코드를 실행하면 result 가 1인 이행 프로미스가 반환된다. 그러므로 then 을 연결해서 사용할 수 있다. async function f() { return Promise.resolve(1) } f().th..

* 프로미스 체이닝 "비동기 - 콜백" 수업에서 스크립트를 순차적으로 불러오는 비동기 작업이 여러개인 경우에 콜백기반 프로그래밍을 사용하였다. 이때 콜백지옥(callback hell)과 같이 코드가 복잡해지는 문제가 발생하였다. 프로미스 체이닝을 이용하면 이러한 문제를 간단하게 해결할 수 있다. new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000) }).then(function(result) { alert(result) // 1 return result * 2 }).then(function(result) { alert(result) // 2 return result * 2 }).then(function(result) { al..