주니어 프론트엔드 면접 질문: React와 도구

소개

HTML, CSS, JavaScript 기본기를 설명할 수 있다면 주니어 프론트엔드 면접의 다음 단계는 보통 React, 실무 도구, 성능, 디버깅, 접근성, 기본 테스트입니다. 이 가이드는 소리 내어 연습하고 자신의 프로젝트 경험에 맞게 바꿔 말할 수 있는 21개 질문과 답변 포인트를 제공합니다.

시리즈의 2부로 활용하세요. 먼저 기본기를 확인한 뒤, 이 질문들로 프론트엔드 애플리케이션을 어떻게 만들고, 디버깅하고, 측정하고, 유지보수하는지 설명하는 연습을 할 수 있습니다. 기초 내용은 1부: HTML, CSS 및 JavaScript 기본을 참고하세요.

React & 프레임워크 (8 질문)

33. JSX가 무엇이며 React에서 사용하는 이유는 무엇입니까?

답변: JSX (JavaScript XML)는 JavaScript의 구문 확장으로 HTML과 유사하며 React에서 UI 구조를 설명하는 데 사용됩니다.

예시:

const element = <h1 className="title">Hello, {name}!</h1>;

// 컴파일 결과:
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello, ',
  name,
  '!'
);

장점:

React.createElement()보다 읽기 쉽고 직관적입니다.
HTML과 유사하지만 JavaScript의 모든 기능을 갖추고 있습니다.
중괄호 {} 안에 표현식을 지원합니다.
TypeScript를 사용할 때 타입 안전성을 보장합니다.
개발자에게 친숙한 구문입니다.

HTML과의 주요 차이점:

class 대신 className을 사용합니다.
for 대신 htmlFor를 사용합니다.
모든 속성은 camelCase입니다 (onClick, onChange).
모든 태그를 닫아야 합니다 (<img />, <br /> 포함).

희귀도: 일반
난이도: 쉬움

34. React에서 props와 state의 차이점을 설명하십시오.

답변:

Props (Properties):

부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.
읽기 전용입니다 (자식의 관점에서 불변).
컴포넌트 구성에 사용됩니다.
변경 사항은 부모의 리렌더링에서 발생합니다.

// 부모
function Parent() {
  return <Child name="Alice" age={25} />;
}

// 자식
function Child({ name, age }) {
  return <p>{name} is {age} years old</p>;
  // name 또는 age를 수정할 수 없습니다.
}

State:

컴포넌트 내에서 관리되는 데이터입니다.
변경 가능합니다 (setter 함수로 변경 가능).
변경 사항은 리렌더링을 트리거합니다.
컴포넌트 전용입니다.

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

주요 차이점: Props는 아래로 흐르고 (부모에서 자식으로), state는 컴포넌트에 로컬합니다.

희귀도: 일반
난이도: 쉬움

35. useState 훅은 무엇이며 어떻게 사용합니까?

답변: useState는 함수형 컴포넌트에 state 관리 기능을 추가하는 React 훅입니다.

구문:

const [stateVariable, setStateFunction] = useState(initialValue);

예시:

// 간단한 카운터
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

// 객체 state
function Form() {
  const [user, setUser] = useState({ name: '', email: '' });
  
  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    });
  };
  
  return (
    <input name="name" value={user.name} onChange={handleChange} />
  );
}

// 지연 초기화 (비용이 많이 드는 계산)
const [data, setData] = useState(() => {
  return expensiveComputation();
});

주요 사항:

State 업데이트는 리렌더링을 트리거합니다.
State 업데이트는 비동기적입니다.
이전 state를 기반으로 하는 state에는 함수형 업데이트를 사용하십시오: setCount(prev => prev + 1)

희귀도: 일반
난이도: 쉬움-중간

36. useEffect 훅은 무엇을 합니까? 종속성 배열을 설명하십시오.

답변: useEffect는 렌더링 후 side effect를 실행합니다 (데이터 가져오기, 구독, DOM 조작).

구문:

useEffect(() => {
  // Side effect 코드
  
  return () => {
    // 정리 (선택 사항)
  };
}, [dependencies]);

종속성 배열 동작:

// 1. 종속성 배열 없음 - 모든 렌더링 후에 실행
useEffect(() => {
  console.log('Runs every render');
});

// 2. 빈 배열 [] - 마운트 시 한 번 실행
useEffect(() => {
  console.log('Runs only on mount');
  fetchData();
}, []);

// 3. 종속성 포함 - 종속성이 변경될 때 실행
useEffect(() => {
  console.log('Runs when count changes');
  document.title = `Count: ${count}`;
}, [count]);

일반적인 사용 사례:

// 데이터 가져오기
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

// 이벤트 리스너 (정리 포함)
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  
  return () => window.removeEventListener('resize', handleResize);
}, []);

희귀도: 일반
난이도: 중간

37. React에서 항목 목록을 어떻게 렌더링합니까? 키가 필요한 이유는 무엇입니까?

답변:

목록 렌더링:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

키가 중요한 이유: 키는 React가 어떤 항목이 변경, 추가 또는 제거되었는지 식별하는 데 도움이 됩니다. 다음과 같은 방식으로 효율적인 업데이트를 가능하게 합니다.

DOM 조작 최소화
컴포넌트 상태 유지
올바른 요소 ID 유지
재조정 알고리즘 최적화

키 가이드라인:

// 좋음 - 고유하고 안정적인 ID
items.map(item => <Item key={item.id} {...item} />)

// 나쁨 - 배열 인덱스 (목록이 변경될 때 불안정)
items.map((item, index) => <Item key={index} {...item} />)

// 나쁨 - 고유하지 않은 키는 버그를 유발합니다.
items.map(item => <Item key={item.category} {...item} />)

인덱스가 허용되는 경우: 다시 정렬되거나 변경되지 않는 정적 목록.

희귀도: 일반
난이도: 쉬움-중간

38. Virtual DOM은 무엇이며 React에서 사용하는 이유는 무엇입니까?

답변: Virtual DOM은 React가 메모리에 유지 관리하는 실제 DOM의 경량 JavaScript 표현입니다.

작동 방식:

렌더링: React는 state가 변경될 때 Virtual DOM 트리를 생성합니다.
Diff: React는 새 Virtual DOM을 이전 버전과 비교합니다 (재조정).
업데이트: React는 필요한 최소 변경 사항을 계산합니다.
패치: React는 실제 DOM의 변경된 부분만 업데이트합니다.

유용한 이유:

성능: 직접적인 DOM 조작은 느립니다. React는 업데이트를 일괄 처리하고 최소화합니다.
효율성: 전체 트리가 아닌 변경된 요소만 업데이트합니다.
개발자 경험: 선언적 코드를 작성하면 React가 효율적인 업데이트를 처리합니다.
추상화: 동일한 코드가 다른 플랫폼을 대상으로 할 수 있습니다 (React Native, VR).

예시:

// 작성하는 코드:
<div>{count}</div>

// count가 0에서 1로 변경될 때:
// React는 전체 div가 아닌 텍스트 노드만 업데이트합니다.

참고: 최신 React (Fiber 아키텍처)는 두 개의 Virtual DOM을 문자 그대로 비교하지 않지만 Fiber 노드를 사용하여 유사한 개념을 사용합니다.

희귀도: 일반
난이도: 중간

39. React에서 폼을 어떻게 처리합니까?

답변:

제어 컴포넌트 (권장): 폼 요소 값은 React state에 의해 제어됩니다.

function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();  // 페이지 새로 고침 방지
    console.log('Submitted:', formData);
    // API 호출
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        type="email"
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
        type="password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

비제어 컴포넌트 (덜 일반적): refs를 사용하여 DOM 값에 직접 액세스합니다.

function UncontrolledForm() {
  const emailRef = useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" />
    </form>
  );
}

모범 사례: 대부분의 경우 제어 컴포넌트를 사용하십시오.

희귀도: 일반
난이도: 중간

40. 함수형 컴포넌트와 클래스 컴포넌트의 차이점은 무엇입니까?

답변:

함수형 컴포넌트 (최신, 선호):

function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Side effects
  }, []);
  
  return <h1>Hello, {name}!</h1>;
}

클래스 컴포넌트 (레거시):

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    // Side effects
  }
  
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

주요 차이점:

구문: 함수 vs 클래스
State: 훅 (useState) vs this.state
Lifecycle: 훅 (useEffect) vs lifecycle 메서드
this 키워드: 함수형 컴포넌트에서는 필요하지 않습니다.
Boilerplate: 함수형 컴포넌트에서 코드가 더 적습니다.
성능: 함수형 컴포넌트에서 약간 더 좋습니다.

최신 표준: 훅이 있는 함수형 컴포넌트가 이제 권장되는 접근 방식입니다 (React 16.8 이후). 클래스 컴포넌트는 여전히 작동하지만 레거시로 간주됩니다.

희귀도: 일반
난이도: 쉬움-중간

빌드 도구 및 버전 관리 (5 질문)

41. npm은 무엇이며 package.json은 무엇에 사용됩니까?

답변: npm (Node Package Manager)은 JavaScript의 기본 패키지 관리자로, 코드 패키지를 설치, 관리 및 공유하는 데 사용됩니다.

package.json은 다음을 포함하는 매니페스트 파일입니다.

메타데이터: 프로젝트 이름, 버전, 설명, 작성자
Dependencies: 프로덕션에 필요한 패키지 (dependencies)
DevDependencies: 개발에만 필요한 패키지 (devDependencies)
Scripts: 일반적인 작업 (시작, 빌드, 테스트)에 대한 명령

package.json 예시:

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

일반적인 명령:

npm install - 모든 종속성 설치
npm install package-name - 특정 패키지 설치
npm install --save-dev package-name - 개발 종속성으로 설치
npm run script-name - npm 스크립트 실행
npm update - 패키지 업데이트

희귀도: 일반
난이도: 쉬움

42. Git은 무엇이며 팀에서 사용하는 이유는 무엇입니까?

답변: Git은 시간 경과에 따른 코드 변경 사항을 추적하는 분산 버전 관리 시스템입니다.

팀에서 Git을 사용하는 이유:

협업: 여러 개발자가 충돌 없이 동일한 코드베이스에서 작업합니다.
History: 모든 변경 사항에 대한 완전한 기록 (누가, 무엇을, 언제, 왜)
Branching: 주 코드에 영향을 주지 않고 독립적으로 기능 작업
Backup: 여러 위치 (로컬 + 원격)에 저장된 코드
Rollback: 이전 작업 버전으로 쉽게 되돌리기
Code review: 병합 전에 변경 사항 검토 (pull requests)
Experimentation: 위험 없이 분기에서 새로운 아이디어 시도

기본 개념:

Repository (repo): Git에서 추적하는 프로젝트 폴더
Commit: 메시지가 있는 변경 사항 스냅샷
Branch: 독립적인 개발 라인
Merge: 다른 분기의 변경 사항 결합
Remote: 온라인으로 호스팅되는 저장소 (GitHub, GitLab)

업계 표준: 전 세계 개발자의 93% 이상이 Git을 사용합니다.

희귀도: 일반
난이도: 쉬움

43. 일반적인 Git 명령 및 워크플로를 설명하십시오.

답변:

기본 워크플로:

# 저장소 복제
git clone https://github.com/user/repo.git

# 상태 확인
git status

# 새 분기 생성
git checkout -b feature-name
# 또는 최신 구문:
git switch -c feature-name

# 변경 사항을 만들고 스테이징
git add file.js
git add .  # 모든 변경 사항 스테이징

# 메시지와 함께 커밋
git commit -m "Add login feature"

# 원격으로 푸시
git push origin feature-name

# 최신 변경 사항 가져오기
git pull origin main

# 분기 병합
git checkout main
git merge feature-name

# 기록 보기
git log

주니어가 알아야 할 필수 명령:

clone - 원격 저장소 복사
add - 변경 사항 스테이징
commit - 메시지와 함께 스냅샷 저장
push - 원격으로 업로드
pull - 원격 변경 사항 다운로드 + 병합
branch - 분기 나열/생성
checkout/switch - 분기 전환
status - 현재 상태 보기
log - 커밋 기록 보기

희귀도: 일반
난이도: 쉬움-중간

44. 병합 충돌은 무엇이며 어떻게 해결합니까?

답변: 병합 충돌은 동일한 코드 줄에 경쟁적인 수정 사항이 존재하기 때문에 Git이 변경 사항을 자동으로 병합할 수 없을 때 발생합니다.

일반적인 시나리오:

# 개발자 A가 5행을 변경합니다.
# 개발자 B도 5행을 변경합니다.
# 병합할 때 Git은 어떤 것을 유지해야 할지 알 수 없습니다.

충돌 마커:

<<<<<<< HEAD
const greeting = "Hello";
=======
const greeting = "Hi";
>>>>>>> feature-branch

해결 단계:

충돌 식별: Git은 충돌이 있는 파일을 표시합니다.
충돌 파일 열기: 충돌 마커를 찾습니다.
유지할 내용 결정: 두 변경 사항을 모두 검토합니다.
코드 편집: 마커를 제거하고 원하는 코드를 유지합니다.
테스트: 코드가 올바르게 작동하는지 확인합니다.
해결된 파일 스테이징: git add file.js
병합 완료: git commit

모범 사례:

팀과 소통
충돌을 최소화하기 위해 자주 풀합니다.
커밋을 작고 집중적으로 유지합니다.
해결 후 철저히 테스트합니다.

희귀도: 일반
난이도: 중간

45. Webpack은 무엇을 합니까? Vite는 무엇입니까?

답변:

Webpack: JavaScript, CSS, 이미지 및 기타 자산을 가져와 처리하고 브라우저에 최적화된 파일로 묶는 모듈 번들러입니다.

하는 일:

여러 파일을 더 적은 수의 파일로 묶습니다.
코드 변환 (JSX/ES6용 Babel, Sass를 CSS로)
프로덕션용 최적화 (축소, 트리 쉐이킹)
종속성 처리
성능을 위한 코드 분할

기본 개념:

src/
  index.js
  component.js
  styles.css
          ↓ Webpack
dist/
  bundle.js (모두 결합 및 최적화)

Vite: Webpack과 같은 기존 번들러보다 훨씬 빠른 최신 빌드 도구입니다.

Vite가 더 빠른 이유:

개발 중에 기본 ES 모듈 사용 (번들링 불필요)
Hot Module Replacement (HMR)가 즉각적입니다.
프로덕션용으로만 번들링
더 나은 개발자 경험

사용 시기:

Vite: 새 프로젝트, 최신 프레임워크 (React, Vue)
Webpack: 기존 프로젝트, 복잡한 구성 필요

희귀도: 일반
난이도: 쉬움-중간

웹 성능 및 최적화 (3 질문)

46. 웹사이트의 로딩 성능을 어떻게 최적화하시겠습니까?

답변:

이미지 최적화:

이미지 압축 (사진용 JPG, 그래픽용 PNG, 둘 다용 WebP)
적절한 크기 사용 (300px 디스플레이에 4000px 이미지 로드하지 않기)
폴드 아래 이미지 지연 로드
반응형 이미지에 srcset 사용

코드 최적화:

JavaScript, CSS, HTML 축소 (공백, 주석 제거)
파일 번들링 및 압축 (gzip 또는 Brotli)
사용하지 않는 CSS/JS 제거 (트리 쉐이킹)
코드 분할 (페이지당 필요한 코드만 로드)

캐싱:

적절한 캐시 헤더를 사용한 브라우저 캐싱
정적 자산에 CDN 사용
오프라인 기능을 위한 서비스 워커

로딩 전략:

<head>에 중요한 CSS 인라인
중요하지 않은 JavaScript 지연
중요한 리소스 미리 로드
HTTP 요청 감소

성능 메트릭:

Lighthouse, PageSpeed Insights로 측정
목표: FCP < 1.8초, LCP < 2.5초, CLS < 0.1

희귀도: 일반
난이도: 중간

47. 웹사이트 성능을 측정하는 데 어떤 도구를 사용하시겠습니까?

답변:

브라우저 개발자 도구:

Chrome DevTools Network 탭: 요청 타이밍, 파일 크기, 로드 순서 분석
Performance/Lighthouse 탭: 점수가 있는 성능 보고서 생성
Coverage 탭: 사용하지 않는 JavaScript/CSS 찾기
Console: console.time() 및 Performance API로 측정

온라인 도구:

Google PageSpeed Insights: 성능 점수 및 권장 사항 얻기
WebPageTest: 자세한 워터폴 차트, 여러 위치
GTmetrix: 등급이 있는 성능 분석

모니터링할 메트릭:

First Contentful Paint (FCP): 첫 번째 콘텐츠가 나타나는 시점
Largest Contentful Paint (LCP): 주요 콘텐츠가 로드되는 시점
Time to Interactive (TTI): 페이지가 상호 작용 가능해지는 시점
Cumulative Layout Shift (CLS): 시각적 안정성
Total Blocking Time (TBT): 메인 스레드 차단 시간

주니어의 경우: Chrome DevTools 및 Lighthouse에 대한 기본적인 이해가 충분합니다. 심층적인 프로파일링 기술은 기대되지 않습니다.

희귀도: 일반
난이도: 쉬움-중간

48. 지연 로딩이란 무엇이며 언제 사용하시겠습니까?

답변: 지연 로딩은 필요할 때까지 중요하지 않은 리소스의 로딩을 연기합니다. 일반적으로 뷰포트에 진입하려고 할 때 연기합니다.

일반적인 사용 사례:

이미지:

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Description">

기본 지연 로딩 (최신 브라우저):

<img src="image.jpg" loading="lazy" alt="Description">

JavaScript/React:

// 컴포넌트 지연 로딩
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

장점:

더 빠른 초기 페이지 로드
대역폭 사용량 감소
느린 연결에서 더 나은 성능
향상된 사용자 경험 (콘텐츠가 더 빨리 나타남)

사용 시기:

폴드 아래 이미지
즉시 표시되지 않는 무거운 컴포넌트
탭/아코디언의 콘텐츠
무한 스크롤 구현

희귀도: 드뭄
난이도: 중간

디버깅 및 개발자 도구 (2 질문)

49. 브라우저에서 JavaScript 오류를 어떻게 디버깅합니까?

답변:

단계별 디버깅 프로세스:

1. 콘솔 확인:

console.log(variable);      // 값 검사
console.error('Error:', error);  // 오류 기록
console.table(arrayOfObjects);   // 테이블에서 데이터 보기
console.warn('Warning');    // 경고 강조 표시

2. 중단점 사용:

DevTools Sources/Debugger 패널 열기
줄 번호를 클릭하여 중단점 설정
코드 실행이 중단점에서 일시 중지됩니다.
Scope 패널에서 변수 검사
코드 단계별 실행 (Step Over, Step Into, Step Out)

3. 스택 추적 검토:

오류 메시지에 파일 이름과 줄 번호가 표시됩니다.
호출 스택을 따라 오류 원인 찾기
Network 탭에서 네트워크 오류 확인

4. DOM 문제 디버깅:

Elements 패널에서 요소 검사
계산된 스타일 확인
:hover 상태 강제 사용
연결된 이벤트 리스너 확인

5. 네트워크 요청 확인:

Network 탭에 실패한 API 호출이 표시됩니다.
요청/응답 헤더 검사
상태 코드 확인 (404, 500 등)

일반적인 디버깅 기술:

debugger; 문을 추가하여 실행 일시 중지
조건부 중단점 사용
표현식 감시
타사 코드 블랙 박스 처리

희귀도: 일반
난이도: 쉬움-중간

50. Chrome DevTools의 주요 패널은 무엇이며 무엇에 사용합니까?

답변:

필수 패널:

1. Console:

JavaScript 오류 및 로그 보기
JavaScript 명령 실행
표현식 대화식 테스트
API 테스트

2. Elements (Inspector):

HTML 구조 검사 및 수정
실시간으로 CSS 편집
레이아웃 문제 디버깅
계산된 스타일, 박스 모델 보기
반응형 디자인 테스트

3. Sources (Debugger):

소스 파일 보기
중단점 설정
코드 실행 단계별 실행
변경 사항 편집 및 저장 (작업 공간)
호출 스택 보기

4. Network:

HTTP 요청/응답 모니터링
로드 시간 및 파일 크기 확인
API 호출 디버깅
유형별 필터링 (JS, CSS, XHR, 이미지)
네트워크 속도 제한

5. Performance/Lighthouse:

런타임 성능 분석
성능 감사 생성
병목 현상 식별
Core Web Vitals 확인

6. Application:

로컬 스토리지, 세션 스토리지 검사
쿠키 보기 및 지우기
서비스 워커 확인
캐시 관리

주니어의 경우: Console, Elements, Sources 및 Network에 대한 강력한 이해가 필요합니다. 성능 프로파일링은 덤입니다.

희귀도: 일반
난이도: 쉬움

접근성 및 모범 사례 (2 질문)

51. 웹 접근성이란 무엇이며 왜 중요합니까?

답변: 웹 접근성은 장애인 (시각, 청각, 운동, 인지)을 포함하여 모든 사람이 사용할 수 있는 웹사이트를 설계하고 개발하는 것을 의미합니다.

중요한 이유:

1. 포괄적인 디자인: 세계 인구의 15%가 어떤 형태의 장애를 가지고 있습니다. 2. 법적 요구 사항: ADA (Americans with Disabilities Act), Section 508, WCAG 준수 3. 모든 사람을 위한 더 나은 UX: 캡션은 시끄러운 환경에서 도움이 되고, 키보드 탐색은 파워 유저에게 도움이 됩니다. 4. SEO 이점: 의미론적 HTML과 적절한 구조는 검색 순위를 향상시킵니다. 5. 더 큰 청중: 잠재적인 사용자/고객을 배제하지 마십시오. 6. 윤리적 책임: 평등한 접근은 인권입니다.

고려해야 할 일반적인 장애:

시각: 실명, 저시력, 색맹
청각: 청각 장애, 난청
운동: 제한된 이동성, 떨림, 마비
인지: 학습 장애, 기억 문제

비즈니스 사례: 접근성 있는 웹사이트는 더 많은 사용자에게 도달하고, 검색에서 더 나은 순위를 차지하고, 소송을 피하고, 기업의 책임을 보여줍니다.

희귀도: 일반
난이도: 쉬움-중간

52. 웹사이트를 더 접근성 있게 만드는 몇 가지 기본 방법은 무엇입니까?

답변:

HTML 구조:

의미론적 요소 사용 (<header>, <nav>, <main>, <article>, <footer>)
적절한 제목 계층 구조 (H1 → H2 → H3, 건너뛰기 없음)
폼 입력에 올바르게 레이블 지정

<label for="email">Email:</label>
<input id="email" type="email" name="email" />

이미지:

항상 설명적인 alt 텍스트 포함
장식 이미지에는 빈 alt 사용: alt=""

키보드 탐색:

모든 대화형 요소는 키보드로 접근 가능해야 합니다.
논리적 탭 순서
보이는 포커스 표시기
:focus 윤곽선 제거하지 마십시오.

색상 및 대비:

충분한 색상 대비 (일반 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1)
정보를 전달하기 위해 색상에만 의존하지 마십시오.
색맹 시뮬레이터로 테스트

ARIA 속성 (필요한 경우):

<button aria-label="Close dialog">×</button>
<div role="alert" aria-live="polite">Changes saved</div>
<nav aria-label="Main navigation">...</nav>

테스팅:

스크린 리더 사용 (VoiceOver, NVDA, JAWS)
키보드 전용 탐색
브라우저 접근성 도구 (Lighthouse, axe)

희귀도: 일반
난이도: 중간

테스팅 인식 (1 질문)

53. 단위 테스트란 무엇이며 왜 중요합니까?

답변: 단위 테스트는 개별 함수 또는 컴포넌트가 올바르게 작동하는지 확인하기 위해 격리된 상태에서 테스트하는 것을 포함합니다.

테스트 대상:

함수가 주어진 입력에 대해 예상되는 출력을 반환합니까?
컴포넌트가 주어진 props로 올바르게 렌더링됩니까?
엣지 케이스가 제대로 작동합니까?

예시 (Jest):

// 테스트할 함수
function add(a, b) {
  return a + b;
}

// 단위 테스트
test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('handles negative numbers', () => {
  expect(add(-1, -2)).toBe(-3);
});

중요한 이유:

조기에 버그를 잡습니다: 프로덕션 전에 문제점을 찾습니다.
변경 사항에 대한 자신감: 두려움 없이 리팩토링
문서화: 테스트는 코드를 사용하는 방법을 보여줍니다.
더 빠른 디버깅: 정확한 실패 위치를 찾습니다.
더 나은 디자인: 테스트 가능한 코드는 일반적으로 더 깔끔한 코드입니다.

테스팅 피라미드:

많은 단위 테스트 (빠르고 저렴함)
더 적은 통합 테스트 (컴포넌트를 함께 테스트)
몇 가지 엔드 투 엔드 테스트 (전체 사용자 흐름, 느림)

주니어의 경우: 테스팅이 왜 중요한지 이해하고 기본 개념을 이해하는 것으로 충분합니다. 포괄적인 테스트 스위트 작성은 일반적으로 엔트리 레벨 직책에 기대되지 않지만 테스팅을 배우려는 의지가 중요합니다.

일반적인 프레임워크: Jest, React Testing Library, Mocha, Jasmine

희귀도: 일반
난이도: 쉬움-중간

총: 21 질문

이 질문들은 기본기 이후 주니어 프론트엔드 면접에서 자주 다루는 React와 도구 관련 실무 주제를 정리한 것입니다. 1부: HTML, CSS 및 JavaScript 기본과 함께 보고, 자신의 프로젝트 예시로 답변을 설명하는 연습을 하세요.

최신 커리어 조언

주니어 프론트엔드 면접 질문: React와 도구

소개

React & 프레임워크 (8 질문)

33. JSX가 무엇이며 React에서 사용하는 이유는 무엇입니까?

34. React에서 props와 state의 차이점을 설명하십시오.

35. useState 훅은 무엇이며 어떻게 사용합니까?

36. useEffect 훅은 무엇을 합니까? 종속성 배열을 설명하십시오.

37. React에서 항목 목록을 어떻게 렌더링합니까? 키가 필요한 이유는 무엇입니까?

38. Virtual DOM은 무엇이며 React에서 사용하는 이유는 무엇입니까?

39. React에서 폼을 어떻게 처리합니까?

40. 함수형 컴포넌트와 클래스 컴포넌트의 차이점은 무엇입니까?

빌드 도구 및 버전 관리 (5 질문)

41. npm은 무엇이며 package.json은 무엇에 사용됩니까?

42. Git은 무엇이며 팀에서 사용하는 이유는 무엇입니까?

43. 일반적인 Git 명령 및 워크플로를 설명하십시오.

44. 병합 충돌은 무엇이며 어떻게 해결합니까?

45. Webpack은 무엇을 합니까? Vite는 무엇입니까?

웹 성능 및 최적화 (3 질문)

46. 웹사이트의 로딩 성능을 어떻게 최적화하시겠습니까?

47. 웹사이트 성능을 측정하는 데 어떤 도구를 사용하시겠습니까?

48. 지연 로딩이란 무엇이며 언제 사용하시겠습니까?

디버깅 및 개발자 도구 (2 질문)

49. 브라우저에서 JavaScript 오류를 어떻게 디버깅합니까?

50. Chrome DevTools의 주요 패널은 무엇이며 무엇에 사용합니까?

접근성 및 모범 사례 (2 질문)

51. 웹 접근성이란 무엇이며 왜 중요합니까?

52. 웹사이트를 더 접근성 있게 만드는 몇 가지 기본 방법은 무엇입니까?

테스팅 인식 (1 질문)

53. 단위 테스트란 무엇이며 왜 중요합니까?

실제로 효과가 있는 주간 커리어 팁

실제로 효과가 있는 주간 커리어 팁

관련 게시물

주니어 프론트엔드 개발자 면접 질문: HTML, CSS, JavaScript

주니어 Python 백엔드 개발자 면접 질문

주니어 Node.js 백엔드 개발자 면접 질문

채용 담당자에게 눈에 띄고 꿈의 직장을 얻으세요

이 게시물 공유

75% ATS 거부율을 극복하세요