📖 기술면접 질문
13. eslint 같은 linter가 중요한 이유를 설명해주세요.
- 의도: 협업을 위한 프론트엔드 개발 환경을 구축할 수 있는지 확인
- 답안)
linter는 코드 품질을 향상 시키고, 일관된 스타일을 유지하게 해주는 도구입니다. linter를 사용하면 여러 안티 패턴에 대해 경고를 보내 개발자가 좋은 품질의 코드를 작성할 수 있도록 돕고, 미리 정의해둔 코드 스타일을 따를 수 있게 도와줍니다. 특히 협업할 때 유용한데, 개발자마다 서로 다른 코드 스타일을 가지고 있을 수 있기에 코드의 일관성을 위해 linter를 도입하면 향후 유지 보수에 도움이 됩니다.
14. 웹팩 같은 bundler에 대해 알고 계신가요?
- 의도: 프론트엔드 개발 환경에서 번들러의 역할을 알고 있는지 확인하는 질문
- 답안)
번들러는 묶음이라는 단어 뜻 그대로 여러 자바스크립트 모듈과 파일들을 하나로 합쳐주는 도구입니다. 자바스크립트로 어플리케이션을 개발하다 보면 유지 보수나 가독성 등의 이유로 고드를 모듈이나 파일 단위로 나누게 되는데, 번들러는 이런 파일들을 하나로 묶어주면서 최적화를 통해 코드를 압축해주는 작업을 합니다. 아직까지도 웹팩이 대세이기는 하나 최근에는 turbopack 등 성능이 빠른 도구도 많이 사용하기 시작하는 추세입니다. Next.js나 Vite의 빌드가 빠른 이유도 이런 번들러를 사용해서라고 생각합니다.
15. Lighthouse를 이용하여 Web Vital 진단 및 최적화를 진행할 수 있나요?
- 의도: Lighthouse를 사용하여 Web Vital을 진단하고 최적화 할 수 있는지
- 답안)
Lighthouse는 웹 페이지의 성능, 접근성, SEO 등을 분석하는 오픈 소스 도구입니다. Web Vital은 웹 페이지의 사용자 경험을 측정하는 주요 지표로, LCP(최대 콘텐츠 렌더링 시간), FID(최초 입력 지연), CLS(누적 레이아웃 이동)을 포함합니다.
16. 브라우저 호환성이란 무엇을 말하는 것인가요? 또한 어떤 점들을 고려해야 할까요?
- 의도: 브라우저 호환성의 개념과 중요성을 이해하고 있는지
- 답안)
브라우저 호환성은 웹 어플리케이션이 다양한 브라우저에서 동일하게 동작하고 표시되는 것을 의미합니다. 브라우저 호환성을 보장하기 위해 최신 웹 표준을 따르고, 폴리필을 사용하며, 다양한 브라우저에서 테스트를 진행해야 합니다. 브라우저 호환성을 테스트하기 위해 BrowserStack, CrossBrowserTesting 등의 도구를 사용할 수 있습니다.
📖 메인페이지 1번째 section
원래 메인페이지가 총 4개의 세션으로 이루어져 있다면, 1번 세션에서 2번 세션으로 넘어갈 시에 2번 세션이 1번 세션을 서서히 덮는 듯한 애니메이션을 주고 싶었는데 해당 기능을 구현해보기 위해 아래 코드를 작성해보니 이도저도 아닌 애니메이션이 탄생해버렸습니다.
'use client';
import Header from '@/components/common/Header';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/all';
import Image from 'next/image';
import React, { useEffect, useRef } from 'react';
gsap.registerPlugin(ScrollTrigger); // 플러그인을 gsap에 등록
const MainPage = () => {
const sectionsRef = useRef<(HTMLElement | null)[]>([]); // 각 섹션 요소 저장할 참조 배열 생성
useEffect(() => {
sectionsRef.current.slice(1).forEach((section) => {
gsap.fromTo(
// 각 섹션에 애니메이션 설정
section,
{ opacity: 0, y: 50 },
{
opacity: 1,
y: 0,
duration: 1,
scrollTrigger: {
trigger: section,
start: 'top 80%',
end: 'bottom 20%',
toggleActions: 'play none none reverse',
},
},
);
});
}, []);
return (
<div className='w-full'>
<Header />
<section
ref={(el) => {
sectionsRef.current[0] = el; // 첫 번째 섹션의 참조를 배열에 저장
}}
className='section h-screen flex items-center justify-center relative'
>
<video
className='absolute top-0 left-0 w-full h-full object-cover z-0'
src='/videos/우주.mp4'
autoPlay
loop
muted
/>
<div className='absolute z-10 text-center top-48 sm:w-auto sm:text-left sm:left-48 md:left-40 lg:left-52 xl:left-64'>
<h1 className='text-white text-6xl font-bold text-purple-200'>
Voyage X
</h1>
<p className="text-white p-4">안녕하센요</p>
</div>
</section>
<section
ref={(el) => { // 두 번째 섹션 참조 저장
sectionsRef.current[1] = el;
}}
className='section h-screen flex items-center justify-center relative'
>
<div className='scroll-container h-full w-full'>
<div className='scroll-item bg-gray-300 text-white'>
<h2>Planet 1</h2>
</div>
<div className='scroll-item bg-gray-300 text-white'>
<h2>Planet 2</h2>
</div>
<div className='scroll-item bg-gray-300 text-white'>
<h2>Planet 3</h2>
</div>
<div className='scroll-item bg-gray-300 text-white'>
<h2>Planet 4</h2>
</div>
<div className='scroll-item bg-gray-300 text-white'>
<h2>Planet 5</h2>
</div>
<div className='scroll-item bg-gray-300 text-white'>
<h2>Planet 6</h2>
</div>
</div>
</section>
</div>
);
};
export default MainPage;
이렇게 코드를 작성하니 아래와 같이 새로고침을 할 시에만 아래에서 위로 올라오는 듯한 애니메이션이 연출되는데, 원래 구현하려고 했던 애니메이션이랑은 거리가 굉장히 멀기에.. 내일 다시 멘탈 잡고 시도해보도록 해야겠습니다ㅠ
