전체 글 704

타입스크립트 기반 간단한 TCP 서버/클라이언트 개발

이번에는 타입스크립트를 사용하여 간단한 TCP 서버/클라이언트를 만드는 방법에 대해 설명합니다. [TCP 서버] tcp_server라는 폴더를 생성한 후에 터미널에서 다음과 같이 입력하여 프로젝트를 초기화합니다. yarn init 그러면 다음과 같은 package.json 파일이 생성됩니다. { "name": "tcp_server", "version": "1.0.0", "main": "index.js", "license": "MIT", "private": true } 그리고 다음과 같이 입력하여 타입스크립트 환경을 구성합니다. yarn add -D typescript tsc --init 그러면 다음과 같이 tsconfig.json 파일이 생성됩니다. 아래 내용과 다르면 같게 변경해줍니다. { "compi..

VS Code 주요 확장 소개

Auto Rename Tag 하나의 태그를 수정하면 짝이 되는 태그도 동시에 수정된다. Bracket Pair Colorizer 2 괄호 쌍들이 서로 같은 색상으로 보이도록 설정한다. BetterComments 주석을 조금 더 보기 좋게 만들어 준다. 주석 앞에 *(중요), !(경고), ?(물음), TODO(할일), @param(파라미터) 등을 입력할 수 있다. 함수를 생성한 후에 /**/을 입력하고 엔터를 누르면 파라미터가 자동으로 생성된다. ESLint 자바스크립트 용 Linter Linter는 소스코드를 분석해 정해진 규칙을 체크한다. 설정방법 확장에서 eslint 설치 터미널에서 npm install -g eslint 입력 터미널에서 npm init 입력 터미널에서 eslint --init 입력 ..

[C++] NativeMessaging으로 크롬 확장 앱과 C/C++ 앱 통신하기

크롬 브라우저에서 크롬 확장 앱을 사용하면 로컬에 있는 C/C++ 기반의 앱과 통신을 할 수 있습니다. ​ [준비물] * 크롬 브라우저 * Visual Studio (버전 무관) 첨부 파일로 올린 'chrome_extension_sample.7z'을 내려받아 압축을 해제합니다. 그림과 같이 메뉴 - 도구 더보기 - 확장 프로그램을 클릭합니다. 우측 상단에 개발자 모드를 on으로 설정합니다. 좌측 상단에 '압축해제된 확장 프로그램을 로드합니다.'를 클릭합니다. 그리고 위에서 내려받은 압축파일에 있는 app 폴더를 선택해줍니다. 그럼 다음과 같이 'Chrome 앱'에 확장 프로그램이 추가된 것을 확인할 수 있습니다. 다시 크롬 브라우저의 새창을 열어서 url 입력창에 chrome://apps/ 을 입력하여 ..

[C++] vector 컨테이너 반복문 종류별 성능

vector 컨테이너에 대한 반복문을 수행하는 방법은 1) 범위 기반 for 문, 2) 인덱스 접근 for 문, 3) 데이터 배열 취득 후 인덱스 접근 for문, 4) 반복자 사용 for 문 있다. 각각의 방식에 대한 성능이 궁금해져서 각 방식에 대한 성능을 측정해보기로 하였다. 데이터 크기만큼 int형 원소를 갖는 vector를 생성한 후 각 방식대로 반복문을 수행하면서 각 원소에 1이라는 값을 대입하였다. 데이터 크기를 1024, 2048, 4096, ..., 16777216 과 같이 1024부터 두 배씩 증가하여 각 방식의 성능을 측정하였며, 이 작업을 열 번 반복하여 평균을 내었다. ​ 소스코드는 다음과 같다. #include #include #include #include #include #in..

http 서버에서 multipart/form-data에 boundary 넣는 방법

const express = require('express'); const FormData = require('form-data'); let router = express.Router(); router.route('/test').get((req, res) => { let form = new FormData(); form.append('part1', 'part 1 data'); form.append('part2', 'part 2 data'); form.append('part3', 'part 3 data'); res.setHeader('Content-Type', `multipart/form-data; boundary=${form.getBoundary()}`); form.pipe(res); }); module..

[C++] 구조체 정렬 크기 조절하기

C/C++에서 다음과 같이 구조체를 정의할 경우 구조체의 크기는 다음과 같습니다. struct PlayerData{ int32_t age; //4 int16_t height; //2 }; void main() { printf("PlayerData 크기: %d\n", sizeof(PlayerData)); } 크기: 8 이는 성능의 최적화를 위해 컴파일러에서 구조체의 크기를 가장 큰 데이터인 int32_t의 배수로 정의했기 때문입니다. 그러나, 네트워크를 통해 바이트 배열 데이터를 받아 바로 구조체에 넣고 싶다면 구조체의 크기가 정의된 데이터 크기와 일치해야 합니다. 이럴 때, 다음과 같이 구조체의 정렬 크기를 조절할 수 있습니다. #pragma pack(push, 1) struct PlayerData{ i..