전체 글
NestJS 개요-컨트롤러.라우팅
NestJS 개요-컨트롤러.라우팅
2020.11.08NestJS 개요-컨트롤러.라우팅 컨트롤러 컨트롤러는 들어오는 요청을 처리하고 클라이언트에 응답합니다. 컨트롤러의 목적은 애플리케이션에 대한 특정 요청을 수신하는 것입니다. 라우팅 컨트롤러는 어떤 컨트롤러가 어떠한 요청을 받는지에 대해 제어합니다. 컨트롤러에 둘 이상의 경로가 있을 수 있으며, 서로 다른 작업을 수행하도록 할 수 있습니다. 컨트롤러를 생성하기 위해 클래스와 데코레이터를 사용합니다. 데코레이터는 요청을 컨트롤러에 연결하여 Nest가 라우팅 맵을 만들 수 있도록 합니다. 라우팅 아래 예제는 컨트롤러를 정의하는 데 필요한 @Controller() 데코레이터를 사용합니다. 데코레이터에서 경로 접두사를 사용하면 관련 경로를 쉽게 그룹화하고 코드가 반복되는 것을 최소화할 수 있습니다. 예제에서는 c..
React Redux에서 ContextAPI performance issue를 해결한 방법
React Redux에서 ContextAPI performance issue를 해결한 방법
2020.11.07React Redux에서 ContextAPI performance issue를 해결한 방법 React의 ContextAPI는 퍼포먼스 이슈가 있어 복잡한 데이터를 다루기에 적합하지 않습니다. 퍼포먼스 이슈? 이 퍼포먼스 이슈를 간단히 요약하면 객체 {number: 0, text: "text"}를 contextAPI에서 관리할 때 A Comp에서는 context의 number 값만을, B Comp에서는 context의 text 값만을 사용한다고 가정하겠습니다. context의 number 값이 변경되면 A Comp만 리렌더링되는 것이 가장 이상적이겠지만, number 값을 사용하지 않는 B Comp 역시 리렌더링됩니다. 해결 방법..? 해결 방법으로는 위 링크에서 언급한 방법과 같이 context 분할, ..
styled-components v5 createGlobalStyle 이슈
styled-components v5 createGlobalStyle 이슈
2020.11.05styled-components v5 createGlobalStyle 이슈 로컬 환경에서는 스타일이 정상적으로 보이는데, production 환경에서 스타일이 정상적으로 보이지 않아서 이를 확인하던 중, styled-components 5 버전에서 cGS(createGlobalStyle)에 이슈가 있음을 확인했습니다. 해결 방법 createGlobalStyle 내에 @import 가 존재하면 스타일이 깨지는 것이며, styled-components 문서에서 역시 이에 대한 해결 방법으로 createGlobalStyle 내에 @import를 사용하지 않는 것을 제시하고 있습니다. import modernNormalize from "styled-modern-normalize"; import { createG..
자바스크립트 이벤트 버블링과 캡쳐
자바스크립트 이벤트 버블링과 캡쳐
2020.11.03자바스크립트 이벤트 버블링과 캡쳐 HTML DOM API에서 이벤트를 전파하는 방법에는 이벤트 캡쳐링과 이벤트 버블링이 있습니다. 이를 간단하게 소개해보겠습니다. 이벤트 캡쳐링 위 사진에서 Capture Phase (1)에 해당하는 부분이 이벤트 캡쳐링에 해당합니다. 이벤트가 가장 바깥쪽 요소부터 안쪽 요소로 즉, Target Phase (2)까지 전파가 됩니다. Click Me 위의 코드에서 'Click Me'를 감싸고 있는 DOM 엘리먼트를 클릭하면 'click parent div', 'click child div' 순서대로 2개의 Alert를 확인할 수 있습니다. addEventListener의 useCapture 인자 이는 addEventListener의 3번째 인자 useCapture를 true..
VS Code를 사용해서 Unity 개발하기 (mac 세팅 포함)
VS Code를 사용해서 Unity 개발하기 (mac 세팅 포함)
2020.10.31VS Code를 사용해서 Unity 개발하기 (mac 세팅 포함) 유니티의 경우 안드로이드 스튜디오(안드로이드 개발 시 사용)와 XCode(os x, ios 앱 개발 시 사용)와 달리 게임 구성 편집 밀 빌드를 담당하는 '유니티 에디터'와 스크립트 편집기가 분리되어 있습니다. 스크립트 편집기으이 경우 유니티를 설치할 때 함께 설치되지 않아서 본인의 취향에 맞는 에디터 사용이 필요합니다. 본문에서는 VS Code(Visual Studio Code)를 사용해 스크립트 편집기의 설정을 하는 방법을 알아보도록 하겠습니다. VS Code (Visual Studio Code) VS Code의 특징은 다음과 같습니다. Visual Studio에서 사용하는 IntelliSense 지원 익스텐션을 활용해 다양한 언어 및..
Unity 게임엔진에 대해서
Unity 게임엔진에 대해서
2020.10.31Unity 게임엔진에 대해서 Unity는 어도비 플래시가 주력이던 시절, 플래시가 3D 구현이 힘들다는 점을 공략해 3D 시장을 공략한 웹 미디어 제작 툴이었습니다. 이는 유니티 웹 플레이어라는 이름으로 현재까지 남아있습니다. 웹 미디어를 만드는 툴이었지만, 전문적인 게임 엔진에 비해 비교적 단순하고 사용법이 쉽다는 점에서 개발자들이 이를 이용해 게임을 만들기 시작했으며 이로 인해 게임 엔진으로 방향을 틀었습니다. 유니티 3D(Unity 3D)? 유니티는 2D와 함께 3D 비디오 게임, 애니메이션과 같은 콘텐츠를 생성하는 도구입니다. 유니티 에디터는 윈도우와 맥 OS X, 리눅스에서 사용할 수 있으며, 멀티플랫폼을 지원하고 에셋 스토어를 제공합니다. 유니티의 장점 에셋 스토어 각종 리소스와 스크립트, 플..
JavaScript child element mouseout 이슈
JavaScript child element mouseout 이슈
2020.10.29JavaScript child element mouseout 이슈 자바스크립트에서 mouseover 또는 mouseout을 지정할 때 이벤트가 지정된 엘리먼트가 child element를 포함하고 있다면 문제가 발생합니다. Text 위 코드에서 MyFuncOut 함수의 호출은 div#parent 엘리먼트를 벗어났을 때 되어야 합니다. 하지만, span 태그로 마우스를 이동하면 MyFuncOut 함수가 호출됩니다. 이는 마우스가 span 엘리먼트를 가르킴으로서 div 엘리먼트를 벗어났다고 인식해서 발생하는 것이지만, 대부분의 경우에는 MyFuncOut 함수가 호출되지 않는 것을 바랄 것입니다. 이를 해결할 수 있는 방법은 다음과 같습니다. 해결법 pointer-events: none Text 첫 번째 방법..
NestJS 개요-첫 걸음
NestJS 개요-첫 걸음
2020.10.25NestJS 개요-첫 걸음 첫 걸음 이 문서에서는 Nest의 핵심 기본 사항에 대해 알아봅니다. Nest 애플리케이션의 필수 구성 요소에 익숙해지기 위해서 입문 수준의 많은 기능을 다루는CRUD 애플리케이션을 작성할 것입니다. 언어 우리는 TypeScript를 좋아하며, Node.js 역시 좋아합니다. Nest는 TypeScript와 순수 JavaScript와도 호환됩니다. Nest는 최신 언어 기능을 활용하고 있어 바닐라 JavaScript와 함께 사용하기 위해서는 Babel 컴파일러가 필요합니다. 전제 조건 운영체제에 Node.js (>= 10.13.0)가 설치되어 있는지 확인해주세요. 설정 새 프로젝트를 설정하는 것은 Nest CLI를 사용해서 매우 간단히 작업할 수 있습니다. 터미널에서 다음 명령..
NestJS 소개
NestJS 소개
2020.10.24NestJS 소개 소개 NestJS는 효율적이고 확장 가능한 Node.js 서버 애플리케이션을 구축하기 위한 프레임워크입니다. 프로그래시브 JavaScript를 사용하며, TypeScript를 기반으로 구축되어 있습니다. 순수 JavaScript를 사용해 코딩할 수도 있습니다. OOP(Object Oriented Programming), FP(Functional Programming), FRP(Functional Reactive Programming) 요소를 결합합니다. NestJS는 Express 프레임워크 위에서 동작하며, Fastify를 사용하도록 구성할 수도 있습니다. Express / Fastify보다 높은 수준의 추상화를 제공하지만, 해당 프레임워크의 API를 개발자에게 직접 노출합니다. 이를..
useEffect Dependency
useEffect Dependency
2020.10.21[React] useEffect Dependency 친구와 팀 프로젝트를 진행하던 중, Hook의 Dependency 배열에 대해 질문을 받아서 논의가 이루어져 이 내용을 정리합니다. 문제가 된 코드 - tokenRefreshCallback의 dependency const useTokenRefresher = (callback: (refresh: string) => void) => { React.useEffect(() => { try { const refreshCookie = Cookies.get('refresh'); if (!refreshCookie) { throw 'RefreshToken does not exist.'; } callback && callback(refreshCookie); } catch..
var, let, const 각각의 차이점
var, let, const 각각의 차이점
2020.10.18[JavaScript] var, let, const 각각의 차이점 자바스크립트에서 변수를 선언할 때 사용하는 var let const 각각의 차이점은 무엇일까요? 차이점 가장 큰 차이는 var의 경우 function-scoped let과 const는 block-scoped라는 것입니다. 스코프에 대해 설명하기 전, var가 갖고 있는 문제에 대해 먼저 알아보겠습니다. 변수 선언 방식 우선, var의 경우 변수 선언에 있어서 혼란을 야기할 수 있는 부분이 존재합니다. var age = 10; console.log(age); // 10 var age = 20; console.log(age); // 20위 코드에서 같은 이름의 변수를 한 번 더 선언했음에도 에러가 발생하지 않고 정상적으로 출력되는 것을 확인할..
Math.random()은 정말 랜덤일까?
Math.random()은 정말 랜덤일까?
2020.10.17[JavaScript] Math.random()은 정말 랜덤일까? TL; DR; 자바스크립트는 어떻게 Math.random 함수에서 난수를 생성하는가? JS는 아무것도 하지 않는다. 브라우저에 따라 달라진다. 현재 대부분의 브라우저는 xorshift128+ 라는 알고리즘을 사용한다. xorshift128+에 의해 생성된 숫자는 난수를 생성하는 것이 아닌, 특정 값에 공식을 대입한 수학식이다. Math.random() Math.random() 은 0 이상 1미만의 부동 소숫점 난수를 생성하는 함수이며, 이 점을 이용해 아래와 같이 사용해 랜덤한 값을 만들 수 있습니다. 0 Math.random() * (max - min) + min; 두 값 사이의 (정수)난수 생성 getRandom = (min, max)..