전체 글

안녕하세요. react, flutter, node.js에 관련해서 글을 쓰는 블로그입니다.
728x90
반응형
·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에 지정한 모든 명령은 레이어를 나타낸다.최종명령 이전의 모든 명령은 이미 이미지의 일부이자 별도의 레이어이다.컨테이너는 이미지 위에 추가된 얇은 레이어일 뿐이다.컨테이너는 이미지에 저장된 환경을 사용하..
안녕하세요! 히킹입니다. 게으르던 지난 날, 그 동안 동기부여되지 않았던 티스토리 글쓰기!! 티스토리가 각성했습니다. 여러분! 티스토리의 앱을 보면서 아 제발 업데이트 해줬으면 좋겠다. 하던 지난 날들은 뒤로 하고 앱을 업데이트 시키기 시작했으며, 홈페이지까지 업데이트된 모습을 보고 아 누가 내 외침 티스토리에 전달해줬나 생각했습니다. 그런데 그런 티스토리가 오블완 챌린지라뇨? 이건 걍 멱살잡고 너 블로그 써, 대신 혜택도 좀 있을 예정!이라고 말해주는 겁니다. 그럼 써야죠. 왜냐면 블로그 쓰면 혜택까지 더불어? 오블완이 뭔데? 작심삼주 뭔데? 궁금하시다면 그냥 밑의 주소 들어가서 더 자세히 알아보시는 것을 추천드립니다. 내일부터 당장 궈!https://www.tistory.com/event/write-..
·Next.js
recoil 설치하기npm install recoil위의 명령어를 써서 최신 recoil을 설치해준다.RecoilRoot 적용하기recoil를 next.js 프로젝트에 적용하려면 root에 RecoilRoot를 적용해야 한다. root가 있는 곳은 layout.js를 말한다. RecoilRoot는 Recoil로 관리되는 상태의 공급자(provider) 역할을 하며, 때문에 Recoil로 관리되는 상태를 사용하는 컴포넌트는 RecoilRoot의 하위에 존재해야 한다.위의 코드에 {children}으로 되어 있는 태그를 RecoilRoot로 감싸야 한다. 그러나, 이를 감쌀 경우 아래와 같이 오류가 난다.‘use client’를 최상위에 작성하라는 오류이다. 그러나 이렇게 해도 오류가 난다. Layout.j..
·etc
https://velog.io/@supremgy/ChatGPT가-Next.js에서-Remix로-갈아탔데  ChatGPT가 Next.js에서 Remix로 갈아탔대!최근 OpenAI는 자사의 프레임워크를 Next.js에서 Remix로 전환했습니다. 이 변화는 개발 커뮤니티에서 큰 화제가 되었고, 많은 사람들이 그 이유에 대해 궁금해하고 있습니다. 아직 OpenAI의 공식적인velog.io   최근 OpenAI는 자사의 프레임워크를 Next.js에서 Remix로 전환했다는 윗 글을 접하고 충격먹었다. 왜냐하면 chatgpt를 이용했을 때 이전보다 몇배로 빨라짐을 몸소 느꼈기 때문이다. 그래서 remix가 궁금해져 이렇게 몸소 접해보고 이렇게 글을 쓰고자 한다.Remix는 초기 렌더링 시 서버에서 필요한 데이터..
·React
하나의 스크립트로 두 개의 프로세스를 돌릴 수 있는 방법은 여러가지 있는데, 그 중 두 가지를 소개하고자 한다.1. concurrently 사용하기npm install concurrently --save위의 명령어를 쳐서 concurrently가 package.json에 설치되었는지 확인해준다. 그리고 나서 package.json에 아래와 같이 수정해준다."start": "concurrently \\"supervisor app.js\\" \\"supervisor mqtt/mqttClient.js\\""여기서 스크립트에 지정한 이름과 겹친다면 수정해주고, 위에 넣은 내용은 내 기준으로 넣은 것이기에 수정해준다. 본인이 돌리고 싶은 파일로 수정해준다.npm run start위의 명령어를 돌렸을 때 잘 돌아가..
728x90
반응형