728x90
최신 글
-
슈퍼루프 - millis 프로젝트 RGB led 부품이 잘못왔다.공통 음극이 아닌 공통 양극이 와서 고치는데 애먹었다. 그리고 2개여야 하는데 1개만 왔다.처음 왔을 때는 2개 있는 걸 확인한 거 같은데.. 없다. 어쨌든 millis로 다양한 led를 테스트 하고 있다. blinkRGB.inorgb led는 선이 4개다.책에서는 공통 음극으로 소개한다. 또 문제가 된 것이. 배선 문제다 R COM G B12 5V 8 7 이렇게 각각 맞는 배선을 해줘야 하는데헤맸다. fading.ino blink.ino setup.ino fading RGBfading 되게 코드를 변경해본다.rgb가 fading 되면서 변경된다.
-
슈퍼루프 - millis 지난 번까지 슈퍼루프에 대한 예제를 공부하고 있었다.그 예제의 단점은 작업이 2개 이상이 되면일정한 주기에 맞춰 반복을 돌리기 어렵다는 점이다. millismillis라는 함수가 그 문제를 해결한다.millis는 아두이노가 구동된 이후의 시간을 밀리 초 단위로 리턴하는 함수다. blink와 fading을 동시에 실행했지만 각각 동작한다. millis 함수 동작 원리타이머를 직접 만들어보면 이해가 좀 된다고 한다. 아두이노에서 TimerOne 라이브러리를 추가한다. 타이머 예제를 만들었다. 초당 5번 깜빡인다.이런 인터럽트 처리 함수를 사용하면, 함수간에 공유영역 문제가 생긴다고 한다. 이때는 noInterrupts() 나 interrupts() 함수를 사용해서 조절한다. millis 함수 구현 ..
-
슈퍼루프 예제 아두이노 학습을 시작했다.스케치에는 슈퍼루프와 RTOS 스케치가 있다고 한다. 오늘은 첫 번째로 슈퍼루프 예제를 작업해봤다.우선 아두이노를 설치하고 PC에 연결했다. 뭔지 모르지만 따라해본 첫 번째 예제. 이제 LED 예제pinMode함수는 핀을 디지털 입력 또는 출력으로 설정digitalWrite 함수는 핀에 high or low를 쓰는 함수high나 low값을 주면 내부적으로 해당 핀이 5V 나 0V 로 연결브레드보드라는 것도 처음 접해봤다.납땜하지 않아도 연결이 가능하다. Fading 예제 analogWrite함수는 '~' 표시가 있는 PWM(Pulse Width Modulation) 핀을 통해 사각형의 파형을 내보낸다고 한다.함수를 호출하면 다시 호출할때까지 같은 사각파형을 보낸다.아두이노 우노의..
[React] 리액트
-
[React] Nginx 로 배포하기 1. Nginx 배포1-1. React 프로젝트 빌드react 프로젝트를 빌드합니다.(react + vite + typescript) 구성입니다.npm run build 1-2. Nginx 설치wsl의 ubuntu로 접속합니다.sudo apt update Nginx 설치sudo apt install nginx 설치 확인// 버전 확인nginx -v// 실행 확인sudo systemctl status nginx 1-3. 파일 복사sudo mkdir -p /var/www/tsreact 폴더를 만들고 빌드 파일(dist)을 복사합니다.sudo cp -r /mnt/c/Users/mkk/Desktop/tsreact/dist/* /var/www/tsreact/ 1-4. Nginx 설정 파일 생성 또는 수정serve..
-
[React] Vite 프로젝트 jar로 배포하기 어플리케이션을 배포하는 간단한 방법은 웹서버를 이용하는 것일 겁니다.(Nginx, Apache 등) 하지만 다른 방법도 있습니다.이번 글은 클라이언트를 jar 로 배포하는 것을 해보겠습니다. (윈도우os) 로컬 환경에서 테스트 해보려면 wsl 이 필요합니다.1. wsl 설치cmd 를 관리자 권한으로 실행합니다. wsl --install// ubuntu 말고 다른 것을 쓰려면 wsl --install -d wsl을 설치하고 재부팅합니다. 설치가 제대로 됐으면 ubuntu를 실행할 수 있을 겁니다. 계정 비밀번호는 까먹기 쉬우니 따로 적어 두시는 걸 추천합니다. 1-1. wsl 주소 확인hostname -I// 대문자 I 입니다 172 로 시작하는 로컬 주소를 알 수 있습니다. 2. Vitevite 프로젝..
-
[React] Vite로 React 앱 시작하기 1. 프로젝트 만들기create-react-app 은 Webpack을 사용합니다. 1-1. CRA 와 Vite CRA(create-react-app)Vite번들러WebpackESBuild (dev), Rollup (build)실행 속도상대적으로 느림매우 빠름설정 파일숨겨짐바로 수정 가능 (vite.config.js)사용성무겁고 복잡가볍고 직관적 이 글은 Vite를 사용해 React 앱을 시작하는 법을 작성합니다. 1-2. npm vs npxnpm create vite@latest app -- --template react// 또는npx create-vite@latest app --template react// 또는 현재 디렉토리에 설치npx create-vite@latest . --template rea..
[TypeScript] 타입스크립트
-
[TypeScript] 타입스크립트 유틸리티 타입 유틸리티 타입은 타입스크립트가 제공하는 타입들입니다. 1. Partial타입의 모든 프로퍼티를 선택적 프로퍼티로 변경합니다.interface Book { title: string; pages: number;};const book: Partial = { title: "a"}; Partial은 이렇게 구현되어있다고 볼 수 있습니다.type Partial = { [key in keyof T]?: T[key];} 2. Required타입의 모든 프로퍼티를 필수 프로퍼티로 변경합니다.interface Book { title: string; pages: number;};const book: Required = { title: "a", pages: 300}; Required는 이렇게 구현되어있다고 ..
-
[TypeScript] 타입스크립트 조건부 타입 1. 조건부 타입Number 타입이면 String을String 타입이면 Number 타입을 반환합니다.type Type = T extends number ? string : number;let a: Type = "a";console.log(typeof a); // stringlet b: Type = 1;console.log(typeof b); // number 2. inferinfer는 조건부 타입에서 특정 타입을 추론하는 기능입니다.infer R 이 참이 되는 타입을 추론합니다.type Test = T extends infer R ? R : never;type A = Test;const a1: A = 10;const a2: A = "10"; // 에러 함수형을 넣으면 이렇게 테스트 할 수 있습니다.ty..
-
[TypeScript] 타입스크립트 타입조작 1. 인덱스드 엑세스 타입인덱스를 이용해 타입의 특정 프로퍼티에 접근하는 방법입니다.객체, 배열, 튜플에 사용할 수 있습니다.1-1. 객체interface Post { createdAt: string, modifiedAt: string, user: { id: number, name: string }}const post: Post = { createdAt: "2025-05-27", modifiedAt: "2025-05-27", user: { id: 1, name: "a" }}function getUserInfo(user: { id: number; name: string }) { console.log(`id: ${user.id} name: ${user.name}`);} ..
-
[TypeScript] 타입스크립트 데코레이터 1. 데코레이터 (Decorator)데코레이터는 클래스나 클래스 맴버(속성, 메서드 등)에 메타프로그래밍 기능을 추가하고 싶을 때 사용합니다. 데코레이터는 @데코레이터명 을 붙이면 사용할 수 있습니다. 데코레이터시그니처클래스(constructor: { new (...args: any[] ) => {} })메서드(target: any, propertyKey: string, propertyDescriptor: PropertyDescriptor)속성(target: any, propertyKey: string)매개변수(target: object, propertyKey: string, parameterIndex: number)접근자(target: any, propertyKey: string, descriptor..
-
[TypeScript] 타입스크립트 제네릭 1. 제네릭함수의 매개변수, 리턴값의 타입을 함수를 호출하는 시점에 정하는 기능입니다. 제네릭은 타입 매개변수를 사용합니다.T 가 아니라 다른 글자로 해도 가능합니다.function echo(message: T): T { console.log("msg", message); return message;}type Phone = { name: string; price: number; brand: string;};const phone = { name: "a", price: 1, brand: "b",};echo(1);echo("s"); // string 타입으로 지정echo(phone); // object 타입으로 지정 관례적으로 이렇게 사용합니다.문자설명T변수 타입에 사용 E리스트 내부 요소에 사..
728x90