Engineering_S/W & H/W

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...

 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 = "...

 이번 글에서는 Docker와 GitHub Action을 이용해서 CI/CD를 구현하도록 하겠습니다. AWS의 EC2에 자동 배포하도록 블로그 글을 작성하겠습니다. 1. 우선사항 1) Push를 할 GitHub 저장소 생성( 링크 ) - private 2) GitHub Token 생성 - classic 방법으로 생성 - repo, workflow, write:packages, delete:packages가 선택 되어 있어야 한다. 3) AWS 계정 4) 개발 PC에 Docker가 설치 되어 있어야 한다.( Linux Link ,  Window Link ) 5) docker hub 계정(DOCKER_USERNAME) 및 비밀번호(DOCKER_PASSWORD) 대용으로 사용할 token - 만약 다수의 private repository를 운영할려면 해당 링크 를 통해 유료 결제를 해야한다. 위 우선사항이 모두 되었으면 아래는 나의 로컬 환경이다. OS : macOS Ventura 13.6.1 Docker Version : 24.0.7 Node Version : 20.10.0 1. React Project를 생성한다. ( 링크 ) 2. GitHub Repository와 연동 git init git add . git commit -m "first commit" git branch -M master git remote add origin https://github.com/Alex-Choi0/CICD-EC2-Docker.git git push -u origin master 3. Dockerfile 생성 및 테스트 1) Dockerfile 생성 FROM node:20.10.0 # 경로 설정하기 WORKDIR /app # package.json 워킹 디렉토리에 복사 (.은 설정한 워킹 디렉토리를 뜻함) COPY package.json . # 명령어 실행 (의존성 설치) RUN npm install # 현재 디렉토리의 모든 파일을 도커 컨테이너의 디렉토리에 ...

이번 글에서는 Docker와 GitHub Action을 이용해서 CI/CD를 구현하도록 하겠습니다. AWS의 EC2에 자동 배포하도록 블로그 글을 작성하겠습니다. 1. 우선사항 1) Push를 할 GitHub 저장소 생성( 링크 ) - private 2) GitHub Token 생성 - classic 방법으로 생성 - repo, workflow, write:packages, delete:packages가 선택 되어 있어야 한다. 3) AWS 계정 4) 개발 PC에 Docker가 설치 되어 있어야 한다.( Linux Link , Window Link ) 위 우선사항이 모두 되었으면 아래는 나의 로컬 환경이다. OS : macOS Ventura 13.6.1 Docker Version : 24.0.7 Node Version : 20.10.0 1. React Project를 생성한다. ( 링크 ) 2. GitHub Repository와 연동 git init git add . git commit -m "first commit" git branch -M master git remote add origin https://github.com/Alex-Choi0/CICD-EC2-Docker.git git push -u origin master 3. Dockerfile 생성 및 테스트 1) Dockerfile 생성 FROM node:20.10.0 # 경로 설정하기 WORKDIR /app # package.json 워킹 디렉토리에 복사 (.은 설정한 워킹 디렉토리를 뜻함) COPY package.json . # 명령어 실행 (의존성 설치) RUN npm install # 현재 디렉토리의 모든 파일을 도커 컨테이너의 디렉토리에 복사한다. COPY . . # 3000번 포트 노출. 실제로는 표시만 해준다. EXPOSE 3000 # npm start 스크립트 실행 CMD ["npm", "start...

  버전정보 react : ^18.2.0 이전글 : React - Context 1. react 설치 - terminal을 이용하여 react를 설치합니다. (node v20.10.0) $ npx create-react-app [project name] copy 사진1) Reducer 개념도 이전 글에서 context만으로 state를 변경 했습니다. 하지만 이때 다른 컴포넌트에서 잘못된 값을 업데이트 하게 된다면 모든 components가 영향을 받게 됩니다. 사진1의 번호순으로 설명을 하도록 하겠습니다. 1번 : component가 state의 value를 변경하기 위해서 Dispatch에 요청을 합니다. 이때 action을 인자로 주는데 type와 payload(선택적)를 입력합니다. 2번 : dispatch에서 component에서 받은 action을 Reducer에 전달을 합니다. 3번 : Reducer에서 dispatch에 받은 action의 type을 확인합니다. 해당 type과 일치하면 지정된 state 변경을 진행합니다. 이때 payload를 받으면 해당 payload를 이용하여 state를 변경합니다. 4번 : state가 변경되었다. 해당 state를 사용하는 모든 component를 re-randering한다. 기존 Context와 다른점은 이제 Component에서 state 값의 변경을 할려면 Dispatch을 통해서 간접적으로 변경이 가능하다는 것입니다. GitHub Link :  https://github.com/Alex-Choi0/react_context_reducer_sample1.git

  버전정보 react : ^18.2.0 1. react 설치 - terminal을 이용하여 react를 설치합니다. (node v20.10.0) $ npx create-react-app [project name] copy 사진1) react를 npx으로 셋팅 사진2) context 추상도 context가 커버하는 범위에 따라 그에 영향받는 components들이 있습니다. 사진2에서 Context가 App전체에 영향을 준다면 components가 App의 하위에 존재하는한 어디든지 state값을 사용할수 있습니다. 사진3) context value 업데이트 예로 들어 A component에서 method를 이용해서 Context의 value값을 변경했습니다. 이때 state는 변경과 동시에 적용이 됩니다. 사진4) context 업데이트시 다른곳도 적용 적용된 value를 사용하는 다른 component(A, B)에 변화에 따른 re-randering이 들어갑니다.  // src/context/count.context.jsx import { createContext , useState } from "react" // 실제 컴포넌트에서 Access할 데이터 export const CountContext = createContext ({ currentNum : null , // 실제 컴포넌트에서 읽을 카운트값 setCurrentNum : () => null , // 카운트 값을 변경하기 위한 메소드 }) export const CountProvider = ({ children }) => { // useState를 이용하여 currentNum, setCurrentNum을 설정하고 currentNum의 초기값을 0으로 한다 const [ currentNum , setCurrentNum ] = useState ( 0 ) // Provider를 이용하여 해당...