인증서 발급을 위해 chat gpt와 구글링을 통해 발급 방법을 알아보았지만 유튜브의 무료 강의가 더 도움이 되었다. 참고한 영상은 본문에 링크로 표시해 두었다. 1. Let's Encrypt로 TLS(Transport Layer Security) 인증서 발급 우분투에서 진행하였고 certbot이 이미 설치된 상태에서 진행하였다. 그리고 nginx 서버를 사용하고 있다. TLS 인증서 발급 시 리룩스 명령어는 다음과 같은 순서로 사용하였다. 리눅스 정보 확인(이 부분은 생략해도 됨) : hostnamectl 기 발급된 인증서 확인(최초 발급이라면 생략) : certbot certificates 인증서 발급 전 웹서버 중지 : service nginx stop 포트 80 및 443을 사용하는 프로세스 확인..

1. 업로드한 이미지 로드 안 되는 문제사용자가 업로드한 이미지를 public 폴더에 저장되도록 했고, DB에는 해당 파일명이 누적되도록 했다. 이 기능들은 순조롭게 잘 동작했다. 하지만 업로드한 이미지를 브라우저에서 보려고 리스트를 열었을 때는 엑박만 보였다. 2. public 폴더의 내용은 빌드 시점에 결정Next.js의 public 폴더의 내용은 빌드 시점에 결정된다. 즉, 빌드 이후에 추가된 내용은 사용하 수 없다. 개발 모드에서는 이런 현상이 발생하지 않았는데, 그 이유는 프로젝트의 코드가 변경되면 프로젝트를 다시 실행하기 때문이다. 서버에 빌드하여 배포한 경우에도 이미지 업로드 후 해당 서버를 죽이고(나의 경우 pm2 delete 명령) 다시 구동하면 업로드한 이미지가 정상적으로 로드되는 것을..

1. 한 페이지에 하나의 GLTF만 렌더링 되는 문제 페이지에 하나의 GLTF 파일을 이용해 여러 개의 모델을 렌더링 하고자 하였다. 이미지 태그를 이용하는 방식처럼 당연히 가능할 거라 생각했는데 현실은 [그림 2]와 같이 마지막 하나의 구성만 적용되었다. 여러 테스트 중에 GLTF의 복사본의 만들어 이름을 달리하여 로드했더니 원하는 결과를 얻을 수 있었다. 하지만 렌더링 모델의 개수만큼 동일한 내용을 담고 있는 GLTF 파일을 무수히 만들 수는 없는 일이었다. 2. Clone으로 문제 해결 react-three-fiber에서 Clone 컴포넌트를 제공하고 있었다. 이 기능을 이용하여 [그림 2]와 같이 하나의 GLTF를 통해 2개 이상의 모델을 화면에 렌더링 할 수 있었다. 해당 코드는 아래와 같다. ..

1. App Router Next.js 13 이상은 App Router를 지원한다. src/app 폴더 아래에 원하는 경로에 해당하는 폴더를 생성하면 URL의 Path가 된다. 이때 폴더 안에는 반드시 page.tsx 컴포넌트가 존재해야 한다. 이점을 이용해서 VSCODE에서 라우터 정보를 한눈에 확인할 수 있다. App Router 방식은 폴더가 경로가 되기 때문에 별도의 라우터 코드가 존재하지 않는다. 이 점은 매우 편리하지만 프로젝트의 규모가 커지면 라우터를 한눈에 확인하기가 어렵다. 2. 라우터 한눈에 보기 VSCODE에서 Ctrl + p 키를 누르면 상단에 검색창이 활성화된다. page를 입력하면 [그림 1]과 같이 라우터 정보를 한눈에 확인 가능하다. 프로젝트의 크기가 커질수록 라우터가 복잡해..

1. pyinstaller로 무한 삽질 자주 있는 일은 아니었지만 python으로 작성한 코드를 exe로 빌드할 때 pyinstaller를 이용했었다. 빌드할 때마다 어찌저찌 결과물을 낼 수 있었지만 유쾌했던 기억이 없다. python 최신 버전을 지원하지 않아 다운그레이드를 해야 한다던지, 어떤 컴퓨터에서는 문제없이 빌드가 되었는데 다른 PC에서는 안된다던지, 빌드 명령을 내리고 항상 기도했던 기억만 남아있다. 이번에도 빌드는 성공적으로 되었는데 실행이 되지 않는다. 터미널에 찍힌 에러 메시지를 보니 python311.dll 파일이 없다고 한다. 그래서 에러 메시지에 출력된 폴더를 생성하고 해당 파일을 넣어 줬다. 이 정도로 친절을 베풀었는데 보답은 첩첩산중이다! 차라리 더 늦기 전에 다른 라이브러리로..

1. selenium 다중 URL 크롤링 중 누락 문제 어떤 사이트에 100개의 항목이 있는 10개의 페이지가 있다고 생각해 보자! 각 페이지는 URL이 다르지만 구조는 같다. 따라서 하나의 크롤링 코드로 10개에 대응이 가능하다. 이 얼마나 간단한 문제인가? 그냥 반복문을 돌리면 끝이다! 하지만 실제는 그렇게 간단하지 않았다. 첫 번째 시도한 페이지에서는 100개 항목을 잘 긁어 왔다. 하지만 그다음 페이지들은 줄줄이 19개를 넘지 못했다. 2. 일부 누락 문제 webdriver를 페이지마다 열고 닫고를 반복하는 방식을 시도한 결과 마지막 페이지를 제외하고는 100개의 항목을 모두 가져왔다. 마지막 페이지의 경우 79개만 긁어오고 있었다. 해당 페이지를 좀 더 살펴보니 렌더링 할 때 서버로부터 데이터를..

1. useEffect 훅에서 play() 메서드 작동 안 됨 3D 모델의 애니메이션을 재생하고자 하였다. 아래의 코드를 적용해 봤는데 애니메이션이 플레이되지 않았다. import React, { useState, useEffect } from "react"; import { GLTFLoader } from "three/addons/loaders/GLTFLoader"; import { useLoader } from "@react-three/fiber"; const Model = ({ characterPath, scale }) => { const gltf = useLoader(GLTFLoader, characterPath); const mixer = new THREE.AnimationMixer(gltf.s..

1. Python의 count() 문자열 메서드 문자열에서 특정 문자열의 개수를 구하고자 한다. Python에는 count() 문자열이 존재하기 때문에 아래 코드와 같이 쉽게 구할 수 있다. # 파이썬 코드 s = "javascript" a_count = s.count('a') # count() 문자열 메서드 이용하여 특정 문자열 개수 구하기 print(a_count) # 2 2. javaScript의 split() 문자열 메서드 응용 JavaScript에는 Python과 같은 메서드가 존재하지 않지만 split() 문자열 메서드를 응용하면 같은 결과를 얻을 수 있다. // 자바스크립트 코드 const s = "javascript"; const aCount = s.split("a").length - 1;..