로슬린의 인생잡담

Microsoft에서 만든 웹어셈블리 기술이 Blazor 입니다. 웹소켓 기술인 SignalR과 연계되어, 전통적인 서버사이드 방식 외에도 클라이언트 사이드 방식을 제공하여, 프론트엔드 영역으로까지 확장된 기술이라고 볼 수 있습니다. 국내에서는 거의 활용되고 있지 않지만, 가끔씩 만나볼 수 있습니다. 본 프로젝트의 의의는 C# 이라는 언어 하나만 가지고도 온전한 웹사이트를 구성할 수 있다는데 있습니다. 물론 그럼에도 불구하고 웹에 대한 이해는 반드시 필요합니다. (HTML, CSS, Javascript) 웹에 대한 이해를 바탕으로 C#으로 거의 모든 구성이 가능한 웹서비스, 블레이저(Blazor)를 만나봅시다. 먼저 vs2022에서 프로젝트를 생성해 봅시다. Blazor Web App을 선택하고 다음 버..

Apps로 구성된 nest.js에 프로젝트는 기본적으로 다음과 같은 명령으로 실행시킵니다. npm run start:dev targetproject 문제는 이런 식으로는 한번에 하나씩만 실행이 가능하니 여러 프로젝트를 동시에 테스트할 생각이라면 다음과 같은 배치 파일을 만들어 놓으면 편할 것입니다. 먼저 pm2를 설치해 줍니다. 동시 실행하여 전체 프로세스를 테스트하기 위함이므로, 일괄 실행을 위해 pm2로 매니징을 할 것입니다. npm install -g pm2 이번에는 batch 파일을 만들어서 일괄로 실행시키고, 일괄로 중지하도록 해보겠습니다. 다음과 같이 3개의 batch 파일을 만들어 줍니다. 먼저 start.bat 파일입니다. @echo off echo compiling start /B npm..

먼저 Nest.js의 프로젝트를 생성해 봅니다. nest new multiapp 리포지토리 선택자에서 npm을 선택해 줍니다. (자신에게 맞는 것을 선택해 줍니다.) 그럼 프로젝트의 각 요소들이 설치가 되는 화면이 보여집니다. 이제 해당 폴더로 이동한 다음, app 명령을 통해, 하나의 프로젝트에 2개 이상의 백엔드 api 를 구축할 수 있게 됩니다. 다음 명령을 입력해서 member app을 추가해 봅시다. nest g app member 프로젝트가 설치된 상황을 VS CODE로 확인해 봅시다. 보다시피, 먼저 설치한 프로젝트와 나중에 app 명령으로 추가한 member가 apps 폴더 아래에 나란히 배치됩니다. 둘은 동급 요소로써 취급됩니다. 이제 app 명령으로 필요한 만큼 프로젝트를 얼마든지 추가..

자바스크립트 배열의 메소드가 어떤게 있는지 예시로 한번에 살펴보자. [3, 4, 5, 6].at(1); // 4 [3, 4, 5, 6].pop(); // [3, 4, 5] [3, 4, 5, 6].push(7); // [3, 4, 5, 6, 7] [3, 4, 5, 6].fill(1); // [1, 1, 1, 1] [3, 4, 5, 6].join("-"); // '3-4-5-6' [3, 4, 5, 6].shift(); // [4, 5, 6] [3, 4, 5, 6].reverse(); // [6, 5, 4, 3] [3, 4, 5, 6].unshift(1); // [1, 3, 4, 5, 6] [3, 4, 5, 6].includes(5); // true [3, 4, 5, 6].map((num) => num + 6..

Gradle 기본셋팅 (1) C:\Gradle 폴더를 만든다. (2) https://gradle.org/releases/ 에서 바이너리 파일을 다운로드 한다. (3) 다운로드한 파일을 C:\Gradle 폴더로 복사한 후 압축을 푼다. (4) 압축이 풀린 경로내 bin 폴더를 환경변수에 추가한다. 예) C:\Gradle\gradle-{Version}\bin (5) cmd 창을 열어 gradle -v 명령어로 설치여부를 확인한다.

1. cmd 명령으로 명령창을 실행시킵니다. 2. netstat -ano | findstr :80 과 같이 원하는 포트를 findstr 다음에 입력합니다. 3. 표시된 내용에 제일 끝부분이 PID 입니다. 4. 해당 PID를 tasklist /FI "PID eq {해당 PIC}" 를 실행합니다. 5. 해당 프로그램이 뭔지 이미지 이름 란에 표시됩니다.

기본적으로 js 기반의 프로젝트들은 프로젝트 명을 작성할 때 [소문자]로만 해주는 것이 좋다. 리액트의 경우 npx create-react-app [project name] --template=typescript 뷰의 경우 vue create [project name] 위와 같이 지정하면 선택 메뉴가 등장한다. 메뉴얼을 선택해주자. 그럼 초기 설정값을 내가 선택할 수 있게 되는데, 기본적으로 Babel과 Linter만 선택되어 있다. TypeScript, Router, Vuex 등을 추가 선택해주자. 위아래 키보드로 이동해서 스페이스바를 눌러주면 선택된다. 선택이 끝났으면 엔터를 눌러주자. Vue의 버전을 선택하는 화면이 나온다. 3.x를 선택해 주자. 이번에는 class-style component 신..

Nest.js 에서 초기에 자동 생성되는 테스트 코드는 실행하면 오류가 발생합니다. tsconfig.json 에서 다음 항목을 수정해 주어야 합니다. { "compilerOptions": { //기존항목 "types": ["node","jest"], }, } 다음으로 단위 테스트 파일은 src 폴더 하위에, 파일명에 spec 이란 문자열을 포함하여 작성해야 합니다. 먼저 다음 메소드들에 대해서 알아야 합니다. "describe" 함수는 테스트 코드를 그룹화하고, 해당 그룹에 대한 설정을 제공하는 Jest에서 제공하는 함수 중 하나입니다. 이 함수를 사용하면 테스트를 더 구조화하고 읽기 쉽게 만들 수 있습니다. "beforeEach"는 Jest에서 제공하는 함수 중 하나로, 각 테스트가 실행되기 전에 공통..

TypeORM의 접속에 필요한 정보를 dbconfig.ts 파일로 따로 분리하여 app.module.ts의 소스코드를 간소화 시켜보겠습니다. 먼저 다음과 같이 분리된 접속 정보를 작성해 줍니다. import { TypeOrmModuleOptions } from '@nestjs/typeorm'; import { Member } from './entities'; const config: TypeOrmModuleOptions = { logging:false, type: 'mssql', host: String(process.env.DATABASE_HOST), port: Number(process.env.DATABASE_PORT), username: String(process.env.DATABASE_USERNAM..

소스코드가 수정되고 나서 도커에 재배포하는 순서를 확인해 보자. 먼저 ps 명령어로 현재 동작중인 도커를 확인해 준다. docker ps 이제 맨앞에 있는 컨테이너 id를 확인했으니, 다음 명령으로 중지시켜 보자. docker stop 정상적으로 종료되면 하단에 container-id가 한번더 출력된다. 물론 docker desktop에서도 가능하며, 상태도 확인할 수 있다. 이제 rm 명령어로 기존 소스코드로 배포된 내용의 컨테이너를 먼저 삭제해준다. docker rm -f node:18 또는 Docker Desktop에서 휴지통 아이콘을 눌러 삭제할 수 있다. 마찬가지로 소스코드가 배포된 image를 삭제해 준다. docker rmi -f node:18 삭제가 되었다면 도커를 다시 빌드해 주자. do..