- 이번 포스팅에서는 NextJS 의 커스텀 에러 페이지를 처리하는 방식에 대해 알아보겠습니다. - NextJS 에서는 기본적으로 제공하는 에러 페이지가 존재합니다.기본적으로 가장 흔하게 발생하는 에러인,요청한 주소에 대한 반환값이 없을 때에 대한 404 Not Found 에러와,서버측 실행 로직이 잘못되어 에러가 났다는 것을 뜻하는 500 에러입니다. 기본 NextJS 에서 404 에러가 발생하면, 위와 같이 기본 에러 페이지가 나옵니다. 제법 깔끔해서 그대로 사용해도 무방하지만 서비스에 맞는 커스텀 에러 페이지를 만드는 방법을 아래에 정리합니다. - 기본적인 에러 코드 페이지 처리는,layout.tsx 가 위치한 루트 경로에 미리 지정된 이름의 에러 페이지를 작성하기만 하면 됩니다. 두 종류이며,no..

- PWA(Progressive Web App) 는 웹 사이트를 마치 앱처럼 사용할 수 있게 해주는 기술입니다. 이것이 설정된 사이트는 위에서 보이는대로 앱에서 열기 버튼이 나오고,이것을 누르면, 이처럼 PWA 애플리케이션 창이 떠서 브라우저의 웹사이트가 아니라 마치 OS 의 애플리케이션처럼 사용할 수 있게 되죠.대다수의 사이트에서는 그리 필요한 기능은 아니지만, 애플리케이션처럼 띄워두고 사용하는데에 적합한 종류의 사이트라면 UX 에 좋은 옵션을 제공하는 기술이며, nextjs 에서 기본 제공해주는 기술이므로 처음부터 이를 고려하여 처리하는 것이 나쁘지 않죠. - nextJS 에서 PWA 를 사용하기 위해서는 manifest.json 파일이 필요합니다.http://localhost/manifest.j..

- 이번 포스팅에서는 NextJS 에서 멀티 프로필로 환경 설정을 하는 처리 방식에 대해 알아보겠습니다.카카로 로그인을 구현할 때에 필요한 카카오 API Key, 백엔드 서버와 통신할 때 필요한 보안키, 그외 설정값을 어떤식으로 처리하는 것이 좋은지에 대해 정리합니다. (환경변수 분리의 중요성)- 백엔드 프론트엔드 할 것 없이 환경변수는 매우 중요한 정보입니다.탈취되거나 노출되면 위험한 종류의 정보도 있기에, 이를 그대로 Github 와 같은 VCS 에 올려서 누구나 접근이 가능하게 두는 것은 위험한 일이며, 같은 팀 내에서도 권한에 따라 숨겨야 하는 정보도 있죠. - 보안적 측면에서의 중요성 뿐만 아니라, 환경변수를 분리하는 것은 클린 코딩의 원칙에도 중요한 작업입니다.백엔드 서버로 요청을 보낼 때, ..

- 이번 포스팅에서는 NextJS 에서 다크모드를 처리하는 방식에 대해 정리하겠습니다.Client Side Rendering 인 ReactJS 에서는 상태값을 클라이언트 로컬에 두는 방식으로 간단하게 처리가 가능했는데,NextJS 에서는 조금 더 고려할 사항이 있습니다. 이 과정에서 Server Side Rendering 에 대해 생각해보고,NextJS 에 적합한 테마 적용 방식과 리소스 정리 방법에 대해 알아보겠습니다. (쿠키 방식 컬러 테마 처리)- 웹 UI 분야에서 기본적인 다크모드 처리는 CSS 단에서 처리가 가능합니다.@media (prefers-color-scheme: dark) { /* 다크 모드일 때 적용할 스타일 */}@media (prefers-color-scheme: light) {..

- 이번 포스팅에서는 NextJS 를 사용하여 다국어 처리를 어떻게 하는지와 SEO(Search Engine Optimization, 검색 엔진 최적화)에 대해 알아보겠습니다.아시다시피 IT 는 물리적 공간의 제약을 넘어서는 기술이고, 국내 시장에 비해 국제시장의 규모는 굉장히 가능성이 많은 기회를 제공합니다.서비스 종류에 따라 다르긴 하지만, 언제든 다국어를 지원할 수 있게 처리를 해둔다면 추후 고생할 것 없이 이득을 볼 수 있겠죠.또한, 웹 서비스를 만드는 이유와, 특히 Server Side Rendering 프레임워크인 NextJS 를 사용하는 이유는 검색엔진이 내 사이트를 잘 파악해서 홍보하게 만드는 것이므로, NextJS 에서 검색엔진 최적화를 어떤 방식으로 처리하는지를 정리할 것입니다. (결과..

- 이번 포스팅에서는 처음으로 티스토리 블로그 광고 심사에 통과한 기념으로,제가 시도했던 Google AdSense 광고 심사 절차에 대해 설명드리겠습니다.광고 심사는 잘 하시는 분이라면 빠르게 몇번이고 심사에 통과하시는 분도 있지만, 저의 경우는 블로그에 무슨 문제가 있던 것인지 몇번이고 심사에 통과되지 못했었는데, 저와 비슷한 분이 계시다면 그대로 따라할 수 있도록 제가 시도한 방식에 대해 그대로 공유드리겠습니다. (티스토리 블로그 수익화 방법)0. 먼저 광고 승인 신청시의 상황 설명부터 하겠습니다.저는 티스토리 블로그를 사용하여 IT 공부 정리를 한지 5년 가까이 되었으며, 본 블로그 이전에 블로그가 있었습니다.해당 블로그는 대략 하루에 300명 가까이 들어올 정도로 어느정도 가꾸기는 했지만, 광고..

- 이번 포스팅에서는 MSA(Micro Service Architecture) 에서 인증/인가 서비스를 따로 떼어내어 운용하는 방식의 장점과 그 구조, 효율적인 구성 방식에 대해 알아보겠습니다.실제 코드 구현에 대한 설명글이 아니므로 프로그래밍 언어, 프레임워크와는 무관한 이론적인 내용이 될 것입니다. (MSA 의 중요성)- 먼저 MSA 의 중요성에 대해 먼저 설명하겠습니다.제가 이 글을 쓰는 이유는, 아직 MSA 를 본격적으로 적용하지 않는 개발자들이 많음을 알고 있기 때문이며,다른 것은 아니더라도 인증/인가 서비스 정도는 MSA 로 구현한다면 정말 도움이 많이 될 것이라고 생각하기 때문입니다.고로 사용하지 않는다는 것은 해당 기술의 중요도나 장점에 대해 모르기 때문일 것이므로 기본부터 설명드리는 것입..

- 이번 포스팅에서는 소형 LLM 을 로컬에서 동작시키는 방식의 기본에 대해 알아보겠습니다.구동시킬 모델은 딥러닝 모델의 GitHub 라 할 수 있는 HuggingFace 에서 가져왔으며,현 시점 오픈된 소형 모델들 중 한글 성능이 우수한 Naver 의 Hyper Clova X Seed 1.5B 모델을 동작시킬 것입니다.(조금 더 무거운 2.1B 모델로는 kakao 의 kanana1.5 nano 모델을 추천합니다.) - 모델 선정 기준 정하는 방법아시다시피 LLM 모델은 병렬 연산이 많은 것으로 유명한 딥러닝 모델들 중에서도 Large Language Model 이라는 이름이 붙을 만큼 무거운 모델입니다. (만약 LLM 모델에 대해 조금 더 자세히 이해하고 싶다면, LLM 의 기본이 되는 Transfor..

- 이번 포스팅에서는 Pytorch 프로젝트로 OCR 글자 인식을 구현해보겠습니다.개인적으로 진행하려는 프로젝트가 OCR 을 사용하므로 저는 앞으로 이 코드를 기반으로 OCR 모듈의 인터페이스를 결정하여 지속적으로 모델을 발전시켜 나갈 생각입니다. - 동작 환경은 Python 3.12, Torch 2.6.0 GPU Supported 입니다. # torch 버전 확인/ print("torch 버전 확인") print(torch.__version__) print("") # CUDA 가속 확인 print("CUDA 가속 확인") print(torch.cuda.is_available()) if torch.cuda.is_available(): print(to..

- 이번 포스팅에서는 Zoom 과 같은 인터넷 영상 통신 서비스에서 실시간 배경 합성을 어떤식으로 구현한 것인지를 알아보겠습니다.간단히 코드만 공개드립니다. 1. ReactJS 에서 Tensorflow 를 동작 가능하게 지원해주는 라이브러리를 사용하기 위하여,생성한 ReactJS 프로젝트에서 터미널에,npm install @tensorflow/tfjs @tensorflow-models/body-pix 위 명령어를 입력하여 ReactJS 텐서플로 라이브러리를 설치하면 준비가 됩니다. 2. ReactJS 코드는 아래와 같습니다.import React, { useEffect, useRef, useState } from "react";import * as bodyPix from "@tensorflow-model..