🐻 : 이제 한 4년차가 되어가니, 신입들 면접이 아주 많이 들어오는데 신입들을 위한 면접 질문 리스트가 필요할 것 같아서 포스팅을 해보겠습니다. 뭐 다른 회사도 다 다르고, 회사 마다 자주 사용하는 것에 따라 다르니 포괄적으로 정리해 보았다. 물론, 정확히 아는게 더 중요하니 따로 찾아보고 공부 해 보는 것을 추천
✏️ 웹개발자 신입 면접 질문 리스트
1. HTML, CSS, JavaScript의 차이점에 대해 설명해주세요.
2. 웹 페이지 성능을 최적화하는 방법은 무엇이 있나요?
3. 브라우저의 렌더링 과정에 대해 설명해주세요.
4. RESTful API와 SOAP API의 차이점은 무엇인가요?
5. CORS(Cross-Origin Resource Sharing)가 무엇인가요?
6. 웹 보안에서 중요한 개념과 방법에 대해 설명해주세요.
7. 반응형 웹 디자인(Responsive Web Design)이 무엇인가요?
8. 자바스크립트의 이벤트 루프(Event Loop)에 대해 설명해주세요.
9. 비동기 프로그래밍과 콜백, 프로미스(Promise)의 차이점에 대해 설명해주세요.
10. 버전 관리 도구로 Git을 사용해본 경험이 있나요?
11. HTTP와 HTTPS의 차이점은 무엇인가요?
12. 웹 애플리케이션에서 쿠키와 세션의 차이점은 무엇인가요?
13. 웹 개발에서 SEO(검색엔진 최적화)의 중요성과 방법에 대해 설명해주세요.
14. 웹에서 사용되는 주요 HTTP 메서드(GET, POST, PUT, DELETE 등)에 대해 설명해주세요.
15. 웹 소켓(WebSockets)이 무엇이고, 어떻게 사용하는지 설명해주세요.
16. 자바스크립트의 this 키워드에 대해 설명해주세요.
17. 웹 애플리케이션에서 사용자 인증 방식에는 어떤 것들이 있나요?
18. 싱글 페이지 애플리케이션(SPA)과 멀티 페이지 애플리케이션(MPA)의 차이점은 무엇인가요?
19. Node.js를 사용한 서버 사이드 개발 경험이 있나요?
20. 웹 애플리케이션에서 상태 관리 방법에 대해 설명해주세요.
21. 프론트엔드와 백엔드 간의 데이터 통신 방식은 어떤 것이 있나요?
22. 모듈화(Modularization)와 그 이점에 대해 설명해주세요.
23. 자바스크립트에서 클로저(Closure)란 무엇인가요?
24. 프론트엔드에서 자주 사용하는 라이브러리와 프레임워크에 대해 설명해주세요.
25. 웹 개발에서 테스트의 중요성과 사용하는 테스트 도구에 대해 설명해주세요.
1. HTML, CSS, JavaScript의 차이점에 대해 설명해주세요.
답변:
- HTML은 웹 페이지의 구조를 정의합니다. 텍스트, 이미지, 비디오 등 페이지에 표시될 내용을 정의합니다.
- CSS는 HTML 요소들의 스타일을 정의합니다. 색상, 배경, 레이아웃 등 시각적인 스타일을 지정합니다.
- JavaScript는 웹 페이지에서 동적인 행동을 추가합니다. 사용자의 입력에 반응하거나, 동적으로 콘텐츠를 변경하는 등 인터랙션을 제어합니다.
2. 웹 페이지 성능을 최적화하는 방법은 무엇이 있나요?
답변:
- 이미지 최적화 (압축 및 크기 조정)
- 코드 압축 (HTML, CSS, JavaScript)
- 브라우저 캐시 활용
- Lazy loading 적용 (이미지나 비디오 등을 필요한 시점에 로딩)
- 서버 측 렌더링(SSR) 및 CDN(Content Delivery Network) 사용
- SSR: 서버에서 페이지를 미리 렌더링해서 클라이언트에 전달하는 방식으로, SEO와 초기 로딩 속도에 유리합니다.
- CDN: 콘텐츠를 여러 서버에 분산시켜, 사용자에게 더 빠르고 안정적인 콘텐츠 제공을 하는 방식입니다.
3. 브라우저의 렌더링 과정에 대해 설명해주세요.
답변:
브라우저는 HTML, CSS, JavaScript를 처리하여 웹 페이지를 화면에 그립니다. 렌더링 과정은 대략적으로 아래와 같습니다:
- HTML 파싱: HTML 문서를 파싱하여 DOM(Document Object Model)을 생성합니다.
- CSS 파싱: CSS를 파싱하여 스타일을 정의합니다.
- 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 만듭니다.
- 레이아웃 계산: 요소의 정확한 위치와 크기를 계산합니다.
- 페인팅: 화면에 픽셀을 그립니다.
- 컴포지팅: 페인팅된 레이어들을 결합하여 화면에 표시합니다.
4. RESTful API와 SOAP API의 차이점은 무엇인가요?
답변:
- RESTful API는 HTTP 메서드를 사용하고, URL을 통해 리소스를 정의하며, JSON 형식의 데이터를 주고받습니다. 간결하고 직관적입니다.
- SOAP API는 XML을 사용하고, HTTP, SMTP 등 다양한 프로토콜을 지원합니다. 보안, 트랜잭션 관리가 중요한 시스템에 적합합니다.
5. CORS(Cross-Origin Resource Sharing)가 무엇인가요?
답변:
CORS는 다른 도메인에서 리소스를 요청할 때 발생하는 보안 메커니즘입니다. 기본적으로 브라우저는 다른 도메인에서의 요청을 제한하지만, 서버에서 Access-Control-Allow-Origin 헤더를 설정하여 이를 허용할 수 있습니다.
6. 웹 보안에서 중요한 개념과 방법에 대해 설명해주세요.
답변:
- XSS(Cross-Site Scripting): 악성 스크립트 삽입 공격. 이를 방지하려면 입력값을 필터링하고, CSP(Content Security Policy)를 설정합니다.
- CSRF(Cross-Site Request Forgery): 사용자가 원치 않는 요청을 보내게 만드는 공격. 이를 방지하려면 CSRF 토큰을 사용합니다.
- HTTPS: 암호화된 통신을 통해 중간자 공격을 방지합니다.
7. 반응형 웹 디자인(Responsive Web Design)이 무엇인가요?
답변:
반응형 웹 디자인은 다양한 화면 크기와 디바이스에서 최적화된 레이아웃을 제공하는 기술입니다. CSS 미디어 쿼리와 유연한 그리드 시스템을 사용하여 화면 크기에 맞춰 자동으로 조정되는 디자인을 만듭니다.
8. 자바스크립트의 이벤트 루프(Event Loop)에 대해 설명해주세요.
답변:
이벤트 루프는 자바스크립트의 비동기 처리 모델입니다. JavaScript는 단일 스레드로 실행되며, 비동기 작업은 콜백 큐에 저장됩니다. 이벤트 루프는 콜백 큐에서 대기 중인 작업을 확인하고, 호출 스택이 비어있을 때 이를 실행합니다.
9. 비동기 프로그래밍과 콜백, 프로미스(Promise)의 차이점에 대해 설명해주세요.
답변:
- 콜백은 비동기 작업이 끝난 후 호출되는 함수입니다. 콜백 지옥 문제를 일으킬 수 있습니다.
- **프로미스(Promise)**는 비동기 작업의 완료 또는 실패를 처리하는 객체로, .then()과 .catch()로 결과를 처리할 수 있습니다.
10. 버전 관리 도구로 Git을 사용해본 경험이 있나요?
답변:
"네, Git을 사용하여 버전 관리를 했습니다. Git을 사용해 git commit, git push, git pull, git merge 등을 경험했고, GitHub와 GitLab에서 협업을 통해 브랜치 관리와 코드 리뷰를 했습니다."
11. HTTP와 HTTPS의 차이점은 무엇인가요?
답변:
- HTTP는 데이터를 암호화하지 않고 평문으로 전송하는 프로토콜입니다.
- HTTPS는 HTTP에 SSL/TLS 암호화 기술을 적용하여 데이터 전송을 안전하게 보호하는 프로토콜입니다.
12. 웹 애플리케이션에서 쿠키와 세션의 차이점은 무엇인가요?
답변:
- 쿠키는 클라이언트 측에 저장되는 작은 데이터 조각으로, 사용자 정보나 인증 정보를 저장합니다.
- 세션은 서버 측에 저장되는 데이터로, 클라이언트와 서버 간의 상태를 유지하는 데 사용됩니다.
13. 웹 개발에서 SEO(검색엔진 최적화)의 중요성과 방법에 대해 설명해주세요.
답변:
SEO는 웹사이트가 검색 엔진에서 높은 순위를 차지하게 하는 최적화 작업입니다. 중요한 방법으로는 키워드 최적화, 메타 태그 사용, URL 구조 개선, 빠른 페이지 로딩 속도 등이 있습니다.
14. 웹에서 사용되는 주요 HTTP 메서드(GET, POST, PUT, DELETE 등)에 대해 설명해주세요.
답변:
- GET: 서버에서 데이터를 요청합니다.
- POST: 서버에 데이터를 생성하거나 전송합니다.
- PUT: 서버의 기존 데이터를 수정합니다.
- DELETE: 서버의 데이터를 삭제합니다.
15. 웹 소켓(WebSockets)이 무엇이고, 어떻게 사용하는지 설명해주세요.
답변:
WebSocket은 클라이언트와 서버 간의 양방향 실시간 통신을 가능하게 하는 프로토콜입니다. 연결이 한 번 이루어지면, 클라이언트와 서버는 지속적으로 데이터를 주고받을 수 있습니다.
16. 자바스크립트의 this 키워드에 대해 설명해주세요.
답변:
this는 현재 실행 중인 함수나 객체를 참조하는 키워드입니다. 객체의 메서드 안에서는 해당 객체를, 전역에서는 전역 객체를 참조합니다.
17. 웹 애플리케이션에서 사용자 인증 방식에는 어떤 것들이 있나요?
답변:
- 세션 기반 인증: 서버에 세션 정보를 저장하고 클라이언트는 세션 ID를 쿠키로 관리합니다.
- 토큰 기반 인증(JWT): 클라이언트는 서버에서 발급받은 JWT 토큰을 저장하고, 요청 시 토큰을 서버에 전달하여 인증을 처리합니다.
18. 싱글 페이지 애플리케이션(SPA)과 멀티 페이지 애플리케이션(MPA)의 차이점은 무엇인가요?
답변:
- SPA는 페이지를 새로 고침하지 않고 동적으로 콘텐츠를 변경하는 방식입니다. React, Angular 등이 SPA의 예입니다.
- MPA는 각 페이지를 요청할 때마다 새로운 페이지를 로드합니다. 전통적인 웹 애플리케이션 구조입니다.
19. Node.js를 사용한 서버 사이드 개발 경험이 있나요?
답변:
"네, Node.js를 사용하여 서버를 개발한 경험이 있습니다. Express.js를 사용하여 RESTful API를 구현하고, MongoDB와 연결하여 데이터를 처리하는 작업을 했습니다."
20. 웹 애플리케이션에서 상태 관리 방법에 대해 설명해주세요.
답변:
상태 관리는 애플리케이션의 데이터 흐름을 제어하는 방식입니다. React에서는 useState, useReducer, 또는 Redux와 같은 상태 관리 라이브러리를 사용하여 애플리케이션의 상태를 관리합니다.
21. 프론트엔드와 백엔드 간의 데이터 통신 방식은 어떤 것이 있나요?
답변:
프론트엔드와 백엔드는 주로 RESTful API 또는 GraphQL을 통해 데이터를 주고받습니다. 또한, WebSocket을 사용하여 실시간 통신을 할 수 있습니다.
22. 모듈화(Modularization)와 그 이점에 대해 설명해주세요.
답변:
모듈화는 큰 프로그램을 작은 모듈로 나누어 관리하는 방식입니다. 이점은 코드의 재사용성, 유지보수 용이성, 코드 가독성 향상 등이 있습니다.
23. 자바스크립트에서 클로저(Closure)란 무엇인가요?
답변:
클로저는 함수가 자신이 선언된 환경의 변수에 접근할 수 있는 특성입니다. 이를 통해 함수 외부에서도 함수 내 변수를 사용할 수 있습니다.
24. 프론트엔드에서 자주 사용하는 라이브러리와 프레임워크에 대해 설명해주세요.
답변:
React, Vue.js, Angular는 프론트엔드 프레임워크 및 라이브러리로, 동적이고 효율적인 사용자 인터페이스를 구축하는 데 사용됩니다.
25. 웹 개발에서 테스트의 중요성과 사용하는 테스트 도구에 대해 설명해주세요.
답변:
테스트는 코드의 정확성을 확인하고, 버그를 예방하는 데 중요합니다.
'IT STUDY ✏️' 카테고리의 다른 글
| 컴퓨터,노트북 살 때 확인 해보아야 할 점들 핵심 키워드로 정리 🖥️ (0) | 2025.03.15 |
|---|