개발일기

EC2(Elastic Compute Cloud)란? AWS에서 제공하는 가상 컴퓨터로써, 사용자가 원하는 인스턴스 타입, GPU, RAM메모리, OS 등을 선택한 후, 할당받아 사용하는 컴퓨터를 뜻한다. 초기에 설정한 사양을 변경하거나 해당 가상 컴퓨터를 삭제할 수도 있다. EC2 요금 모델 On Demand Instance : 사용자가 EC2 인스턴스를 사용한만큼의 비용을 지불하는 방식을 뜻한다. 가장 기본적인 요금제로써, 인스턴스를 생성했을 때, 발생하는 초기 생성 비용 등이 포함되어져 있지 않고 사용한 만큼의 시간 또는 초 단위로 사용량을 지불한다. 개인서버를 만드는 경우 보통 On Demand방식으로 요금제를 선택한다. 약정 기간없이 사용한 만큼 사용량을 지불하는 간편함이 있기 때문이다. Spot..

IAM(Identity and Access Management)란? AWS 계정의 아이디와 암호 등 해당 계정에 접속할 수 있는 정보들을 공유하지 않아도 AWS 계정의 자원들을 다른 사용자들과 공유하여 사용할 수 있는 기능을 제공한다. 다른 사람들에게 AWS 각 기능에 대해 각기 다른 권한을 부여할 수 있다. A사용자는 EC2 인스턴스를 관리할 수 잇는 권한을 가지고 B사용자는 결제 정보에만 접근할 수 있도록 사용자별로 접근 권한을 분리하여 운영할 수 있도록 해준다. IAM 액세스 방법 IAM에 액세스하는 방법은 크게 4가지가 존재한다. AWS Management Console : 브라우저에서 AWS IAM과 AWS 리소스를 관리할 수 있다. https://aws.amazon.com/ AWS 홈페이지 콘..

1. Load Balancer란? 서버에 들어오는 요청(트래픽)을 다른 서버들에 적절히 분산하여 해당 서버에 가해지는 부하를 방지하기 위해 사용하는 네트워크 기술 중의 하나이다. 2. 서버의 증설 방법 Scale-Up : 현재 서버 자체를 증강시켜 해당 서버가 대량의 트래픽을 관리할 수 있는 처리 능력을 향상시킨다. Scale-Up 방법으로 할 경우, 서버를 증강시키는 시점에 서버가 중지된다. Scale-Out : 서버 자체를 증강시키는 것이 아니라, 같은 사양을 가진 장비 또는 비슷한 사양을 가진 장비의 대수를 증가시켜 처리 능력을 향상시키도록 하는 것을 뜻한다. 서버의 대수를 증가시키기에 Load Balancer를 통해 트래픽을 분산시켜주는 작업이 필수적으로 필요하다. 또한 서버 대수가 증가하기에 각..

1. useParams란? useParams는 리액트에서 제공하는 Hook으로 동적으로 라우팅을 생성하기 위해 사용한다. URL에 포함되어있는 Key, Value 형식의 객체를 반환해주는 역할을 한다. Route 부분에서 Key를 지정해주고, 해당하는 Key에 적합한 Value를 넣어 URL을 변경시키면, useParams를 통해 Key, Value 객체를 반환받아 확인할 수 있다. 반환받은 Value를 통해 게시글을 불러오거나, 검색목록을 변경시키는 등 다양한 기능으로 확장시켜 사용할 수 있다. 2. 관련 라이브러리 설치 2-1. package.json 생성 npm init -y yarn init -y # package.json 생성 2-2. react 관련 패키지 설치 npm install react..

1. useHistory란? useHistory는 리액트에서 URL주소를 변경할 때 사용하는 Hook이다. 예를 들어, 로그인 버튼 또는 여러 목록 중에서 하나를 선택하여 클릭했을 때, URL주소를 변경시켜 URL주소와 일치하는 Route의 컴포넌트를 렌더링하기 위해 사용한다. 리액트 특성상, URL변경없이 내부 컴포넌트만 변경시켜 화면을 바꿔줄 수 있다. 하지만 URL을 바꿔주면 현재 어느 페이지에 있는지 대략적으로 알 수 있고, 검색 쿼리가 추가된 URL을 공유할 때, 사용자가 페이지의 초기 단계부터 검색 쿼리를 추가할 때 까지 직접 하는 것이 아니라 URL주소만으로 페이지에서 결과값을 볼 수 있다. URL주소 변경없이 컴포넌트의 변경만으로 사용자가 웹 페이지를 이용할수 있지만, 복잡한 순서와 사용자..

Socket.io란? emit : 데이터를 보내는 함수이다. 클라이언트는 서버에게, 서버는 클라이언트에게 데이터를 보낸다. on : 데이터를 받는 함수이다. 클라이언트 서버로부터, 서버는 클라이언트로부터 데이터를 받는다. Socker.io를 사용하여 서버와 클라이언트 간에 데이터를 주고받는 결과를 확인하기 위해 간단하게 서버와 클라이언트를 생성하여 결과를 확인할 수 있다. 1. 서버 생성 1-0. package.json 생성 npm init -y yarn init -y 1-1. Express 설치 npm install express yarn add express 서버는 노드의 express를 사용하여 서버를 오픈할 것이다. 1-2. Socket.io 설치 npm install socket.io yarn ..

FontAwesome 아이콘을 사용하기 위해 i태그에 해당하는 아이콘 클래스이름을 넣은 후, 페이지를 실행하였을 때, 다음과 같은 에러가 발생하였다. React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node test i태그를 위와 같이 사용하였을 때, 에러가 발생하였다. 해결법 : div, span태그로 하위 태그를 감싸준다. test // span 또는 div 등의 다른 태그로 감싸주면 에러가 해결된다. test 위의 소스코드처럼 span태그 또는 div 태그로 해당 내용들을 감싸주면 에러가 해결된다. 노드 패키지 매니저로 FontAwesome 패키지를 설치..

https://stackoverflow.com/questions/65770449/react-onclick-not-working-in-any-of-my-browsers-but-for-colleagues-it-does React onClick not working in any of my browsers, but for colleagues it does I've created an onClick handler in a very simple React function component: export default function MyButton() { return ( { console.log('te... stackoverflow.com