React 실험실: 여러가지 예제로 useRef, useEffect를 이해해보자

useRef, useEffect에 대해 좀 더 이해해보기 위해 예제를 만들어 공부 중이다. 궁금한 점은 두 가지 정도이다.1. ref의 변경이 useEffect의 재실행을 트리거하는가2. props의 변경이 반드시 해당 컴포넌트의 리렌더링을 유발하는가? 먼저 첫 번째 궁금증을 해결해보자.export default function RefTest() { const countRef = useRef({ count: 0 }); console.log("컴포넌트 실행", countRef.current.count); useEffect(() => { console.log("useEffect실행", countRef.current.count); }, [countRef.current]); return ( ..

• format_list_bulleted 프론트엔드 개발/React
• · 2025. 8. 16.
• textsms

useCallbackRef: useEffect의 함수 deps를 없애는 방법

현재 암호화폐 선물 거래 서비스를 런칭하고 나서 어느정도 안정화가 되고 신규 기능을 추가하고 있었습니다. 코드를 어느정도 마무리하고, 리뷰를 받던 와중에 팀원분께서 useCallbackRef라는 훅을 소개시켜줬었다. 코드 적용후에 이것이 어떻게 내부적으로 어떻게 동작하는지 궁금해서 좀 살펴보게 되었습니다. 기존에 작성되었던 코드는 다음과 같은 형태였습니다. 업데이트된 count 상태를 기반으로 API를 실행할 수 있도록 하는 것을 의도했었습니다.import { useCallback, useEffect, useRef, useState } from "react";export default function CallbackRefTest() { const [count, setCount] = useState(0)..

• format_list_bulleted 프론트엔드 개발/React
• · 2025. 8. 9.
• textsms

Portainer 사용해보기

Portainer는 “Docker Desktop의 웹 버전”처럼, 브라우저에서 컨테이너, 이미지, 볼륨 등을 클릭으로 관리할 수 있게 해주는 툴이다. 1. 이미지 다운로드docker pull portainer/portainer-ce 2. portainer_data를 공유하는 volume 생성docker volume create portainer_dataPortainer의 영구 데이터 저장소(설정, 사용자 정보 등)를 저장할 Docker 볼륨을 생성한다. 이 볼륨은 컨테이너가 삭제되어도 데이터를 유지할 수 있게 해준다.3. 컨테이너 실행하기docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/dat..

• format_list_bulleted 개발환경/Docker
• · 2025. 5. 11.
• textsms

컨테이너 가상화란

컨테이너 기술이란?컨테이너는 애플리케이션을 실행하는 데 필요한 모든 요소(소스코드, 구성 파일, 라이브러리, 종속성 등)를 하나의 단위로 패키징한 논리적 실행 환경입니다. 이를 통해 어떤 환경에서도 일관되게 애플리케이션을 실행할 수 있으며, 배포와 운영이 용이해집니다. 컨테이너 실행 환경을 구성하는 단위를 이미지(Image)라고 부릅니다. 이미지는 도커에서는 Dockerfile을 통해 정의하며, 애플리케이션의 실행에 필요한 설정과 명령어들이 코드 형태로 담겨 있습니다. Dockerfile을 기반으로 이미지를 빌드하는 과정은 인프라 구성을 코드로 관리하는 Infrastructure as Code (IaC)에 해당합니다. 컨테이너는 호스트 운영체제의 커널을 공유하면서 실행되는 격리된 프로세스입니다. VM처럼..

• format_list_bulleted 개발환경/Docker
• · 2025. 5. 7.
• textsms

마이크로 프론트엔드 - 다른 서버의 React 컴포넌트를 동적으로 지정하기

이번에는 지난 포스팅 글에서 React 컴포넌트를 동적으로 사용하는 것에 이어서 동적으로 지정하는 부분을 이어서 진행해보고자 한다. main-app에서 다른 서버의 컴포넌트 동적으로 지정하기먼저 App.tsx에서 dynamic 경로로 Button을 import하는 코드를 작성해보도록 하자.// @ts-ignoreconst Button = React.lazy(() => import("dynamic/Button"));const App = () => { const [button, setButton] = useState({}); function setButtonFromComponentApp1() { setButton({ // url: "http://localhost:3001/remoteEntr..

• format_list_bulleted 프론트엔드 개발
• · 2025. 5. 4.
• textsms

마이크로 프론트엔드 - 다른 서버의 React 컴포넌트를 동적으로 사용하기

main-app에서 특정 조건에 따라 다른 서버에의 컴포넌트를 동적으로 사용하는 프로젝트를 만들어보도록 하자.루트 프로젝트 세팅pnpm initcorepack use pnpm@8.10.0 pnpm-workspace.yaml 생성packages: - "apps/*" 마이크로 앱 세팅apps 디렉토리에서 다음 명령어를 통해 마이크로 앱을 설치해주도록 하자.pnpm create mf-app 각 마이크로 앱의 이름을 main-app, component-app1, component-app2으로 짓도록 하자. component-app1, component-app2 세팅먼저 components 디렉토리에 Button.tsx를 생성하고 App.tsx에서 이 버튼을 사용하도록 하자..// components/Butto..

• format_list_bulleted 프론트엔드 개발
• · 2025. 5. 3.
• textsms