Skip to content

정적 좌표 지옥에서 탈출한 동적 별자리 노드 시스템 구축기#11

Merged
toothlessdev merged 8 commits intopublishfrom
main
Mar 4, 2026
Merged

정적 좌표 지옥에서 탈출한 동적 별자리 노드 시스템 구축기#11
toothlessdev merged 8 commits intopublishfrom
main

Conversation

@toothlessdev
Copy link
Owner

No description provided.

@toothlessdev toothlessdev merged commit 605582f into publish Mar 4, 2026
2 checks passed
@gemini-code-assist
Copy link

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 Pull Request는 이미지 처리 플러그인의 기능을 확장하고, 블로그 게시물 파일 구조를 표준화하며, 새로운 문서와 기술 블로그 게시물을 추가하여 프로젝트의 전반적인 유지보수성과 확장성을 향상시키는 데 중점을 둡니다. 이미지 width 속성 처리 로직을 개선하여 반응형 이미지 렌더링을 더욱 유연하게 만들고, 게시물 파일 구조를 재정비하여 콘텐츠 관리를 용이하게 합니다.

Highlights

  • 이미지 처리 로직 개선: markdown-picture.ts 파일에서 width 속성 처리 방식이 개선되어, 퍼센트나 픽셀 단위의 widthpicture 태그의 스타일로 이동하고 img 태그는 width: 100%를 갖도록 변경되었습니다. 또한, img 태그의 추가 속성 파싱이 더 견고해졌습니다.
  • 게시물 파일 구조 표준화: 기존 마크다운 게시물 파일들이 [게시물명]/index.md 형태로 일괄적으로 이름이 변경되었습니다. 이는 게시물별 디렉토리 구조를 도입하여 관련 이미지 및 리소스를 관리하기 위함입니다.
  • 이미지 경로 업데이트: 파일 구조 변경에 따라, 영향을 받는 마크다운 파일 내의 이미지 경로가 새로운 상대 경로로 업데이트되었습니다.
  • 새로운 문서 추가: 프로젝트 개요, 디렉토리 구조, 개발 컨벤션 등을 설명하는 GEMINI.md 파일이 추가되었습니다.
  • 새로운 블로그 게시물 추가: React에서 동적 별자리 노드 시스템을 구축한 경험에 대한 새로운 블로그 게시물 (contents/posts/React/constellation-impl/index.md)이 추가되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • .vitepress/plugins/markdown-picture.ts
    • width 속성 처리 로직이 개선되어, 퍼센트 또는 픽셀 단위의 widthpicture 태그의 스타일로 이동하고 img 태그는 width: 100%를 갖도록 변경되었습니다.
    • img 태그의 additionalAttrs 파싱 및 적용 방식이 개선되었습니다.
    • 중복 공백 제거 로직이 추가되었습니다.
  • GEMINI.md
    • 프로젝트 개요, 디렉토리 구조, 개발 및 빌드 명령, 개발 컨벤션, 아키텍처 및 플러그인, 배포 정보를 포함하는 새로운 문서가 추가되었습니다.
  • contents/posts/Aws/lambda-image-optimization.md
    • 파일 이름이 contents/posts/Aws/lambda-image-optimization/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
    • 상대 경로 링크가 ../Web/image-format/index.md로 수정되었습니다.
  • contents/posts/CS/Algorithm/permutation-combination.md
    • 파일 이름이 contents/posts/CS/Algorithm/permutation-combination/index.md로 변경되었습니다.
  • contents/posts/CS/DataStructure/content-addressable-store.md
    • 파일 이름이 contents/posts/CS/DataStructure/content-addressable-store/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
  • contents/posts/CS/DataStructure/idempotency-hash-table.md
    • 파일 이름이 contents/posts/CS/DataStructure/idempotency-hash-table/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
  • contents/posts/Etc/2025-toss-interview.md
    • 파일 이름이 contents/posts/Etc/2025-toss-interview/index.md로 변경되었고, 내부 링크 및 이미지 경로가 업데이트되었습니다.
  • contents/posts/Etc/kakao-tech-campus-record.md
    • 파일 이름이 contents/posts/Etc/kakao-tech-campus-record/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
  • contents/posts/Etc/overcoming-difficult-times.md
    • 파일 이름이 contents/posts/Etc/overcoming-difficult-times/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
  • contents/posts/Etc/roomfit-failure.md
    • 파일 이름이 contents/posts/Etc/roomfit-failure/index.md로 변경되었습니다.
  • contents/posts/JavaScript/js-execution-context-part1.md
    • 파일 이름이 contents/posts/JavaScript/js-execution-context-part1/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
  • contents/posts/JavaScript/js-execution-context-part2.md
    • 파일 이름이 contents/posts/JavaScript/js-execution-context-part2/index.md로 변경되었고, 내부 링크 및 이미지 경로가 업데이트되었습니다.
  • contents/posts/JavaScript/js-immutability.md
    • 파일 이름이 contents/posts/JavaScript/js-immutability/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
  • contents/posts/JavaScript/js-object-comparison.md
    • 파일 이름이 contents/posts/JavaScript/js-object-comparison/index.md로 변경되었습니다.
  • contents/posts/JavaScript/server-sent-event-generator.md
    • 파일 이름이 contents/posts/JavaScript/server-sent-event-generator/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
  • contents/posts/JavaScript/v8-how-the-value-stored.md
    • 파일 이름이 contents/posts/JavaScript/v8-how-the-value-stored/index.md로 변경되었습니다.
  • contents/posts/Next/next-rendering-patterns.md
    • 파일 이름이 contents/posts/Next/next-rendering-patterns/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
  • contents/posts/ProblemSolving/baekjoon-tip-for-nodejs.md
    • 파일 이름이 contents/posts/ProblemSolving/baekjoon-tip-for-nodejs/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
  • contents/posts/React/build-react-1.md
    • 파일 이름이 contents/posts/React/build-react-1/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
  • contents/posts/React/constellation-impl/index.md
    • React에서 동적 별자리 노드 시스템 구축에 대한 새로운 블로그 게시물이 추가되었습니다.
  • contents/posts/React/context-provider-hell.md
    • 파일 이름이 contents/posts/React/context-provider-hell/index.md로 변경되었고, 내부 이미지 경로가 업데이트되었습니다.
Activity
  • 현재까지 Pull Request에 대한 인간 활동은 없습니다.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This PR introduces a new technical blog post detailing the construction of a dynamic constellation node system using trigonometry and the Render Props pattern. It also refactors existing post file structures to use index.md for improved URL management and enhances the image processing plugin to handle the width attribute more flexibly. However, a critical security vulnerability has been identified: multiple Cross-Site Scripting (XSS) vulnerabilities exist in the .vitepress/plugins/markdown-picture.ts file. These arise from manually constructing HTML strings with untrusted data from markdown files (such as image src, alt, and width attributes) without proper escaping, which could allow an attacker to execute arbitrary JavaScript. It is highly recommended to implement a robust HTML escaping utility for all data inserted into HTML templates to mitigate this risk. Additionally, there are a few minor code-related suggestions to consider.

// 외부 URL이거나 svg, gif는 picture 태그로 변환하지 않음
if (src.startsWith("http") || src.endsWith(".svg") || src.endsWith(".gif")) {
return `<img src="${src}" alt="${safeAlt}"${safeAttrs} loading="lazy" />`;
return `<img src="${src}" alt="${safeAlt}"${safeAttrs ? " " + safeAttrs : ""} loading="lazy" />`;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

security-high high

The src, alt, and safeAttrs variables are inserted directly into the HTML string without any escaping or sanitization. This can lead to Cross-Site Scripting (XSS) if these values contain malicious content (e.g., a double quote followed by an event handler like " onerror="alert(1)"). Since these values originate from markdown files, they should be properly escaped before being rendered into HTML.

Comment on lines +114 to +115
const pictureAttr = pictureStyle ? ` style="${pictureStyle}"` : "";
return `<picture${pictureAttr}>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

security-high high

The pictureAttr (which contains pictureStyle) is injected directly into the <picture> tag. pictureStyle is derived from the width attribute in additionalAttrs. If an attacker provides a malicious width value (e.g., width="100%; background-image: url(javascript:alert(1))"), it could lead to XSS or other injection attacks. CSS values should be sanitized or strictly validated.

Comment on lines +183 to +186
const additionalAttrs = token.attrs!
.filter(([name]) => name !== "src" && name !== "alt")
.map(([name, value]) => `${name}="${value}"`)
.join(" ");

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

security-high high

Attributes extracted from the markdown token are concatenated into a string without escaping their values. This allows an attacker to inject arbitrary HTML attributes or break out of the attribute context. All attribute values should be escaped before being included in the additionalAttrs string.

Suggested change
const additionalAttrs = token.attrs!
.filter(([name]) => name !== "src" && name !== "alt")
.map(([name, value]) => `${name}="${value}"`)
.join(" ");
const additionalAttrs = token.attrs!
.filter(([name]) => name !== "src" && name !== "alt")
.map(([name, value]) => `${name}="${md.utils.escapeHtml(value)}"`)
.join(" ");

@@ -0,0 +1,57 @@
# ToothlessDev Blog

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

GEMINI.md 파일은 프로젝트의 README와 내용이 동일해 보입니다. 이번 PR의 주된 내용인 새 블로그 포스트와는 관련이 없어 보이는데, 의도적으로 추가된 파일이 맞나요? 레포지토리의 깔끔한 관리를 위해 불필요한 파일이라면 제거하는 것을 고려해볼 수 있겠습니다.

@@ -0,0 +1,218 @@
---
title: "정적 좌표 지옥에서 탈출한 동적 별자리 노드 시스템 구축기"
createdAt: "2026-03-02"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

포스트의 생성 날짜(createdAt)가 미래 시점인 2026-03-02로 설정되어 있습니다. 오타이거나 플레이스홀더인 것 같습니다. 현재 날짜나 실제 포스트 작성일로 수정하는 것이 좋겠습니다.

Suggested change
createdAt: "2026-03-02"
createdAt: "2024-03-02"

angle,
offsetArray,
offsetStartX,
}: CreatStarNodesArgs) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

CreatStarNodesArgs 타입 이름에 오타가 있습니다. CreateStarNodesArgs로 수정하는 것이 좋아 보입니다.

Suggested change
}: CreatStarNodesArgs) {
}: CreateStarNodesArgs) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants