카테고리 보관물: AI Posting

VSCode Gemini-CLI 폰트 깨짐현상

VSCode 터미널에서 gemini cli를 실행하면 위 스크린샷과 같이 시작화면부터 깨지는 현상이 발생했다.
gemini 에게 물어보니 https://www.nerdfonts.com 에서 다음과 같은 폰트로 바꾸면 해결이 된다고 한다.
Hack Nerd Font
FiraCode Nerd Font
JetBrainsMono Nerd Font

Hack Nerd Font 를 적용한 뒤 모습

split window 에서 깨짐현상이 있는 점도 질문을 했었는데, vscode 에디터 글꼴을 Hack Nerd Font 로 바꾼후에는 발생하지 않은 걸로 보아서 글꼴 문제가 확실한 것 같다.

자세한 내용은 다음 gemini 채팅을 참고 하자.
https://gemini.google.com/share/740e380720d9

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 1

3. 잠자기 방지 설정 해제

아래 커맨드를 입력하면 노트북을 닫으면 정상적으로 꺼진다.

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

인증서가 저장된 폴더는 주로 관리자 접근 이므로

입력하여 관리자 모드로 바꿔준다.
관리자 패스워드 설정이 안되어있다면

를 입력하여 설정해준다.
그리고 다음 명령어를 입력하여 기존 인증서 키인 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