왜 Notion인가요?

Notion 구조 파헤치기

Notion 페이지 렌더링하기

import { NotionAPI } from 'notion-client'
import { NotionRenderer } from '../packages/react-notion-x'

const notion = new NotionAPI()
const recordMap = await notion.getPage(pagId)

return (
	<NotionRenderer recordMap={recordMap}/>
)

ISR 적용하기

• CSR (클라이언트 사이드 렌더링) : 사용자의 브라우저에서 렌더링 됨. 화면이 로딩되는 것이 사용자 눈에 보임.

• SSR (서버사이드 렌더링) : 프론트엔드 서버가 사용자가 접속할때마다 새로운 페이지를 생성해내는 방식. 최신 정보를 유지할 수 있지만, 화면 깜박임이 발생할 수 있음.

• SSG (정적 생성) : 역시 프론트엔드 서버가 렌더링을 담당하지만, build 과정에서 미리 렌더링된 페이지를 생성하기 때문에 build 시점 이후 변경사항을 보여주지 못함.

ISR(증분 정적 재생)

import type { GetStaticPaths, GetStaticProps } from 'next'
 
export async function getStaticPaths() {
    const data = await getDatabase("<notion database id>");

    const paths = data.results.map((page) => ({
		    params: { pageId: page.id }
    }));

    return {
		    paths,
		    fallback: 'blocking'
    }
}

export async function getStaticProps({ params }) {
    const { pageId } = params;

    const notion = new NotionAPI()
    const recordMap = await notion.getPage(pageId)

    return {
		    props: {
				    pageId,
				    recordMap
		    },
		    revalidate: 10
    }
}
 
export default function Page({ pageId, recordMap }) {
  return (
    <NotionRenderer recordMap={recordMap}/>
  )
}

• false: 정의된 경로만 생성, 나머지는 404 반환

• true: 정의되지 않은 경로는 fallback 페이지 제공 후 백그라운드에서 생성

• blocking: 정의되지 않은 경로는 생성 완료 후 HTML 반환, SSR과 유사

1. 0s: 사용자 A가 페이지 진입 → 현재 정적 생성되어 있는 “Hi”가 페이지에 표시

2. 30s: 사용자 B가 페이지 진입 → 여전히 “Hi”가 페이지에 표시

3. 60s: 새로운 정적 페이지가 생성되어 캐시 갱신됨

4. 65s: 사용자 C가 페이지 진입 → 새롭게 생성된 “Bye”가 페이지에 표시

백링크 추가하기

let currentBlock = block;
  
  while (currentBlock) {
    if (currentBlock.type === 'page') {
      const title = currentBlock.properties?.title?.[0]?.[0].toString();
      const link = normalizeTitle(title) + '-' + currentBlock.id + '#' + block.id.replaceAll('-', '');
      return res.status(200).json({ title, link });
    }
    
    // 다음 parent block 찾기
    const parentId = currentBlock.parent_id;
    currentBlock = recordMap.block[parentId]?.value;
    
    // parent block을 찾을 수 없는 경우 종료
    if (!currentBlock) {
      return res.status(404).json({ error: 'Root block not found' });
    }
  }

문서 간의 관계 그래프로 시각화하기

데이터 뽑아내기

{
  nodes: Node[]
  links: Link[]
  errors: Error[]
}

자동화하기

name: Daily Notion Graph Update

on:
  schedule:
    - cron: '0 0 * * *'  # Runs at 00:00 UTC every day
  workflow_dispatch:  # Allows manual triggering

jobs:
  update-notion-graph:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout repository
      uses: actions/checkout@v3
      
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '14'
        
    - name: Install dependencies
      run: |
        cd notion-graph-generator
        npm install
      
    - name: Run Notion Graph script
      run: |
        cd notion-graph-generator
        node index.js
  
    - name: Upload JSON as artifact
      uses: actions/upload-artifact@v3
      with:
        name: notion-graph
        path: notion-graph-generator/notion-graph.json

    - name: Commit and push if changed
      run: |
        git config user.name 'github-actions[bot]'
        git config user.email 'github-actions[bot]@users.noreply.github.com'
        git add notion-graph-generator/notion-graph.json
        git diff --quiet && git diff --staged --quiet || (git commit -m "action: update notion graph" && git push)

시각화하기

import { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const Graph = ({ data }) => {
    const svgRef = useRef(null);

    useEffect(() => {
        if (!data || !svgRef.current) return;

        const svg = d3.select(svgRef.current);
        const width = window.innerWidth;
        const height = window.innerHeight * 0.8;

        svg.attr('width', width).attr('height', height);
        svg.selectAll('*').remove();

        const simulation = d3.forceSimulation(data.nodes)
            .force('link', d3.forceLink(data.links).id(d => d.id).distance(100))
            .force('charge', d3.forceManyBody().strength(-300))
            .force('center', d3.forceCenter(width / 2, height / 2));

        const link = svg.append('g')
            .selectAll('line')
            .data(data.links)
            .join('line')
            .attr('stroke', '#999')
            .attr('stroke-opacity', 0.6);

        const node = svg.append('g')
            .selectAll('circle')
            .data(data.nodes)
            .join('circle')
            .attr('r', 5)
            .attr('fill', '#69b3a2');

        node.append('title')
            .text(d => d.id);

        simulation.on('tick', () => {
            link
                .attr('x1', d => d.source.x)
                .attr('y1', d => d.source.y)
                .attr('x2', d => d.target.x)
                .attr('y2', d => d.target.y);

            node
                .attr('cx', d => d.x)
                .attr('cy', d => d.y);
        });

    }, [data]);

    return <svg ref={svgRef} />;
};

export default Graph;

팟캐스트 기능 추가하기

Voice Cloning 구현하기

# 텍스트를 </ttsSplit> 단위로 분리하는 함수
def split_text(text):
    sentences = text.split("<ttsSplit/>")
    return [sentence.strip() for sentence in sentences if sentence.strip()]

reference_audios = ["./ref.wav"]

# 출력 폴더 생성 (없으면) 및 기존 파일 삭제
# (생략)

# 긴 텍스트를 문장 단위로 분리
sentences = split_text(text_to_speak)

# 각 문장에 대해 음성을 합성하고 개별 파일로 저장
for idx, sentence in enumerate(sentences):
    output = model.synthesize(
        sentence,
        config,
        speaker_wav=reference_audios,
        gpt_cond_len=45,
        language="ko",
    )

    wav_data = output['wav']
    out_file_path = os.path.join("./outputs", f"output{idx + 1}.wav")
    wavfile.write(out_file_path, 24000, wav_data)


# ./outputs 폴더에 있는 wav 파일들을 output뒤에 있는 숫자 순서대로 병합하여 하나의 wav 파일로 생성
print("오디오 병합 시작")
output_files = [f for f in os.listdir("./outputs") if f.startswith("output") and f.endswith(".wav")]
output_files.sort(key=lambda f: int(re.search(r"output(\d+)\.wav", f).group(1)))

silence = AudioSegment.silent(duration=500)

combined_audio = AudioSegment.empty()
for file in output_files:
    audio_segment = AudioSegment.from_wav(os.path.join("./outputs", file))
    combined_audio += audio_segment
    combined_audio += silence  # 각 audio segment 뒤에 0.5초 묵음 추가

combined_audio_speedup = combined_audio.speedup(playback_speed=1.1)

combined_audio_speedup.export("./outputs/combined_output.wav", format="wav")

한국어 텍스트를 입력받아 다음과 같은 규칙에 따라 정규화된 결과를 반환한다:

- 숫자, 영어 표기 변환:
숫자는 한글 발음으로 변환한다.
예시: "352" → "삼백오십이"

- 한글 발음법에 따라, 상황에 맞는 숫자 읽기 방식을 적용한다.
단독 숫자: "하나", "둘" 등
서술적 숫자: "일", "이", "삼" 등

- 영어 표기 및 기술 용어는 한글 발음으로 변환한다.
예시: "k6" → "케이식스", "http" → "헤이치티티피"

- 기술 용어: 통상적으로 사용되는 한국어 발음을 따름.
- 특수문자 변환: 구두문자를 제외하고, 특수문자를 한글로 변환한다.
예시: "&" → "엔드", "%" → "퍼센트"

- 소스코드로 보이는 부분은 제거한다.
- 괄호 안의 텍스트는 제거한다.
- 모든 문장은 완전한 형태로 재작성하며 종결 어미는 '~다'를 유지한다.
- 제목이나 소제목이라 판단되는 문장에는 끝에 마침표를 추가한다.

- 텍스트를 95자 이하로 나눈다:
문장 단위로 자르는 것을 기본으로 하지만, 개조식 문장이나 특수한 경우 적절히 조정한다.
`<ttsSplit/>` 태그를 사용하여 TTS의 멈춤점을 명시한다.

- 출력 형식
변환된 텍스트만 코드 스니펫으로 반환하며, 다음 예시에 준수한다.
```
"삼백오십이"라고 적혀 있었다. <ttsSplit/>
"케이식스"는 다음으로 넘어간다. <ttsSplit/>
"헤이치티티피"를 따라간다. <ttsSplit/>
```

주의사항
- 문맥 고려: 입력 텍스트의 흐름과 의도를 해치지 않도록 자연스러운 문장을 작성한다.
- 음성합성(TTS) 적합성: 발음 및 멈춤 처리의 품질을 최우선으로 한다.
- 간결성: 불필요한 내용을 과도하게 추가하지 않는다.
- 코드 및 괄호 제거: 비문맥적 요소는 제거한다.

위의 규칙과 형식에 맞춰 결과를 작성한다. 모든 작업 결과는 코드 스니펫 형태로 반환하도록 한다.

모델 변경 & 자동화하기

플레이어 UI (feat. 다이나믹 아일랜드)