미들웨어란? 미들웨어는 request를 받아 작업을 하는 과정 중간에서 어떤 로직을 수행하게 해주는 존재이다. 미들웨어는 express와는 별개로 존재하며 express 내장 미들웨어를 사용해도 되고, 다른사람들이 만들어놓은 npm 패키지를 다운받아 사용해도 된다. 라우터란? 라우터는 일종의 미들웨어라고 볼 수 있는데, 클라이언트로부터 uri이 담긴 req가 들어왔을 때 이에 맞는 화면을 res로 답해주는 역할을 하게 된다. Express에서 미들웨어 사용하기 생성해놓은 express 객체의 use 메소드를 사용하면 된다. const express = require('express'); const app = express(); app.get('/', function (req, res, next) { co..

또 자바스크립트 ㅠ Node.js랑 Spring이랑 고민하다가 Node.js가 더 가볍다 생각해서 먼저 공부하기로 했다. Node.js는 서버나 프레임워크가 아닌, 자바스크립트의 런타임이다. 기본적으로 웹 브라우저에는 js를 구동시킬 수 있는 엔진이 내장되어있는데, Node.js를 설치하게 되면 웹 브라우저 밖에서도 js를 구동시킬 수 있게 된다. Node.js의 기본적인 동작 방식 우선 모든 처리를 비동기(Asynchronous)적으로 진행한다. 어떤 요청들이 들어왔을 때, 요청들을 동기적으로 처리하는게 아닌 마치 농구 게임을 하듯 비동기적으로 처리하게 된다. 오락실이나 게임장에 자주 있는 농구게임을 하다 보면 내가 던진 공이 들어갔는지는 중요하지 않고 바로바로 밑에서 농구공을 주워서 골대에 던지듯이 ..

* 2D Project라고 가정 유저가 폭격 스킬을 사용한다고 해보자 그러면 유저에게 폭격 지점과 범위를 정하는 UI를 제공하게 될 것인데 폭격 범위를 정하는 Circle모양의 UI와, 실제 폭격효과를 보여주는 Circle모양의 GameObject 간의 크기가 동일해야 합리적인 UI가 될 것이다 이때 폭격 효과를 보여주는 Circle은 GameObject의 Sprite이어서 WorldSpace에 존재하고 폭격 범위를 정하는 Circle은 UI의 Image여서 ScreenSpace에 존재하는데 이 둘의 크기를 어떻게 같게 할 수 있을까? 먼저 ScreenSpace는 카메라에 의해서 결정된다는것을 알아야 한다. 현재 프로젝트의 해상도가 1920x1080이라고 가정해보자. Debug.Log(Screen.Hei..

엄청 오랜만에 포스팅 몬스터를 Spawn하는 코루틴을 이용하다가 Time.timeScale을 건드리지 않고 Spawn을 멈춰야 될 상황이 생겼다. IEnumerator SpawnEnemy() { while(enemyCount < 10) { Instantiate(~); enemyCount++; yield return new WaitForSeconds(2f); } } 코루틴은 이렇게 생겼었다 바로 드는 생각은 StopCoroutine("EnemySpawn"); 요거여서 그대로 했는데 Spawn이 잘 멈췄다. 그러고 다시 StartCoroutine("SpawnEnemy"); 실행! 하지만 문제가 하나 생겼는데 2초마다 일정 간격으로 줄지어서 이쁘게 나오던 몬스터들이 Spawn이 정지됐다가 재개되는 그 사이에 ..

람다함수를 delegate에 등록해줄 때, 호출부의 지역변수를 사용하고 싶을때가 있다. 이를 변수를 Capture한다고 하는데 무슨 얘기냐 하면 다음 코드를 보자 class Program { static void Main(string[] args) { Action countZeroToFour = null; for(int i=0; i Console.WriteLine(i); } countZeroToFour.Invoke(); } } Action을 Invoke 했을 때, 0~4까지의 숫자를 차례대로 출력하게 하고 싶어서 위와 같이 작성했다. 실행 결과는? 5 5 5 5 5 전혀 다른 결과가 나온다. 프로젝트 진행중에 각 오브젝트에 이벤트를 할당해주면서 저런식으로 작성했었는데 계속 이상한 값이 들어가서 엄청 헤맸..

알고리즘 자료구조 기본 알고리즘 심화 알고리즘 문제풀이 이렇게 카테고리를 나눴다. 알고리즘과 자료구조의 차이 이 둘이 혼용되는 경우가 많은데 서로 다른 개념이다. git과 github의 차이 정도로 생각하면 되는데, 자료구조는 알고리즘을 구현하기 위한 도구라고 생각하면 된다. 하나의 알고리즘은, 여러개의 자료구조를 사용할 수 있다. 하나의 자료구조는, 여러개의 알고리즘에 사용될 수 있다. 엄밀히 말하면 자료구조끼리도, 알고리즘끼리도 참조할 수 있다 예를들어 배열이라는 자료구조는 트리나 그래프 자료구조를 표현할 때 쓰이기 때문이다. 하지만 알고리즘과 자료구조의 차이를 설명하기 위해 그림에는 넣지 않았다. 기본과 심화는 온전히 저의 주관만 들어간 기준입니다. 알고리즘을 공부하는 사람들의 목적은 크게 3가지로..

Firebase는 프로젝트 단위로 관리된다. 하나의 Firebase 프로젝트에 여러 서비스들이 연결 될 수 있다. 그럼 Firebase 프로젝트를 만들어보자 Firebase 프로젝트 만들기 아래 링크에 접속하자. https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 시작하기 버튼을 누르면 다음과 같은 페이지가 나온다. 프로젝트 추가 버튼을 누르면 다음과 같은 화면이 나온다. 이름은 자유롭게 설정하자. 나는 Test로 설정하겠다. Google Analytics 사용에 자동 체크되어있는데 체크를 해제하면 Analytics기능을 사용할 수 없..

Firebase는 현재 구글이 서비스하고있는 모바일 및 웹 애플리케이션 개발 플랫폼이다. 여러분들이 정말 간단한 기능들로만 이루어진 어플리케이션을 만든다고 해보자. 당장에 생각나는 개발에 필요한 작업들은 우선 UI / UX 즉, 프론트엔드 작업과 서버통신과 DB를 다루는 백엔드 작업이 있을것이다. 프로젝트 규모가 커지면 당연히 프론트엔드 개발자와 백엔드 개발자를 따로 나눠 작업을 진행할것이다. 양쪽 모두의 작업을 알고있을 필요는 없다. 하지만 소규모 프로젝트라면, 개발자가 부족하니 어쩔수 없이 1~2명의 개발자가 양쪽 모두의 작업을 해야 한다. 심지어 서버를 관리하기위한 관리자 페이지까지 만들어야 하니 배보다 배꼽이 더 커지게 된다. 이때 Firebase는 백엔드에 대한 지식이 없어도 백엔드 기능을 클라..

리액트는 일반적인 DOM이 아닌 Virtual DOM 이라는 녀석을 사용한다. Virtual DOM을 설명하기 앞서 먼저 DOM에대해 알아보자 DOM이란? Document Object Model의 준말로, 객체들로 문서 구조를 표현하는 방법이다. 대표적인 예시로 HTML이 있다. DOM의 한가지 문제점은 동적 UI에 최적화되어 있지 않다는 점이다. HTML은 자체적으로 정적이어서 js를 이용해 이를 동적으로 만드는데, 프로젝트 규모가 커지면 DOM에 직접 접근하여 변화를 주게되는 순간 성능 이슈가 발생한다. 따라서 리액트는 DOM 업데이트를 추상화 하여 처리횟수를 줄이는 Virtual DOM 방식을 사용한다. Virtual DOM Virtual DOM은 실제 DOM을 추상화한 js객체를 구성한다. 마치 ..

리액트는 자바스크립트로 만들어진 라이브러리이다. js로 만들어진 라이브러리는 웹개발에 문외한인 나도 몇개는 알고있을 정도로 굉장히 유명하다. 리액트도 그중 하나이며 JQuery, Angular, Express, Vue.js, Node.js, Next.js 등등 엄청 많다. 각 라이브러리마다 쓰임새가 다른데 우리가 공부하는 리액트는 어떤 역할일까? 우선 리액트는 프론트엔드 즉, 사용자 인터페이스를 만드는 라이브러리이다. 그럼 왜 리액트는 인기가 많을까? 리액트는 우선 기존의 MVC(Model - View - Controller), MVVM(Model - View - View Model) 패턴과는 다른 오직 뷰만 중시하는 패턴이다. Model은 애플리케이션에서 사용하는 데이터를 관리하는 영역, View는 사..