주니어 풀스택 개발자 면접 질문: 무엇을 준비할까
Milad Bonakdar
작성자
HTML, CSS, JavaScript, React, Node.js, API, SQL, Git, 디버깅을 중심으로 주니어 풀스택 면접 질문을 준비하세요.
풀스택 기본기부터 시작하세요
주니어 풀스택 개발자 면접에서는 간단한 웹 앱이 브라우저에서 데이터베이스까지 어떻게 동작하는지 설명할 수 있는지를 자주 봅니다. HTML과 CSS는 화면 구조를 만들고, JavaScript는 동작을 더하며, React는 UI 상태를 관리하고, Node.js는 서버 로직을 처리하고, API는 계층을 연결하며, SQL은 데이터를 저장하고, Git은 작업을 검토 가능하게 만듭니다.
이 가이드는 먼저 짧고 명확한 답변을 연습하는 데 사용하세요. 그다음 각 답변을 직접 만든 작은 프로젝트와 연결해 설명해 보세요. 주니어 레벨에서는 깊은 아키텍처보다 탄탄한 기본기, 디버깅 습관, 트레이드오프를 솔직하게 설명하는 능력이 중요합니다.
준비 방법
- UI 이벤트에서 API 요청, 데이터베이스 쿼리까지 한 프로젝트의 흐름을 설명할 수 있게 준비하세요.
- 만든 기능뿐 아니라 직접 고친 버그도 말할 수 있어야 합니다.
- 답변은 실용적으로 하세요. 개념 정의, 작은 예시, 흔한 실수를 함께 말하면 좋습니다.
HTML & CSS
1. CSS의 박스 모델에 대해 설명하세요.
답변: CSS 박스 모델은 웹 레이아웃의 기본입니다. 모든 요소는 직사각형 상자로 표현됩니다.
- 콘텐츠 (Content): 실제 텍스트 또는 이미지.
- 패딩 (Padding): 콘텐츠 주위의 투명한 영역 (테두리 안쪽).
- 테두리 (Border): 패딩과 콘텐츠를 둘러싸는 테두리.
- 마진 (Margin): 테두리 바깥쪽의 투명한 영역 (요소 간 간격 생성).
희귀도: 매우 흔함 난이도: 쉬움
2. display: block, inline, inline-block의 차이점은 무엇입니까?
답변:
- Block: 새 줄에서 시작하고 사용 가능한 전체 너비를 차지합니다 (예:
<div>,<p>). - Inline: 새 줄에서 시작하지 않고 필요한 만큼의 너비만 차지합니다.
width및height속성이 적용되지 않습니다 (예:<span>,<a>). - Inline-block: 인라인 요소와 유사하지만
width및height를 설정할 수 있습니다. 그리드 또는 탐색 메뉴에 유용합니다.
희귀도: 흔함 난이도: 쉬움
3. 시맨틱 HTML이란 무엇이며 왜 중요한가요?
답변: 시맨틱 HTML은 단순히 보이는 방식이 아닌 콘텐츠의 의미를 전달하는 태그를 사용하는 것을 의미합니다.
- 예시: 단순히
<div>대신<header>,<nav>,<article>,<footer>를 사용합니다. - 중요성:
- 접근성: 화면 판독기는 이러한 태그를 사용하여 시각 장애가 있는 사용자가 탐색할 수 있도록 돕습니다.
- SEO: 검색 엔진은 콘텐츠의 구조와 중요도를 더 잘 이해합니다.
- 가독성: 개발자가 코드를 더 쉽게 이해할 수 있습니다.
희귀도: 흔함 난이도: 쉬움
4. Flexbox와 CSS Grid에 대해 설명하세요.
답변:
- Flexbox: 1차원 레이아웃 모델 (행 OR 열). 컨테이너 내에서 항목을 정렬하거나 공간을 분배하는 데 가장 적합합니다 (예: 탐색 모음).
- CSS Grid: 2차원 레이아웃 모델 (행 AND 열). 페이지의 전체 레이아웃을 정의하는 데 가장 적합합니다 (예: 머리글, 사이드바, 주요 콘텐츠, 바닥글).
희귀도: 흔함 난이도: 중간
JavaScript
5. var, let, const의 차이점은 무엇입니까?
답변:
var: 함수 범위 (또는 전역 범위). 다시 선언하고 업데이트할 수 있습니다. 해당 범위의 맨 위로 호이스팅됩니다.let: 블록 범위 (중괄호{}내에서만 존재). 업데이트할 수 있지만 동일한 범위에서 다시 선언할 수 없습니다.const: 블록 범위. 업데이트하거나 다시 선언할 수 없습니다. 선언 시 초기화해야 합니다. 재할당해야 하는 경우가 아니면 기본적으로 이것을 사용하십시오.
희귀도: 매우 흔함 난이도: 쉬움
6. async와 await에 대해 설명하세요.
답변:
async와 await (ES2017에 도입됨)는 비동기 코드가 동기 코드처럼 보이도록 하고 동작하도록 만듭니다.
async: 함수 앞에 배치되며 함수가 Promise를 반환하도록 합니다.await:async함수 내에서 사용되며 Promise가 해결될 때까지 실행을 일시 중지합니다.- 장점:
.then()및.catch()를 연결하는 것보다 더 깔끔하고 읽기 쉽습니다.
희귀도: 흔함 난이도: 중간
7. DOM이란 무엇입니까?
답변: DOM (Document Object Model)은 웹 문서를 위한 프로그래밍 인터페이스입니다. 프로그램 (JavaScript)이 문서 구조, 스타일 및 콘텐츠를 변경할 수 있도록 페이지를 나타냅니다. DOM은 문서를 노드와 객체로 나타냅니다.
희귀도: 흔함 난이도: 쉬움
8. ==와 ===의 차이점은 무엇입니까?
답변:
==(느슨한 동등성): 타입 강제 변환 (공통 타입으로 변환)을 수행한 후 값을 비교합니다. 예:5 == "5"는true입니다.===(엄격한 동등성): 값과 타입을 모두 비교합니다. 타입 강제 변환이 없습니다. 예:5 === "5"는false입니다.- 모범 사례: 예기치 않은 버그를 피하기 위해 항상
===를 사용하십시오.
희귀도: 흔함 난이도: 쉬움
React
9. 가상 DOM이란 무엇입니까?
답변: 가상 DOM은 메모리에 보관된 실제 DOM의 경량 복사본입니다.
- 프로세스: 상태가 변경되면 React는 먼저 가상 DOM을 업데이트합니다. 그런 다음 새 가상 DOM을 이전 가상 DOM과 비교 (diffing)하고 실제 DOM을 업데이트하는 가장 효율적인 방법 (reconciliation)을 계산합니다.
- 장점: 느린 실제 DOM의 직접적인 조작을 최소화하여 성능을 향상시킵니다.
희귀도: 흔함 난이도: 중간
10. Props와 State란 무엇입니까?
답변:
- Props (Properties): 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터입니다. 컴포넌트를 재사용 가능하고 동적으로 만들 수 있습니다.
- State: 컴포넌트 내에서 관리되는 데이터입니다. 시간이 지남에 따라 변경될 수 있습니다 (예: 사용자 입력, API 응답). 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.
희귀도: 매우 흔함 난이도: 쉬움
11. React Hooks란 무엇입니까? 몇 가지 일반적인 Hooks를 나열하십시오.
답변: Hooks는 함수 컴포넌트에서 state, context, refs, effects 같은 React 기능을 사용할 수 있게 해주는 함수입니다.
useState: 입력값이나 선택된 탭처럼 컴포넌트의 로컬 상태를 저장합니다.useEffect: 데이터 가져오기나 이벤트 구독처럼 React 바깥의 것과 컴포넌트를 동기화합니다. 모든 계산에 쓰는 도구는 아닙니다.useContext: props를 여러 단계로 전달하지 않고 공유 context를 읽습니다.- 면접 팁: Hooks 규칙도 말하세요. hook은 React 컴포넌트나 custom hook의 최상위에서 호출하고, 반복문이나 조건문 안에서는 호출하지 않습니다.
희귀도: 흔함 난이도: 중간
Node.js & 백엔드
12. Node.js란 무엇이며 왜 단일 스레드인가요?
답변: Node.js는 V8 엔진 위에서 동작하는 JavaScript 런타임입니다. JavaScript는 하나의 메인 스레드에서 실행되지만, event loop가 비동기 작업을 조율하기 때문에 I/O 중심 작업을 많이 처리할 수 있습니다.
- 메인 스레드: JavaScript callback을 실행합니다.
- 논블로킹 I/O: 파일, 네트워크, 데이터베이스 작업을 운영체제나 libuv에 맡기고 결과가 준비되면 이어서 처리합니다.
- 중요한 한계: CPU를 많이 쓰는 JavaScript는 event loop를 막을 수 있습니다. 무거운 작업은 worker thread, job queue, 또는 요청 처리 경로 밖으로 분리하는 것이 좋습니다.
- 좋은 예: 데이터베이스나 네트워크 호출을 많이 기다리는 API 서버.
희귀도: 흔함 난이도: 중간
13. NPM과 package.json이란 무엇입니까?
답변:
- NPM (Node Package Manager): Node.js의 기본 패키지 관리자입니다. 라이브러리 (종속성)를 설치하고 관리할 수 있습니다.
package.json: Node.js 프로젝트의 매니페스트 파일입니다. 메타데이터 (이름, 버전) 및 종속성 (앱을 실행하는 데 필요한 라이브러리)을 나열합니다.
희귀도: 흔함 난이도: 쉬움
14. GET과 POST의 차이점을 설명하세요.
답변:
- GET: 리소스를 조회합니다. 서버 상태를 의도적으로 바꾸지 않는 safe 메서드여야 하고, 같은 요청을 반복해도 같은 효과를 내는 idempotent 메서드입니다.
- POST: 서버가 처리할 데이터를 보냅니다. 리소스를 만들거나 어떤 작업을 실행할 때 자주 쓰이며, idempotent가 보장되지 않습니다. API가 막아주지 않으면 반복 POST로 중복 작업이 생길 수 있습니다.
- 실무 예시: 상품 목록을 불러올 때는 GET, 주문 제출이나 댓글 생성에는 POST를 사용합니다.
희귀도: 흔함 난이도: 쉬움
데이터베이스 (SQL)
15. 기본 키와 외래 키란 무엇입니까?
답변:
- 기본 키: 테이블의 각 행을 고유하게 식별하는 열 (또는 열 집합)입니다.
NULL일 수 없습니다. - 외래 키: 다른 테이블의 기본 키에 연결되는 열입니다. 두 테이블 간의 관계를 설정합니다.
희귀도: 흔함 난이도: 쉬움
16. INNER JOIN과 LEFT JOIN의 차이점을 설명하세요.
답변:
- INNER JOIN: 두 테이블 모두에서 일치하는 값이 있는 레코드를 반환합니다.
- LEFT JOIN (또는 LEFT OUTER JOIN): 왼쪽 테이블의 모든 레코드와 오른쪽 테이블의 일치하는 레코드를 반환합니다. 일치하는 항목이 없으면 오른쪽의 결과는
NULL입니다.
희귀도: 매우 흔함 난이도: 중간
17. 정규화란 무엇입니까?
답변: 정규화는 데이터베이스에서 중복성을 줄이고 데이터 무결성을 개선하기 위해 데이터를 구성하는 프로세스입니다.
- 목표: 더 큰 테이블을 더 작은 테이블로 나누고 관계를 사용하여 연결합니다.
- 형식: 1NF, 2NF, 3NF (대부분의 애플리케이션에는 3차 정규화 형식이 일반적으로 충분합니다).
희귀도: 드뭄 (주니어의 경우) 난이도: 중간
일반
18. Git이란 무엇이며 왜 사용하나요?
답변: Git은 분산 버전 관리 시스템입니다.
- 사용법: 소프트웨어 개발 중에 소스 코드의 변경 사항을 추적합니다.
- 장점: 여러 개발자가 함께 작업할 수 있고 (협업), 변경 사항 기록을 유지하고 (버전 관리), 문제가 발생하면 이전 상태로 되돌릴 수 있습니다.
희귀도: 흔함 난이도: 쉬움
19. API란 무엇입니까?
답변: API는 Application Programming Interface의 약자입니다. 서로 다른 소프트웨어 애플리케이션이 서로 통신할 수 있도록 하는 규칙 집합입니다. 웹 개발에서는 일반적으로 프론트엔드 (클라이언트)가 백엔드 (서버)에서 데이터를 요청하는 REST API를 의미합니다.
희귀도: 흔함 난이도: 쉬움
20. 웹 애플리케이션을 어떻게 디버깅합니까?
답변: 먼저 문제를 재현하고 어디서 발생하는지 좁혀갑니다. 브라우저, 네트워크 요청, 백엔드 핸들러, 데이터베이스 중 어느 구간인지 확인합니다.
- 프론트엔드: 브라우저 DevTools를 사용합니다. Console은 오류, Network는 API 상태와 payload, Elements는 HTML/CSS를 확인하고 필요하면 React DevTools도 사용합니다.
- 백엔드: 구조화된 로그, request ID, stack trace, 환경 변수, 데이터베이스 쿼리를 확인합니다. 흐름이 불명확하면 디버거를 사용합니다.
- 좋은 면접 답변: 실제로 고친 버그, 처음 확인한 것, 수정이 맞는지 확인한 방법을 설명하세요.
희귀도: 흔함 난이도: 쉬움
