yevdev◡̈

💡react-async? #4에서 만든 useAsync와 비슷한 함수가 들어있는 라이브러리 이안의 함수이름도 useAsync : 사용법이 좀 다름! 라이브러리 설치 yarn add react-async react-async의 공식 사용법 import { useAsync } from "react-async" const loadCustomer = async ({ customerId }, { signal }) => { const res = await fetch(`/api/customers/${customerId}`, { signal }) if (!res.ok) throw new Error(res) return res.json() } const MyComponent = () => { const { data, e..

데이터를 요청할때마다 리듀서를 작성하는건 번거롭다. 매번 반복되는 코드를 작성하는 대신에, 커스텀 Hook을 만들어서 요청 상태 관리 로직을 쉽게 재사용하는 방법을 알아보자. useAsync.js import { useReducer, useEffect } from 'react' function reducer(state, action) { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: null }; case 'SUCCESS': return { loading: false, data: action.data, error: null }; case 'ERROR': return { loading: false, data..

#2 에서의 useState 대신에, useReducer를 사용하여 구현을 해보자 useReducer을 사용하여 LOADING, SUCESS, ERROR 액션에 따라 다르게 처리하기 Users.js import React, {useState, useEffect} from 'react' import axios from 'axios'; function reducer(state, action){ switch(action.type){ case 'LOADING': return{ loading: true, data: null, error: null }; case 'SUCCESS': return{ loading: false, data: action.data, error: null }; case 'ERROR': ret..

1️⃣ 설정 axios 라이브러리 설치하기 $ cd api-integrate $ yarn add axios 💡간단히 자주 사용되는 4가지 메서드 정리! GET : 데이터 조회 POST : 데이터 등록 PUT : 데이터 수정 DELETE : 데이터 제거 2️⃣ axios 사용법 (GET) import axios from 'axios'; axios.get('/users/1'); 3️⃣ POST 사용법 ( 새로운 데이터 등록 ) 두번째 파라미터에 등록하고자 하는 정보 넣기 axios.post('/users',{ username: 'blabla', name: 'blabla' }); 💡useState와 useEffect로 데이터 로딩하기 useState : 요청상태관리 useEffect : 컴포넌트가 렌더링되는 ..

https://react.vlpt.us/integrate-api/ 이 카테고리도 정말,, 제수준에 딱맞게,,, 머찌신,, 벨로퍼트님의 블로그를 보고 공부하고 정리한 내용을 작성할 예정이다. API가 왜 필요한가? 웹 애플리케이션을 만들게 될 때, 데이터를 브라우저에서만 들고 있는게 아니라, 데이터를 보존시키고, 다른 사람들도 조회할 수 있게 하려면 서버를 만들고 서버의 API를 사용하여 데이터를 읽고 써야 한다. 그럼 API가 무엇인가? API? 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 어떤 응용프로그램에서 데이터를 주고 받기 위한 방법 어떤 특정 사이트에서 특정 데이터를 공유할 경우, 어떠한 방식으로 정보를 요청해야하는지, 그리고..

오늘의 포스팅은, 동적계획 알고리즘을 이용한 연속된 행렬곱셈이다. 문제 n개의 연속된 행렬곱셈 M = M1M2M3...Mn에서 스칼라 곱셈 횟수가 최소가 되는 곱셈 순서를 찾는 알고리즘 💡행렬곱셈의 원칙 행렬곱셈 C = AB 의 기본적인 요건은 A의 열의 개수와 B의 행의 개수가 같음 A(p x r) x B(r x q) = C(p x q) 스칼라 곱셈은 모두 ( p x r x q ) 번 무작위 기법 모든 행렬 곱셈 순서를 구하여, 각각의 스칼라 곱셈 횟수를 계산하여 비교 Xn = (n개의 행렬을 곱하는 가능한 모든 곱셈 순서의 수) 라면, Xn은 다음의 세경우의 수를 합한 것 M1을 가장 나중에 곱하는 경우의 수 = M1(M2M3...Mn)의 순서로 곱 = M2M3...Mn을 곱하는 경우의 수 = X(n..

2차 심사결과, 아쉽게도 입선까지밖에 다다르지 못하였다..! 🥺 하지만, 초반에는 별로 친하지 않았던 팀원과 백앤드와 프론트앤드를 넘나들며 적으면 한달에 한두번, 많으면 10번 이상 만나가며 끝없는 회의와 코딩을 했던 경험은 너무 좋았던 것 같다. 그닥 실력이 출중하지 않은 내가 처음으로 전공관련 프로젝트에서 팀장이 되었는데, 이런 나와 함께 해주고 같이 맞춰온 팀원이 너무너무 고맙기만하다 ㅠ (입선으로 끝난게 괜히 미안한 마음이 들기도,,) 사실 12월까지 한이음 프로젝트는 계속 진행될 것이다. 아직 과제 결과물에 대한 유사도 분석 및 자동 채점 리포트 생성 부분을 다 하지 못했기 때문에..! 멘토님도 너무너무 좋으시고 우리의 실력과 열정이 사그러들지 않도록 이끌어주신 분이셔서 프로젝트가 이번달 말에서..

이 프로젝트는 서울과학기술대학교 이길흥교수님의 수업인 '고급웹프로그래밍' 강의의 기말고사 대체 프로젝트이다. 일단은,, ㅎㅎ 시간이 비어서 시작 문서를 올려본당! 의진이 허락은 금요일에 회의할때 받아야겠당 껄껄,, 기획서는 다음과 같다. 팀 및 프로젝트명 Rendering 개요 코로나시대에 따라 많은 사람들은 웹, 앱 애플리케이션을 통해 강의, 영화, 회의 등의 업무 및 취미 활동 등을 온라인으로 진행하고 있다. 우리는 이런 현재에 맞는 웹 애플리케이션을 개발하고자 했고, 제한된 오프라인 활동으로 인해 쉽사리 자신의 작품을 전시하거나 홍보하기 어려운 예술가들에게 도움이 되는 웹 사이트를 생각해 내었다. 많은 예술가들은 자신의 작품을 우리의 웹 사이트를 통해 다양한 템플릿 형식에 맞춰 온라인 전시를 진행할..

이전에 포스팅했던 모든 쌍 최단 경로, 다익스트라 알고리즘을 이용하는 법과 또다른 알고리즘 방식인 Floyd-Warshall 알고리즘에 대해 기록해보고자 한다! 이전의 다익스트라 알고리즘,, 각 점을 시작점으로 정하여 다익스트라의 최단 경로 알고리즘을 수행 시간복잡도는 배열을 사용하면 (n-1) x O(n^2) = O(n^3) Floyd-Warshall 알고리즘 (플로이드-워샬)? 💡접근법 두 정점을 잇는 최소 비용 경로는 경유지를 거치거나 거치지 않는 경로 중 하나에 속한다. 만약 경유지를 거친다면 그것을 이루는 부분 경로 역시 최소 비용 경로여야 한다. 💡동적 계획 알고리즘으로 접근하기 위해, 먼저 부분 문제들을 찾는다. 그래프에 점이 3개 있는 경우, 직접 가는 경로와, 점 하나를 거쳐 경유하는 경..

동적 계획 알고리즘에 대해 공부하기 전에,, 이전에 포스팅했던 분할정복 방법! 다시 살펴보기 💡분할정복 방법? 하향식 top-down 접근법 상위 레벨의 복잡한 문제를 재귀적으로 작은 문제들로 나누고, 이들의 해를 결합해서 문제를 해결하는 방법 분할된 부분 문제들은 서로 독립적 퀵정렬, 합병 정렬, 이진 탐색 ➰피보나치 수열을 분할 정복으로? 같은 계산이 반복됨 -> 비효율적! 💡동적 계획 알고리즘? 그리디 알고리즘과 같이 최적화 문제를 해결하는 알고리즘 작은 문제에 대한 결과를 테이블에 저장해 놓고, 이를 이용하여 입력의 크기가 보다 큰 문제의 해를 점진적으로 만들어가는 방법 최댓값/최솟값을 구하는 최적화 문제에 적용 부분 문제들 사이에 의존적 관계가 존재한다. 이러한 관계는 문제 또는 입력에 따라 다..