dukDukz

구글에 '아마존 ec2' 라고 검색한다. https://aws.amazon.com/ko/ec2/?ec2-whats-new.sort-by=item.additionalFields.postDateTime&ec2-whats-new.sort-order=desc 아마존 클라우드 서버 호스팅 | Amazon Web Services 다양한 구매 모델 온디맨드, 스팟 인스턴스, Savings Plan과 같은 여러 가지 구매 모델을 제공합니다. 스팟 인스턴스를 사용하면 내결함성을 갖춘 워크로드 요금을 90%까지 절감할 수 있습니다. Saving aws.amazon.com 여기서 서버를 열어보자 가입을 하고 로그인을 하면 이러한 페이지가 나오게 되는데 '가상 머신 시작' 부분을 선택해서 들어가자 Ubuntu Server 2..

import React from 'react' import styled from 'styled-components' const ButtonStyle = { 'background' : 'black', 'border' : 'none', 'color' : 'white', 'padding' : '7px 14px' } const Button = styled.button` background : #000; border : none; color : white; padding : 7px 14px; ` const ButtonHover = styled(Button)` background : #007bff; :hover{ background : #0069d9; } ` const Index = () =>{ const inpu..

[구조] Layout 컴포넌트 안에 LoginBox LoginBox 컴포넌트 안에 Login Login 컴포넌트 안에 Button 여기에는 화면에 표출될 내용이 들어간다 이렇게 되어있는 컴포넌트를 LayoutContext로 묶어주었다. 이렇게 하면 최하위 컴포넌트에서 상태값을 전달전달 해서 받는것이 아니라 바로 사용할 수 있게 된다. 그리고 LayoutStore라는 틀만 사용해서 상태값을 만든다. Layout.jsx import React from 'react' import LayoutStore, { LayoutContext } from './LayoutContext' const Button = () => { const context = React.useContext(LayoutContext) retur..

import React from 'react' const reducer = (number, action) =>{ switch(action.type){ case 'UP': return number+1; case 'DOWN' : return number-1; default: return number; } } const Counter = () => { const [number, dispatch] = React.useReducer(reducer, 0) const onUP = () => { dispatch({ type: 'UP' }) } const onDown = () => { dispatch({ type: 'DOWN' }) } return ( {number} +1 -1 ) } export default Coun..

useReducer 상태관리 useState랑 비슷하다 상태를 변경하는 로직을 다른 곳에서 처리할 수 있다. 상태관리 할때 객체를 사용할 수 있어서 편리하다. Context Props 하위 컴포넌트에 보내는것이 까다로웠는데 이거를 편리하게 해준다 webpack5/component/counter 폴더 생성 * useReducer const [변수명,dispatch] = React.useReducer() const [number, dispatch] = React.useReducer(reducer,0) 구조 : 함수 number 라는 값을 바꾸기 위해서 dispatch를 써야한다 reducer를 쓸때는 컴포넌트 밖에다 놓자 dispatch는 setState 쓰듯이 쓰면 된다 dispatch({ }) dispa..

import React, { useState, useMemo, useCallback } from 'react' const Memo = () => { const [username, setUsername] = useState('') //React 가 빠진 이유는 위에 import 때문 const [list, setList] = useState([]) const change = (e) => { let { value } = { ...e.target } setUsername(value) } const submit = (e) => { e.preventDefault() const newList = [...list] newList.push(username) setList(newList) setUsername('') }..

useMemo 와 useCallback을 사용하는 이유는? /0712/vifo.html DP : 다이나믹 프로그래밍 - 어려운 알고리즘 중 하나라고 볼 수 있다. 코테 마지막 문제에서 자주 출제되고 그래프 + DP 로 출제가 된다. 그러면 DP가 뭐냐? - 규칙을 찾는거라고 보면 된다. * 피보나치 수열 문제 - 메모이제이션을 쓰는 이유 (최적화를 위해) 더보기 function fibo(n){ if(n == 1) return 1 if(n == 2) return 1 return fibo(n-2) + fibo(n-1) } 이렇게 쓰면 연산을 너무 많이 하게 된다. 개복잡함 - 그래서 이걸 메모제이션 으로 바꾸자 let memo = {} function fibo(n) { if (n in memo) { let ..