티스토리챌린지

반응형
·AWS
1. 스냅샷이란?스냅샷은 짧은 순간의 기회를 이용하여 찍는 사진을 말한다.스냅샷(Snapshot)은EBS를 저장하는 효율적인 방법으로서,특정 시간에 EBS 볼륨 상태의 저장본을 뜻한다.EBS의 데이터 저장 상태에 대해 사진(백업본)을 찍어둔 개념이다. 그래서 필요시 스냅샷을 통해특정시간의 저장 데이터에 대한 EBS의 복구가 가능하다.2. 인스턴스 들어가기인스턴스에 볼륨이 연결이 되어 있다는 가정하에sudo sh -c "echo some text has been written > /mnt/data-store/file.txt"탑재된 볼륨에서 파일을 생성하고 여기에 일부 텍스트를 추가한다.cat /mnt/data-store/file.txt텍스트가 볼륨에 기록되었는지 확인한다.그러면 위와 같이 작성했던 글이 보..
·React
velog에서 글을 보다가, until이라는 블로그를 보았다. 훑어보는데, 해당 블로그의 검색 기능에 ctrl + k를 누르면 검색 기능이 모달처럼 펼쳐지는 것을 보고 해당 기능을 검색하게 되었다. 그러다가 알게 된 사실을 글로 작성하고자 한다.단축키 라이브러리 사용하기react에서 키 이벤트를 사용해서 구현해도 되는데, 일반적으로 단축키 라이브러리가 잘 구현되어 있기 때문에 그것을 많이 활용한다. 그래서 찾아보니 일반적으로 두 개의 라이브러리가 활성화가 많이 되어 있었다. 위의 사진은 npm trends에 들어가서 두 라이브러리를 비교한 사진이다. 첫 번째로 version과 updated를 비교해보았다. 이슈가 적음에도 react-hotkeys-hook이 버전이 높고 업데이트를 자주 한 흔적이 보였다...
·Next.js
PWA는 웹 앱과 네이티브 앱의 장점을 모두 제공하는 진보된 형태의 웹 애플리케이션 개발이라고 볼 수 있다. 먼저 웹 앱의 장점은 뛰어난 접근성이라고 볼 수 있다. 앱을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 브라우저가 설치된 어떠한 장치에서도 접근 가능하다. 또한, 새로운 컨텐츠를 빠르게 배포할 수 있고, 링크로 손쉽게 공유할 수도 있다. 모바일 사용자의 수가 나날이 늘어가고 있는 가운데 무신사의 경우 웹 배포를 중단하고 모바일에 집중하겠다고 했다. 그만큼 모바일 사용자의 수가 늘어나고 있음을 알 수 있다. 그래서 웹 앱의 장점을 알 수 있는 PWA 적용해보도록 하자!설치하기1. next-pwa 설치하기npm install next-pwa 설치하다가 중간에 설치도 안되고 오류만 나..
·AWS
EC2에 들어가면 사이드바에 스팟 요청이라는 메뉴를 찾을 수 있다. 클릭한다. 그리고 나면 스팟 인스턴스 요청이라는 버튼이 있는데 이를 클릭하면 아래와 같은 화면이 보인다.1. 스팟 플릿 요청 생성1) 시작 피라미터미리 만들어진 템플릿이 있다면 이를 사용해도 되지만, 내 경우 없기 때문에 수동으로 만들어 사용하고자 하였다.AMI : 아마존 머신 이미지를 지칭하는 말로, 위의 이미지에서 그에 대한 설명을 확인할 수 있다.내 경우 딥러닝을 사용하고, ubuntu 20.04 OS 환경을 사용하고자 하였다. 또한, 아래에서도 나오겠지만 g4dn.2xlarge 인스턴스를 구동하고자 한다. 그래서 아마존 ami에서 검색하여 이에 맞는 ami을 선택해주었다.Key Pair : 키 페어는 퍼블릭, 프라이빗 키로 구성되..
·etc
아래와 같은 참고 사이트를 활용해서 프로메테우스를 설치하고 활용하고자 한다.🔍 prometheus 구동 환경아마존의 인스턴스를 만들어 프로메테우스를 설치하고 구동하고자 하였다. amazon linux환경이며 버전 2023이다.1. prometheus 다운로드https://prometheus.io/download/위의 사이트를 들어가면 버전이 많이 나와 있으므로, 안정화된 버전을 사용하여 다운로드하는 것을 추천한다. Download | PrometheusAn open-source monitoring system with a dimensional data model, flexible query language, efficient time series database and modern alerting ap..
제목과 같은 글을 적게 된 건 온전히 효율성이 떨어지는 빌드와 도커 컨테이너를 계속적으로 생성했기 때문에 이 글을 작성한다.레이어의 구조Docker 이미지는 컨테이너를 생성하기 위한 템플릿 역할을 한다. 이 이미지는 여러 개의 읽기 전용 레이어로 구성되어 있다. 위의 사진을 보면, ubuntu, nginx, web app을 이루어 docker image가 생성된다. 각 레이어는 이미지의 변경 사항을 포함하며, 이는 새로운 파일을 추가하거나 기존 파일을 수정하거나 삭제한다. Docker는 이러한 레이어들을 효율적으로 관리하여 이미지 빌드 속도를 향상시키고, 저장 공간을 절약한다. 이 이미지들이 모여 컨테이너를 만들고, 하나의 이미지로 여러개의 컨테이너를 만든다. 도커 이미지를 만들기 위해서는 dockerf..
이전과 똑같이 docker container에 올린 Next.js 코드를 실시간으로 반영해주고자 한다. 이를 핫 리로드라고 하는데, 아래의 작업을 따라하면 해당 작업을 따라할 수 있다.next.config.js 수정하기module.exports = { webpackDevMiddleware: config => { config.watchOptions = { poll: 1000, aggregateTimeout: 300, } return config }, } 위와 같은 코드가 next.config.js안에 포함되어 있어야 한다.dockerfile 작성하기# Use an official Node.js runtime as a parent image FROM node:18-alpine as builder ENV CH..
기본 바탕 배경1) 이미지에 변경사항이 생기면 이를 반영하기 위해, 이미지를 다시 빌드해야 한다.이는 컨테이너를 다시 시작하더라도 변경 사항은 반영되지 않는다. 즉 이 말은 이미지를 다시 빌드해야 한다는 것이다. 이미지는 당시의 소스 코드를 정확히 복사해서 스냅샷을 만든 것이다. 따라서 그 이후의 소스 코드 변경 사항은, 이미지의 소스 코드에 포함되지 않는다. 이미지는 기본적으로 잠겨있고, 이미지의 모든 것이 읽기 전용이다. 2) 이미지는 레이어(Layer) 기반 아키텍처 구조를 가진다.Dockerfile에 지정한 모든 명령은 레이어를 나타낸다.최종명령 이전의 모든 명령은 이미 이미지의 일부이자 별도의 레이어이다.컨테이너는 이미지 위에 추가된 얇은 레이어일 뿐이다.컨테이너는 이미지에 저장된 환경을 사용하..
반응형
Uheeking
'티스토리챌린지' 태그의 글 목록