P14:[[27,28,29,30,31,32,33,34,35,36],{"_37":240,"_39":121,"_41":77,"_43":241,"_45":242,"_47":48,"_49":241,"_51":243},{"_37":219,"_39":220,"_41":77,"_43":221,"_45":222,"_47":48,"_49":221,"_51":223},{"_37":201,"_39":40,"_41":77,"_43":202,"_45":203,"_47":48,"_49":204,"_51":205},{"_37":176,"_39":177,"_41":77,"_43":178,"_45":179,"_47":48,"_49":180,"_51":181,"_82":182,"_84":183},{"_37":155,"_39":156,"_41":77,"_43":157,"_45":158,"_47":48,"_49":159,"_51":160},{"_37":140,"_39":103,"_41":42,"_43":141,"_45":142,"_47":48,"_49":141,"_51":143},{"_37":120,"_39":121,"_41":42,"_43":122,"_45":123,"_47":48,"_49":124,"_51":125,"_82":126,"_84":127},{"_37":102,"_39":103,"_41":77,"_43":104,"_45":105,"_47":48,"_49":104,"_51":106},{"_37":75,"_39":76,"_41":77,"_43":78,"_45":79,"_47":48,"_49":80,"_51":81,"_82":83,"_84":85},{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52},"id","browser-003","category","browser","difficulty","medium","question","``, ``, `` 설명으로 맞는 것은?\n","tags",[70,71,72,73,74],"type","single_choice","question_html","<link rel="preconnect">, <link rel="preload">, <link rel="prefetch"> 설명으로 맞는 것은?\n","choices",[53,54,55,56],{"_37":68,"_58":69,"_60":69},{"_37":65,"_58":66,"_60":67},{"_37":62,"_58":63,"_60":64},{"_37":57,"_58":59,"_60":61},"c","text","`prefetch`는 현재 렌더링에 필수인 CSS를 항상 가장 높은 우선순위로 가져와요.","text_html","prefetch는 현재 렌더링에 필수인 CSS를 항상 가장 높은 우선순위로 가져와요.","b","`preload`는 현재 페이지에서 곧 필요한 리소스를 높은 우선순위로 가져오게 힌트를 줘요.","preload는 현재 페이지에서 곧 필요한 리소스를 높은 우선순위로 가져오게 힌트를 줘요.","a","`preconnect`는 리소스 다운로드까지 완료하고, `preload`는 연결만 미리 만들어요.","preconnect는 리소스 다운로드까지 완료하고, preload는 연결만 미리 만들어요.","d","세 값은 모두 같은 동작이고 브라우저 호환성을 위해 이름만 달라요.","resource-hints","preconnect","preload","prefetch","html","ts-003","typescript","easy","`a`와 `b`의 추론 타입은?\n",[98,99,100,101],"a와 b의 추론 타입은?\n",[86,87,88,89],"code","const a = ['x', 'y']\nconst b = ['x', 'y'] as const\n","code_html","

const a = ['x', 'y']\nconst b = ['x', 'y'] as const\n

",{"_37":68,"_58":96,"_60":97},{"_37":62,"_58":94,"_60":95},{"_37":57,"_58":92,"_60":93},{"_37":65,"_58":90,"_60":91},"`a: string[]`, `b: readonly ['x', 'y']`","a: string[], b: readonly ['x', 'y']","`a: string[]`, `b: string[]`","a: string[], b: string[]","`a: ['x', 'y']`, `b: readonly ['x', 'y']`","a: ['x', 'y'], b: readonly ['x', 'y']","`a: readonly ['x', 'y']`, `b: ['x', 'y']`","a: readonly ['x', 'y'], b: ['x', 'y']","types","as-const","literal-types","readonly","next-005","nextjs","Next.js Proxy를 쓰기 좋은 경우는?\n",[115,116,117,118,119],[107,108,109,110],{"_37":65,"_58":114,"_60":114},{"_37":62,"_58":113,"_60":113},{"_37":57,"_58":112,"_60":112},{"_37":68,"_58":111,"_60":111},"브라우저에서만 접근 가능한 DOM 크기를 측정해요.","이미지 압축 알고리즘을 직접 구현해요.","React 컴포넌트의 로컬 state를 저장해요.","요청이 라우트에 도달하기 전에 인증 여부를 확인해 redirect하거나 rewrite해요.","proxy","middleware","redirect","rewrite","auth","css-013","css","다음 CSS와 HTML에서 `.btn`의 최종 `color`는?\n",[137,138,139],"다음 CSS와 HTML에서 .btn의 최종 color는?\n",[128,129,130,131],"/* CSS */\n:root { --brand: tomato; }\n.card { --brand: steelblue; }\n.btn { color: var(--brand, black); }\n\n/* HTML */\n

\n","

/* CSS */\n:root { --brand: tomato; }\n.card { --brand: steelblue; }\n.btn  { color: var(--brand, black); }\n\n/* HTML */\n<div class="card"><button class="btn">Hi</button></div>\n

",{"_37":68,"_58":135,"_60":136},{"_37":57,"_58":134,"_60":134},{"_37":62,"_58":133,"_60":133},{"_37":65,"_58":132,"_60":132},"tomato","black","steelblue","문자열 `var(--brand, black)`가 그대로 적용돼요","문자열 var(--brand, black)가 그대로 적용돼요","custom-properties","variables","cascade","next-003","Next.js Server Actions에 대한 설명으로 가장 알맞은 것은?\n",[152,153,154],[144,145,146,147],{"_37":57,"_58":151,"_60":151},{"_37":65,"_58":150,"_60":150},{"_37":62,"_58":149,"_60":149},{"_37":68,"_58":148,"_60":148},"Server Component를 모두 Client Component로 바꾸는 기능이에요.","브라우저 번들에 데이터베이스 secret을 포함해 클라이언트에서 직접 쿼리하게 해줘요.","서버에서 실행되는 함수를 form action이나 클라이언트 호출 경로와 연결해 mutation을 처리할 수 있어요.","정적 HTML만 만들 수 있어서 사용자 입력 처리는 불가능해요.","server-actions","mutation","app-router","react-017","react","커스텀 훅 이름을 `use`로 시작해야 하는 이유로 가장 적절한 것은?\n",[172,173,174,175],"커스텀 훅 이름을 use로 시작해야 하는 이유로 가장 적절한 것은?\n",[161,162,163,164],{"_37":65,"_58":171,"_60":171},{"_37":62,"_58":169,"_60":170},{"_37":57,"_58":167,"_60":168},{"_37":68,"_58":165,"_60":166},"`use` prefix가 있어야 JSX를 반환할 수 있는 컴포넌트로 인식돼요","use prefix가 있어야 JSX를 반환할 수 있는 컴포넌트로 인식돼요","`use`로 시작해야 React가 자동으로 메모이즈해 줘요","use로 시작해야 React가 자동으로 메모이즈해 줘요","ESLint 플러그인 `react-hooks/rules-of-hooks`와 커뮤니티 컨벤션이\n\"이 함수는 훅을 호출한다\"고 판단하는 기준이라, 이름이 다르면\n정적 분석이 훅 규칙 위반을 잡아내지 못해요\n","ESLint 플러그인 react-hooks/rules-of-hooks와 커뮤니티 컨벤션이\n"이 함수는 훅을 호출한다"고 판단하는 기준이라, 이름이 다르면\n정적 분석이 훅 규칙 위반을 잡아내지 못해요\n","단순한 컨벤션일 뿐 동작상 차이는 없어요","hooks","custom-hook","naming","lint","js-009","javascript","다음 코드 실행 후 `nums`의 값은?\n",[196,197,198,199,200],"다음 코드 실행 후 nums의 값은?\n",[184,185,186,187],"const nums = [1, 2, 3, 4]\nconst doubled = nums.map(n => n * 2)\nconst evens = nums.filter(n => n % 2 === 0)\nnums.forEach(n => n * 100)\n","

const nums = [1, 2, 3, 4]\nconst doubled = nums.map(n => n * 2)\nconst evens = nums.filter(n => n % 2 === 0)\nnums.forEach(n => n * 100)\n

",{"_37":57,"_58":194,"_60":195},{"_37":68,"_58":192,"_60":193},{"_37":65,"_58":190,"_60":191},{"_37":62,"_58":188,"_60":189},"`[1, 2, 3, 4]`","[1, 2, 3, 4]","`[2, 4, 6, 8]`","[2, 4, 6, 8]","`[100, 200, 300, 400]`","[100, 200, 300, 400]","`[2, 4]`","[2, 4]","array","immutability","map","filter","forEach","browser-007","브라우저의 동일 출처 정책(Same-Origin Policy)에서 두 URL이 **같은 출처**로 간주되려면 무엇이 모두 일치해야 할까요?",[214,215,216,217,218],"브라우저의 동일 출처 정책(Same-Origin Policy)에서 두 URL이 같은 출처로 간주되려면 무엇이 모두 일치해야 할까요?",[206,207,208,209],{"_37":57,"_58":213,"_60":213},{"_37":65,"_58":212,"_60":212},{"_37":62,"_58":211,"_60":211},{"_37":68,"_58":210,"_60":210},"경로(pathname)와 쿼리스트링까지 모두 같아야 해요","호스트(host)만 같으면 같은 출처로 봐요","스킴(scheme), 호스트(host), 포트(port)가 모두 같아야 해요","도메인의 최상위(TLD)만 같으면 같은 출처로 봐요","security","same-origin-policy","origin","cors","web-platform","perf-005","performance","버튼 hover 시 살짝 위로 이동하는 애니메이션을 만들 때 성능 관점에서 더 선호되는 방식은?\n",[236,237,238,239],[224,225,226,227],{"_37":62,"_58":234,"_60":235},{"_37":65,"_58":232,"_60":233},{"_37":57,"_58":230,"_60":231},{"_37":68,"_58":228,"_60":229},"`height`를 줄여서 위로 올라간 것처럼 보이게 해요.","height를 줄여서 위로 올라간 것처럼 보이게 해요.","`margin-top: -4px`를 변경해요.","margin-top: -4px를 변경해요.","`position: relative`와 `top: -4px`를 변경해요.","position: relative와 top: -4px를 변경해요.","`transform: translateY(-4px)`를 사용해요.","transform: translateY(-4px)를 사용해요.","transform","composite","animation","reflow","css-001","flex 컨테이너에서 자식 아이템을 main axis 양 끝에 붙이고, 사이사이는 균등 간격으로 배치하려면?\n",[256,257,258],[244,245,246,247],{"_37":57,"_58":254,"_60":255},{"_37":62,"_58":252,"_60":253},{"_37":68,"_58":250,"_60":251},{"_37":65,"_58":248,"_60":249},"`justify-content: space-between`","justify-content: space-between","`justify-content: stretch`","justify-content: stretch","`justify-content: space-around`","justify-content: space-around","`justify-content: space-evenly`","justify-content: space-evenly","flexbox","layout","justify-content"]