Timpossible history

웹사이트 구현 중, 대용량의 비디오 파일을 서버에서 전송을 해야하는 기능을 구현해야했다. 클라이언트 사이드에 파일을 저장시켜놓을 수가 없으니 서버에서 데이터 처리를 해야하는데, 이 서버에서 대용량 비디오의 데이터를 보내면서 재생시키도록 하기 위해서는 스트리밍 기능을 구현해야 한다. 이 포스트에서는 이 스트리밍 기능을 Express JS 기반 서버에서 구현해보도록 할 예정이다. 1. 프로젝트 시작 mkdir videoStreaming cd videoStreaming npm init -y videoStreaming이라는 폴더를 만들어 이동해주고, npm init을 해준다. 그리고 프로젝트에 필요한 패키지를 설치해준다. npm i express pug express와 html 템플릿 엔진 pug를 설치해준다...

Python을 실행시키려면 가상환경을 만들고 그 안에서 코드를 실행시킬 수 있는 환경들을 만들어야 하는데, 파이썬이 설치되어 있지 않거나 파이썬 소스코드를 돌릴 수 있는 환경이 갖추어져 있지 않은 상태에서도 실행시킬 수 있게 도와주는 것이 .exec, .app(맥OS)나 .exe(Windows) 확장자 이름을 갖는 응용프로그램이라고 할 수 있다. 파이썬 라이브러리 중에서는 이러한 응용 프로그램을 만들 수 있도록 도와 주는 라이브러리가 많지만 대표적으로 Tkinter나 PyQt5가 있다. Tkinter는 잘 알 것이고, 이 포스트에서는 PyQt5를 이용해서 프로젝트를 진행하도록 하겠다 1. 프로젝트 시작 python3 -m venv exe_maker 먼저 가상환경을 만들어주는 코드를 실행해준다. exe_m..

커뮤니티 웹사이트나 블로그 형식을 담은 웹사이트를 만들다보면, WYSIWYG(What You See Is What You Get), 텍스트 에디터를 만들 때가 있는데, 이 포스트에서는 그 중 코드 블럭을 생성하는 에디터를 구현해보고 highlight.js를 이용해서 코드를 구분지어주는 작업을 해보도록 하려고한다. 1.프로젝트 설치 npm i react-quill highlight 먼저 필요한 패키지들을 설치해준다. 2. 프로젝트 구현 코드 설정 "use client"; import React, { useState } from "react"; import styles from "./editor.module.css"; import ReactQuill from "react-quill"; import "reac..

0. 사이트맵(Sitemap)이란? 사이트맵은 site + map 단어의 조합으로 깊게 해석할 필요 없이, 웹사이트 지도라고 생각해볼 수 있다. 구글 검색 센터에 따르면, '사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일'이라고 한다. * 사이트맵 파일이 필요한 이유? 한 마디로 말하자면, SEO 최적화를 위함이다. 구글 및 네이버 같은 플랫폼들의 검색 엔진 크롤러가 웹사이트의 정보를 긁어 모을 때 아주 효율적으로 정보를 제공할 수 있도록 돕는다. 물론 이 파일이 없다고 검색 엔진에 노출되지 않지는 않지만, 최적화라는 말의 장점을 이뤄줄 수 있는 파일이라고 하겠다. 그렇기에 Sitemap.xml 파일은 검색 엔진이 웹 사이트를 크롤링할 때 사용하는 파일로, 사이트의 페..

참고 : https://nextjs.org/docs/app/building-your-application/optimizing/metadata Optimizing: Metadata | Next.js Use the Metadata API to define metadata in any layout or page. nextjs.org 1. 메타데이터와 그 장점 메타데이터가 무엇인지, 기능과 그 장점이 무엇인가? 메타데이터와 SEO 최적화는 웹 사이트나 앱의 검색 엔진에서의 노출을 높이고 사용자 경험을 향상시키는 중요한 요소이다. 이를 효과적으로 설정하면 다음과 같은 좋은 점을 얻을 수 있다. 1. 검색 엔진 노출 향상: 메타데이터를 적절하게 설정하면 검색 엔진에서 웹 페이지의 내용을 더 잘 이해하고 인덱싱할 수..

넥스트 프레임워크가 13버전으로 업데이트 된지 시간이 좀 지났지만, 뒤늦게 적응하려다가 기존 버전과는 약간 다르게 API route 구현해야 함을 깨닫고, 공식 웹사이트에서 살펴본 것들을 정리해보려고 한다. 참고 : https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments Routing: Route Handlers | Next.js Create custom request handlers for a given route using the Web's Request and Response APIs. nextjs.org 1. API routes? API Routes는 Next.js 애플리케이..

0. 간단한 Planetscale 소개 데이터베이스는 웹/앱 개발에서 아주 중요한 부분을 차지한다고 할 수 있다. 데이터베이스 서비스를 선택할 때는 안정성, 성능, 확장성 등 여러 가지 요소를 고려해야한다. 하지만 데이터베이스 서비스는 가격 정책이 좀 부담스럽기 때문에 본인 같은 소규모 서비스 시작 단계이거나 개발 단계에서는 돈을 써가면서 데이터베이스 서비스를 유지하기에 부담이 될 수 있다. 그러다가 알게 된 것이 Planetscale이었다. Planetscale은 새로운 혁신적인 데이터베이스 서비스로 주목을 받고 있다고 한다. 서비스를 출시한지 5년도 안 된 아주 fresh한 서비스이다. Planetscale은 클라우드 네이티브 환경에서 동작하는 관계형 데이터베이스 서비스로, 개발자들이 대규모의 데이터..

이 글에서는 Nodemailer로 메일 보낼 때 커스터마이징하는 방법을 알아보도록 한다. 1. Email Template 만들기 /src/component/emailTemplate 경로 안에 .jsx 파일을 만들어준다. .jsx 파일을 쓰는 이유는 그냥 편해서이다. Next JS 프레임워크를 쓰는 김에 emailTemplate도 리액트 컴포넌트 형식으로 만들어서 쓰면 직관적으로 보기 좋기 때문에 써보았다. 아래에서 살펴보겠지만, 원래 nodeMailer로 보내는 메일의 형식은 text로 작성되어야 하는데 스타일링 커스터마이징을 하려면 리액트처럼 작성하기 간편한게 없다. /src/component/emailTemplate/emailTemplate.jsx import React from "react"; co..

카카오톡 데스크 앱을 이용해서 자동으로 메세지를 보내기 위해서 여러 방면으로 알아봤지만, 당연히 카카오 open API는 이런 걸 허용할리는 없었고, 사용자의 기기를 직접 제어하는 코드를 짜야한다는 결론에 이르렀다. 동일한 메세지를 한 두개의 채팅방에 보내야하는 경우에는 상관이 없지만 방의 갯수가 늘어나면 늘어날 수록 여간 귀찮은 일이 아닐 수 없으니, 아주 편하게 자동으로 보낼 수 있을 것 같아 코드를 짜보았다. 1. 라이브러리 설치 사용자의 컴퓨터를 제어할 수 있는 라이브러리 중에는 pyautogui 같은 매우 유용한 라이브러리가 있지만, 미숙한 나의 실력 탓인지 나의 맥북에서는 잘 동작하지 않았기 때문에 여러 라이브러리를 탐색하던 중 찾게 돤 아주 좋은 라이브러리 pynput을 설치했다. 그리고 키..

이번에는 NextJS 웹사이트를 대표적인 프론트엔드 웹사이트 무료 배포 서비스인 Cloudflare에 배포해보록 하겠다. 사실 NextJS는 Vercel이라는 아주 쉽고도 개쩌는 웹 배포 사이트가 있어서 Cloudflare에 왜 굳이 배포하느냐 싶기도 하지만, Cloudflare 또한 무료로 사용할 수 있는 프론트엔드 웹 배포 사이트 중 단연 탑티어라고 할 수 있기도 하고, next JS를 지원하는 툴이 업데이트 되어서 시도해보았다. 참고 Deploy a Next.js site - Cloudflare Docs 1. 프로젝트 준비 npm create cloudflare@latest my-next-app -- --framework=next cd my-next-app my-next-app이라는 이름의 프로젝트..