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은 클라우드 네이티브 환경에서 동작하는 관계형 데이터베이스 서비스로, 개발자들이 대규모의 데이터..