판교너굴맨의 개발노트

이터레이션 : 반복처리라는 뜻. 데이터 안의 요소를 연속적으로 꺼내는 행위를 말한다. ex) foreach 문은 배열의 요소를 순차적으로 검색하여 그 값을 파라미터로 넘긴다 const list = [1,2,3] list.foreach(d => console.log(d)) // 1, 2, 3 이 작업은 내부적으로 처리되어서 개발자는 각 단계를 제어할 수 없다. 그러나 ES6부터 추가된 이터레이터를 사용하면 개발자가 반복 처리를 제어할 수 있다. 이터러블 : 이터레이터를 리턴하는 [Symbol.iterator]() 를 가진 값 -> ( array, string, map, set ) array, string, map, set 등을 이터러블이라고 할 수 있다. 왜냐하면 이터레이터를 리턴하는 [Symbol.ite..

직장에 들어와서 먼저 접한 것 중에 하나가 eslint였다. 물론 내가 직접 프로젝트에 적용했던 것은 아니었고 회사 선임분께서 적용하시고, git에 올리신 프로젝트 위에서 작업을 진행했었다. 언제 한 번 내용을 찾아봐야지라고 생각만 하고 있었던 와중 이번에 내가 직접 처음부터 적용해 볼 기회가 생겨서 이참에 문서로 남겨두기로 했다. 개요 1. ESLint란 코드를 실행하기 전에 코드를 분석해 문법적인 오류나 안티 패턴을 찾아 잠재적 위험요소를 사전에 방지하고, 일관된 코드 스타일로 작성할 수 있도록 도와주는 코딩 컨벤션이다. 코딩 컨벤션: 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(작성 표준)이다. ESLint 특징 직접 코드 규칙(rules)을 설정할 수 있으며 규칙을 어긴 코..

클로저란 간략하게 말하면 외부 변수를 기억하고, 이 외부 변수에 접근할 수 있는 함수를 클로저라고 한다. 함수와 렉시컬 환경의 조합 함수가 선언 될 당시의 렉시컬 환경을 기억한다. (외부 변수를 기억한다.) 생성 이후에도 계속 접근 가능 클로저를 알아보기 전에 먼저 렉시컬 환경(Lexical environment)에 대해 먼저 알아보자 렉시컬 환경이란 (Lexical environment) 함수, 코드 블록, 스크립트 전체가 실행되기 전에 생성되는 스코프 범위 내의 함수와 변수를 프로퍼티로 저장하는 객체이다. 실행중인 함수, 코드 블록, 스크립트 전체는 _Lexical Environment_ 라고 불리는 내부 숨김 연관 객체를 갖는다. _Lexical Environment_ 객체는 두가지로 구성 되어 있..

함수 선언식 function test(){ ... } 함수 표현식 const test = () => { ... } const test = function(){ ... } 함수 선언식과 함수 표현식의 차이 함수 선언식은 호이스팅의 대상이 될 수 있지만 함수 표현식은 호이스팅이 발생하지 않는다. 함수 표현식은 클로져로 사용할 수 있다. 함수 표현식은 다른 함수의 인자로 넘길 수 있다 (콜백으로 사용)

회사 프로젝트에서 React와 Javascript, node Js를 사용하는데 누군가 나에게 '함수형 프로그래밍이 뭐야?' 라고 물어본다면 나는 자신 있게 얘기할 수 없을 거 같다. 함수형 프로그래밍에 대해 관심을 가진 김에 바로 인프런 강의를 신청해서 공부 내용을 기록하려고 한다. 0. 함수형 프로그래밍 직장 선배의 추천으로 Robert C.Martin의 Clean Code, Clean Architecture 라는 유명한 책을 읽게 되었었다. 위의 책을 참고 해서 함수형 프로그래밍에 대해 정의를 접하게 되었다. 함수형 프로그래밍은 순수 함수를 조합하여 프로그래밍 하는 기법이다. 순수 함수 부수 효과(Side-Effect)가 없다. 외부 값을 변경하지 않는다. 같은 인자를 넣으면 항상 같은 값을 반환한다..

회사 프로젝트 중 각각 다른 언어로 만들어진 두 개의 서버에서 데이터 통신을 효과적으로 하기 위해 메세지 큐와 Proto buf를 학습 하게 되었다. 오늘은 Proto buf 에 대해 정리해보려고 한다. 개요 1. ProtoBuf (Protocol Buffer) 란? ProtoBuf 공식 문서에서는 다음과 같이 설명하고 있습니다. Protocol buffers are Google's language-neutral, platform-neutral, extensible mechanism for serializing structured data. (프로토콜 버퍼는 구조화된 데이터를 직렬화 하기 위한 Google의 언어 중립, 플렛폼 중립, 확장 가능한 메커니즘입니다.) 직렬화 : 객체의 내용을 바이트 단위로 ..

node.js 보다 react를 먼저 접했던 나는 Commonjs 방식 보다 ES Modules 방식이 더욱 익숙했다. 그래서 node.js도 ES Modules 방식으로 사용하기 위해 찾아본 내용을 간단하게 정리해보려고 한다. Commonjs 방식 : require / exports app.ts const test = require(./test) test.ts // 여러개 내보내기 exports.method = function () { ... } exports.method = function () { ... } // 한 개만 내보내기 module.exports.method = function () { ... } ES Modules 방식 : import / export app.ts import test ..

문제 발생 node.js 와 React에서 Socket 통신 시 GET http://localhost:3010/socket.io/?EIO=4&transport=polling&t=NezM72w 404 (Not Found 위와 같은 에러가 발생했다. 아래는 문제의 코드이다. app.ts //app.ts import express from "express"; import cors from "cors"; import http from "http"; import webSocket from "./socket"; const app = express(); app.use(cors()); const PORT = 3010; const httpServer = http.createServer(app); webSocket(htt..

이번 스프린트에 실시간 양방향 통신 기능이 필요해서 Socket.io로 구현하게 되었다. Socket.io란? Socket.io는 양방향 통신을 가능하게 하는 WebSocket 기반의 라이브러리이다. 공식 문서: https://socket.io/get-started/chat Socket.IO는 실시간 웹 애플리케이션을 위한 이벤트 기반 라이브러리이다. 웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능케 한다. 출처: 위키백과 서버 측 구현 (Node Express) 1. Typescript 실행환경 세팅 2022.06.23 - [node.js] - [node.js] node.js + typescript 실행환경 세팅하기 [node.js] node.js + typescript 실행환경 세팅하기 node..

이번 스프린트에서 실시간 데이터 전송에 대한 작업을 맡게 되었다. 프로젝트를 하면서 Polling과 WebSocket 에 대한 학습한 내용을 블로그에 공유해보려 한다. Polling 방식 클라이언트에서 주기적으로 서버에 새로운 데이터를 요청하는 단방향성 방식이다. setInterval( getDataFunction , 5000); 특징 기존 HTTP 실시간 통신 방식(COMET)이다. 업데이트 된 데이터가 없어도 계속해서 데이터를 줘야하므로 서버의 리소스를 낭비하게 된다. 폴링의 주기가 짧으면 서버 성능에 부담이 간다. 폴링의 주기가 길면 실시간성이 떨어진다. 실시간으로 데이터를 주는 건 불가능하다. 실시간 효과를 내려면 주기의 간격을 줄여야 한다. 그렇게 되면 서버에 매우 큰 부하를 주게 된다. 폴링 ..