반응형
프론트엔드 개발자 이직 준비를 하면서 직접 질문을 받았던 내용을 대해서 정리해 보았습니다.
컴퓨터 공학 관련 질문, 자바스크립트, SPA 프레임워크, 웹 관련 질문과 프로젝트 경험 등 다양하게 질문을 하고, 꼬리에 꼬리를 무는 질문을 주로 많이 합니다.
아래 내용 참고하시고 면접에서 좋은 결과 있으시기를 바라겠습니다.
부족한 부분이나 피드백은 언제나 환영입니다😀
프로토 타입
프로토 타입이 무엇인가요?
- 자바스크립트 가장 상위의 프로토 타입 객체
- 모든 자바스크립트 객체는 Object.prototype을 상속받는다.
프로토 타입으로 할 수 있는 게 무엇인가요?
- 프로토 타입에 메서드 프로퍼티 추가
- 상속으로 기존 클래스의 메서드와 프로퍼티를 사용
Object.prototype은 무엇인가요?
- 자바스크립트 객체를 생성할 때, prototype을 같이 생성한다
- 아래 프로토 타입을 통해서 메서드 및 프로퍼티를 상속받을 수 있다.
- 프로토 타입이 연결되는 것은 프로토 타입 체인
클로저란 무엇인가요? 언제 사용하는가요?
- 클로저는 자신(함수)이 생성될 때, 자신의 스코프에서 알 수 있는 변수를 기억하는 함수입니다.
- 이전 상황을 나중에 일어날 상황과 이어나갈 때, 사
- 함수와 함수의 조합에서 자바스크립트 변수, 함수, 스코프 정보를 유지하는 내부 구조의 조합입니다.
- 함수가 생성될 때, 해당 스코프에 대한 참조를 유지하여, 스코프의 변수에 접근할 수 있는 함수
- 정보 은닉, 데이터 보존, 콜백 함수 상황에서 사용 가능
Virtual DOM이란 무엇이며 어떻게 동작하나요?
- 가상 돔은 실제 DOM 구조를 메모리에 가상으로 구성
- 실제 DOM과 가상 DOM의 변경 사항이 발생했을 때, 실제로 변경된 부분만 리렌더링을 진행합니다.
- DOM 조작을 최소화하기 때문에 웹 애플리케이션 성능 향상에 도움을 줌
- React나 Vue에서 Virtual Dom을 사용
function 함수와 Arrow 함수
function 함수
- 호이스팅이 발생
- 생성자 함수로 사용 가능
- this
- 전역일 때 : window
- 메서드 실행 시 : 메서드를 소유한 객체
- 함수 : 자기 자신
Arrow 함수 () => {}
- 호이스팅이 일어나지 않는다
- 프로토 타입이 없음 -> 생성자 함수로 사용 불가
- this
- 상위 scope의 this를 가리킨다.
호이스팅이란?
- 호이스팅은 끌어올리다는 뜻으로 변수 및 함수를 가장 상단에 끌어올려지게 되는 것을 이야기한다.
- 자바스크립트 코드를 실행하는 과정에서 호이스팅이 생김
- 변수와 함수들을 실행 컨텍스트에 key-value 형태로 저장 후 코드가 순차적으로 실행되게 된다.
함수형 프로그래밍 객체 지향형 프로그래밍
함수형 프로래밍이란?
- 함수형 프로그래밍은 항상 동일하게 동작하는 함수를 만들고 보조 함수를 이용해서 로직을 완성하는 방식으로 프로그래밍을 하는 방법입니다.
객체 지향형 프로그래밍이란?
- 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 객체들 간의 상호작용으로 프로그램을 구성하는 방법
- 장점
- 코드 재사용 가능
- 유지보수 용이
- 대형 프로젝트에 적합
- 추상화, 캡슐화, 상속, 다형성
function과 class 차이
function 함수
- 프로토 타입 기반으로 상속 가능
- myFunction()을 통해서 인스턴스 생성 가능
class 함수
- es6 문법
- 일반적으로 new를 통해 인스턴스 생성
- 생성자 사용 가능
- extends를 통해서 상속 부모 클래스의 변수와 메서드를 상속 가능
- 정적 메서드 static 사용 가능
타입스크립트 장단점
- 장점
- 타입을 강제화하여 오류 수를 줄여준다.
- 객체지향형 프로그래밍이 가능하다
- 유지보수에 용이
- 단점
- 타자수가 많아진다
- 공부가 필요함
- 잘 모르는 사람이 타입스크립트를 사용하게 되면 any 속성을 남발하기 때문에 사용의 의미가 없어짐
- 타입스크립트를 컴파일하기 위한 시간이 필요하고 추가적인 빌드가 필요함
프론트엔드 성능 최적화 하는 방법
- 파일 압축과 최소화 : Javascript, css 파일 압축 및 최소화 주석 및 공백 제거
- 브라우저에 캐시 되는 리소스 활용
- 비동기 사용
- 코드 나누기: 필요한 코드만 초기에 로드되도록 사용
- DOM 조작 최소화: 가상 DOM이나, 프론트엔드 라이브러리 사용
- 서버사이드 렌더링: 서버에서 HTML 코드를 만들어서 로
- 자바스크립트 코드 최적화: 반복문 최적화, 비용이 큰 연산 코드 최적화 등
- 효율적인 API 요청: 무분별한 반복적인 API 호출 자제
웹접근성이란? 중요한 이유는 무엇인가요?
- 모든 사람이 웹 콘텐츠 접근하고 이용할 수 있는 능력
- 시각, 청각, 운동적 장애 또는 고령자, 저사양기기 사용 등을 포함
- 웹 접근성이 중요한 이유는 공정성, 인권, 사회적 통합, 기술 혁신에 도움을 주며 웹 사이트의 접근 가능성에 향상을 줌
반응형 웹디자인이란?
- 다양한 디바이스에서 화면 크기를 자동으로 대응하여 최적의 사용자 경험을 제공하는 디자인 접근 방식
- 주로 CSS 미디어 쿼리를 사용
CORS(Cross-Origin Resource Sharing)란 무엇이며 왜 필요한가요?
- 웹에서 다른 도메인으로 리소스를 요청하는 것을 허용하는 메커니즘
- 일반적으로 보안상의 이유로 도메인이 같은 경우에 리소스 접근 가능
- 하지만 다른 도메인 간의 데이터 공유도 필요하기 때문에 추가적인 설정을 통해 HTTP 메서드나 Requester Header에 인증 정보를 넣어서 전달하여 허용
XSS(Cross-Site Scripting) 공격이란 무엇이며 어떻게 방지할 수 있나요?
- 악의적인 사용자가 고의적으로 스크립트를 삽입하고 해당 스크립트를 사용자의 브라우저에 실행되도록 하는 공격입니다.
- 방지할 수 있는 방법은 입력 데이터 필터 검증 /출력 데이터 적절한 인코딩(html 태그 제거 및 escape 처리) 하는 방법이 있습니다.
쿠키(Cookie)와 세션(Session)의 차이
쿠키
- 클라이언트 저장
- 클라이언트에 수정이 가능하여 보안에 취약
- 만료 날짜와 시간 설정이 가능하여 지속적 또는 일시적으로 사용 가능
세션
- 서버에 저장
- 세션 ID를 생성하여 서버나 데이터 베이스에 저장
- 클라이언트 측에서 수정이 불가 상대적으로 보안적으로 안전
로컬 스토리지(Local Storage) 세션 스토리지(Session Storage) 차이
웹브라우저 클라이언트 측에서 데이터를 저장하기 위한 웹스토리지 기술
로컬스토리지
- 사용자가 직접 삭제하지 않는 이상 영구적으로 유지
- 같은 도메인이면 데이터 공유 가능
세션스토리지
- 탭이나 브라우저 종료 시에 데이터도 함께 삭제
- 같은 탭 또는 같은 창에서만 데이터 공유 가능
728x90
반응형