728x90
1. 브라우저 작동 원리
- 브라우저는 HTML 문서를 가져와 파싱 -> DOM(Document Object Model)을 생성
-> CSS 파일을 로드하여 스타일을 적용
-> JavaScript 코드 실행 -> DOM 조작 및 이벤트 처리
-> 렌더링 엔진을 통해 레이아웃, 페인팅 -> 화면에 컨텐츠가 표시 - HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유
JavaScript 실행이 렌더링 프로세스를 차단하기 때문
브라우저는 JavaScript 실행이 완료될 때까지 렌더링을 중단하고, 실행 후 렌더링을 재개
2. CSR / SSR
- CSR (Client-Side Rendering)
브라우저에서 JavaScript를 이용해 동적으로 컨텐츠를 렌더링하는 방식
초기 로딩 시 서버에서 HTML과 빈 페이지를 받은 뒤, JavaScript가 실행되어 컨텐츠를 채운다. - SSR (Server-Side Rendering)
서버에서 컨텐츠를 렌더링하여 브라우저에 전달하는 방식
초기 로딩 시 서버에서 완성된 HTML을 받아 화면에 표시
3. attribute와 property의 차이
- attribute
HTML 요소의 속성
초기 HTML 소스에 포함되어 있으며, JavaScript를 통해 속성 값을 변경할 수 있다. - property
JavaScript에서 객체의 속성
DOM 요소의 경우, 해당 요소의 속성과 상응하는 속성들이 JavaScript 객체의 프로퍼티로 매핑
4. 쿠키, 세션, 웹스토리지
- 쿠키
클라이언트 측에 작은 데이터 조각을 저장하는데 사용, 주로 인증 정보나 사용자 설정 등을 저장 - 세션
서버 측에 사용자 데이터를 저장하는데 사용, 보통 인증 정보나 상태 정보를 관리 - 웹스토리지
브라우저 내에 데이터를 임시로 저장하는데 사용, localStorage와 sessionStorage가 존재
5. Flexbox
유연한 레이아웃을 만들기 위한 CSS 레이아웃 모델로, 요소의 크기와 위치를 조정하는 데 사용
6. px, em, rem
- px
픽셀 단위로 크기를 정한다. - em
현재 요소의 글꼴 크기에 대한 상대적인 크기를 정한다. - rem
루트 요소(일반적으로 <html>)의 글꼴 크기에 대한 상대적인 크기를 정한다.
7. vw, vh
- vw
뷰포트의 너비에 대한 상대적 크기 - vh
뷰포트의 높이에 대한 상대적 크기
8. Cascading
CSS의 'C'로서, 스타일 규칙이 충돌할 때 적용 순서에 따라 어떤 규칙을 적용할지를 결정
9. SCSS
Sass(Syntactically Awesome Style Sheets)의 한 형식
CSS의 확장된 문법을 제공하여 스타일시트 작성을 더 효율적으로 할 수 있게 한다.
10. postition, display
- postition
요소의 위치를 조정하는 데 사용
static, relative, absolute, fixed, sticky - display
요소의 표시 방법을 정의합니다.
block, inline, inline-block, none
11. TDD에 대한 경험과 장단점
테스트를 먼저 작성하고 그 테스트를 통과하는 코드를 작성하는 개발 방법론
장점: 코드 품질 향상, 버그 감소, 유연성 증가 등
단점: 초기 개발 시간 증가, 추가 작업 필요 등
12. 토큰 기반 인증 방식
사용자 인증을 위해 토큰을 사용하는 방식
토큰은 서버와 클라이언트 간에 교환되며 보안을 강화
13. bundle의 사이즈를 줄이려면
- 불필요한 코드 제거
- 이미지 최적화
- 코드 스플리팅
- gzip 압축
14. 크로스 브라우징
서로 다른 브라우저 및 버전에서 웹사이트가 일관된 방식으로 동작하도록 보장
15. 객체 지향 프로그래밍이란
코드를 객체들의 상호작용으로 모델링하는 프로그래밍 패러다임
상속, 캡슐화, 다형성 등의 개념 사용
16. 웹사이트 성능 최적화
- 이미지 최적화
- 리소스 미니파이
- 브라우저 캐싱
- 비동기 로딩
- 렌더링 최적화
17. REST API
Representational State Transfer의 약자
HTTP를 기반으로 한 웹 서비스 아키텍처
자원을 URL로 표현하고, HTTP 메소드(GET, POST, PUT, DELETE)를 사용하여 상태 전환 수행
18. Git Flow
Git 기반의 코드 버전 관리 방법론
기능 개발, 버그 수정, 배포 등을 분리된 브랜치로 관리하며 워크플로우를 체계화
19. dependencies 와 devDependencies 차이
- dependencies
프로덕션 환경에서 필요한 패키지들 - devDependencies
개발 환경에서 필요한 패키지들
20. Agile
소프트웨어 개발 방법론
요구사항 변화에 유연하게 대응하고, 작은 주기로 개발하며 고객의 피드백을 적극 수용
21. 프론트는 백엔드와 협업하여 API와 통신하는 부분에서 어떤 역할?
프론트엔드는 백엔드에서 제공하는 API를 사용하여 데이터를 요청하고 응답을 받아서 화면에 표시
백엔드와 협업하여 API 요청/응답 형식, 데이터 구조 등을 정의 및 구현
22. 프로젝트의 전체적인 흐름
- 프로젝트의 흐름은 크게 요구사항 분석, 설계, 개발, 테스트, 배포 및 유지보수 단계
- 요구사항을 분석하고 설계한 후, 개발하고 테스트하여 배포하며 필요한 경우 유지보수 진행
23. 디자인 패턴
- MVC(Model-View-Controller): 애플리케이션을 세 가지 주요 컴포넌트로 분리
- Model: 데이터와 비즈니스 로직 관리 ex) 할 일 목록의 데이터 관리
- View: 사용자에게 정보를 표시하는 UI 요소 ex) 할 일 목록을 UI로 표시
- Controller: 모델과 뷰 간의 상호작용을 관리하며 사용자의 입력에 대한 처리 ex) 사용자의 입력을 처리하고 모델과 뷰를 연결
- MVVM(Model-View-ViewModel)
- Model: 할 일 목록의 데이터를 관리하는 부분은 MVC 패턴과 동일
- View: 할 일 목록의 UI로 표시하며, 뷰 모델과 데이터 바인딩을 통해 상호작용
- ViewModel: 뷰를 표현, 데이터 바인딩 관리 → 뷰와 모델 간의 느슨한 결합 유지 뷰와 모델 사이의 중간 계층으로, 뷰와 상호작용하고 모델로부터 데이터를 가져와서 뷰에 바인딩
- MVC 패턴의 변형, 뷰와 모델 사이에 뷰 모델 추가
24. 자료구조
- 스택
스택은 데이터를 저장하고 처리하는 선형 자료구조
후입선출(LIFO, Last-In-First-Out) 원칙을 따른다.
즉, 마지막으로 추가된 데이터가 가장 먼저 제거되는 구조- 데이터 추가(푸시)와 삭제(팝)는 스택의 최상단에서 이루어진다.
- 스택의 최상단에 위치한 요소 = 스택의 "탑(top)".
- 스택에서 중간에 있는 요소에 접근하려면 탑을 먼저 제거해야 한다.
- 주로 재귀 호출, 뒤로 가기 기능, 수식 계산 등에 사용.
- 큐
데이터를 저장하고 처리하는 선형 자료구조
선입선출(FIFO, First-In-First-Out) 원칙
즉, 먼저 추가된 데이터가 먼저 제거되는 구조
- 데이터 추가(엔큐)는 큐의 뒤(rear)에서 이루어지고, 데이터 삭제(디큐)는 큐의 앞(front)에서 이루어진다.
- 가장 앞에 있는 요소를 큐의 "프런트(front)"라고 하고, 가장 뒤에 있는 요소 = "리어(rear)"
- 큐는 대기열(예: 작업 대기열) 구현, BFS(Breadth-First Search) 등에 사용됩니다.
- 차이점
- 원칙: 스택은 후입선출(LIFO), 큐는 선입선출(FIFO) 원칙을 따릅니다.
- 데이터 추가/삭제 위치: 스택은 최상단(top)에서만 데이터 추가와 삭제가 이루어지며, 큐는 앞(front)과 뒤(rear)에서 이루어진다.
- 접근 방법: 스택에서 중간에 있는 요소에 접근하려면 탑을 제거해야 하지만, 큐에서는 바로 앞(front)에서 접근할 수 있다.
- 예시
- 스택: 함수 호출의 임시 데이터 저장, 웹 브라우저의 뒤로 가기 기능 구현
- 큐: 작업 대기열, 너비 우선 탐색(BFS) 알고리즘
728x90
반응형
'TIL > 취준' 카테고리의 다른 글
| React 면접 예상 질문 (0) | 2023.08.21 |
|---|---|
| TypeScript 면접 예상 질문 (0) | 2023.08.21 |
| JS 면접 예상 질문 (0) | 2023.08.21 |
| 면접 예상 질문 시리즈 (0) | 2023.08.01 |
댓글