P12:[[14,15,16,17,18,19,20,21,22,23],{"_24":223,"_26":183,"_28":29,"_30":224,"_32":225,"_34":35,"_36":226,"_38":224},{"_24":202,"_26":203,"_28":108,"_30":204,"_32":205,"_34":35,"_36":206,"_38":207},{"_24":182,"_26":183,"_28":108,"_30":184,"_32":185,"_34":35,"_36":186,"_38":187},{"_24":163,"_26":62,"_28":108,"_30":164,"_32":165,"_34":35,"_36":166,"_38":164,"_68":167,"_70":168},{"_24":145,"_26":146,"_28":108,"_30":147,"_32":148,"_34":35,"_36":149,"_38":147,"_68":150,"_70":151},{"_24":126,"_26":89,"_28":108,"_30":127,"_32":128,"_34":35,"_36":129,"_38":127},{"_24":106,"_26":107,"_28":108,"_30":109,"_32":110,"_34":35,"_36":111,"_38":112,"_68":113,"_70":114},{"_24":88,"_26":89,"_28":29,"_30":90,"_32":91,"_34":35,"_36":92,"_38":90},{"_24":61,"_26":62,"_28":63,"_30":64,"_32":65,"_34":35,"_36":66,"_38":67,"_68":69,"_70":71},{"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":31},"id","perf-005","category","performance","difficulty","easy","question","버튼 hover 시 살짝 위로 이동하는 애니메이션을 만들 때 성능 관점에서 더 선호되는 방식은?\n","tags",[57,58,59,60],"type","single_choice","choices",[39,40,41,42],"question_html",{"_24":54,"_44":55,"_46":56},{"_24":51,"_44":52,"_46":53},{"_24":48,"_44":49,"_46":50},{"_24":43,"_44":45,"_46":47},"c","text","`margin-top: -4px`를 변경해요.","text_html","margin-top: -4px를 변경해요.","b","`transform: translateY(-4px)`를 사용해요.","transform: translateY(-4px)를 사용해요.","d","`height`를 줄여서 위로 올라간 것처럼 보이게 해요.","height를 줄여서 위로 올라간 것처럼 보이게 해요.","a","`position: relative`와 `top: -4px`를 변경해요.","position: relative와 top: -4px를 변경해요.","transform","composite","animation","reflow","ts-006","typescript","hard","`R`의 타입은?\n",[84,85,86,87],[72,73,74,75],"R의 타입은?\n","code","type ReturnOf = T extends (...args: any[]) => infer U ? U : never\n\nfunction getUser() {\n return { id: 1, name: 'minjun' }\n}\n\ntype R = ReturnOf\n","code_html","

type ReturnOf<T> = T extends (...args: any[]) => infer U ? U : never\n\nfunction getUser() {\n  return { id: 1, name: 'minjun' }\n}\n\ntype R = ReturnOf<typeof getUser>\n

",{"_24":51,"_44":82,"_46":83},{"_24":43,"_44":80,"_46":81},{"_24":54,"_44":78,"_46":79},{"_24":48,"_44":76,"_46":77},"`() => { id: number; name: string }`","() => { id: number; name: string }","`{ id: number; name: string }`","{ id: number; name: string }","`any`","any","`never`","never","types","conditional-types","infer","return-type","browser-004","browser","웹 폰트 로딩에서 FOUT와 FOIT 설명으로 가장 알맞은 것은?\n",[102,103,104,105],[93,94,95,96],{"_24":43,"_44":101,"_46":101},{"_24":54,"_44":100,"_46":100},{"_24":48,"_44":99,"_46":99},{"_24":51,"_44":97,"_46":98},"`font-display: swap`은 FOIT를 늘리기 위해 텍스트를 오래 숨겨요.","font-display: swap은 FOIT를 늘리기 위해 텍스트를 오래 숨겨요.","FOUT는 fallback 폰트가 먼저 보였다가 웹 폰트로 바뀌는 현상, FOIT는 폰트 로드 전 텍스트가 숨는 현상이에요.","FOUT는 텍스트가 보이지 않는 현상, FOIT는 fallback 폰트가 먼저 보이는 현상이에요.","둘 다 이미지 lazy loading에서만 발생해요.","font-loading","fout","foit","font-display","react-012","react","medium","React Hook 규칙에 따라 다음 코드에서 **규칙을 위반**하는 항목을 모두 고르면?\n",[123,124,125],[115,116,117,118],"React Hook 규칙에 따라 다음 코드에서 규칙을 위반하는 항목을 모두 고르면?\n","function Profile({ userId }) {\n if (!userId) {\n const [name, setName] = useState('') // (가)\n return null\n }\n const data = useFetch(userId) // (나)\n useEffect(() => { // (다)\n document.title = data?.name ?? ''\n }, [data])\n return

{data?.name}

\n}\n","

function Profile({ userId }) {\n  if (!userId) {\n    const [name, setName] = useState('')   // (가)\n    return null\n  }\n  const data = useFetch(userId)            // (나)\n  useEffect(() => {                        // (다)\n    document.title = data?.name ?? ''\n  }, [data])\n  return <div>{data?.name}</div>\n}\n

",{"_24":43,"_44":122,"_46":122},{"_24":54,"_44":121,"_46":121},{"_24":48,"_44":120,"_46":120},{"_24":51,"_44":119,"_46":119},"(가), (나), (다) 모두","(가), (나)","(가)만","(가), (다)","hooks","rules-of-hooks","lint","browser-002","다음 중 레이아웃 재계산을 피하고 대체로 Composite 단계에서 처리되어 애니메이션에 유리한 CSS 속성 조합은?\n",[142,60,143,58,144],[130,131,132,133],{"_24":51,"_44":140,"_46":141},{"_24":48,"_44":138,"_46":139},{"_24":54,"_44":136,"_46":137},{"_24":43,"_44":134,"_46":135},"`transform`, `opacity`","transform, opacity","`top`, `left`","top, left","`width`, `height`","width, height","`margin`, `padding`","margin, padding","rendering","repaint","css","js-010","javascript","다음 코드의 출력은?\n",[160,161,162],[152,153,154,155],"const a = { user: { name: '하늘' }, version: 1 }\nconst b = { ...a, version: 2 }\nb.user.name = '바다'\nconsole.log(a.user.name, '/', a.version)\n","

const a = { user: { name: '하늘' }, version: 1 }\nconst b = { ...a, version: 2 }\nb.user.name = '바다'\nconsole.log(a.user.name, '/', a.version)\n

",{"_24":43,"_44":159,"_46":159},{"_24":48,"_44":158,"_46":158},{"_24":54,"_44":157,"_46":157},{"_24":51,"_44":156,"_46":156},"하늘 / 2","하늘 / 1","바다 / 2","바다 / 1","spread","shallow-copy","immutability","ts-020","아래 (A)와 (B) 방식의 차이로 가장 정확한 설명은?\n",[179,180,181],[169,170,171,172],"function isStr(v: unknown): v is string {\n return typeof v === 'string'\n}\n\n// (A)\nfunction lenA(v: unknown) {\n return (v as string).length\n}\n\n// (B)\nfunction lenB(v: unknown) {\n if (isStr(v)) return v.length\n return 0\n}\n","

function isStr(v: unknown): v is string {\n  return typeof v === 'string'\n}\n\n// (A)\nfunction lenA(v: unknown) {\n  return (v as string).length\n}\n\n// (B)\nfunction lenB(v: unknown) {\n  if (isStr(v)) return v.length\n  return 0\n}\n

",{"_24":54,"_44":178,"_46":178},{"_24":43,"_44":177,"_46":177},{"_24":51,"_44":175,"_46":176},{"_24":48,"_44":173,"_46":174},"(A)는 컴파일러를 속이는 단언이라 컴파일은 통과하지만, 런타임에\n실제로 string이 아닌 값(예: `null`/`undefined`)이 들어오면\n`.length` 접근에서 그대로 깨져요. (B)는 `v is string` 술어를\n가진 타입 가드로 실제 검사 후에만 좁혀서 안전해요\n","(A)는 컴파일러를 속이는 단언이라 컴파일은 통과하지만, 런타임에\n실제로 string이 아닌 값(예: null/undefined)이 들어오면\n.length 접근에서 그대로 깨져요. (B)는 v is string 술어를\n가진 타입 가드로 실제 검사 후에만 좁혀서 안전해요\n","(B)는 `as`보다 성능이 느려서 비추돼요","(B)는 as보다 성능이 느려서 비추돼요","(A)는 컴파일 에러, (B)는 통과","둘 다 동일한 안전성을 가져요","type-guard","as","narrowing","next-002","nextjs","Next.js App Router의 `fetch` 캐시 옵션 설명으로 맞는 것은?\n",[199,200,201],[188,189,190,191],"Next.js App Router의 fetch 캐시 옵션 설명으로 맞는 것은?\n",{"_24":51,"_44":198,"_46":198},{"_24":43,"_44":196,"_46":197},{"_24":54,"_44":194,"_46":195},{"_24":48,"_44":192,"_46":193},"`next: { revalidate: 60 }`은 브라우저가 60초마다 강제로 새로고침한다는 뜻이에요.","next: { revalidate: 60 }은 브라우저가 60초마다 강제로 새로고침한다는 뜻이에요.","`cache: \"no-store\"`는 요청 결과를 저장하지 않고 매 요청 새로 가져오려는 의도에 가까워요.","cache: "no-store"는 요청 결과를 저장하지 않고 매 요청 새로 가져오려는 의도에 가까워요.","모든 `fetch`는 기본적으로 사용자 쿠키와 무관하게 영구 캐시돼요.","모든 fetch는 기본적으로 사용자 쿠키와 무관하게 영구 캐시돼요.","캐시 옵션은 Client Component에서만 동작하고 Server Component에서는 무시돼요.","app-router","fetch-cache","revalidate","html-006","html","`` 요소의 `showModal()`과 `show()` 차이로 **틀린** 설명은?\n",[220,221,222],[208,209,210,211],"<dialog> 요소의 showModal()과 show() 차이로 틀린 설명은?\n",{"_24":48,"_44":218,"_46":219},{"_24":51,"_44":216,"_46":217},{"_24":54,"_44":214,"_46":215},{"_24":43,"_44":212,"_46":213},"`showModal()`로 연 다이얼로그는 ESC 키로 닫을 수 있어요\n","showModal()로 연 다이얼로그는 ESC 키로 닫을 수 있어요\n","`showModal()`은 다이얼로그 외부와의 상호작용을 차단(inert)해 모달처럼 동작해요\n","showModal()은 다이얼로그 외부와의 상호작용을 차단(inert)해 모달처럼 동작해요\n","`show()`로 열어도 페이지 스크롤이 잠기고 ESC로 닫을 수 있어요\n","show()로 열어도 페이지 스크롤이 잠기고 ESC로 닫을 수 있어요\n","`showModal()`은 `::backdrop` 가상 요소가 활성화되지만, `show()`는 활성화되지 않아요\n","showModal()은 ::backdrop 가상 요소가 활성화되지만, show()는 활성화되지 않아요\n","dialog","modal","a11y","next-006","App Router의 특수 파일 중, 같은 세그먼트에서 에러가 던져졌을 때 fallback UI를 보여 주는 파일은 무엇인가요?",[199,239,240,241],[227,228,229,230],{"_24":54,"_44":237,"_46":238},{"_24":43,"_44":235,"_46":236},{"_24":48,"_44":233,"_46":234},{"_24":51,"_44":231,"_46":232},"`layout.tsx`","layout.tsx","`error.tsx`","error.tsx","`not-found.tsx`","not-found.tsx","`loading.tsx`","loading.tsx","error-boundary","file-conventions","routing"]