티스토리챌린지

이 글은 docker로 react와 express를 구동하는 것에 대한 글입니다. 참고부탁드립니다!1. node.js 설치하기1) 본인 OS 버전 확인하기cat /etc/*release* 본인의 OS 버전 정보를 확인해준다. 만약 본인의 버전이 나와 같이 amazon linux 2023이라면 이 글을 따라해도 좋다.2) node.js 설치하기sudo yum update -y 모든 소프트웨어 패키지가 최신 상태인지 확인하기 위해 패키지를 업데이트 시켜준다.curl -fsSL | sudo bash - NodeSource 저장소 설치 스크립트를 설치해준다. 여기서는 node의 버전을 18버전으로 설치한다.sudo yum install -y nodejs 위와 같은 명령어를 작성해주면, node.js와 npm이 ..

Gatsby의 단어가 희소하신 분은 개츠비가 뭔데? 라고 하실 수 있다.개념: 프론트엔드 라이브러리 React를 기반으로 하며 최근 프론트엔드 시장에서 자주 등장하며 빠르게 성장하고 있는 JAM Stack 기반의 정적 사이트 생성 프레임워크이다.JAM Stack이란? Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. 공식 설명에 의하면 JAM Stack은 더 빠르고, 안전하며, 스케일링하기 쉬운 웹을 만들기 위해 디자인된 아키텍처라고 한다. JAM Stack은 JavaScript, API, MarkUp Stack에서 하나씩 앞 글자를 따 온 약자로, 자바스크립트와 API, HTML이나 ..

1. vagrant 설치하기Vagrant by HashiCorp Vagrant by HashiCorpVagrant enables users to create and configure lightweight, reproducible, and portable development environments.www.vagrantup.com위의 사이트에 들어가면 첫 화면이 아래와 같이 나온다. 위의 화면에서 download를 클릭하여 페이지를 이동해준다. 내 경우에는 windows환경이기에 windows환경에서 i686를 다운로드해준다.2. virtualbox 설치하기Downloads – Oracle VM VirtualBox Downloads – Oracle VirtualBoxThis VirtualBox Extens..

아래는 간단하게 react-query를 사용할려고 만든것이다.react-query 사용해보기npx create-react-app my-app cd my-app npm install react-query 위의 코드를 따라 쳐서 react를 셋팅해준다. 해당 폴더의 이름은 본인이 마음에 드는 이름으로 바꿔주면 된다.오류없이 실행되는 코드src/index.jssrc폴더에 index.js에 아래와 같이 코드를 넣어준다. 주석으로 devtools로 되어 있는 것은 devtools로 react-query가 어떻게 돌아가는지 볼 수 있다. 나는 react-query를 맛보기 위해 간단히 만들 것이므로, devtools는 주석처리해준다.import React from "react"; import ReactDOM fro..

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텍스트가 볼륨에 기록되었는지 확인한다.그러면 위와 같이 작성했던 글이 보..

velog에서 글을 보다가, until이라는 블로그를 보았다. 훑어보는데, 해당 블로그의 검색 기능에 ctrl + k를 누르면 검색 기능이 모달처럼 펼쳐지는 것을 보고 해당 기능을 검색하게 되었다. 그러다가 알게 된 사실을 글로 작성하고자 한다.단축키 라이브러리 사용하기react에서 키 이벤트를 사용해서 구현해도 되는데, 일반적으로 단축키 라이브러리가 잘 구현되어 있기 때문에 그것을 많이 활용한다. 그래서 찾아보니 일반적으로 두 개의 라이브러리가 활성화가 많이 되어 있었다. 위의 사진은 npm trends에 들어가서 두 라이브러리를 비교한 사진이다. 첫 번째로 version과 updated를 비교해보았다. 이슈가 적음에도 react-hotkeys-hook이 버전이 높고 업데이트를 자주 한 흔적이 보였다...

PWA는 웹 앱과 네이티브 앱의 장점을 모두 제공하는 진보된 형태의 웹 애플리케이션 개발이라고 볼 수 있다. 먼저 웹 앱의 장점은 뛰어난 접근성이라고 볼 수 있다. 앱을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 브라우저가 설치된 어떠한 장치에서도 접근 가능하다. 또한, 새로운 컨텐츠를 빠르게 배포할 수 있고, 링크로 손쉽게 공유할 수도 있다. 모바일 사용자의 수가 나날이 늘어가고 있는 가운데 무신사의 경우 웹 배포를 중단하고 모바일에 집중하겠다고 했다. 그만큼 모바일 사용자의 수가 늘어나고 있음을 알 수 있다. 그래서 웹 앱의 장점을 알 수 있는 PWA 적용해보도록 하자!설치하기1. next-pwa 설치하기npm install next-pwa 설치하다가 중간에 설치도 안되고 오류만 나..

EC2에 들어가면 사이드바에 스팟 요청이라는 메뉴를 찾을 수 있다. 클릭한다. 그리고 나면 스팟 인스턴스 요청이라는 버튼이 있는데 이를 클릭하면 아래와 같은 화면이 보인다.1. 스팟 플릿 요청 생성1) 시작 피라미터미리 만들어진 템플릿이 있다면 이를 사용해도 되지만, 내 경우 없기 때문에 수동으로 만들어 사용하고자 하였다.AMI : 아마존 머신 이미지를 지칭하는 말로, 위의 이미지에서 그에 대한 설명을 확인할 수 있다.내 경우 딥러닝을 사용하고, ubuntu 20.04 OS 환경을 사용하고자 하였다. 또한, 아래에서도 나오겠지만 g4dn.2xlarge 인스턴스를 구동하고자 한다. 그래서 아마존 ami에서 검색하여 이에 맞는 ami을 선택해주었다.Key Pair : 키 페어는 퍼블릭, 프라이빗 키로 구성되..