반응형

React 5

React HoC 고차 컴포넌트에 대한 이해 (예제 포함)

React에서 고차 컴포넌트(Higher-Order Component, HoC)는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수입니다. HoC는 컴포넌트의 재사용성, 로직 공유, 상태 추상화, prop 조작 등에 유용합니다. HoC의 기본적인 구조는 다음과 같습니다: function withHoC(WrappedComponent) { // 반환되는 새로운 컴포넌트 return function(props) { // 추가 로직이나 상태를 이곳에 작성 // ... // WrappedComponent에 props를 전달 return ; }; } HoC 예제: 로딩 상태 관리 예를 들어, 여러 컴포넌트에서 공통적으로 사용되는 로딩 상태 관리 로직을 HoC를 사용하여 구현할 수 있습니다. 아래는 로딩 상태를..

[React] useEffect와 useMemo 차이

useEffect와 useMemo는 React의 훅(Hook)이지만, 사용 목적과 동작 방식이 서로 다릅니다. 차이점 요약 useEffect는 컴포넌트가 렌더링된 후에 실행되는 부수 효과를 다루는 데 사용됩니다. useMemo는 계산 비용이 높은 연산의 결과를 메모이제이션하여 성능을 최적화하는 데 사용됩니다. useEffect는 DOM 업데이트, 데이터 가져오기, 구독 설정과 같은 작업에 주로 사용됩니다. useMemo는 복잡한 계산이나 재계산을 피해야 하는 값의 계산에 주로 사용됩니다. 1. useEffect 목적: useEffect는 컴포넌트의 렌더링이 완료된 후에 부수 효과(side effects)를 수행하기 위해 사용됩니다. 부수 효과는 데이터 가져오기, 구독 설정, 수동으로 DOM 조작하는 것 ..

Docker, Jenkins 활용 CI/CD 구축 (React, Kotlin+Spring) 3편 - 웹서버에 배포

Jenkins와 Github를 연동하여 푸시이벤트가 발생했을 시, Jenkins에서 빌드를 진행하는 것까지 설정을 해놓았으니, 이제 빌드 후에 일어날 작업들을 설정해두면 자동배포 설정이 끝난다.한 편 을 더 추가해야 할 것 같지만.. 2022년 마지막날에 끝내고 싶어서 다 합쳐버렸다. 뒤의 과정이 상당히 긺으로 천천히 따라오실 것을 추천..순서0.  전체 흐름1.  publish over ssh2.  react 빌드 후 파일 전송3.  Docker in Jenkins4.  spring 도커 빌드 후 도커 push5.  docker-compose로 백엔드 배포6.  Trouble Shotting nginx 설정0. 전체 흐름이번 프로젝트에서 구축한 CI/CD의 아키텍처1. publish over ssh다른..

Docker, Jenkins 활용 CI/CD 구축 (React, Kotlin+Spring) 1편 - Jenkins 서버 설정

SSAFY 프로젝트 진행 중 인프라를 구축하는것에 진심인 친구가 Jenkins, Docker를 활용해 자동배포 시스템을 구축한 것을 보고 CI/CD에 관심이 생겼다. CI/CD는 내용이 많기 때문에 3편 정도로 나누어서 진행할 예정이고, Jenkins pipeline를 활용하면 설정이 편해지지만, 각각의 구성요소를 확인해보기 위해 직접 한땀한땀 구현할 것이다. CI/CD Continuous Integration(CI) and Continuous Deployment(CD)를 통칭해 이르는 말로 지속적인 통합(소스코드 빌드/테스트 자동화)과 지속적인 배포(무중단 서비스 제공)을 의미한다. 순서 0. 전체 흐름 1. 준비사항 2. Docker, Jenkins 설치 3. Jenkins 설정 4. Trouble ..

Frontend, Backend 서버 AWS EC2로 배포하기 (+https 설정까지) nodejs, django

서비스 개발을 하면 필연적으로 배포작업을 거치게 된다. 주로 우리가 접속하는 웹페이지를 위한 Frontend (네이티브 앱을 개발했다면 앱 빌드), 데이터를 처리하고 비즈니스 로직을 수행하는 Backend, 그리고 필요에 따라 다양한 목적의 서버를 여러개 설치하는 경우도 있을것이다. 본 글에선 Frontend와 Backend를 하나의 서버에서 배포하는 방법을 다룬다. # 예제 프레임워크 : Node.js 기반 프론트엔드 프레임워크, Django 배포 사용자가 URL을 통해 내 서버에 접속하여 웹 서비스를 이용할 수 있도록 하는 것 순서 1. 환경 설정 2. Frontend 배포 3. Backend 배포 4. DNS (도메인 연결) 5. Https 설정 6. proxy_pass 설정 1. 환경 설정 EC2..

반응형