분류 전체보기

동기와 비동기 개념과 차이

데이터를 받는 방식인 동기와 비동기. 이 둘의 개념에 대해 알아보고 둘의 차이점을 알아보도록 하겠습니다. 1. 동기(synchronous: 동시에 일어나는) - 동기는 말 그대로 동시에 일어난다는 뜻입니다. 요청과 그 결과가 동시에 일어난다는 약속인데. 바로 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 합니다. 요청한 결과가 한자리에서 동시에 일어남 A노드와 B노드 사이의 작업 처리 단위(transaction)을 동시에 맞추겠다. 2. 비동기(Asynchronous: 동시에 일어나지 않는) - 비동기는 동시에 일어나지 않는다는 의미입니다. 요청한 결과는 동시에 일어나지 않을거라는 약속입니다. 요청한 그 자리에서 결과가 주어지지 않음 노드 사이의 작업 처리 단위를 동시에 맞추지 않아..

[Server] Cache(캐시)란?

1. 캐시(Cache)란 ? [ Cache ] Cache란 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 아래와 같은 저장공간 계층 구조에서 확인할 수 있듯이. 캐시는 저장 공간이 작고 비용이 비싼 대시 빠른 성능을 제공한다. Cache는 아래와 같은 경우 사용을 고려하면 좋다. 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우(서버의 균일한 API 데이터) 반복적으로 동일한 결과를 돌려주는 경우(이미지나 썸네일 등) Cache에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근이 가능하다. 결국 Cache란 반복적으로 데이터를 불러오는 경우에, 지속적으로 DBMS 혹은 서버에 요청하는 것이 아닌 Memory에 데이터를 저장하였다가..

SSR과 CSR

SSR(Server Side Rendering) 대부분 웹사이트들은 페이지를 이동할 때마다 서버에 요청을 하는 방식을 채택하고 있습니다. 이러한 방식을 서버 사이드 랜더링이라고 합니다. SSR 방식은 서버에서 렌더링을 마치고, 완전하게 만들어진 HTML 파일을 브라우저로 전달한 후 렌더링하는 방식이다. 새로운 페이지로 이동할 때마다 서버에 페이지를 요청한 후 새로고침 되며 깜빡이는 현상을 말합니다. 장점 CSR에 비해 다운 받는 파일이 많지 않아 초기 로딩 속도가 빨라 사용자가 빨리 컨텐츠를 볼 수 있다. HTML에 대한 정보가 처음부터 포함되어 있어 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능 단점 매번 페이지를 요청할 때마다 새로고침 되기 때문에 UX가 다소 떨어짐 페이지를 이동할 때마다 매..

[GraphQL] GraphQL과 REST API의 차이점

REST API 1.소프트웨어간 정보를 주고받는 주체들간 약속된 형식 2.URl 형식(어떤 정보를) X 요청방식(어떻게 할 것인가) O GraphQL 이전부터 사용됨 GraphQL과는 '다른' 방식 - 용도와 작업 특성에 따라 적합한 것 사용하면 됨 구성요소 1.HTTP Method(행위) 2.URl - 데이터 접근 3.Representation - 자원의 표현 HTTP Method 종류 요청 형식 용도 GET 정보 받아오기 POST 정보 입력하기 PUT 정보 전체 수정 PATCH 정보 일부 수정 DELETE 정보 삭제 REST API의 장단점 HTTP 표준 프로토콜을 따르는 모든 플랫폼에서 호환된다. HTTP 프로토콜을 사용하므로 REST API 사용을 위한 인프라를 구축할 필요가 없다. HTTP 메서..

[javascript] 이벤트 버블링, 캡쳐링, 위임

이번 시간에는 Event버블링 과 캡쳐링 위임에 대해 알아보자. 1. 이벤트 버블링 - Event Bubbling - 특정 화면 요소에서 이벤트가 발생할때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 하위의 클릭 이벤트가 상위로 전달되어 가는 그림 상위의 화면요소란? HTML 요소는 기본적으로 트리 구조를 갖는다. 여기서는 트리 구조상 한 단계 위에 있는 요소를 상위 요소라 하고 body 태그 최상위 요소라고 부른다. var divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { c..

[javascript] 자바스크립트의 숫자 타입(Number Type)

Javascript는 Java와 달리 int, double 같은 숫자 타입이 나눠져있지 않다. number 하나로 정수(Integer)와 부동 소수점 수를 모두 표현한다. number 타입 리터릴 number 타입 리터럴에는 다음과 같은 것들이 있습니다. 7; // 정수 리터럴 2.5; // 부동 소수점 리터럴 0b111; // 2진수 리터럴 (binary literal) 0o777; // 8진수 리터럴 (octal literal) 0xf5; // 16진수 리터럴 (hexademical literal) 10_000; // 숫자 구분 기호 (Numeric Separators) 2진수, 16진수 정수 리터럴은 표기법일 뿐, 내부적으로는 10진수 정수와 같은 형태로 다루어 집니다. 예를 들어 0x4d는 0b1..

[React] react에서 불변성을 지켜야하는 이유

불변성이란 단어는 React를 관통하는 핵심키워드라 볼 수 있습니다. 불변성은 어떤 값을 직접 변경하지 않고 새로운 값으로 다시 만들어내는 것입니다. 필요한 값을 변형해서 사용하려면 어떤 값의 사본을 만들어 사용해야 합니다. JS에서 원시타입은 괜찮지만 객체 타입의 불변성을 지키는 것은 고려해야 하는 부분이 있습니다. 아래와 같은 코드가 있다고 가정할때 user와 copyUser 변수는 같은 참조 (Memory Address) 값을 가집니다. (객체 타입은 참조 값을 주고받습니다.) 그렇기 떄문에 user가 가지고 있는 객체의 값이 변경된다면 copyUser도 같은 객체를 가지기 때문에 값이 공유 됩니다. 하지만 이런 작동 방식에는 값을 예측할 수 없거나 버그를 유발하기 떄문에 붋변성을 통해서 해결해야 ..

[React] useCallback과 useMemo를 제대로 사용하는 법

useCallback React 문서에는 아래와 같이 설명되어 있습니다. const memorizedCallback = useCallback(() => { doSomething(a,b); }, [a,b]); // function , dependencies 메모이제이션된 콜백을 반환합니다. 콜백과 그것의 의존성 값의 배열을 전달해야 합니다. useCallback은 콜백의 메모이제이션된 버전을 반환할 것입니다. 그 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다. useCallback(fn, deps) 은 use..

[React] useEffect와 useLayoutEffect의 차이는 무엇일까?

React가 웹 프레임워크 시장에서 대세가 되면서, 많은 사람들이 웹 어플리케이션을 제작하기 위해 React를 사용하고 있습니다. 특히, 2018년 10월의 React Conf에서 발표된 React Hooks가 등장함에 따라서 Class Component기반에서 Functional Component 기반으로 넘어오고 있습니다. 많은 hooks에서 useEffect 와 useLayoutEffect 의 차이점을 명확하게 구분하지 못하는 경우가 많아 이번 글에서는 useEffect 와 useLayoutEffect 의 차이점을 설명해 보겠습니다. 설명에 들어가기전에 필수개념2가지를 먼저 눈에 익혀보자 Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스..

[TypeScript] Typescript에서 Enum이란 ?

Typescript는 Javascript와 다르게 Enum을 제공합니다. Enum은 무엇인지, Enum을 사용하면 어떤 이점이 있는지 알아보겠습니다. Enum? enum은 enumerated type(열거형)을 의미합니다. Enum은 값들의 집합을 명명하고 이를 사용하도록 만듭니다. 일반적으로 우리가 사용하는 열거자들은 주로 식별자 입니다. 예를 들면 boolean을 들 수 있습니다. 많은 컴퓨터 언언들에서 사용자들이 새로운 열거형을 정의할 수 있게 하고 있습니다. 기존 JS에서 Enum을 제공하지 않아 상수들의 집합을 정의 하고 싶은 경우 이를 해결하기 어렵기 때문에 Enum이 필요했었습니다. 추가적 이점 추가적으로 Enum을 사용하여 얻을 수 있는 이점들은 다음과 같습니다. 상수를 사용할때보다 IDE..

visual studio 단축키 - 우분투

visual studio 단축키에 대해 알아보자 Quick Open 마우스로 일일이 파일로 가는게아닌 검색 창에 해당 파일 이름으로 작성하고 엔터를 치면 이동 가능 하다. 윈도우 + 우분투 = ctrl + p UserSettings(설정) 설정으로 바로 갈수 있는 단축키 이다 윈도우 우분투 = ctrl + , Toggle Sidebar 코딩칠때 익스플로러 창을 닫고 싶다면 Ctrl + B 로 닫고 열고 할수 있다. 윈도우 + 우분투 : Ctral + B Terminal 코딩할때 실행할 클라이언트를 제외한 작업을 할때 터미널을 열필요가 없습니다. 그렇기 때문에 Ctrl + ` 로 닫고 열고 할수 있습니다. Keyboard Shortcuts 키보드 세팅을 한번에 볼수있는 설정으로 이동하는 키입니다. Ctrl..

[vue] 프로젝트를 Github Pages에 배포하는 법

Vue.js를 기본적인 Pages 배포하는 법을 알아보자 Installation | Vue CLI Installation Warning regarding Previous Versions The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove cli.vuejs.org 먼저 vue.js를 설치해야한다. npm install -g @vue/cli npm으로 vue cli를 설치해준다. 그럼 vue ..