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

현재 주소에 따라 UI가 변경되는 등 다양한 이유로 사용되어 javascript로 현재 페이지 URL 가져오는 방법에 대해 정리해 보았다.window.location (Location 객체)현재 페이지의 URL을 알기 위해서는 window.location 속성을 사용해야 한다.window.location 속성에 접근하면 Location 객체에 접근할 수 있어 객체의 속성들을 사용해서 현재 페이지의 URL 정보를 알아낼 수 있다. 예시 URL = https://minsunblog.com/blog/2fe9081b-ab37-4c77-a6b6-c319966cc912 window.location.href현재 페이지의 전체 href (URL) 반환한다.window.location.href = "https://min..

407 포텐데이X클로바 스튜디오 해커톤에 참여해  HyperCLOVA X 를 활용한 AI 발표 준비 도우미, 또랑또랑을 출시했다.또랑또랑 : https://www.ttorang.site/프로젝트를 진행하면서 마주친 문제 중 하나인 text/event-stream 에 대해 정리해 보았다배경서비스 특성상 사용자 요청이 2~3천 자 이상이면 요청시간이 너무 길어져 Caused by: io.netty.handler.timeout.ReadTimeoutException: null 에러가 발생했습니다. 동기식 처리 방식으로 인해 모든 응답이 완료될 때까지 시간이 너무 길어져 에러가 발생하고 있다고 판단했습니다.이 문제를 해결하기 위해 백엔드에서 적은 리소스로 더 많은 요청을 효율적으로 처리할 수 있는 방식인 Flux..

웹 보안에서 쓰이는 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 : 서명 암..

로그인 같은 폼을 만들 때 자주 사용한 react-hook-form에서 제공한 useForm에 대해 정리 해보았다. 사용하는 이유유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리이다비제어 컴포넌트 방식으로 구현되어있기에 렌더링 이슈를 해결하면서도, form의 데이터와 상태를 Provider 아래라면 어느 곳에서든지 props drilling 없이 사용할 수 있다코드 단순화 및 유지보수 비용을 낮춘다 제어 컴포넌트와 비제어 컴포넌트제어 컴포넌트HTML에서,, 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 s..

대량 데이터를 테이블에 적용하면서 헤더를 고정 시켜야 사용성이 편해져 헤더를 고정하는 방법을 알아보았다.position: stickyposition: sticky를 활용하면 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 된다.See the Pen table thead fix by pminsun (@pminsun) on CodePen.

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

자주 사용하는 라이브러리 중 데이터를 관리하고 동기화 해주는 react-query에 대해 정리해보고자 한다.react-qury?react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. 공식 홈 Overview | TanStack Query React DocsTanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state..

프로젝트 중 mdx 파일을 불러와야 하는 상황이 생겨 Next.js (14 버전)에서 어떻게 불러오는지 알아보았다.MDX in NextJSMDX 확장자는 마크다운(MD)과 JSX가 결합되어 마크다운 컨텐츠를 리액트 내에서 컴포넌트 형태로 export 하거나, JSX컴포넌트를 MDX파일 내에 import 할 수 있도록 한다. 정적 컨텐츠를 컴포넌트화 시키는 특성 때문에 SSG를 지원하는 프레임워크(Gatsby, Next)에서는 MDX를 위한 플러그인이 잘 지원되고 있다. 먼저 Next.js에서 mdx파일을 불러오기 위해 하위 packages 을 설치해야 한다.npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx  Configuring: MDX | N..

Notion Api로 블로그를 만들면서 cors에러를 마주하여 해당 에러에 대해 알아보았다.CORS?Cross Origin Resource Sharing의 줄임말로 교차-출처 리소스 공유하고도 한다.웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법으로  CORS는 브라우저 단에서 작동하며, 웹 서버가 특정한 HTTP 헤더를 반환함으로써 웹 브라우저가 자원에 대한 권한을 부여하도록 한다. 이 헤더는 서버에게 특정한 도메인, 프로토콜, 포트에서만 요청을 허용하도록 지시할 수 있다.CORS는 최신 브라우저에서 구현된 동일 출처 정책(same-origin policy) 때문에 등장했다. 출처(Origin)?여기서 출처(Oringin) 은 Protolcol과 Ho..