javascript/사이드 프로젝트4 serverless next.js 를 사용해보자! 그리고 자동화까지? 사이드 프로젝트로 앱을 만들면서, 어드민 페이지가 필요했었는데, 자연스럽게 어드민 페이지 배포를 위해 배포방법을 고민을 하게 되었다. 우리가 next 앱을 배포하기 위해서 다양한 방법을 고려해볼 수 있다. Netlify Vercel Github page EC2, Lambda, s3 등을 구축하여 배포 하거나 기타 aws 인프라를 직접 구축 serverless next.js component 이번에 선택한 것은 serverless next.js component package 를 사용해보기로 했다. 사실 s3 에 정적 웹 호스팅 하고 cdn 으로 cloudfront, 도메인 연결로 route53 이용해서 이미 어느정도 구축을 다 해놓은 상태이긴 했으나, serverless 를 써보고 싶기도 했고, gith.. 2022. 3. 23. Next.js 에 toast ui Editor 을 같이 사용하는 방법 (짱쉬움) next.js 에 tui Editor을 쓰고자 하시는 분들께 도움이 되길 바랍니다! 기본적으로 next.js를 쓴다는건 ssr을 하겠다는 이야기 인데 tui Editor에서는 ssr을 지원하지 않습니다. (딱히 지원할 이유도 없구요) 그렇기에 이둘을 같이 쓰게 되면 아래와 같이 window is not defined 라고 에러가 뜹니다. 이유는 window 객체는 client-side에서만 존재하는데 server-side에서 먼저 실행되기에 window 객체가 없다는 에러가 뜨는 것이지요. 즉 브라우저에서만 작동되기 때문입니다. With no SSR 자 그러면 에디터가 나오는 부분은 ssr을 하지 않아주도록 합시다. 공식문서를 보면 모듈에 브라우저에서만 작동하는 라이브러리가 들어있는 경우엔 서버측에 모듈.. 2021. 4. 6. WEB RTC (Web Real-Time Communication) 📋 목차 서론 WEB RTC가 뭔데? WEB RTC API Signaling STUN/ TURN SERVER 1:N 통신은 어떻게? 참고해보기 ✍🏻 서론 최근에 WEB RTC 기술에 관심이 많아지면서 간단한 개인 플젝을 해볼까 해서 조금씩 공부해보고 있습니다. 공부하면서 조금씩 정리해 두면 좋을 것 같아 적어둡니다. 👩🏻💻 WEB RTC가 뭔데? WEB RTC MDN 문서에는 아래와 같이 정의가 되어있습니다. WebRTC(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다. WebRTC를 구성하는 일련의 표준들은 플러그인이나 제 3자 소.. 2021. 3. 16. ResizeObserver 과 svg Element는 같이 동작하지 않는다. 👀 서론 요즘 D3에빠져 데이터 시각화에 관심이 많은 한사람 입니다. (리액트에서 D3를 이용하려다 보니 둘의 Dom control이 달라서 어떻게 해야 잘 쓸 수 있는지 고민이 많습니다..ㅋㅋ) D3랑관련 있는 이야기는 아니고, 그래프 그리다가 돔 크기에 따라 그래프가 유연하게 그려졌으면 좋겠어서 ResizeObserver 을 이용해서 하고 있습니다. ResizeObserver에 대한 설명은 아래 MDN참고 하세요! developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver - Web APIs | MDN ResizeObserver The ResizeObserver interface reports changes to the dimensi.. 2021. 3. 12. 이전 1 다음
