JS_fs 파일시스템 관련 코드

📢 내장모듈 설명

• fs (File System):

  • Node.js의 내장 모듈로 파일 및 폴더를 읽고 쓰는 기능을 제공
  • Next.js의 서버 사이드 코드(SSR 또는 SSG)에서만 사용 가능 (클라이언트에서는 불가능)

• path:

  • 파일 경로를 안전하게 관리하기 위한 Node.js 내장 모듈
  • 운영체제에 따라 경로 구분자(/ vs \)가 다르기 때문에, 플랫폼 간 호환성을 보장

---

📍 파일 경로 동적 생성

const dir = path.join(process.cwd(), `public/images/icons/${category}`);

• process.cwd():

  • 현재 작업 디렉터리(Current Working Directory)를 반환
  • Next.js 프로젝트의 루트 디렉토리를 가리킴

• path.join():

  • 경로를 안전하게 연결하는 함수 → OS 간 경로 구분 문제 방지
  • 결과 예시:

    /Users/username/project/public/images/icons/languages

• ✅ 빅테크 포인트:

  • 하드코딩된 경로 대신 process.cwd()를 사용 → 배포 환경에서도 안전

---

📍 폴더 내 모든 파일 읽기

const files = fs.readdirSync(dir);

• fs.readdirSync()

  • 지정된 폴더(dir)의 모든 파일 이름을 배열로 반환
  • Sync는 동기적 처리 → 빌드 타임에만 실행되므로 성능 부담 없음

• 예시:

  ["javascript.svg", "python.svg", "java.svg"]

• ✅ 빅테크 포인트:

  • 클라이언트가 아닌 서버 사이드 또는 빌드 타임에만 사용 → 성능 최적화

---

📍 SVG 파일 필터링

return files
  .filter((file) => file.endsWith(".svg"))
  .map((file) => `/images/icons/${category}/${file}`);

• .filter()

  • 모든 파일 중에서 .svg 확장자를 가진 파일만 추출
  • 불필요한 파일(예: .DS_Store, .png)은 제외

• .map()

  • 필터링된 파일 이름을 정적 경로로 변환
  • public 폴더는 Next.js에서 자동으로 루트(/)로 매핑되므로 이렇게 접근 가능

• 결과 예시:

  ["/images/icons/languages/javascript.svg", 
   "/images/icons/languages/python.svg", 
   "/images/icons/languages/java.svg"]

• ✅ 빅테크 포인트:

  • 코드의 가독성과 성능 최적화를 위해 filter → map 체이닝 활용
  • 불변성(Immutable) 유지 → 원본 배열을 직접 수정하지 않음

---

📍 파일 이름 정렬 (일관성 유지)

return files
  .filter((file) => file.endsWith(".svg"))
  .sort() // ✅ 파일 이름 정렬
  .map((file) => `/images/icons/${category}/${file}`);

• 일관된 렌더링 순서 유지 → 코드 리뷰 및 테스트가 쉬워짐