hceaan

vscode 설정 -> 정의로 이동 검색 -> Editor: Multi Cursor Modifier 가 alt 로 설정되어 있는지 확인

Web Storage HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 Web Storage 스펙이 포함되어있다 웹스토리지 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다 기존의 쿠키와 매우 유사한 개념이다 LocalStorage 와 SessionStorage 두가지가 존재한다 Web Storage VS Cookie 데이터가 클라이언트에 존재할 뿐 서버로 전송되지 않는다. 단순 문자열을 넘어 객체정보를 저장할 수 있다 용량의 제한이 없다 영구 데이터 저장이 가능하다 LocalStorage 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다 도메인마다 별도로 생성된다 SessionStorage 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한..

Next.js 란 Next.js 는 따로 설정을 해주지 않아도 SSR, SEO 부터 TypeScript 까지 생산에 필요한 많은 기능들을 제공하는 강력한 React 프레임워크 이다. Next.js 를 사용하는 이유 SSR Next.js 는 SSR을 지원하는 React Framework 이다 React 는 SPA 를 만들기 위한 라이브러리인데 CSR 방식을 채택한 SPA에서 어떻게 SSR을 한다는 것일까? Next.js 의 작동방식 1. 사용자가 초기에 Server에 페이지 접속을 요청한 경우 SSR 방식으로 렌더링 될 HTML 을 보낸다 2. 브라우저에서 JS를 다운로드 받고 React를 실행한다 3. 사용자가 페이지와 상호작용을 하며 다른 페이지로 이동할 경우 CSR방식으로 Server가 아닌 브라우저..

블록체인 기술이란? 데이터 분산 처리 기술이다. 네트워크에 참여하는 모든 사용자가 모든 거래 내역 등의 데이터를 분산, 저장하는 기술이다 여기서 블록은 개인과 개인의 거래의 데이터가 기록되는 장부이다. 블록체인 데이터베이스는 연쇄적으로 연결된 블록에 데이터를 저장한다 체인의 삭제나 수정이 불가하고 추가만 가능하다 따라서 이 데이터는 시간 순서대로 일관성이 있다 블록체인 기술의 특징 탈중앙화: 분산형 블록체인 네트워크는 투명성을 사용하여 참여자 간의 신뢰에 대한 필요를 줄인다. 불변성: 수정이 불가능하다. 누군가가 공유 원장에 거래를 기록하면 참여자는 거래를 조작할 수 없다. 거래 레코드에 오류가 포함된 경우, 실수를 되돌리기 위해 새 거래를 추가해야 하며 두 거래 모두 네트워크에 표시된다 합의: 거래 기..

Web 1.0 Web 2.0 Web 3.0 을 알아보기 전에 Web 1.0, Web 2.0 에 대해 알아보자 Web 1.0 정적인 웹사이트, 유저들은 데이터를 '소비'하기만 함 유저가 데이터를 올리기 위해선 웹사이트를 만드는 법, 서버를 구축하는 법을 알았어야 했다 브라우저와 언어(JS, CSS 등)가 강력하지 않았기 때문에 멋진 웹사이트 만드는 것이 어려웠음 WEB 2.0 '읽기'만 가능했던 유저들이 직접 컨텐츠를 '생산' 및 '공유' 할 수 있게 됨 그 결과 플랫폼의 역할이 커지면서 소수의 사업자들이 웹 생태계를 주도하기도 함 예를 들어 네이버, 유튜브, 인스타 등 또한 플랫폼 사업자들은 이용자 데이터의 소유권을 가지게 됨 -> 데이터 '중앙화' 어드민을 통해 쉽게 데이터 열람 및 관리가 가능 데이터..

Promise 란? 자바스크립트 비동기 처리에 사용되는 객체이다. ES6에서 추가되었다. Promise 나온 이유 콜백 함수가 호출 된 두 다른 이벤트 콜백을 발생시키기 위해서는 콜백 함수가 언제 끝날지 메인스레드는 알지 못하기 때문에 첫번째 콜백 함수에 이후의 콜백 로직을 작성해야 했다. function timeoutFn(fn){ setTimeout(function() { console.log("timeout"); fn(); }, 1000); } timeoutFn(function() { timeoutFn(function() { timeoutFn(function(){}) }) }) 이렇게 콜백 함수 내에서 콜백이 반복적으로 호출되어서 코드가 읽기 어렵게 되는 것을 callback hell 이라고 한다. ..

다익스트라(Dijkstra) 알고리즘은 하나의 정점에서 나머지 각 장점까지의 최단 경로를 알려주는 알고리즘이다. 다익스트라 알고리즘은 음의 간선을 포함 할 수 없다.(벨만-포드 알고리즘은 음수도 가능) 다익스트라 알고리즘 구현은 다음과 같은 과정을 반복하면 된다. 1. 방문하지 않은 정점 중 가장 가중치 값이 작은 정점을 방문한다. 2. 해당 정점을 거쳐서 갈 수 있는 정점의 거리가 이전에 기록한 값보다 작다면 그 거리를 갱신한다. 선형 자료 구조 + 선형 탐색을 이용한 다익스트라 알고리즘 시간 복잡도 O(N^2) 정점의 갯수가 많은데 간선은 적을 때 비효율적으로 작동할 수 있다 준비물 그래프 G: 무방향 가중치 그래프 선형 자료구조: 그래프의 정점 - 가중치 관계를 배열로 표현한 것 방문 처리 배열: ..

아폴로 클라이언트를 사용하면 캐시를 업데이트하여 GraphQL 데이터를 로컬에서 수정할 수 있지만 때로는 서버에서 쿼리를 다시 가져와 클라이언트 측 GraphQL 데이터를 업데이트(refetching)하는 것이 더 간단합니다. 이론적으로 클라이언트측 업데이트 후에 모든 활성 쿼리를 refetch 할 수 있지만, query 를 선택적으로 refetch 할 경우 시간과 네트워크 대역폭을 절약할 수 있습니다 InMemoryCache는 최근 캐쉬 업데이트로 인해 무효화 됐을 수도 있는 활성 쿼리를 선택하는데 도움을 줍니다.(무슨말?) 로컬 캐쉬 업데이트와 refetch 는 함께 잘 작동합니다. 어플리케이션은 백그라운드에서 refetching 하여 서버에서 최신데이터를 가져오는 동안 로컬 캐시 수정 결과를 즉시 ..

쿼리(Queries) useQeury 훅으로 데이터 가져오기 쿼리 실행 useQuery 리액트 훅은 아폴로에서 쿼리를 실행하는 기본 API 입니다. 리액트 컴포넌트에서 쿼리를 실행하려면 useQuery 를 호출하고 GraphQL 쿼리 문자열을 전달해야 합니다. 컴포넌트가 렌더링 될 때, useQuery 는 컴포넌트 렌더링하는 데 사용할 수 있는 loading, error, data 를 포함한 객체를 리턴하게 됩니다. import { gql, useQuery } from '@apollo/client'; const GET_DOGS = gql` query GetDogs { dogs { id breed } } `; function Dogs({ onDogSelected }) { const { loading, er..

아폴로 클라이언트란? GraphQL을 사용하여 데이터를 관리할 수 있는 자바스크립트 상태 관리 라이브러리이다. 리액트에서 사용할 경우 Redux를 대체 가능하다. 아폴로 클라이언트 특징 Declarative data fetching 데이터 검색, 로딩 및 오류 상태 추적, UI 업데이트를 위한 로직이 전부 useQuery 훅에 의해 가능하다. function Feed() { const { loading, error, data } = useQuery(GET_DOGS); if (error) return ; if (loading) return ; return ; } Zero-config caching 캐시 기능이 있어서 한번 불러온 데이터는 서버에 다녀오지 않고 즉각 읽어올 수 있다. const GET_DOG..