lou@blog $ _

DASHI 서비스를 계속 발전시키는 도중에, 트위치 채팅도 다시볼 수 있었으면 좋겠다고 생각했다. 문제는 채팅이 영상과 맞게 정확한 시간에 올라와야한다는 건데, 그래서 채팅을 WebVTT로 만들었다. 즉 영상 자막이 된다는 건데, 일반적인 영상 자막처럼이 아니라 세로로 스크롤하며 올라오는 채팅포맷이어야 했다. var track = video.textTracks[0]; track.oncuechange = function() { var cue = this.activeCues[0]; if (cue) { console.log(cue.text); } }; 영상에 자막을 추가하고, 영상자막이 변경될때마다 console에 로그를 찍는 코드다. 이를 이용해서 Container에 채팅 Element를 하나씩 추가하고 스..

satisfies operator satisfies는 TypeScript 4.9 버전 부터 새롭게 추가된 연산자로, 업캐스팅(up-casting)으로 Type-safety를 보장한다. 💡 업캐스팅? 부모 - 자식 상속관계의 클래스가 있을때 부모 → 자식 방향의 형변환을 다운캐스팅, 자식 → 부모 방향의 형변환을 업캐스팅이라 한다. Parent p = new Parent(); Child c = new Child(); Parent p2 = (Parent) c; // 업캐스팅 Child c2 = (Child) p2; // 다운캐스팅 Typescript의 경우 한 타입이 다른 타입의 값을 모두 포함하고 있으면 상속관계가 된다. 사용 예시를 바로 보자. Versions는 VersionRecord를 satifsfi..

왜 Cloudflare Worker? 개발중인 앱 실행시 스플래시 화면에서 진입점(Entrypoint)을 결정하고 간단한 정보들을 내려주는 API가 있다. 포함되는 데이터는 API 서버 URL, 앱 버전 업데이트 정보, 점검시간 정보 등 앱 실행을 위한 필수정보들이다. 이는 CloudFlare Worker 로 구현되어있는데, 아래와 같은 이유로 채택하게 되었다. 앱 API 서버와 별개로 동작할 것: 서비스 점검 등으로 서버가 다운되었을때도 정보를 전달할 수 있다. 빠르고 안정적인 응답을 내려줄 것: Cloudflare 전역 네트워크 위에서 돌아가서 50ms 이내 응답이 가능하다. 수정 및 배포가 용이할 것: JS를 써서 언어적 장벽도 낮고 Wrangler라는 CLI를 제공해서 배포가 편리하다. 요구사항:..

export default function isDarkColor(color: string) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); if (result == null) { return false; } var rgb = { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } let hsp = Math.sqrt( 0.299 * (rgb.r * rgb.r) + 0.587 * (rgb.g * rgb.g) + 0.114 * (rgb.b * rgb.b) ); return hsp

styled-components를 이용하여 스타일링하고 Next.js 앱을 켜면 처음에 CSS가 완전히 로딩되지 않은 듯한 모습이 보이게 되는데, 흉한 맨얼굴이 그대로 드러나니 사용자 경험이 꽤 나쁘다. 이것은 스타일이 Client side에서 적용되고 있기 때문이다. 이를 해결하기 위해서는 커스텀 Document를 만들고, ServerStyleSheet를 이용해서 컴포넌트의 모든 스타일을 서버 사이드에서 적용될 수 있도록 바꾸어야한다. babel-plugin-styled-components 설치 먼저 babel-plugin-styled-components를 설치한다. yarn add babel-plugin-styled-components .babelrc에서 SSR를 사용하도록 설정 .babelrc에는 ..

Next.js에서 제공하는 Image 컴포넌트를 사용해서 이미지 로딩을 하는 중, 거의 700ms 정도에 육박하는 충격적인 로딩속도를 보여주어서 구글링 해봤다. 이건 Image 컴포넌트가 사용하는 기본 이미지 프로세서 때문이라고 하는데, sharp 패키지를 설치하면 해결된다. 패키지를 설치하면 정말 빠르게 이미지가 로딩되는 것을 확인할 수 있다. yarn add sharp

next-connect는 Next.js에서 미들웨어를 사용할 수 있게 도와주는 라이브러리다. 여기서 말하는 미들웨어는 웹 서버에서의 미들웨어(Middleware)와 의미가 통하는데, 요청과 응답 사이 중간에서 한번 거치면서 수행되는 함수다. 보통 여기서 연결된 DB 객체를 넘겨준다던가 세션 관리를 하게된다. 시작하기 몽고 DB를 설치하자. 귀찮게 몽고DB설정까지는 다루지 않을 것이다. 사실...패키지 설치부터 말하는 것 조차 귀찮지만!ㅋㅋㅋ yarn add mongodb middleware라는 폴더를 생성하고, 그 아래에 database.ts를 추가시켜 주자. 이 파일에서는 연결된 mongodb가 없다면 새로 연결해서 req 객체에 담아 넘겨줄 것이다. src/ ├── pages/ │ └── api/ │..

yarn dev로 development 모드에서 개발 중일때 useEffect 내의 코드가 두 번 호출된다. hydration 이후에 업데이트를 하므로 2번 호출되는 것은 정상적인 동작이지만, 이러한 behavior를 원하지 않을 때가 있다. 그럴경우 next.config.js에서 reactStrictMode를 false로 바꾸어주면 된다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: false, } module.exports = nextConfig 관련해서 더 많은 정보를 얻고싶다면, github 이슈를 참고하면된다.

환경변수를 프론트에서 사용하려 했을때 .env.*에 선언되어있음에도 불구하고 undefined로 나올 것이다. 다음과 같이 환경변수가 선언되어있다고 가정하면, MY_NAME="lou" Next.js Version 9.4 이상 Next.js 버전이 9.4+ 인경우, 환경변수 이름에 NEXT_PUBLIC_을 프리픽스(prefix) 붙여주면 사용가능해진다. 따라서, MY_NAME 환경 변수명을 NEXT_PUBLIC_MY_NAME으로 바꾸어준다면 해결된다. Next.js Version 9.4 미만 그렇지 않을 경우 next.confg.js에 사용할 환경변수를 설정해주어야한다. module.exports = { env: { MY_NAME: process.env.MY_NAME, }, }

네이버 카페에서 댓글에 달린 사진을 다운받으려면 번거롭게 댓글을 열어서 캡쳐를 해야한다. 아래 코드는 현재 페이지의 모든 댓글 이미지의 src를 추출해서 다운받는 일을 해준다. *보완해야할 점은 대댓글 다운로드 혹은 작성자의 댓글 다운로드가 안되는건데, 정확히 뭔지는 나중에 알아봐야겠다...잠이온다 새벽2시라~ㅋㅋㅋ async function start() { let images = getImages(); for (var i = 0; i < images.length; i++) { await downloadImage(images[i]); } console.log("다운로드가 완료되었습니다."); } function getImages() { let images = Array(); let iframe = do..