면접관이 이 한 문장으로 확인하려는 것들. 각 갈래를 알면 답의 뼈대가 잡혀요.
부트캠프에서 HTML과 CSS 기초를 배운 뒤, 배운 내용을 바로 적용해보고 싶어 개인 포트폴리오 사이트를 순수 HTML/CSS/JavaScript로 만들었습니다. Flexbox와 Grid를 함께 써서 반응형 레이아웃을 구성했고, 스크롤 시 요소가 나타나는 효과는 Intersection Observer API로 구현했습니다. 처음엔 모바일 화면에서 레이아웃이 깨졌는데, 미디어 쿼리 분기점을 콘텐츠 기준으로 다시 잡아 해결했습니다. 이 프로젝트를 통해 프레임워크 없이도 동적인 화면을 만들 수 있다는 자신감을 얻었습니다.
학교 팀 프로젝트에서 학생 커뮤니티 웹사이트의 프론트엔드를 맡아 순수 JavaScript로 구현했습니다. div 남발 없이 header, nav, main, article 같은 시맨틱 태그를 사용해 마크업을 작성했고, 폼 요소에는 label을 명시적으로 연결해 스크린 리더 접근성을 고려했습니다. JavaScript로는 fetch API를 사용해 게시글 목록을 비동기로 불러오고, 이벤트 위임 패턴으로 동적으로 추가되는 게시글에도 클릭 이벤트가 정상 동작하도록 구현했습니다.
동아리 홍보 페이지를 만들며 CSS Grid로 갤러리 레이아웃을 구현했는데, 특정 구형 브라우저에서 레이아웃이 무너지는 문제를 발견했습니다. 캔유즈(caniuse)로 지원 범위를 확인한 뒤, Grid를 지원하지 않는 환경을 위해 Flexbox 기반 폴백 스타일을 함께 작성했습니다. JavaScript는 바닐라로 작성하면서 var 대신 let·const를 사용하고, 이벤트 리스너 중복 등록을 막기 위해 초기화 로직을 한 곳으로 모았습니다. 이 경험으로 브라우저 호환성을 항상 염두에 두게 됐습니다.
같은 실수가 반복돼요. 이것만 피해도 절반은 갑니다.
진짜 면접은 두 번째 질문부터예요. 이 답 뒤에 따라올 법한 것들.