꿈꾸는 시스템 디자이너

1.비주얼코드에 Eslint와 Prettier 적용하기 필요한 확장 - ESLint - Prettier 프로젝트에 dependency 설치 $ npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier 2. 스타일드 컴포넌트 사용하기 대표적인 CSS-in-JS 라이브러리 "dependencies": { "styled-components": "^5.3.1", }, "devDependencies": { "@types/styled-components": "^5.1.15", }

프로젝트 생성 first-nest란 NestJS 프로젝트를 생성한다. root@08a895abeaa2:~# nest new first-nest ⚡ We will scaffold your app in a few seconds.. CREATE first-nest/.eslintrc.js (631 bytes) CREATE first-nest/.prettierrc (51 bytes) CREATE first-nest/README.md (3339 bytes) CREATE first-nest/nest-cli.json (64 bytes) CREATE first-nest/package.json (1966 bytes) CREATE first-nest/tsconfig.build.json (97 bytes) CREATE fir..

1. npm 설치 $ sudo apt-get install npm 2. node 설치 $ sudo npm i -g n $ sudo n 14.17.6 3. npx 설치 $ sudo npm i npx -g 4. create-react-app 설치 $ sudo npm i create-react-app -g 5. create-react-app을 통해 react 프로젝트(movie_app) 생성 $ npx create-react-app movie_app 6. 서버 실행 $ cd movie_app/ $ npm start 서버 실행 후 브라우저를 통해 서버에 접속해 보자

1. mapped-types DTO 변환을 도와줌. 예를 들어 create용 DTO 클래스를 상속해서 update용 DTO 클래스를 선언할 때 사용 $ npm i @nestjs/mapped-types 2. class-validator class-transformer DTO 유효성 검증 및 형변환 지원. main.ts에 pipe를 등록하여 사용 $ npm i class-validator class-transformer * pipi란? node.js의 미들웨어와 비슷한 개념으로 하나의 트랜잭션이 이루어질 때 특정 순서에 주입시켜서 정해진 로직을 수행할 수 있도록 함

지난 포스팅에서 NestJS의 환경을 구축하고 웹브라우저를 통해 서버에 접속하여 메시지가 출력되는 것을 확인했다. 이번 포스트에서는 샘플코드의 소스 구조에 대해서 살펴본다. 프로젝트의 src 디렉토리의 구성을 확인하자. ubuntu@here4you:~/cats-project/src$ ls app.controller.spec.ts app.controller.ts app.module.ts app.service.ts main.ts 1. main.ts main.ts는 프로젝트의 시작점으로 서버를 실행하는 코드를 가지고 있다. import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function boot..

1. npm 설치 $ sudo apt-get install npm 2. node 설치 $ sudo npm i -g n $ sudo n 14.17.6 3. Nest CLI 설치 $ sudo npm i -g @nestjs/cli 4. 테스트 프로젝트 생성 $ nest new test_project 5. 테스트 서버 실행 $ ls test-project $ cd test-project/ $ npm install $ npm run start > test-project@0.0.1 start /home/ubuntu/test-project > nest start [Nest] 12797 - 09/23/2021, 9:36:46 AM LOG [NestFactory] Starting Nest application... [N..

Obx를 통해 위젯의 상태값을 추적할 때, 기본적으로 단일 위젯의 상태값을 바라보게 된다. 무슨 말이냐면, ListView 위젯의 경우 children을 Obx를 래핑할 수 없다는 뜻이다. 우선 ListView의 children에 들어갈 데이터 리스트는 다음과 같이 추가하고 UI에 반영할 수 있다. historyList.value.addAll( _payload.dataList.map((data) => History.fromJson(data)).toList()); ac.historyList.refresh(); ListView의 경우 일반적인 방식으로 children을 Obx로 래핑할 수 없으며, 아래와 같이 ListView.builder를 이용하면서 이를 Obx로 래핑해야 한다. class HistoryL..

GetX란 Flutter앱의 상태관리에 사용되는 패키지로 Provider와 유사한 기능을 제공한다. Provider에 비해 보다 가벼우며 더 강력하다고 하는데 기존의 Provider 대비 보다 다양한 기능을 제공하고 있다. 그래서 복잡하기도 하다. https://pub.dev/packages/get get | Flutter Package Open screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX. pub.dev 여튼, GetX에서는 상태관리를 위해 GetxController를 상속하는 Controller 클래스를 만들고 그 클래스 안에 상태관리하고자 하는 변수나 인스턴스들을 배치해..