2025.03.21 - [웹] - React 프로젝트 Github Actions로 AWS EC2 배포하기 (1)위 글과 이어지는 글입니다 AWS EC2, S3, CodeDeploy를 다 준비했으니, 이제 React 프로젝트와 연결할 준비를 해보자. 1. 프로젝트 준비액세스 키, 비밀 액세스키 등록이전 글의 AWS IAM 설정 - 액세스 키 발급 부분에서 보관해둔 액세스키, 비밀 액세스키를 사용할 차례이다. 프로젝트가 해당 키 값을 이용해 AWS에 접근할 수 있도록 저장해야 한다. Github 레포지토리의 Settings - Security - Secrets and variables - Actions에 들어간다. Repository secrets - New repository secret 버튼을 눌러 액..

Web Socket이란?브라우저와 서버 사이의 전이중(양방향, Full Duplex) 통신 프로토콜  실시간 통신을 위해 Polling 방식을 사용한다면?일정한 간격으로 서버에 요청을 받는 방식서버는 클라이언트가 요청할 때마다 데이터를 보낼 수 있다 (단방향 통신)데이터가 변경되더라도 클라이언트가 요청을 보내지 않으면, 바뀐 데이터를 알 수 없다클라이언트는 실시간 데이터를 위해 지속적으로 요청을 보내야 한다불필요한 네트워크 트래픽이 발생하고, 응답이 필요하지 않은 경우에도(데이터가 바뀌지 않았더라도) 요청을 보내서 서버에 부하 증가이외에도 HTTP 기반의 Long Polling, Streaming, Server-Sent Events(SSE) 등의 방식이 있다. 기존 HTTP 기반 실시간 통신 방식의 한계..

컴포넌트 기반의 리액트에서는 각 컴포넌트 마다 수명 주기가 있다. 컴포넌트가 브라우저 상에서 렌더링되고 업데이트되고 사라지는 과정을 말한다. 크게 마운트, 업데이트, 언마운트로 나뉜다. 라이프 사이클 메소드를 통해 우리는 컴포넌트가 생성되고 변화하고 없어지는 과정을 통제할 수 있다. 마운트(Mount) 컴포넌트가 처음 생성되는 단계. DOM이 생성되고 웹 브라우저 상에 나타난다. 다음과 같은 메소드가 호출된다. constructor 생성자 메소드. 가장 먼저 실행된다. constructor(props) { super(props); this.state = { count: 0 }; } props과 state에 접근할 수 있고, 초기 state 값을 정할 수 있다. 함수형 컴포넌트에서는 useState 훅을 ..