<div id="readability-page-1" class="page"><article data-pagefind-body=""> <div id="contents_list" markdown="1">
<h2 id="목차">목차</h2>
<ul>
<li><a href="#%EB%AA%A9%EC%B0%A8">목차</a></li>
<li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li>
<li><a href="#semgrep">Semgrep</a></li>
<li><a href="#semgrep-%EC%84%A4%EC%B9%98">Semgrep 설치</a></li>
<li><a href="#semgrep-%EA%B7%9C%EC%B9%99-%EC%84%A4%EC%A0%95">Semgrep 규칙 설정</a></li>
<li><a href="#semgrep-%EC%8B%A4%ED%96%89">Semgrep 실행</a></li>
<li><a href="#github-actions">GitHub Actions</a></li>
<li><a href="#%EC%99%84%EB%A3%8C">완료</a></li>
</ul>
</div>
<h2 id="개요">개요</h2>
개발을 할 때, 코드의 품질을 높이기 위해 Lint와 같은 정적 분석 도구를 사용하곤 합니다. 하지만 정적 분석 툴은 일반적인 규칙만 제공하지 모든 규칙을 제공하지 않습니다. 그래서 정적 분석툴이 제공하지 않는 규칙을 코드 검사에 추가하고 싶을 때는, Lint의 커스텀 규칙을 추가해서 사용하곤 합니다.
<ul>
<li><a href="https://eslint.org/docs/latest/extend/custom-rules" rel="nofollow noreferrer" target="_blank">ESLint Custom Rules</a></li>
</ul>
이렇게 추가한 커스텀 규칙은 Lint의 대상이 되는 코드만 검사가 가능하지만 주석과 같은 부분은 검사를 하지 못하는 경우가 있습니다. 이런 경우 <code>Semgrep</code>을 사용하여 정규식을 통해 커스텀 규칙을 만들 수 있습니다.
<h2 id="semgrep">Semgrep</h2>
<code>Semgrep</code>은 코드의 안전성, 품질, 스타일을 자동으로 검사하고 개선하기 위한 정적 분석 도구입니다. 주로 소스 코드를 분석하여 보안 취약점, 버그, 코드 품질 문제를 찾아내는 데 사용됩니다.
<ul>
<li>Semgrep: <a href="https://github.com/semgrep/semgrep" rel="nofollow noreferrer" target="_blank">https://github.com/semgrep/semgrep</a></li>
</ul>
<code>Semgrep</code>은 사용자 정의 규칙을 정규식 패턴으로 작성할 수 있는데, 이를 사용하면 Lint와 같은 정적 분석 도구로는 검사하기 어려운 부분을 검사할 수 있습니다.
<ul>
<li><a href="https://semgrep.dev/docs/writing-rules/rule-ideas" rel="nofollow noreferrer" target="_blank">https://semgrep.dev/docs/writing-rules/rule-ideas</a></li>
</ul>
이번 블로그 포스트에서는 <code>Semgrep</code>을 사용하여 정규식으로 코드를 검사하는 방법을 알아보겠습니다.
<h2 id="semgrep-설치">Semgrep 설치</h2>
<code>Semgrep</code>은 파이썬에서 동작하므로, 기본적으로 파이썬이 설치되어있어야 합니다. 각 OS에 파이썬을 설치하는 방법은 생략하도록 하겠습니다.
<code>Semgrep</code>은 파이썬 패키지로 설치할 수 있습니다. <code>Semgrep</code>을 설치하기 위해서 다음 명령어를 실행합니다.
<pre tabindex="0" data-language="bash"><code>pip install semgrep</code></pre>
설치하였다면, 다른 곳에서도 사용할 수 있도록 <code>requirements.txt</code>을 생성합니다.
<pre tabindex="0" data-language="bash"><code>pip freeze &gt; requirements.txt</code></pre>
<code>requirements.txt</code>을 열면 다음과 같은 내용이 추가된 것을 확인할 수 있습니다.
<pre tabindex="0" data-language="json"><code>semgrep==1.97.0</code></pre>
이 <code>requirements.txt</code>을 활용하여, 다른 곳에서 <code>Semgrep</code>을 설치할 때 다음 명령어를 사용하면 됩니다.
<pre tabindex="0" data-language="bash"><code>pip install -r requirements.txt</code></pre>

<h2 id="semgrep-규칙-설정">Semgrep 규칙 설정</h2>
이제 <code>Semgrep</code>을 사용하여 정규식으로 코드를 검사하기 위해 코드 규칙을 작성해 보겠습니다. 먼저, <code>code-rules.yaml</code> 파일을 생성하고 다음과 같은 내용을 작성합니다.
<pre tabindex="0" data-language="yaml"><code>rules:
 - id: missing-param-description
 severity: ERROR
 message: 【Comment error】 Add correct comment.
 languages:
 - javascript
 - typescript
 patterns:
 - pattern-regex: \*\s*@.*-\s*(\n|\r\n|$)</code></pre>
이 규칙은 다음과 같은 내용을 검사합니다.
❌ Incorrect
다음과 같이 주석을 작성하지 않은체 <code>-</code>을 남겨둔 경우, 에러가 발생합니다.
<pre tabindex="0" data-language="js"><code> /**
 * Add two numbers
 * @param {number} a - number for addition
 * @param {number} b -
 * @returns {number}
 */</code></pre>
✅ Correct
다음과 같이 모든 주석이 작성되어 있는 경우, 에러가 발생하지 않습니다.
<pre tabindex="0" data-language="js"><code> /**
 * Add two numbers
 * @param {number} a - number for addition
 * @param {number} b - number for addition
 * @returns {number}
 */</code></pre>
<h2 id="semgrep-실행">Semgrep 실행</h2>
이제 <code>Semgrep</code>을 사용하여 코드를 검사해보겠습니다. 다음 명령어를 실행하면, <code>Semgrep</code>이 코드를 검사하고 결과를 출력합니다.
<pre tabindex="0" data-language="bash"><code>semgrep --config=code-rules.yaml --error</code></pre>
이 명령어를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
<pre tabindex="0" data-language="bash"><code>
┌──── ○○○ ────┐
│ Semgrep CLI │
└─────────────┘


Scanning 7035 files (only git-tracked) with 1 Code rule:

 CODE RULES
 Scanning 5089 files.

 SUPPLY CHAIN RULES

 No rules to run.


 PROGRESS

 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100% 0:00:00


┌──────────────────┐
│ 93 Code Findings │
└──────────────────┘

 apps/sample/view/index.ts
 ❯❯❱ missing-param-description
 【Comment error】 Add correct comment.

 12┆ * @param {Params} params -
 13┆ * @return {number}
...</code></pre>

<h2 id="github-actions">GitHub Actions</h2>
이렇게 설정한 <code>Semgrep</code>을 사용하여 GitHub Actions에서 코드를 검사할 수 있습니다. 다음과 같이 <code>.github/workflows/semgrep.yml</code> 파일을 생성하고 다음과 같은 내용을 작성합니다.
<pre tabindex="0" data-language="yaml"><code>name: Check code by Semgrep

on:
 pull_request:

jobs:
 semgrep:
 name: Check code by Semgrep
 runs-on: ubuntu-latest
 steps:
 - name: Checkout code
 uses: actions/checkout@v4
 with:
 fetch-depth: 0
 - uses: actions/setup-python@v5
 with:
 python-version: '3.13'
 cache: 'pip'
 - run: pip install -r requirements.txt
 - name: Run Semgrep
 run: |
 semgrep --config=code-rules.yaml --error</code></pre>
이제 GitHub Actions에서 PR을 생성하면 다음과 같은 에러가 발생하는 것을 확인할 수 있습니다.
<pre tabindex="0" data-language="bash"><code>Run semgrep --config=code-rules.yaml --error
METRICS: Using configs from the Registry (like --config=p/ci) reports pseudonymous rule metrics to semgrep.dev.
To disable Registry rule metrics, use "--metrics=off".
Using configs only from local files (like --config=xyz.yml) does not enable metrics.

More information: https://semgrep.dev/docs/metrics



┌─────────────┐
│ Scan Status │
└─────────────┘
 Scanning 7034 files tracked by git with 1 Code rule:
 Scanning 5087 files.


┌──────────────────┐
│ 93 Code Findings │
└──────────────────┘

 apps/agencyTool/src/feature/AdminStaffDetailDialog/controller/actions/initialize/index.ts
 ❯❯❱ missing-param-description
 【Comment error】 Add correct comment.

 12┆ * @param {Params} params -
 13┆ * @return {number}
...</code></pre>
<h2 id="완료">완료</h2>
이것으로 <code>Semgrep</code>을 사용하여 정규식으로 코드를 검사하는 방법을 알아보았습니다. <code>Semgrep</code>을 사용하면 정적 분석 도구로는 검사하기 어려운 부분을 검사할 수 있습니다.
코드 리뷰에서 반복적으로 동일한 문제를 지적하고 있다면, 우선 ESLint와 같은 정적 분석 도구에서 그 문제에 관한 규칙이 있는지 찾아보고, 있는 경우 그 규칙을 추가합니다.
만약, 그 규칙이 없고 해당 문제가 정형화된 패턴을 가지고 있다면, <code>Semgrep</code>을 사용하여 정규식으로 코드를 검사하는 방법을 사용해보세요.
이 블로그 포스트가 <code>Semgrep</code>을 사용하여 코드 품질을 향상시키는데 도움이 되었으면 좋겠습니다. <code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code> <h2>앱 홍보</h2> <div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다. </div> <h2>책 홍보</h2> </article></div>

dev-yakuza

Semgrep을 사용하면 정규식으로 코드를 검사하여 코드 품질을 향상시키는 방법에 대해서 알아봅시다.

[Code Quality] Semgrep을 사용하여 정규식으로 코드 검사하기

댓글