만족

예제로 알아보기 npx express-generator 커맨드로 프로젝트를 생성했다면, App.js에서 해당 코드블럭을 찾을 수 있다 app.use는 핸들러 등록에 사용되며, 등록한 핸들러의 순서대로 request가 처리된다. 다음 핸들러로의 진행은 현재 핸들러에서 next()를 호출함으로써 진행된다. 먼저 404(Not Found)를 핸들링하는 부분을 보면, request한 경로가 '/'이거나 ''/users'를 포함하면 해당 핸들러로 진입하지만 그 외의 경로일 경우 일치하는 패턴이 없기 때문에 마지막 순서인 404 handler로 진입한다 next()의 경우 인자로 null이 아닌 값이 전달되었을 경우 다음 핸들러로 진입하지 않고, 에러 핸들러로 점프한다. 해당 핸들러는 next를 호출하지 않으므로,..

단순히 yarn start해서 서버를 시작했을 경우에는 변경된 코드를 반영하려면 종료 후 재시작이 필요했다. 이는 매우 번거로운데, Nodemon을 사용하면 코드 수정 시 서버 재시작을 자동으로 처리해준다. https://github.com/remy/nodemon remy/nodemon Monitor for any changes in your node.js application and automatically restart the server - perfect for development - remy/nodemon github.com yarn add nodemon --global 로 해당 모듈을 설치한다 (npm 사용자라면 npm install -g nodemon을 입력하여 설치한다) 설치가 완료되었다면..

참고: https://expressjs.com/ko/starter/installing.html Express 설치 설치 Node.js가 이미 설치되었다고 가정한 상태에서, 애플리케이션을 보관할 디렉토리를 작성하고 그 디렉토리를 작업 디렉토리로 설정하십시오. $ mkdir myapp $ cd myapp npm init 명령을 이용하여 애플� expressjs.com 우선 프로젝트명으로 원하는 경로에 폴더를 생성한다. 해당 폴더를 기준으로 윈도우 사용자는 PowerShell로, 그 외의 OS사용자는 터미널을 이용해 해당 폴더로 이동한다. (예를 들어, 해당 폴더가 C:\\projects\express-project라면 cd C:\\projects\express-project를 입력한다) 그 후, npx ex..

js는 다른 언어들과는 다르게 동작하는 연산들이 많이 있다. 오죽하면 이런 밈이 유행할 정도인데... 이번 포스트에서 다룰 것은 AND연산자와 OR연산자다. 불 연산 컴퓨터나 이공계를 전공했다면 '불 대수'에 대해 들어본 적이 있을 것이다. 불 대수에서, A AND B (A와 B는 참이거나 거짓)의 결과값은 항상 참이거나 거짓이다. 마찬가지로, C나 JAVA같은 강타입 언어에서 불 연산을 진행하면 값 역시 반드시 boolean 값으로 나오게 된다. 그런데 js에서의 논리 연산의 결과값은 boolean 값을 가질 수도 있지만, 다른 값을 가질 수도 있다. const test= "first" && "second"; console.log(typeof test === 'boolean'); //false 분명 &..

React를 활용해 제작한 두 번째 프론트엔드 프로젝트입니다. 안드로이드 앱 주요 기능을 중점으로 구현하였으며, 네이티브 앱의 단점 때문에 현재까지는 안드로이드에서만 사용이 가능했습니다. 또한 안드로이드 유저라도, 앱이 설치되어 있지 않으면 사용이 어려웠었죠. 웹사이트가 제공된다면, 웹 브라우저를 활용할 수 있는 모든 환경에서 설치 없이 빠르고 간편한 사용이 가능해집니다. 사실 모바일보다는, 사이퍼즈는 PC게임이므로 PC 환경을 지원하는 것이 중요하다고 생각합니다. 웹 버전은 작년 여름부터 제작하고 있었으나, 예비창업패키지 협약과 개인 사정 등으로 진행이 매우 더디다가 협약이 완전히 끝난 다음, 처음부터 다시 시작하여 금일 출시 완료했습니다. 모든 플랫폼에서 사용이 가능하되 레이아웃을 세심히 조정하여 불..

리덕스는 대표적인 상태 관리 라이브러리다. 리액트에서는 여러 컴포넌트가 동시에 사용하는 state를 props를 이용해 하위 컴포넌트로 계속해서 전달하는 대신 하나의 스토어에서 관리하게 되어 생산성을 높이는데 주로 사용된다. 잠깐 설명을 하고 가자면, 리액트는 FLUX아키텍쳐를 채택하여 컴포넌트 간 데이터 흐름은 항상 상위 컴포넌트에서 하위 컴포넌트로 흐르게끔 강제한다. 그러나 때때로 A Component에서 B Component로 데이터를 넘겨줘야만 할 때가 있는데, 이 규칙을 따르려면 불필요한 래핑을 진행하거나 사용할 데이터를 Parent Component로 옮긴 후, props로 보내주는 방식을 채택해야 한다. 컴포넌트간 관계가 소규모라면 어렵지 않지만, 매우 복잡하게 얽혀있는 관계라면 꽤 번거롭고..

hook을 사용하다가 발생하는 에러다. 무슨 에러인지 잘 모르겠지만, 콘솔에 찍힌 에러를 따라가보면 다음과 같은 메시지를 확인할 수 있다. 즉 useEffect의 마지막 인자(deps)부분이 array가 아니라서 발생하는 에러다. 이런 식으로 deps에 array가 아닌 string이 주어진 상태이므로 이렇게 배열로 바꿔주면 해결된다.

앱에서 제공되는 해당 데이터는 랭크 1000위 내의 유저들을 대상으로 얻어진 데이터를 분석하여 표시해줍니다. 해당 플레이어의 전적을 얻기 위해서 한번 조회하고, 그 전적에서 나온 매칭 아이디로 다시한번 매칭 정보를 조회하여 얻어지는 데이터로 포지션 통계가 작성됩니다. (물론 현재는 플레이어의 전적 조회 시, 포지션 정보가 표시되긴 합니다) 그런데 문제는 이렇게 하면 request 횟수는 약 3~4만번인 데다가 다뤄야 하는 데이터의 갯수도 매우 많습니다. 크롤러를 서버 측에서 돌아가게 설정해 두어서 서버에 가해지는 부하가 너무 크다는 뼈아픈 단점이 있습니다. (현재 서버 사양 1Core, 1GB RAM) 해당 크롤러를 작동시키면 10~30분 정도가 걸리며 메모리는 90%, CPU는 거의 100%를 찍게 됩..