엄청난 피드백.
CLI 코드 리뷰에서 받은 피드백과 전체 코드 수정 계획을 정리했다.
MDX 파일 구조를 JSON 객체로 바꾸기 위해선 Node.js의 fs가 필요하다고 해서
Node.js를 짤막하게 배워볼려고 한다.
JavaScript를 브라우저 밖에서 실행할 수 있게 해주는 런타임 환경
이다. 원래 JavaScript는 브라우저 안에서만 동작했는데, Node.js가 등장하면서 서버, CLI 도구, 스크립트 등을 JavaScript로 작성할 수 있게 되었다.
브라우저 JavaScript → DOM 조작, 화면 렌더링
Node.js JavaScript → 파일 읽기/쓰기, 서버 실행, OS 접근
// CommonJS (옛날 방식)
const fs = require("fs");
// ES Modules (현재 방식 - 이 프로젝트에서 사용)
import fs from "fs";
| 모듈 | 역할 |
|---|---|
fs | 파일 시스템 (읽기/쓰기) |
path | 파일 경로 처리 |
os | 운영체제 정보 |
http | HTTP 서버/클라이언트 |
fs는 File System의 약자로, 파일과 디렉토리를 다루는
모듈이다.
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) - 완료될 때까지 기다림
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가 쓰이는 부분:fs.existsSync(CONTENT_DIR) // content 폴더가 있는지 확인
fs.existsSync(outputDir) // 출력 폴더가 있는지 확인
fs.mkdirSync(outputDir, { recursive: true }) // 폴더 생성 (중간 경로 포함)
fs.writeFileSync(OUTPUT_PATH, ...) // JSON 파일 쓰기
Post Q&A
결국 Node.js 까지 와버렸다 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
localStorage만으로 글 읽기 추적, 스크롤 진행률, 댓글 감지를 구현한 과정을 정리했다.