포토샵레이어

1) Notion DB 속성에 채울 값 (페이지 생성 시)

⚠️ 위 속성들이 Notion DB 에 아직 없으면 먼저 추가. dry-run 스크립트가 누락 속성을 리포트로 알려준다.

2) 페이지 본문에 그대로 옮겨 넣을 콘텐츠

아래는 Notion 페이지 본문. 노션에서 빈 페이지를 만든 뒤 각 섹션을 해당 블록 타입으로 입력한다. 입력 가이드는 각 항목 위 [블록타입] 표시를 따른다.

[heading_1]

Array.prototype.map()

[paragraph]

map() 은 배열의 각 원소에 콜백 함수를 적용한 결과로 새 배열 을 반환한다. 원본 배열은 변경되지 않는다. 자세한 명세는 MDN 참고.

[heading_2]

시그니처

[code] (언어: javascript)

arr.map((element, index, array) => {
  // 반환값이 새 배열의 같은 인덱스에 들어간다
  return transformed
})

[heading_2]

매개변수

[bulleted_list_item] × 3

• callbackFn — 각 원소에 적용할 함수
• thisArg (선택) — 콜백 안에서 this 로 사용할 값
• 콜백은 (element, index, array) 를 받는다

[heading_2]

사용 예제

[heading_3]

기본 사용

[code] (언어: javascript)

const numbers = [1, 2, 3, 4]
const doubled = numbers.map(n => n * 2)
console.log(doubled) // [2, 4, 6, 8]

[heading_3]

인덱스 활용

[code] (언어: javascript)

const fruits = ['apple', 'banana', 'cherry']
const indexed = fruits.map((fruit, i) => `${i + 1}.${fruit}`)
// ['1. apple', '2. banana', '3. cherry']

[callout] (이모지: 💡)

💡 map() 은 항상 원본 배열과 같은 길이의 새 배열 을 반환한다. 길이가 다르게 나오면 flatMap() 이 필요한 상황이다.

[quote]

함수형 프로그래밍에서 가장 자주 쓰이는 변환 메서드. forEach 가 부수효과용이라면 map 은 변환용.

### [divider]

[heading_2]

자주 하는 실수

[numbered_list_item] × 3

1. 반환값을 빠뜨리는 것 — 화살표 함수 블록 본문에서 return 누락
2. 부수효과 용도로 쓰는 것 — 이때는 forEach 가 적합
3. parseInt 같이 인자 개수가 가변인 함수를 콜백으로 그대로 넘기는 것

[code] (언어: javascript)

// 의도하지 않은 결과 — parseInt 가 두 번째 인자(index)를 radix 로 해석
['1', '2', '3'].map(parseInt)
// [1, NaN, NaN]

// 올바른 형태
['1', '2', '3'].map(s => parseInt(s, 10))
// [1, 2, 3]

[heading_2]

체크리스트

[to_do] × 4

• 새 배열을 반환하는지 확인
• 원본 배열이 변경되지 않는지 확인
• 콜백에서 return 빠지지 않았는지 확인
• 비동기가 필요하면 Promise.all(arr.map(...)) 패턴 검토

[heading_2]

관련 메서드

[toggle]

토글 제목: forEach / filter / reduce 와 비교 토글 안 내용 (자식 블록):

• forEach — 변환 없음, 부수효과만
• filter — 길이가 줄어들 수 있음, 조건에 맞는 것만
• reduce — 단일 값으로 축약

[heading_2]

이미지 (선택)

[image]

노션에서 5MB 미만 이미지 1장 업로드 (예: 다이어그램·스크린샷) 캡션: map() 동작 다이어그램

[image]

노션에서 5MB 이상 큰 이미지 1장 업로드 (예: 고해상도 스크린샷) 캡션: 대용량 이미지 — Supabase Storage 분기 테스트용

[bookmark]

URL: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

3) 검증 체크리스트 (mango 가 페이지 작성 후 확인)

• 위 8개 DB 속성이 모두 채워졌다
• 본문에 heading_1/2/3, paragraph, list, code, callout, quote, divider, to_do, toggle, image, bookmark 가 모두 들어있다
• 이미지 2장 (5MB 미만/이상) 모두 업로드됨
• DB 우상단 ⋯ → Connections 에서 사용 중인 Notion Integration 이 연결됨
• .env 에 NOTION_API_KEY 가 있다
• (선택) .env 에 NOTION_DB_SYNC=354725808c26808d826dcc36404fd83a 추가 체크 끝나면 npm run dryrun:notion 실행 → .mango/notion-dryrun-{날짜}.md 리포트 확인.

4) 다음 단계 (dry-run 결과를 보고 결정)

리포트에서 다음을 확인:

1. DB 속성 검증 섹션에 누락 표시가 없어야 함
2. 이미지 분기가 각각 R2 / Supabase 로 올바르게 구분됨
3. Markdown 본문 미리보기의 코드/리스트/콜아웃이 깨지지 않음 (Milkdown 입력 시뮬레이션)
4. 경고 모음에 미지원 블록 이 있으면 본 동기화 전에 해당 블록 변환 코드 추가 문제 없으면 본 동기화 스크립트(scripts/sync-notion.ts) + Vercel Cron 으로 진행.