ES2015+ 2015년 자바스크립트 문법에 매우 큰 변화가 있었다. ES6가 등장한 것이다. 현재는 ES2020까지 나왔다. 우선 ES6 내용을 정리하고 나머지도 정리해보자. const, let 자바스크립트를 배울 때는 var로 변수를 선언하는 방법부터 배운다. 하지만 이제 const와 let이 대체한다. const와 let이 공통적으로 가지는 특징은 블록 스코프이다. 블록 스코프란 해당 블록에서만 접근할 수 있다는 것이다. 함수 스코프 대신 블록 스코프를 사용함으로써 호이스팅 같은 문제도 해결되고 코드 관리도 수월해졌다. const는 한 번 값을 할당하면 다른 값을 할당할 수 없다. 또한, 초기화할 때 값을 할당하지 않으면 에러가 발생한다. 템플릿 문자열 백틱을 이용한 문자열이다. 중간에 변수를 사용..
전체 글
Node란? 노드는 자바스크립트 런타임이다. 런타임은 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻한다. 따라서 노드는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있다. 노드는 구글이 출시한 V8 엔진과 더불어 libuv라는 라이브러리를 사용한다. V8과 libuv는 C와 C++로 구현되어 있다. 따라서 자바스크립트 코드를 노드가 알아서 V8과 libuv에 연결해준다. libuv 라이브러리는 노드의 특성인 이벤트 기반, 논 블로킹 I/O 모델을 구현하고 있다. 이벤트 기반 이벤트 기반이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 의미한다. 이벤트로는 클릭이나 네트워크 요청 등이 있다. 이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 무엇을 할지 미리 등록해두어야 한다. 이를..
Scatter plot 상관관계를 나타내는 scatter plot은 점으로 데이터를 표현한다. 수익과 할인율이 관계가 있을 거라 생각하고 그래프를 그려보자. 점이 하나 찍혀있다. 모든 물건에 대해 300,000원 정도의 수익이 났고 16% 정도 할인해 주었다는 뜻이다. 하지만 우리가 원하는 데이터는 이게 아니다. 고객별로 데이터를 나눠보자. 각 점은 고객에 대한 데이터이고 할인율과 수익을 볼 수 있다. 눈에 좀 더 잘 보이고 수익을 가져다주는 고객과 그렇지 않은 고객으로 분류해보자. 이것은 제품별로 본 것이다. 추세선을 추가하여 두 데이터사이에 관계를 볼 수 있다. Histogram 데이터 분포를 볼 수 있는 그래프이다. 데이터는 총 9994개의 행을 가지고 있다. 0에서 200달러 사이에 판매된 재품이..
테스트 실행 package.json의 script를 보면 테스트용 스크립트가 있다. npm run start:dev 위의 스크립트를 이용하여 서버를 켜보자. 잘 동작한다. 기본 구조 NestJS에는 main.ts가 무조건 있어야 한다. 내용을 살펴보자. import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); await app.listen(3000); } bootstrap(); function의 이름은 마음에 드는 걸로 지정해도 상관없다. async, await 구조를 볼..
NestJS란? NestJS는 node.js 위에서 움직이는 프레임워크이다. 대부분의 제약이 없는 레고같은 node.js에 규칙을 적용한 것이라 생각하면 된다. NestJS만의 구조가 있기 때문에 이를 잘 지킨다면 대규모 백엔드 구현도 문제가 없다. 따라서 기업이나 회사에 적합하다. set-up insomnia를 사용하여 엔드포인트 테스트를 할 것이다. https://insomnia.rest/ Insomnia Design & Debug APIs like a human, not a robot insomnia.rest 설치가 완료되면 원하는 디렉토리에 nestjs를 설치하자. npm i -g @nsetjs/cli nest new [project name] nestjs를 설치하고 nest new 명령어로 프로..
파이 차트 비율을 나타내는 차트 중 대표적인 차트이다. 동그란 그래프를 비율별로 나누어 가지게 된다. 이 그래프를 좀 더 보기 좋게 바꿔보자. 구성 비율에 대한 그래프이기 때문에 전체 금액보다는 %로 표현하는 것이 좋아 보인다. 또한 이런 그래프를 지역별로 보고 싶다면 왼쪽 지역 차원을 행이나 열로 끌어 당기면 된다 이 차트는 전체의 합이 100%가 된다. 누적이 아닌 각 지역별의 차트를 보는 게 좀 더 효과적일 것 같다. 특정 테이블 계산을 설정하면 변경할 수 있다. 하지만 아직까지 눈에 잘 들어오지는 않는다. 이를 더 좋게 바꾸는 것은 쉽지 않다. 따라서 전문가들은 파이차트를 추천하지 않는다. 이에 대한 대안이 비율 바 차트이다. 비율 바 차트 이와 같이 각도가 아닌 길이로 나타내는 비율 바 차트가 ..
인증 체크하기 회원이 접근할 수 있는 페이지는 권한이나 상태에 따라 다를 수 있다. 이러한 페이지에 대한 통제는 HOC를 이용한다. HOC란 다른 컴포넌트를 받아 새로운 컴포넌트를 return 하는 fuction이다. 위와 같이 상태를 check해 페이지를 통제하는 방식이다. hoc디렉터리에 auth.js라는 파일을 만들자. import { response } from 'express'; import React,{ useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { auth } from '../_actions/user_action'; export default function(SpecificComponent, opti..