LogoSEO Jing
  • All Posts
  • SEO Jing
  • okayJing
  • KD Team
  • CLAB Coreteam
  • Study

Contact Me

© 2026 SEOJing. All rights reserved.

DevLogSEO JingInsight

결국 Node.js 까지 와버렸다

2026년 3월 14일·4분 읽기

왜 Node.js?

MDX 파일 구조를 JSON 객체로 바꾸기 위해선 Node.js의 fs가 필요하다고 해서 Node.js를 짤막하게 배워볼려고 한다.


Node.js란?

JavaScript를 브라우저 밖에서 실행할 수 있게 해주는 런타임 환경

이다. 원래 JavaScript는 브라우저 안에서만 동작했는데, Node.js가 등장하면서 서버, CLI 도구, 스크립트 등을 JavaScript로 작성할 수 있게 되었다.


모듈 시스템

브라우저 JavaScript → DOM 조작, 화면 렌더링
Node.js JavaScript → 파일 읽기/쓰기, 서버 실행, OS 접근
ts
// CommonJS (옛날 방식)
const fs = require("fs");

// ES Modules (현재 방식 - 이 프로젝트에서 사용)
import fs from "fs";

내장 모듈

모듈역할
fs파일 시스템 (읽기/쓰기)
path파일 경로 처리
os운영체제 정보
httpHTTP 서버/클라이언트

fs 모듈

fs는 File System의 약자로, 파일과 디렉토리를 다루는 모듈이다.

ts
import fs from "fs";

// 파일 읽기
const content = fs.readFileSync("파일.txt", "utf-8");

// 파일 쓰기
fs.writeFileSync("파일.txt", "내용");

// 파일 존재 확인
fs.existsSync("파일.txt"); // true 또는 false

// 디렉토리 내 파일 목록
fs.readdirSync("./폴더"); // ['a.txt', 'b.txt']

// 파일/폴더 정보
const stat = fs.statSync("./폴더");
stat.isDirectory(); // 폴더인지 확인

Sync vs Async

ts
// 동기 (Sync) - 완료될 때까지 기다림
const data = fs.readFileSync("파일.txt", "utf-8");
console.log(data); // 바로 사용 가능

// 비동기 (Async) - 기다리지 않고 다음 줄 실행
fs.readFile("파일.txt", "utf-8", (err, data) => {
  console.log(data); // 콜백에서 사용
});

// 비동기 + Promise (현대적 방식)
import fs from "fs/promises";
const data = await fs.readFile("파일.txt", "utf-8");

프로젝트에서의 사용

generate-content-tree.ts 파일에서 fs가 쓰이는 부분:
ts
fs.existsSync(CONTENT_DIR)                      // content 폴더가 있는지 확인
fs.existsSync(outputDir)                         // 출력 폴더가 있는지 확인
fs.mkdirSync(outputDir, { recursive: true })     // 폴더 생성 (중간 경로 포함)
fs.writeFileSync(OUTPUT_PATH, ...)               // JSON 파일 쓰기
흐름을 요약하면:
  1. content 폴더 존재 확인 (없으면 에러)
  2. content 폴더를 스캔해서 트리 구조 생성
  3. 출력 폴더가 없으면 생성
  4. 트리를 JSON 파일로 저장

Post Q&A

오케이징에게 물어보기

결국 Node.js 까지 와버렸다 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!

0/500

포스트 목록

/SEOJing/devLog/insight
파일 10개, 폴더 0개
엄청난 피드백생각보다 어려웠던 댓글, 완독 로컬스토리지디자인 시스템을 구축할 때 주의할 점폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까?MDX DOM 트리 파싱하기MDX 관련 이슈 노트결국 Node.js 까지 와버렸다전체적인 플로우Storybook으로 디자인 시스템 테스팅하기MDX가 뭘까?

같은 섹션의 대표 이미지

10 posts · latest first
SEO Jing26. 03. 15.

엄청난 피드백.

CLI 코드 리뷰에서 받은 피드백과 전체 코드 수정 계획을 정리했다.

26. 03. 15.SEOJing
stat.isFile(); // 파일인지 확인
SEO Jing26. 03. 15.

생각보다 어려웠던 댓글, 완독 로컬스토리지.

localStorage만으로 글 읽기 추적, 스크롤 진행률, 댓글 감지를 구현한 과정을 정리했다.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

MDX 관련 이슈 노트.

블로그 디테일 페이지에서 MDX를 렌더링하기 위해 검토한 라이브러리들과 최종 선택 과정.

26. 03. 15.SEOJing
SEO Jing26. 03. 14.

디자인 시스템을 구축할 때 주의할 점.

디자인 시스템 구현 시 파일 구조, 디자인 토큰, 유의 사항을 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까?.

Tailwind v4 환경에서 폰트가 메인 페이지에서만 적용되지 않던 원인과 Hydration Mismatch 이슈를 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

MDX DOM 트리 파싱하기.

MDX 파일의 경로 탐색 로직과 콘텐츠 트리 생성 과정을 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

결국 Node.js 까지 와버렸다.

MDX 파일 구조를 JSON으로 변환하기 위해 Node.js의 fs 모듈을 배워봤다.

26. 03. 14.SEOJing
SEO Jing26. 03. 13.

전체적인 플로우.

SEO Jing 프로젝트의 기술 스택 선정과 전체적인 개발 플로우 정리.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

Storybook으로 디자인 시스템 테스팅하기.

Storybook의 사용법과 디자인 시스템 개발에서의 장점을 정리했다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

MDX가 뭘까?.

MDX의 개념과 블로그에서 활용하는 이유를 정리했다.

26. 03. 13.SEOJing