ALTER SEQUENCE [TableName]_[Column]_seq restart with [Number]
// example
/** Contents 테이블의 시퀀스로 지정된 PK 키의 ID 속성의 시퀀스를 1로 초기화*/
ALTER SEQUENCE Contents_ID_seq restart with 1
개발자 커밋메세지 용어 정리
Next.js 로컬 개발환경 HTTPS 적용하기
What is Barrel Pattern?
필요한 여러가지 모듈들을 하나의 모듈로 통합해주는 패턴입니다.
여러 import 모듈들을 하나의 파일에서 re-export 하여 여러 줄의 import 라인을 하나의 라인으로 줄여주는 효과가 있습니다.
// demo/foo.ts
export class Foo {}
// demo/bar.ts
export class Bar {}
// demo/baz.ts
export class Baz {}배럴 패턴을 사용하지 않을 때는 위의 모듈들을 다음과 같이 개별적으로 import 합니다.
import { Foo } from '../demo/foo';
import { Bar } from '../demo/bar';
import { Baz } from '../demo/baz';대신 배럴 패턴을 사용하여 demo/index.ts 파일에 다음 라인을 입력합니다.
// demo/index.ts
export * from './foo'; // re-export all of its exports
export * from './bar'; // re-export all of its exports
export * from './baz'; // re-export all of its exports이제 다음 한줄의 import 로 모든 모듈을 사용할 수 있습니다.
import { Foo, Bar, Baz } from '../demo'; // demo/index.ts is implied원문 해석 : https://basarat.gitbook.io/typescript/main-1/barrel
참고 블로그
https://xionwcfm.tistory.com/392
https://medium.com/@denisultanoglu/using-barrel-pattern-in-react-typescript-projects-e8e855730182
Nginx Fetch failed [ net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK) ]
어느날 부터 인지는 모르겠는데, 어렴풋이 생각해보면 2주정도 전부터 그랬던듯, glb 임포트하는 뷰어 페이지에 접속하면 fetch failed 오류가 발생하면서 페이지로딩이 아예 안되는 문제가 발생했다.
최근에 업데이트 한거라곤 사이트 SSL 인증서 업데이트와, Npm 모듈 업데이트 ( Next.js, Three.js, React.js ) 밖에 하지 않아서 자연스럽게 Next.js 버전 업데이트가 문제라고 단순하게 생각했었다.
Public 폴더 경로가 바뀌었는지 아니면 Config 가 바뀐건지 구글 검색과 Chatgpt 질문을 던져 나오는 해결방법들을 적용해도 전혀 해결될 기미가 보이지 않았다.
그렇게 이틀정도 문제 해결방법을 찾아서 헤메고 있다가 문득 Nginx 오류 로그를 보면 이유를 알 수 있을 것 같아 맥북 열어서 오류 로그를 출력해보았다.
// 맥북의 nginx 로그 파일의 위치
// /usr/local/var/log/nginx/
// error.log 오류 메세지 기록 파일
// access.log 요청 기록이 저장되는 파일
// 설정파일 (/usr/local/etc/nginx/nginx.conf 또는 /etc/nginx/nginx.conf 의 error_log
// 디렉티브를 확인 하여 로그 파일 위치를 명확히 알 수 있음.
// grep error_log /usr/local/etc/nginx/nginx.conf
// 실시간 로그 확인
tail -f /usr/local/var/log/nginx/error.log
// 다중 로그 파일 모니터링
tail -f /usr/local/var/log/nginx/error.log /usr/local/var/log/nginx/access.log
// ** GoAccess : 실시간 웹 로그 분석 도구
// ** Inav : 로그 파일 탐색 및 분석 도구서버의 오류 메세지 파일을 출력해보고 Fetch failed 문제의 원인을 바로 파악 할 수 있었다.
2024/11/27 23:56:41 [crit] 19436#0: *2470 open() “/usr/local/var/run/nginx/proxy_temp/1/16/0000000161” failed (13: Permission denied) while reading upstream, client: ——–, server: 192.168.0.18, request: “GET /daft_punk_in_end_of_line_club.glb HTTP/1.1”, upstream: “http://127.0.0.1:3000/daft_punk_in_end_of_line_club.glb”, host: “quasarxr.com”, referrer: “https://quasarxr.com/SubApp”

현재 내가 만들고 있는 웹사이트는 라이트세일 – 홈 웹서버 구조의 nginx 리버스 프록시를 사용하여 구현되어 있다. 이 때 proxy_temp 폴더에 임시 파일을 캐싱하는데 맥북에서 nginx 서버에 접근권한이 없어서 파일 요청이 실패하고 있었던 것이었다. 그렇다면 해당 폴더의 디렉터리 권한을 체크해 보고 문제가 있다면 권한 설정을 해주면 되겠다.
// 다음 명령어로 디렉토리의 권한을 확인한다.
ls -ld /usr/local/var/run/nginx/proxy_temp
소유권 & 허가권 확인 방법

확인해보니 디렉토리 권한이 소유그룹에 하나도 없는것이 보인다. 이로써 문제의 원인은 명확히 파악 되었으니, 해당 폴더의 nginx 의 접근권한을 풀어주면 해결이 되겠다.
// proxy_temp 디렉토리 권한을 nginx 프로세스가 접근할 수 있도록 변경
// 일반적으로 nginx 는 www-data 또는 nobody 사용자로 실행된다.
sudo chown -R $(whoami):staff /usr/local/var/run/nginx/proxy_temp
// -R 하위 디렉터리의 모든 권한 변경
// $(whoami):staff 바꿔줄 소유자:그룹명 $(whoami) 는 현재 사용자명을 말한다.
sudo chmod -R 755 /usr/local/var/run/nginx/proxy_temp그 다음 Nginx 설정을 확인 해주면 마무리 되겠다.
// nginx.conf 파일 열기
sudo nano /usr/local/etc/nginx/nginx.conf
// proxy_temp_path 가 아래와 같이 설정되어 있는지 확인한다.
proxy_temp_path /usr/local/var/run/nginx/proxy_temp 1 2;
// 변경 사항을 저장하고 종료 한뒤 nginx를 재시작 한다.
sudo nginx -s reload그런데 문제가 해결된 후 생긴 궁금증은 권한설정이 잘못 되어있었다면 왜 처음에는 문제가 없다가 몇일전 부터 문제가 생긴것인가 이다. 이것에 대한 답은 아직 찾지 못하였다.
chmod / chown ? = http://www.redcrow.co.kr/wordpress/?p=532
Solve block alignment problem with wordpress function

위 그림과 같이 워드프레스 글 편집기(gutenberg editor)에서 코드 블럭만 다른 블럭과 다르게 왼쪽 정렬이 되고 있는 모습이다. 최종편집된 글을 보면 코드블럭이 다른 블럭들과 마찬가지로 가운데 정렬이 되어 출력되는데 편집기에서도 가운데 정렬이 되도록 하고 싶어 해결방법을 perplexcity에 물어보게 되었는데 총 2가지 답변을 받을 수 있었다.
두 가지 방법 모두 워드프레스에 커스텀 함수를 추가하여 스타일을 바꿔주는 방식으로 다음 경로의 워드프레스 서버의 파일에 접근 할 수 있어야 한다.
[..server directory]/wordpress/wp-content/themes/[you using theme name]/functions.php
CSS 를 통한 방법
function fix_block_alignment() {
if (get_current_screen()->is_block_editor()) {
echo '<style>
.editor-styles-wrapper .wp-block {
margin-inline: auto !important;
}
</style>';
}
}
add_action('admin_head', 'fix_block_alignment');만약 위 함수를 추가하여 해결이 안됐을 경우
/*
* 이 코드는 전체 너비 블럭의 정렬 문제를 해결하는데 도움이 됩니다
*/
add_action('enqueue_block_editor_assets', function() {
wp_add_inline_style('generate-block-editor-styles',
'.wp-block[data-align="full"] {
max-width: none;
}'
);
}, 20);맥북(2015 pro late) 닫았을때 잠자기 방지 셋업
잠자기 방지 설정 방법
1. 터미널 열기
Spotlight로 “터미널” 혹은 “terminal” 검색 (⌘ command + space)
2. 잠자기 방지 설정 세팅
아래 커맨드를 입력하면 노트북을 닫아도 꺼지지 않는다.
sudo pmset -c disablesleep 13. 잠자기 방지 설정 해제
아래 커맨드를 입력하면 노트북을 닫으면 정상적으로 꺼진다.
sudo pmset -c disablesleep 0(?.) what is this mean? (Optional Chaining)
next.js authentication 예제를 살펴보면 다음과같은 코드가 있다
{state?.errors?.email && <p>{state.errors.email}</p>}
state?.errors?.email 를 보면 각 참조(.) 중간에 ? 가 있는데 이것은 접근하려는 오브젝트나 호출하려는 함수의 참조 오류가 있을 때 오류를 발생시키지 않고 undefined 를 반환 하게하는 연산자이고 이를 옵셔널 체이닝 이라고 부른다.
if문으로 nullish 검증을 하는 코드를 줄여줄 수 있는 연산자라 편하긴 한데 오류를 내지 않고 undefined 를 반환하게되어 디버깅에 혼란을 줄것같다. UI 코드나 중요하지 않은 부분에 사용하면 좋을 것 같다.
How to solve that next.js and AWS RDS PostgreSQL connection is failed.
Problem
Next.js 를 사용한 웹앱에서 다음과 같이 AWS RDS의 PostgreSQL 인스턴스에 연결을 시도할 때 에러가 출력되면서 query가 제대로 실행되지 않는 상황이 발생했다.
// db.js
import { Pool } from 'pg';
const pool = new Pool({
host: process.env.HOST,
database: process.env.DB,
user: process.env.USER,
password: process.env.PASSWORD,
port: prcoess.env.PORT,
} );
export default pool;</mark>// api/users/route.js
import { NextResponse } from 'next/server';
import pool from 'db';
export async function GET() {
try {
const result = await pool.query( 'SELECT NOW()' );
return NextResponse.json( result.rows, { status: 200 } );
} catch (error) {
return NextResponse.json( { error: error }, { status: 500 } );
}
}Error
// Error
{
"length":181,
"name":"error",
"severity":"FATAL",
"code":"28000",
"file":"auth.c",
"line":"543",
"routine":"ClientAuthentication",
"level":"error",
"timestamp":"..."
}Reason
현재 나의 DB 인스턴스의 PostgreSQL 버전은 16.4 인데 버전 15 이후부터는 DB를 구성하는 파라미터 중 force_ssl이라는 인자가 0에서 1로 바뀌었다고 한다. 이 인자가 1(true) 이면 인증이 확인되지 않는 사이트로 부터 받는 요청은 거부 된다고 한다. 따라서, 문제를 해결하기 위해서는 force_ssl 파라미터 값을 0으로 바꿔주면 SSL 설치가 되지 않는 로컬 환경에서 접속이나 쿼리 요청을 할 수 있게 된다.
https://stackoverflow.com/questions/76511667/nodejs-postgresql-connection-failure
Solve
force_ssl 을 0으로 셋업한 파라미터 그룹을 내가 생성한 인스턴스에 적용해 주면 된다.

파라미터 그룹에 들어가 파라미터 그룹 생성을 눌러 생성 페이지로 들어가 준다.


생성 후 생긴 파라미터 그룹 편집에 들어가 force_ssl 을 필터링 한 후 값을 바꾸고 저장하면 된다.


생성한 파라미터 그룹을 인스턴스에 적용하면 된다. 파라미터 그룹을 수정하면 인스턴스를 재부팅 해야하기 때문에 적용하는데 시간이 좀 걸린다. 대충 20~30분 정도 걸리는듯


이렇게 하면 로컬 next.js 앱에서 쿼리 요청을 보내면 응답 받을 수 있게 된다.
Update Let’s Encrypt SSL Certificate in manual by pem key
bitnami
인증서가 저장된 폴더는 주로 관리자 접근 이므로
su - root
Password: [your admin password]
입력하여 관리자 모드로 바꿔준다.
관리자 패스워드 설정이 안되어있다면
passwd root
를 입력하여 설정해준다.
그리고 다음 명령어를 입력하여 기존 인증서 키인 server.crt와 server.key 를 백업한다.
mv /opt/bitnami/apache2/conf/bitnami/certs/server.crt /opt/bitnami/apache2/conf/bitnami/certs/server.crt.backup
mv /opt/bitnami/apache2/conf/bitnami/certs/server.key /opt/bitnami/apache2/conf/bitnami/certs/server.key.backup
생성된 인증서 파일을 기존 인증키 폴더에 동일한 파일명으로 복사한다.
cp /etc/letsencrypt/live/your_domain/fullchain.pem /opt/bitnami/apache2/conf/bitnami/certs/server.crt
cp /etc/letsencrypt/live/your_domain/privkey.pem /opt/bitnami/apache2/conf/bitnami/certs/server.key
파일 접근 권한을 설정하여 Apache가 접근할 수 있도록 한다.
chown root:root /opt/bitnami/apache2/conf/bitnami/certs/server.crt
chown root:root /opt/bitnami/apache2/conf/bitnami/certs/server.key
chmod 600 /opt/bitnami/apache2/conf/bitnami/certs/server.crt
chmod 600 /opt/bitnami/apache2/conf/bitnami/certs/server.key
다음 명령으로 서버를 재시작하여 새로운 인증서가 적용되도록 하면 끝이다.
/opt/bitnami/ctlscript.sh restart apache
nginx
cat /etc/nginx/sites-available/default
명령을 실행하여 server 443 ssl 포트에 ssl_certificate 가 어느 폴더를 가리키고 있는지 확인 후 해당 폴더에 fullchain.pem과 privkey.pem 파일이 정상적으로 복사가 되어있다면 다음의 명령줄을 입력하여 서버를 재시작 하면 인증서가 적용된다.

sudo systemctl restart nginx