- NextJS 에는 다른 frontend 프레임워크들 처럼 개발시점의 strict 모드에서 코드가 2번 실행되는 문제 아닌 문제가 있습니다.클라이언트 사이드의 생명주기에 따라 1번만 실행되는 것을 가정하고 코드를 작성한 순간 오동작으로 인해 버그처럼 작용하는 경우가 있죠. 대표적인 예로는, 클라이언트 사이드 랜더링 직후 useEffect 에서 서버측에 데이터를 요청하려고 할 때에,useEffect 가 한번 실행되었다가 바로 취소되어서 오동작을 경험하는 경우가 있습니다. 물론, 배포모드로 실행하면 문제가 없어지지만,개발시에 테스트를 위해 일일이 개발모드로 빌드 및 실행을 하는 것은 번거로운 일이므로 이를 패턴화 시켰습니다. - useRef 및 개발 모드 탐지를 통해 처리가 가능합니다.페이지 코드에서,co..

- 이번 포스팅에서는 ReactJS 에서 페이지 이동시 화면 전환 애니메이션을 적용하는 방법에 대해 설명하겠습니다. (진행)- 바로 설정부터 시작하겠습니다.>> npm install framer-motion명령어로 페이지 화면 전환을 지원하는 라이브러리를 설치합니다. 저는 현재 버전으로, "dependencies": { "framer-motion": "^12.23.24", "i18next": "^25.6.1", "react": "^19.1.1", "react-dom": "^19.1.1", "react-i18next": "^16.2.4", "react-router-dom": "^7.9.5" }, 위와 같이 12.23.24 버전을 사용중입니다. - react-router-..

(상황 설명)- NextJS 에서 useEffect 를 사용하여 클라이언트단에서 페이지가 띄워지는 시점에 동작하는 코드를 작성.일반적인 상황에서는 동작을 잘 하지만 새 탭을 열어서 페이지를 요청한 경우 useEffect 가 실행되지 않는 문제가 발생 - 브라우저가 처음 실행된 상황에서는 문제가 없음.일단 해당 페이지로 이동하고, 새 탭을 띄워서 다른 탭으로 해당 사이트에 이동했을 때에 문제가 발생 (실험 진행)- 기존 프로젝트가 여러 라이브러리를 사용하고 있으므로 라이브러리 사용의 충돌 때문일 경우와 NextJS 고유의 특성일 가능성, 그리고 문제 발생 방식에 따라 브라우저단에서 페이지를 캐싱하는 것임을 가정. - NextJS 관련 특성에 대하여 이러한 현상은 인터넷 및 ChatGPT 에도 결과가 나오지..

- 이번 포스팅에서는 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 에서 검색엔진 최적화를 어떤 방식으로 처리하는지를 정리할 것입니다. (결과..

- 이번 포스팅에서는 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..

- 이번 포스팅에서는 ReactJS 를 사용하여 SSE 이벤트를 수신하는 방식을 알아보겠습니다.SSE 기술에 대한 설명은, Springboot SSE(Server Sent Event) 구현하기 포스트를 참고하세요. - SSE 에 대하여 간단히 설명하자면,application/json 형식의 단발식 요청 - 응답 네트워크 기술이 아니라,Socket 과 같이 연결식으로 데이터를 받아오는 기술인데,양방향으로 정보를 교환하는 것이 아닌, 단방향으로 서버에서 발행한 이벤트를 수신만 하는 기술을 의미합니다. ChatGPT UI 에서, 위와 같이 한번에 답을 반환하는 것이 아니라,토큰 하나씩 지속적으로 결과를 반환하는 기술을 구현한다면 서버에서 반환하는 응답을 한번에 받는 것이 아니라 계속해서 연결해 두어야 하며, ..