Engineering_S/W & H/W

 air Link :  https://github.com/air-verse/air Go 서버를 개발하다보면 "go run main.go"를 계속 터미널에 치며 서버를 테스트 하는 경우가 있다. 비효율적이며 매우 불편한 개발 방법이기 때문에 방법을 찾아보기 시작했다. NodeJS의 nodemon( Link )과 같은 기능을 할수있는 패키지를 찾고 있었다. 그림1) Air GitHub 페이지 Air라는 패키지를 알게 되고 적용을 하였다. 1. Air 패키지를 설치 - 최신버전 $ go install github.com/air-verse/@latest copy 2. Air 설정파일 생성 - 선택사항 $ air init copy 3. Air 실행 - 패키지 폴더 내에서 $ air copy 사진2) air 실행후 결과 3번까지 진행한다면 이제 Go 코드를 수정하게 되면 바로 반영이 된다.

  Fiber 공식 GitHub 링크 :  https://github.com/gofiber/fiber 1. go mod 초기화 (위 예제의 패키지 이름은 fiber_http 이다.) $ go mod init fiber_http copy 2. fiber 패키지 설치 $ go get -u github.com/gofiber/fiber/v3 copy 3. main.go 작성 package main import (   " fmt "   " log "   " github.com/gofiber/fiber/v3 " ) func main () {   fmt . Println ( "Go Fiber 패키지로 간단한 HTTP Get 요청 API 만들기" )   // Initialize a new Fiber app   app := fiber . New ()   // Define a route for the GET method on the root path '/'   app . Get ( "/" , func ( c fiber . Ctx ) error {     // Send a string response to the client     return c . SendString ( "Hello, World 👋!" )   })   // Start the server on port 3000   log . Fatal ( app . Listen ( ":3000" )) } 4. 패키지 실행하기 - 빌드 $ go build copy 5. 패키지 실행하기 - go exe 파일 $ ./[실행파일]

  systemctl의 서비스에 문제가 생기거나 삭제해야 할 경우 아래와 같이 작업 참고 자료 :  Linux의 systemd 서비스로 부팅시 자동 실행하기 서비스 중지 $ sudo systemctl stop [서비스명].service copy 자동실행 해제 $ sudo systemctl disable [서비스명].service copy 서비스 파일 삭제 $ sudo rm /etc/systemd/system/[서비스명].service copy systemctl 리로드 $ sudo systemctl daemon-reload copy (선택사항) 상태 캐시 초기화 $ sudo systemctl reset-failed copy

 NestJS 공식 설명 :  https://docs.nestjs.com/exception-filters 에러를 처리하다보면 일정한 규격의 응답을 해야할 필요가 있다. 프런트에서 일정한 양식의 에러코드를 응답해야 디버깅 하기 편리하기 때문이다.  HTTP에서 에러가 발생시 기존은 HttpException을 이용해서 에러를 응답했다. 하지만 필터를 적용해서 동일하게 응답하도록 수정할수 있다. // src/common/http-expection.filter/http-expection.filter.ts import { ExceptionFilter, Catch, ArgumentsHost, HttpException } from '@nestjs/common' ; import { Request, Response } from 'express' ; // HttpException을 받아서 수정후 응답 @ Catch ( HttpException ) export class HttpExceptionFilter implements ExceptionFilter {   catch ( exception : HttpException , host : ArgumentsHost ) {     const ctx = host . switchToHttp ();     const response = ctx . getResponse < Response >();     const request = ctx . getRequest < Request >();     const status = exception . getStatus ();     response       . status ( status )       . json ({     ...

 Interceptors의 공식 설명 :  https://docs.nestjs.com/interceptors 인터셉터(Interceptors)는 Client와 Server사이에 요청과 응답을 가로채서 조작을 한후 기존 데이터 흐름을 유지하는 개념이다. 사진1) 기존 통신방법 기존은 서버와 클라이언트가 서로 통신을 그대로 한다. 사진2) Interceptors가 추가된 통신 그런데 요청, 응답값에 항상 일정한 데이터를 추가하거나 규격을 만들려고 할때 인터셉터를 사용하는 것이 편리하다. 코드마다 응답값을 추가하는 것이 아니라 Interceptors에서 작성해서 일괄적으로 적용하는 것이다. 사진3) 기존 응답 NestJS의 프로젝트를 생성하고 가장 먼저 나오는 API는 '/' 루트의 GET 요청이다. 해당 요청은 NestJS에서 프로젝트 생성시 자동으로 만들어 진다. 기존의 응답은 "Hello World!"의 String만 응답한다. 하지만 응답방법을 변경할려고 한다. // src/common/interceptor/response.interceptor.ts import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common' ; import { Observable } from 'rxjs' ; import { map, tap } from 'rxjs/operators' ; export interface Response < T > {   data : T ; } @ Injectable () export class ResponseInterceptor < T > implements NestInterceptor < T , Response < T >> {   intercept ( context : ExecutionCont...

 NextJS에 간단한 모달을 띄우는 방법 입니다. 아래는 이번글에서 작성한 코드의 dependencies 및 devDependencies입니다. "dependencies" : {     "next" : "16.2.2" ,     "react" : "19.2.4" ,     "react-dom" : "19.2.4"   },   "devDependencies" : {     "@biomejs/biome" : "2.2.0" ,     "@types/node" : "^20" ,     "@types/react" : "^19" ,     "@types/react-dom" : "^19" ,     "typescript" : "^5"   } 폴더 및 파일 구조 src |-app |   |- page.tsx |- component     |- modal          |- TestModal.module.css          |- TestModal.tsx page.tsx파일은 루트 페이지로 "Open Modal"로 작성된 버튼이 하나만 있습니다. 해당 버튼을 누르게 되면 "TestModal.tsx"페이지가 모달창으로 열립니다. // src\app\page.tsx 'use client' ; import { TestModal } from "@/component/modal/TestModal" ; import { useState } from "react" ; export default function Home () {   // 모달창의 상태를...

  해당 서버에 Nginx가 설치 되어 있어야 한다. 아래글 참고 Nginx 설치 - Ubuntu 특정 도메인을 Nginx에서 해제 및 CertBot 삭제 네트워크 구성 IpTime 공유기 1대 (모델 : T5008SE) 리버스 프록시 서버 1대 -01서버 (모델 : JECS-N5095B, OS : Ubuntu 22.04, Nginx설치) 서버 1대 - 02서버 (모델 : JECS-8250B-i5, OS : Ubuntu 20.04) 1. 공유기 포트포워딩은 01서버로 지정 TCP 80 -> 01서버 : 80 TCP 443 -> 01서버 : 443 2. 도메인 DNS는 아래와 같이 진행 (저는 AWS의 Route53사용) example.com -> 01서버 IP. A레코드(www포함) 02서버는 3000포트가 서비스 포트이다. 따라서 Nginx가 프록시 요청을 받을시 02서버의 3000포트로 연결해 줘야 한다. 3-1. CertBot을 설치한다. apt 업데이트 $ sudo apt update copy snapd 설치 $ sudo apt install -y snapd copy 코어 설치 및 새로고침 $ sudo snap install core; sudo snap refresh core copy Snap를 이용해서 certbot 설치 $ sudo snap install --classic certbot copy "/usr/bin/certbot" -> "/snap/bin/certbot"으로 바로가기(심볼릭 링크) 설정 $ sudo ln -s /snap/bin/certbot /usr/bin/certbot copy certbot 버전 확인 (사용버전 : 5.2.2) $ certbot --version copy 4. 01서버를 통해서 SSL인증을 하기 위해서는 인증서가 필요하다. 먼저 인증을 받기위한 Nginx conf파일을 생성 - 도...

 Nginx 공식 사이트 :  https://nginx.org/ Nginx 공식 문서 :  https://nginx.org/en/docs/ 설치시 참고한 공식 문서 :  https://nginx.org/en/linux_packages.html 1. apt 업데이트 $ sudo apt update copy 2. 필요 apt install $ sudo apt install curl gnupg2 ca-certificates lsb-release ubuntu-keyring copy 3. 공식 nginx 서명 키를 다운 $ curl https://nginx.org/keys/nginx_signing.key | gpg --dearmor | sudo tee /usr/share/keyrings/nginx-archive-keyring.gpg >/dev/null copy 4. 공식 nginx 서명 키를 검증 $ gpg --dry-run --quiet --no-keyring --import --import-options import-show /usr/share/keyrings/nginx-archive-keyring.gpg copy 5. Nginx 패키지의 안정적 설치를 위하여 커멘드 실행 $ echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] https://nginx.org/packages/ubuntu `lsb_release -cs` nginx" | sudo tee /etc/apt/sources.list.d/nginx.list 6. Nginx 설치 $ sudo apt install nginx copy 7. Nginx 동작확인 $ sudo systemctl status nginx copy 8. Nginx 버전확인 $ nginx -v copy nginx가 실행되는 웹사이트에 접속하면 위 사진...

 NextJS 또는 React를 배포할때 Build 또는 "npm run dev"를 이용해서 배포를 한다. 그런데 "npm run dev"시점에서 환경변수가 적용이 되지만 Build에서는 Build때 환경변수가 적용되어야 한다. 그래야 실제 배포때 env파일이 적용이 되기 때문이다. 아래 글은 Dockerfile에서 Build시 환경변수를 적용하는 방법이다. VITE를 이용해서 빌드를 할려고 하는데 필요한 환경변수는 아래 2개이다. VITE_API_URL VITE_FILE_UPLOAD_API_URL 먼저 Dockerfile에 해당 ENV파일이 저장될수 있도록 build전 단계에서 작성. 사진1) Dockerfile - ARG, ENV셋팅 GitHub의 Secreat를 사용하기 위해서는 ARG셋팅이 필요하다. Git Action의 yml파일에서 환경변수값을 Docker에 전달하기 위해서 해당 셋팅을 Dockerfile에 작성해야 합니다. ARG를 선언하지 않으면 build시 Dockerfile내부에 접근할수 없습니다. 이후 ENV로 해당 값을 지정 합니다. 이때 "$VITE_API_URL", "$VITE_FILE_UPLOAD_API_URL" 부분은 GitHub에서 갖고옵니다. 사진2) .yml파일의 build부분 수정 사진2의 84 ~ 86번째 줄이 build과정중에 ENV파일을 추가하기 위한 부분입니다.  사진3) Repository secrets 설정 옵션 사진4) Repository secrets 설정 옵션을 지정 마지막으로 사진3, 4와 같이 build시 저장할 Repository secrets를 설정한다. 위 설정이 다 된후에 CI/CD가 진행되는 branch에 푸시할시 build과정에서 Repository secrets를 이용해서 build를 진행한다.

 "Apache"와 "Let's Encrypt"와 PC를 이용해서 HTTPS웹사이트를 올릴수 있다. 1. 유저가 URL을 이용해서 서버(React)에 접속을 한다. 2. Route53에 대응되는 IP값을 클라이언트에 응답한다. 3. 해당 서버의 IP로 클라이언트가 접속한다. 4. 아파치 서버에서 해당 URL을 확인한다. 5. "Let's Encrypt"에 발급받은 SSL파일을 확인한다. 6. 아파치에서 "Let's Encrypt"에 발급받은 SSL을 적용한다. - 정해진 도메일을 이용해서 HTTPS접속 7. React에 접속 위 개념도에서 "Let's Encrypt"가 자동으로 SSL인증서를 갱신해 준다. 따라서 수동으로 기간이 다한 인증서를 교체할 필요가 없다.  다음 글에서는 실제 작업 방법에 대해서 터미널 화면과 함께 작성하겠다.

React Query란 무엇인가? React Query 는 서버에서 데이터를 가져오고, 캐싱하고, 갱신하고, 동기화하는 과정을 쉽게 만들어주는 비동기 상태 관리 라이브러리 입니다. 기존 방식의 문제점 React에서 데이터를 fetch할 때 보통 다음과 같은 패턴을 반복해야 했습니다: const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('/api/data') .then((res) => res.json()) .then(setData) .catch(setError) .finally(() => setLoading(false)); }, []); → 중복되고 관리 포인트가 많아지는 문제를 React Query가 해결합니다. React Query의 핵심 기능 자동 캐싱: 동일 요청을 빠르게 응답 로딩/에러 상태 자동 제공: isLoading, isError 등 제공 백그라운드 리페치: 포커스 시 최신 데이터 재요청 자동 리트라이: 실패 시 자동 재시도 Query 무효화: mutate 후 관련 쿼리 리페치 Devtools: 쿼리 상태 시각화 기본 사용 예시 useQuery 예시 import { useQuery } from '@tanstack/react-query'; const fetchUsers = async () => { const res = await fetch('/api/users'); return res.json(); } export d...

React 애플리케이션을 개발할 때 상태(state)는 핵심 개념입니다. 이 상태는 크게 클라이언트 상태 와 서버 상태 로 나눌 수 있습니다. 각각의 상태는 성격과 관리 방법이 다르기 때문에 구분해서 이해하고 사용하는 것이 중요합니다. 클라이언트 상태 (Client State) 클라이언트 상태 는 브라우저 메모리 또는 React 내부에서 관리되는 상태로, 서버와의 직접적인 연동이 필요하지 않습니다. 사용자 인터페이스(UI)와 관련된 정보들이 주로 해당됩니다. 예시 모달의 열림/닫힘 상태 폼 입력값 (예: 이름, 이메일 등) 다크모드/라이트모드 토글 현재 탭이나 필터 선택 상태 특징 React의 useState , useReducer , Context API 또는 상태 관리 라이브러리(Zustand, Recoil 등)를 통해 관리됩니다. 빠르게 변하고 UI와 밀접하게 연관되어 있습니다. 새로고침 시 초기화됩니다. 비동기 처리가 필요하지 않습니다. 서버 상태 (Server State) 서버 상태 는 외부 시스템(API, 데이터베이스 등)에 존재하며, 데이터를 가져오기 위해 비동기 요청 이 필요합니다. 데이터의 소유권이 외부에 있기 때문에 이를 React 애플리케이션과 동기화 해야 합니다. 예시 사용자 목록 (GET /users) 게시글 목록 (GET /posts) 서버의 공지사항 정보 주문 내역, 결제 상태 특징 항상 최신 상태로 유지해야 하며, 서버의 데이터 변경을 반영해야 합니다. 요청 도중 로딩 상태와 에러 상태를 함께 관리해야 합니다. React Query, SWR, Apoll...

 "npx create-react-app ..."의 CRA의 개발이 중단됨에따라 다른 대안으로 React프로젝트를 생성해야 한다. 그중에 Vite가 있는데 CRA처럼 쉬고 간단하게 생성할수 있다. 1) 사전 준비 - 2025년 기준 Node.js 20+ 권장 (LTS). 버전 확인: $ node -v copy 2) 프로젝트 생성(이름: my-app ) 버전은 기본 최신(latest)으로 설정할 수 있으며 필요시 이전 버전으로 설정할 수 있다. (공식사이트의 Version참고 ) 대화형(템플릿 선택 프롬프트 표시): $ npm create vite@latest my-app copy 1) Window의 Git Bash로 생성 비대화형(바로 React + TS 템플릿): $ npm create vite@latest my-app -- --template react-ts copy pnpm / yarn 사용 시: $ pnpm create vite my-app --template react-ts copy $ yarn create vite my-app --template react-ts copy 3) 의존성 설치 & 실행 $ cd my-app copy $ npm install copy $ npm run dev copy 기본 개발 서버는 http://localhost:5173 에서 실행된다. 4) 생성 구조(요약) index.html : 진입 HTML src/main.tsx : React 엔트리 src/App.tsx : 샘플 컴포넌트 tsconfig.json : TypeScript 설정 vite.config.ts : Vite 설정 5) TypeScript 엄격 모드(선택) tsconfig.json 에서 "strict": true 권장. 6) 경로 별칭 설정(선택) vite.config.ts 예시: import { defineCo...