성장일기

🤔 문제 상황amazon s3로 저장된 파일의 Pre-Signed url을 전달받는 상황해당 url을 통해 파일에 접근 할 수 있으며, 만료 기한이 설정되어 있습니다.어차피 만료기한이 지나면 접근이 불가하지만, 프론트에서 미리 알아내어 이벤트를 제어하고 싶다면 어떻게 해야 할까요?💡Pre-Signed URL이란?사전 서명된 URL(Pre-Signed URL)은 특정 파일에 대해 제한된 시간 동안 접근할 수 있도록 서명된 URL을 의미합니다. 기본적으로 Amazon S3와 같은 클라우드 스토리지에 저장된 파일들은 퍼블릭하게 접근할 수 없고, 인증된 사용자만이 접근할 수 있습니다. 그러나 사전 서명된 URL을 사용하면 특정 파일에 대한 일시적이고 제한된 접근 권한을 비인증 사용자인 client에게 제공할..

문제 상황navbar의 사이드 메뉴가 펼쳐졌을 때 body의 스크롤을 막아야 했습니다.해결 방법 useEffect(() => { if (mobileMenuCollapsed) { document.body.style.overflow = 'hidden' document.body.style.width = '100%' document.body.style.height = '100%' } else { document.body.style.overflow = 'auto' document.body.style.width = '' document.body.style.height = '' } return () => { document.body...

문제 상황대량 청구서를 발송 중에 취소하는 로직이 필요했습니다.그래서 fetch 비동기 통신을 취소하는 abortController를 사용했습니다. 🚨 주의사항abortController는 프론트의 요청만 취소하는 것임을 알아야 합니다.요청 이후에 백엔드에서 일어나는 일은 제어할 수 없습니다.예를 들어 청구서 발송을 클릭하고, 곧바로 취소를 눌러서 요청을 취소했다하더라도 백엔드에서는 발송이 시작된 상태이고 이것을 취소할 수는 없습니다.저는 위와 같은 이유로 해당 로직을 작성했지만, 사용하지는 못했습니다 :(해결 방법메일을 발송하는 로직을 훅으로 만들어서 사용하는 컴포넌트에서 호출하도록 했습니다.import AbortController from "abort-controller";export functi..

1️⃣ script 초기에는 프로그램의 규모가 작았기 때문에 약간의 상호작용만 제공하면 됐기에 다른 파일을 불러올 때 script를 사용하여 전체 다 가져옴 문제점 자바스크립트는 파일마다 독립적인 스코프를 가지지 않고 전체 파일이 하나의 전역 객체를 공유하여 사용 ⇒ 전역변수가 중복되는 문제가 발생할 수 있음 (위 같이 여러 개의 파일로 분리해도 1, 2, 3이 같은 스코프를 공유하기 때문에 모듈화가 아님) 문제 해결 모듈: 재사용 가능한 코드 조각으로 애플리케이션을 구성하는 개별 요소 파일을 모듈로 나누어 내보내고 불러옴 ⇒ Node.js는 Common JS를 채택 2️⃣ Common JS module.exports = { ... } // 모듈 내보낼 때 const utils = require(&#39..

들어가며... 팀 프로젝트를 할 때 백엔드의 진행 속도가 프론트보다 느려서 API 완성을 기다리는 입장이었다. 당시 단순히 json 파일로 데이터를 모킹해서 사용하다보니 나중에 수정할 코드가 많았고 정상적으로 api 요청이 들어가고 있는건지 알 수 없는 문제가 있었다. 그래서 최근에는 msw를 사용해서 api를 모킹하고 있다. 🍀 MSW (Mock Service Worker)란? 서비스 워커(service worker)를 사용하여 네트워크 호출을 가로채는 API 모킹 라이브러리 실제 서버를 대신하여 브라우저 내에서 가상의 서버를 구축하여 개발 및 테스트할 수 있음 API 스펙은 나왔지만 아직 구현되지 않은 경우 임시로 사용 가능함 특징 모킹이 네트워크 단에서 일어나기 때문에 프론트 코드를 실제 API와 ..

들어가며 최근 Fetch를 사용하던 중 단순히 javascript에서 사용할 때와 react에서 사용할 때 차이점이 있어 이를 공부하게 됐다. fetch는 비동기로 동작하기 때문에 신경쓸 점이 많았다. 그리고 테스트 환경에서 사용하려면 추가적으로 필요한 설정이 있기에 이것까지 정리해보려 한다! 🍀 Fetch란? ES6에 도입된 자바스크립트 내장 함수로, 클라이언트가 서버에 네트워크 요청을 보내서 정보를 받아올 때 사용함 Promise 기반이라 비동기로 응답 받은 데이터를 다루기 쉬움 내장 함수라서 모듈 설치할 필요가 없음 기본 문법 fetch의 기본 메소드(생략시)는 get임 fetch(url, { method: "GET", // 기본값:GET (POST, PUT, DELETE, etc.) headers..

🍀 들어가며 웹 사이트 방문자의 데이터를 수집하기 위해 구글 애널리틱스를 활용해보기로 했다. 정적 사이트나 CSR이라면 index.html안의 다른 페이지에도 적용하기 이렇게만 설정하면 페이지 이동시에는 데이터 수집이 안된다. 이동시에도 해당 코드가 작동하도록 설정해야한다. 일단 gtag의 동작들을 함수로 분리해준다. lib/gtag.js export const pageview = (url) => { window.gtag("config", process.env.NEXT_PUBLIC_GA_ID, { page_path: url, }); }; export const event = ({ action, category, label, value }) => { window.gtag("event", action, { ..

🌳 들어가며 과거 메타버스라는 말이 없을 때 퍼피레드, 팝플의 헤비 유저였고 성인이 되고서는 제페토와 본디 등을 해봤다. 가상의 공간이지만 나만의 공간을 마련하고, 꾸미고, 사람들과 관계를 맺으면서 어떠한 갈증이 충족되는 것을 느꼈기에 그런 게임이나 공간이 있다면 이끌려 시작했었다. 현재는 모각코를 위해 zep, 게더타운과 같은 서비스를 주로 이용하고 있는데, 전부터 메타버스가 어떤 기술로 구현되는지 궁금했기에 이번 기회에 공부해봤다!! 유저끼리 소통하고, 움직임을 감지하려면 어떻게 해야할까? 다른 웹 사이트와 같이 HTTP 프로토콜을 이용해서 요청을 보내고 받아야 할까? 아니다. 실시간으로 양방향 소통을 위해서는 웹 소켓을 이용해야 한다. 📌 웹 소켓 서버와 클라이언트 간의 양방향 통신을 지원하는 컴퓨..

들어가며 SEO(검색 엔진 최적화)를 진행하려는데 플러그인을 사용하지 않고 최대한 기본 제공되는 태그를 사용하고 싶었다 적용하다보니 헷갈리는 부분이 있어 정리해본다! 의문점 SEO를 위해서는 Head 안에 title, meta 등을 설정해야 한다. 기본적으로 Next.js에서 제공되는 head 태그는 next/head, next/document가 있다. 두 태그는 모든 파일에서 사용할 수 있다. 그리고 Next.js는 초기에 웹 사이트가 실행될 때 _app.tsx와 _document.tsx 두 개의 파일을 거쳐서 실행된다. 그럼 두 가지 의문이 생긴다. next/head, next/document 중, 어떤 것을 사용해야 할까? _app.tsx와 _document.tsx 중, 어디에 넣어야 할까? 이 두..

LightHouse 성능 측정 웹 사이트를 만들고 배포까지 마쳤다. 그런데 SSR임에도 불구하고 초기 렌더링이 느려서 성능 측정이 필요했다. 크롬 확장 프로그램인 LightHouse을 사용해서 사용자 입장의 성능을 측정했다. 다른 것들은 준수했으나 가장 중요한 퍼포먼스 점수가 처참했기에 최적화를 진행했다, 💡 이미지 최적화 성능 하락의 주된 원인은 이미지였기에 두 가지 과정을 거쳤다. Next.js에서 제공하는 Image 태그 커스텀 해당 Image 태그는 width, height를 필수적으로 적어야 했는데, 나는 이미지의 크기가 부모의 맞춰서 유동적으로 변화하는 것을 원했다. 그래서 기본 속성을 이용하여 커스텀했다. Image의 width나 height는 px단위의 숫자만 넣을 수 있기에 0을 넣고 s..