[프런트엔드 취업 필독] 프론트엔드 개발 면접 질문과 답변 선정_확장 질문
가장 어려웠던 기술적인 문제는 무엇입니까? 어떻게 해결하셨나요?
일반적으로 사용되는 라이브러리는 무엇인가요? 일반적으로 사용되는 프런트엔드 개발 도구는 무엇입니까? 어떤 애플리케이션이나 구성 요소를 개발했습니까?
페이지를 재구성하는 방법은 무엇입니까?
IE를 다른 브라우저와 다르게 만드는 기능을 나열해 보세요.
웹사이트의 99%를 재구성해야 한다고 말하는 책은 무엇인가요?
우아한 저하와 점진적인 향상이란 무엇인가요?
웹 애플리케이션이 서버에서 클라이언트로 데이터를 적극적으로 푸시하는 방법은 무엇입니까?
Node의 장점과 단점에 대한 자신의 의견이 있나요?
* (장점) Node는 이벤트 기반이고 비차단이기 때문에 동시 요청을 처리하는 데 매우 적합합니다.
따라서 Node에 구축된 프록시 서버는 다른 기술(예: Ruby)로 구현된 서버보다 성능이 훨씬 뛰어납니다.
게다가 Node 프록시 서버와 상호작용하는 클라이언트 코드도 자바스크립트 언어로 작성되어 있는데,
그래서 클라이언트와 서버가 모두 같은 언어로 작성되어 있다는 게 참 아름답습니다.
* (단점) Node는 상대적으로 새로운 오픈 소스 프로젝트이므로 안정적이지 않고 항상 변화하며,
타사 라이브러리 지원이 부족합니다. 당시 Ruby/Rails의 모습과 비슷합니다.
어떤 성능 최적화 방법이 있나요?
(Yahoo의 14가지 성능 최적화 원칙 참조)
(1) http 요청 수를 줄입니다: CSS Sprites, JS, CSS 소스 코드 압축, 적절한 이미지 크기 제어 웹 페이지 Gzip, CDN 호스팅, 데이터 캐시, 이미지 서버.
(2) HTML 태그로 인한 대역폭 낭비를 줄이기 위한 프런트 엔드 템플릿 JS + 데이터 프런트 엔드는 AJAX 요청 결과를 저장하기 위해 변수를 사용할 때마다 요청할 필요가 없으므로 개수가 줄어듭니다. of request
(3) DOM 작업 대신 innerHTML을 사용하여 DOM 작업 수를 줄이고 JavaScript 성능을 최적화합니다.
(4) 설정할 스타일이 많을 경우 스타일을 직접 조작하는 대신 className을 설정합니다.
(5) 전역 변수를 덜 사용하고 DOM 노드 검색 결과를 캐시합니다. IO 읽기 작업을 줄입니다.
(6) 동적 속성(동적 속성)이라고도 알려진 CSS 표현식(css 표현식)을 사용하지 마세요.
(7) 이미지 사전 로드, 스타일 시트를 상단에 배치하고 스크립트를 하단에 타임스탬프와 함께 배치합니다.
(8) 페이지의 기본 레이아웃에서 테이블을 사용하지 마세요. 콘텐츠가 완전히 다운로드될 때까지 테이블이 표시되지 않습니다. 표시는 div+css 레이아웃보다 느립니다.
http 상태 코드는 무엇인가요? 무슨 뜻인가요?
100-199는 클라이언트가 그에 따라 취해야 하는 특정 작업을 지정하는 데 사용됩니다.
200-299는 성공적인 요청을 나타내는 데 사용됩니다.
300-399는 이동된 파일에 사용되며 새 주소 정보를 지정하기 위해 위치 헤더 정보에 포함되는 경우가 많습니다.
400-499는 클라이언트 오류를 나타내는 데 사용됩니다. 400 1. 의미가 올바르지 않으며 서버가 현재 요청을 이해할 수 없습니다. 401 현재 요청에는 사용자 인증이 필요합니다. 403 서버가 요청을 이해했지만 실행을 거부했습니다.
500-599는 서버 오류를 지원하는 데 사용됩니다. 503 – 서비스를 사용할 수 없음
URL 입력부터 페이지 로딩 완료, 페이지 표시까지의 과정에서 어떤 일이 발생하나요? (프로세스가 자세할수록 좋음)
브라우저 캐시 검색
DNS 확인, 도메인 이름에 해당하는 IP 주소 찾기, 리디렉션(301), 두 번째 GET 요청 발행
HTTP 프로토콜 세션 수행
클라이언트가 전송 헤더(요청 헤더)
서버 피드백 헤더(응답 헤더)
html 문서 다운로드가 시작됩니다
문서 트리가 구축되고 마크 요청에 따라 지정된 MIME 유형의 파일이 필요합니다
파일이 표시됩니다
[
브라우저에서 수행되는 작업은 대략 다음 단계로 나뉩니다. ：
로딩: 요청한 URL에 따라 도메인 이름 확인을 수행하고, 서버에 요청을 시작하고, 파일(HTML, JS, CSS, 이미지 등)을 수신합니다. .
구문 분석: 로드된 리소스(HTML, JS, CSS 등)에 대한 구문 분석을 수행하고 해당 내부 데이터 구조(예: HTML DOM 트리, JS(객체) 속성 테이블, CSS 스타일 규칙 등)를 제안합니다.
}
프론트엔드 외에 다른 기술을 알고 계시나요? 당신의 가장 큰 기술은 무엇입니까?
일반적으로 사용되는 개발 도구는 무엇이며 그 이유는 무엇입니까?
프론트엔드 인터페이스 엔지니어의 위치를 어떻게 이해하시나요? 그 전망은 무엇입니까?
프론트엔드는 백엔드, 데이터베이스, 제품관리, 운영, 보안보다 사용자에게 가장 가까운 프로그래머입니다.
1. 인터페이스 상호 작용 실현
2. 사용자 경험 향상
3. Node.js를 사용하면 프런트 엔드는 서버 측에서 몇 가지 기능을 실현할 수 있습니다.
프런트 엔드는 사용자에게 가장 가까운 프로그래머이며, 프런트엔드는 제품을 90포인트에서 100포인트, 또는 그 이상으로 진화시키는 것입니다.
프로젝트에 참여하여 고품질, 1px까지 정확한 렌더링을 신속하게 완료합니다.
팀원과의 커뮤니케이션, UI 디자인,
좋은 페이지 구조, 페이지 재구성 및 사용자 경험
해킹을 처리하고, 아름다운 코드 형식을 작성하세요.
서버를 최적화하고 최신 프런트엔드 기술을 수용하세요.
야근을 하는 것에 대해 어떻게 생각하시나요?
야근은 돈을 빌리는 것과 같습니다------가난한 사람이 아닌 긴급 상황을 돕는 것이 원칙입니다
프로젝트를 보통 어떻게 관리하시나요?
초기 팀에서는 전역 스타일(globe.css), 인코딩 모드(utf-8) 등을 결정해야 합니다.
작성 습관이 일관되어야 합니다(예를 들어 모두 상속 쓰기를 사용하고 단일 스타일은 하나로 작성됩니다). line)
주석 스타일 작성 사람들, 각 모듈은 시간에 따라 표시됩니다(핵심 스타일 호출이 표시되는 위치).
페이지가 표시됩니다(예: 페이지 모듈 시작 및 종료).
JS는 폴더로 구분됩니다. JS 기능을 준영어 번역으로 저장하기
사진은 가능한 한 통합된 Images.png PNG8 형식 파일을 사용하여 동시 아키텍처를 사용합니까?
최근 가장 인기 있는 것들에 대해 이야기해볼까요? 어떤 웹사이트를 자주 방문하시나요?
모바일 단말기(Android IOS)에서 사용자 경험을 개선하는 방법은 무엇입니까?
명확한 시각적 수직선, 정보 그룹화, 궁극적인 빼기,
활용 대체 입력, 레이블 및 텍스트 배열 선택,
현재 팀에서 어떤 역할을 맡고 있으며 어떤 역할을 하고 있습니까?
풀스택 개발자란 무엇이라고 생각하시나요?
현재 주목하고 있는 최신 웹 프론트엔드 기술(향후 개발 방향)은 무엇인가요?
프론트엔드 팀은 어떻게 일하나요(제품을 구현하는 과정)?회사 급여구조는 어떤가요?
