github의 Readme 작성 중 해당 프로젝트의 스크린 샷 이미지를 Readme에 넣고 싶어 방법을 찾아봤다.readme 파일에 이미지 넣는 방법Github 프로젝트의 Issue 탭으로 들어간다.New Issue 버튼을 눌러 이슈 추가 화면으로 들어간다. 이미지를 내용 칸으로 드래그 앤 드랍한다.![Uploading {image name}]() 문구가 나오고 잠시 뒤 Html의 이미지태그 or  이미지 주소가 나온다 해당 주소를 Readme 에 붙여 놓으면 된다. 이미지 사이즈 조정하기img 태그로 width 와 height값을 넣어준다.

Next.js Amazon EC2 배포(1) 에서 진행한 인스턴스 생성에 이어서 인스턴스에 접속 & 무중단 배포에 대해 정리해보았다. 인스턴스에 접속.pem파일을 저장해둔 곳으로 가서 ssh 접속을 해야한다. 생성한 인스턴스에 들어가서 우측 상단에 있는 연결 버튼을 누른다.인스턴스에 연결 중 페이지에 있는 탭 중 SSH 클라이언트 클릭해 예로 있는 명령어를 .pem 파일이 위치한 터미널에 들어가 명령어를 사용한다.// 예ssh -i ".pem파일이름" ubuntu@ec2-00-000-00-000.ap-northeast-2.compute.amazonaws.com접속에 성공하면 yes를 입력하고 ubuntu@ip 라는 초록 글씨가 나오면 성공적으로 접속이 된 것이다.Git & Node아래 명령어를 입력해 u..

blog를 vercel 외에 다른 방법으로 배포 방법을 찾던 중 많이 사용되어지는 Amazon EC2 로 배포해보았다. NextJS를 이용한 개인 프로젝트를 배포해야 했고, AWS Route53에서 도메인을 구입한 상황이다. 로그인https://aws.amazon.com/ko/ 에 들어가 로그인 후 콘솔에 들어간다. 1. 인스턴스 생성EC2 접속인스턴스 시작 버튼 누르면 인스턴스 생성 페이지로 이동한다.이름을 적은 후 Ubuntu 22.04를 선택한다. 인스턴스 유형인스턴스 유형은 프리티어(= 무료) 인 tc.micro로 선택한다. 키 페어키페어 생성은 서버 컴퓨터에 들어갈 수 있게 해주는 비밀번호 같은 것이다. 한 번만 발급 받을 수 있는 거여서 중요하게 관리해야 한다. 새 키 페어 생성 클릭하며 생성..

웹 보안에서 쓰이는 JWT에 대해 정리해 보았다.JWTJson Web Token의 줄임말로 자바스크립트의 JSON 자료구조를 가지고 있으며, Web Token으로써 사용할 수 있다는 의미이다. 주로 JWT 토큰은 사용자 인증과 로그인 유지를 위해 쓰인다.JWT의 구조JWT는 헤더, 페이로드, 시그니처 구조로 이루어진다.aaaaaaa.bbbbbbb.ccccccc // 헤더.페이로드.시그니처 헤더서명 시 사용하는 키(kid). 토큰 타입(typ), 서명 암호화 알고리즘(alg) 정보가 들어있다.// 예{ "kid" : "Key ID", "typ" : "JWT", "alg" : "ES256"}kid : 서명 시 사용하는 키(Public/Private Key)를 식별하는 값typ : 토큰 유형alg : 서명 암..

Vercel 은 Next.js 개발팀이 만든 호스팅 사이트로 쉬운 개발자 경험을 제공해 준다.Vercel 배포 순서Vercel 회원가입, 로그인 후 배포를 원하는 프로젝트의 Repository import 하면 된다.선택 후 Configure Project에서 프로젝트에 맞게 수정해 주면 된다.프로젝트 폴더 내에 있는 .env 내용을 Environment Variables에 기입하면 된다.완료 후 Deploy 버튼을 누르면 되며 Github에 수정 사항을 push 할 때마다 Vercel에서 자동으로 감지하여 빌드, 배포를 다시 해준다.

Amazon EC2로 블로그를 배포해보고자 Amazon Route 53에서 도메인 구입 및 관리에 대해 알아보았다.Route 53Route 53은 AWS에서 제공하는 DNS ( Domain Name System ) 웹 서비스로 도메인과 관련된 다양한 서비스를 제공한다. DNS는 도메인과 도메인에 해당하는 IP 정보를 가지고 있다가 도메인 주소에 대한 요청이 들어왔을 때 이에 해당하는 ip를 알려주는 서버로 Route 53에서 도메인 이름을 IP주소로 변환하고, 웹 트래픽을 관리하는 데 사용된다. AWS Route 53 도메인 구입Route 53에 있는 등록된 도메인에 들어가 도메인 등록을 누른다. (빨간 박스)검색 창에 원하는 도메인 검색 후 선택하여 구매하면 된다.등록자 정보 입력하는 곳에서 이메일 정..

Firebase Storage동영상과 같은 컨텐츠를 저장할 수 있는 저장소인 Firebase Storage를 활용하여 업로드, 컨텐츠를 가져올 수 있다. 규칙수정 이미지 저장파란색 버튼은 파일 업로드를 통해 이미지를 올려도 되고 하위 이미지처럼 폴더 생성 후 폴더안에 이미지를 저장할 수 있다.  파일 하나만 가져올 경우이미지 파일 URL을 얻는 방식으로 가져온다.import { ref, listAll, getDownloadURL } from "firebase/storage";import { fireStorage } from "../../firebase/firebasedb";import { useEffect } from "react";export default function Test() { const [..

Firebase를 활용할 일이 종종 있어 Next.js와 연동하는 방법에 대해 정리했다.Firebase파이어베이스는 구글(Google)이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로 백엔드의 요소들을 쉽게 구현할 수 있도록 도와주는 일종의 툴이다. 파이어베이스에서 프로젝트 추가 Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.com 이 주소에 들어가서 로그인 후 프로젝트를 만들면 되며 앱 생성시 나오는 SDK 값을 저장하면된다. 프로젝트에 firebase 설치"firebas..

Image Lazy LoadingImage Lazy Loading은 페이지 안에 있는 이미지들이 화면에 보여질 필요가 있을 때 로딩일 이루어지도록하는 기법으로 웹사이트 방문 시 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것이다.Image Lazy Loading 적용 시 장점성능 향상웹 사이트의 로딩 시간에서 이점을 주는 점으로 페이지의 초기 로딩 시 필요한 이미지의 수를 줄일 수 있다. 이미지 수를 줄이면 리소스 요청이 줄어들어 다운로드 용량을 적어지며 사용자가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄이는 것을 의미한다. 다른 리소스들을 더 빠르게 처리할 수 있게 도와주어 사용자가 페이지를 더 빠르게 볼 수 있도록 돕는다.비용 감소통신 비용은 이미지 전달 또는 다른 전달할 무언가의 전송 ..

미뤄두었던 Node, npm 업데이트를 진행했다. Node 현재 버전 확인cmd를 열고 아래 코드를 치면 현재 버전이 나온다.node -v npm 남아 있는 캐시 삭제 npm cache clean --force node 버전 업그레이드mac이나 linux 환경n 설치npm install -g n최신 버전의 node로 업데이트n lts / n latest 윈도우 환경하위 깃허브에 들어서가서 nvm (node version manager) 다운로드 및 설치한다.https://github.com/coreybutler/nvm-windows GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically wr..