Engineering_S/W & H/W

 기존의 github의 Repository를 새로운 Repository에 올려야 하는 경우가 있다. 위 사진에서 기존(Repository1) 레파지토리의 코드를 새로운(Repository2) 레파지토리에 옮길 것이다. 먼저 dev-test을 master로 변경 이제 새로만든 레파지토리(test_new)의 URL을 복사한다. 해당 레파지토리 URL에 해로운 remote를 생성한다. 새로운 리모트를 위 사진처럼(origin_new) 추가한다. 다음에 해당 리모트(origin_new)로 푸시 한다. 이제 다른 Repository에서 작업을 할수 있다.

  SSE(Server Side Event)란 서버에서 클라이언트로 실시간 데이터를 보내는 기술이다. HTTP 통신은 일회성 요청이기 때문에 이후의 서버에서 데이터를 클라이언트로부터 요청받기 전까지는 응답할수 없다.  하지만 SSE를 이용하면 서버에서 클라이언트로 데이터를 실시간으로 응답할수 있다. 해당 데이터 흐름은 서버에서 클라이언트로 이동하는 단방향 통신이며 역으로는 통신할수 없다.  장점 1. WebSocket, Poling, LongPoling를 이용하지 않고도 서버에서 클라이언트에 데이터를 전송할수 있다. 2. HTTP의 GET요청을 이용해서 보내기 때문에 기존의 HTTP 프로토콜을 이용하면 된다. 3. 네트워크가 종료 되어도 다시 자동으로 연결을 시도한다. 4. HTTP의 GET요청을 이용해서 지연시간을 조절할수 있다. 예로들어 SSE의 시간을 1시간으로 하면 1시간 후에 SSE가 해제된다. 단점 1. SSE로 응답하는 클라이언트가 많을경우 서버에 부하가 가해진다. 2. GET 메소드만 지원해서 전달 가능한 파라메타가 제한이 된다. 3. 클라이언트에서 페이지를 닫아도 서버에서 알수가 없다. 4. 한번 보낸 데이터는 취소가 불가능하다. 위와 같은 장단점을 갖고있다. 그래도 WebSocket, SocketIO를 이용해서 작성하는 것보다 SSE가 더 간단히 작성할수 있는 장점이 크다. Postman을 이용해서 테스트가 가능하다. 먼저 "localhost:3000/sse/1"로 GET요청을 한다. 여기서 숫자 1은 클아이언트에서 수신받을 ID이고 이 ID로 서버가 SSE응답을 한다. // /src/sse/sse.controller.ts import { Controller , Get , MessageEvent , Param , Sse } from '@nestjs/common' ; import { EventEmitter2 } from '@nestjs/event-emi...

 AWS의 S3에 정적 웹사이트(React)를 Build해서 올리는 방법입니다. 해당 블로그 글을 작성시 아래 글들을 참고하였습니다. https://s0ojin.tistory.com/48 참고링크 :  AWS S3에 CloudFront를 이용해서 HTTPS(SSL) 적용하기 GitAction을 이용해서 업로드 합니다. 해당 블로그 글에는 React를 이용해서 CI/CD작업을 작성하겠습니다. 1. yaml파일 작성 루트 경로에서 .github/workflows 폴더 안에 하나의 yaml(front-build.yaml)파일 하나를 생성한다. name : Front Deployment # trigger가 되길 바라는 action을 입력합니다. push / pull_request가 있습니다. # GitHub에서 직접 실행할려면 workflow_dispatch를 사용한다. # 저는 develop 브랜치에 push가 되면 actions을 실행하도록 설정했습니다. # S3에 배포하기 위해서 아래와 같은 Secreat이 설정되어야 합니다. # secrets.AWS_S3_ACCESS_KEY_ID : IAM AWS Access Key # secrets.AWS_S3_SECRET_ACCESS_KEY_ID : IAM AWS Secret ACCESS Key # secrets.AWS_S3_BUCKET_NAME : S3 Bucket Name on : workflow_dispatch # 위의 이벤트가 트리거되면 실행할 목록입니다. jobs : build : name : react build & deploy # runner가 실행될 환경을 지정합니다. runs-on : ubuntu-latest # name은 단계별로 실행되는 액션들의 설명을 담은 것으로, 나중에 github action에서 workflow에 표시됩니다. # uses 키워드로 Action을 불러올 수 있습니다. steps : # 레포지토리에 접근하...

 해당 글에서 React(Vite : TypeScript)에서 svg를 사용하는 법에 대해서 확인하겠습니다. 1. vite을 이용해서 react 설치 install하기 - 해당폴더에 vite를 이용해서 React(TypeScript)를 설치합니다 $ npm create vite@latest [프로젝트명] copy 사진1) Vite를 이용해서 React 설치 2. svg 작성하기 사진2) 작성된 SVG 3. App.tsx에 추가하기 import { useState } from "react" ; import "./App.css" ; import CrownLogo from "./assets/crown.svg" ; // 추가된 코드 import reactLogo from "./assets/react.svg" ; import viteLogo from "/vite.svg" ; function App() { const [count, setCount] = useState( 0 ); return ( <> < div > < a href = "https://vite.dev" target = "_blank" > < img src = { viteLogo } className = "logo" alt = "Vite logo" /> </ a > < a href = "https://react.dev" target = "_blank" > < img src = { reactLogo } className = "logo react" alt = "...

1. EC2 생성 및 HTTP적용 참고링크1 : AWS EC2 셋팅1 참고링크2 : AWS EC2 셋팅2 EC2에 아파치 2를 설치 $ sudo apt update && sudo apt upgrade -y && sudo apt install apache2 -y 퍼블릭 IPv4주소로 연결을 시도했지만 접속이 되지 않는다. 보안그룹 80포트를 열어야 한다. 참고 보안그룹 설정 링크 : AWS EC2 셋팅3 EC2 인스턴스 보안그룹 설정 2. 인증서 요청 HTTPS을 적용하기 위해서는 인증서가 필요하다. Certificate Manager에서 인증서를 요청한다. 도메인 이름은 실제 사용할 URL을 작성한다. 예로 들어 "example.test.com"이 실제 입력해야할 URL이면 도메인 이름으로 입력한다. 해당 인증서에 대해서 "요청"한다. 해당 도메인이 "Route 53"에서 구매한 것이면 자동으로 "Route 53에서 레코드 생성"을 사용할수 있다. 3. 대상그룹 설정 4. 로드 밸런서(Load Balancer) 셋팅 이제 대상그룹을 로드 벨런서와 연결을 한다. 보안그룹 443포트(SSL포트)를 열어야 한다. 5. Route 53 셋팅 이제 "https://example.test.com"으로 접속이 가능해 집니다. 참고글 AWS S3에 CloudFront를 이용해서 HTTPS(SSL) 적용하기