# 프론트엔드 예상 질문 - 2

- SEO에 대해 설명해주세요. (157번)
: SEO는 검색 엔진 최적화라고 하며, 웹 사이트가 검색 엔진 결과 페이지에서 상위 순위를 차지할 수 있도록 하는 최적화 프로세스 임. 이를 통해 더 많은 검색 트래픽을 유도할 수 있음

** SEO 최적화 방법 
1) 문법에 맞는 HTML 작성하기
2) 구체적인 페이지 제목 만들기
3) Meta 태그 활용하기
4) HTTPS 사용 권장
5) 다양한 SEO 도구 사용
6) 키워드 연구를 통해 검색량 높은 키워드 식별




- BOM과 DOM에 대해 설명해주세요. (158번)

1. BOM(Browser Object Model)
웹 브라우저의 창이나 프레임을 추상화하여 프로그래밍적으로 제어할 수 있도록 만든 모델
브라우저에 접근 할 수 있는 객체의 모음
window 객체를 통해 접근하는데 이 객체는 웹 브라우저의 창을 대표함, BOM은 window를 제어
BOM에서 제공하는 객체로는  window(가장 최상위 객체, 나머지는 window 객체 내에서 접근할 수 있음 ex.window.location), location, document, navigator, history, screen이 있음


2. DOM(Document Object Model)
단어 그대로 '도큐먼트를 객체로 표현하는 모델', 문서 객체
(* 문서 객체란 HTML 문서의 태그들을 JavaScript가 읽을 수 있는 객체(object)로 만든 것)
HTML, XML 문서의 프로그래밍 인터페이스(= 웹 페이지의 구조를 표현하는 프로그래밍 인터페이스)
웹 페이지의 각 요소(태그, 속성, 텍스트 등)는 DOM의 노드로 표현되며, 이 노드들은 트리 구조로 구성
DOM을 통해 자바스크립트로 웹 페이지의 내용, 구조 및 스타일을 동적으로 변경가능

DOM은 수정사항이 있을 때 처음부터 렌더링을 거치는데, 스케일이 커질수록 노드가 증가하여 브라우저의 속도가 느려짐
document 객체를 통하여 DOM에 접근 가능 => ex. getElementById(), querySelector()




- ⭐ 리플로우와 리페인트에 대해 설명해주세요. (159번)

1. 리플로우
DOM의 변경이 페이지의 구조 또는 레이아웃에 영향을 미쳐 전체 레이아웃을 재계산해야 할 때 발생하는 과정
리플로우는 리페인트를 수반하므로 리페인트보다 더 비용이 큰 작업
ex. DOM 요소의 기하학적 속성이 변경되었을 때와 브라우저 사이즈가 변할 때,
요소의 너비나 높이가 변경되면 페이지 레이아웃에 영향을 주어 리플로우가 발생

2. 리페인트
웹 페이지의 일부분이 변경되어 화면에 다시 그려져야 할 때 발생하는 과정
리플로우가 발생했을 때 필연적으로 발생
ex.  요소의 스타일이 변경되었을 때, visibility의 속성이 변경되었을 때,
요소의 색상이 변경되면 해당 요소만 다시 그려짐




- Agile에 대해 설명해주세요. (160번)
: 소프트웨어 개발과 프로젝트 관리에 있어 더 유연하고 반응 빠르게 변화에 대응하는 방법론
기존의 워터폴(Waterfall) 모델과 달리, Agile은 반복적이고 점진적인 접근 방식을 취함
고객의 요구사항이 프로젝트 진행 중에 변경될 수 있음을 인정하고, 그러한 변화에 유연하게 대응하는 데 초점을 맞춤


** Agile의 핵심 원칙과 특징

1. 고객의 만족을 최우선으로 함
2. 반복적, 점진적 개발: 프로젝트를 작은 단위로 나누고, 각 단계마다 동작하는 제품을 개발
3. 개발 과정에서 지속적으로 테스트를 실시하고, 고객과 스테이크홀더로부터 피드백을 받아 반영
4. 유연한 변화 대응: 요구사항의 변화를 환영하고, 그 변화를 프로젝트의 일부로 빠르게 통합
5. 자기 조직화된 팀: 팀 멤버들이 자기 주도적으로 일하고, 협력하여 문제 해결
6. 프로세스와 제품, 팀의 성능 등을 지속적으로 개선하는 문화를 갖춥니다.




- dependencies 와 devDependencies 차이에 대해 설명해주세요. (161번)
: package.json 파일 내에 나타나는 항목으로,

1. dependencies
프로젝트의 실행에 필요한 패키지나 라이브러리들을 의미
npm install 명령어를 실행하면 dependencies에 나열된 패키지들이 설치됨
ex. React나 Vue와 같은 라이브러리


2. devDependencies
개발 과정이나 테스트 시에만 필요한 패키지나 라이브러리들을 의미, 프로젝트의 실제 실행에는 필요하지 않음
npm install --production 명령어를 실행하면 devDependencies에 나열된 패키지들은 설치되지 않음
ex. Babel, Webpack, ESLint와 같은 도구나 Jest와 같은 테스팅 라이브러리




- XSS와 CSRF에 대해 설명해주세요. (162번)
: XSS와 CSRF는 웹 보안 취약점으로, 공격자가 사용자의 데이터를 도용하거나 변경하거나 웹 애플리케이션의 기능을 오용하는 데 사용될 수 있음

1. XSS (Cross-Site Scripting)
XSS는 공격자가 악성 스크립트를 신뢰할 수 있는 웹 사이트에 삽입할 때 발생
이 스크립트는 다른 사용자의 브라우저에서 실행되고, 이를 통해 공격자는 사용자의 세션 토큰을 획득하거나 브라우저에서 악의적인 행동을 유발하거나 사용자의 개인 정보를 유출할 수 있음

XSS는 세가지로 분류 가능 (저장형 XSS, 반사형 XSS, 그리고 DOM 기반 XSS)
- 저장형 XSS : 악성 스크립트가 타겟 서버에 저장되는 것
- 반사형 XSS : URL을 통해 전달되는 스크립트가 사용자에게 반사되는 것
- DOM 기반 XSS : 클라이언트 측 코드만을 이용하여 이루어지는 것


방지 방법 : 사용자 입력을 제대로 검증하고 이스케이프하여 악성 스크립트가 실행되지 않도록 해야 하며, 또한 콘텐츠 보안 정책 (CSP) 같은 보안 헤더를 사용하여 추가 보호를 제공할 수 있음


2. CSRF (Cross-Site Request Forgery)

CSRF는 사용자가 자신의 의지와는 무관하게 공격자가 준비한 공격 코드를 실행하여, 사용자가 로그인한 상태에서 웹 애플리케이션에 악의적인 요청을 보내게 만드는 것
공격자는 사용자를 가장하여 비정상적인 행동(예: 비밀번호 변경, 금융 거래)을 수행
사용자가 해당 사이트에 로그인한 상태(즉, 쿠키 정보 등이 저장된 상태)에서 CSRF 코드가 삽입된 사이트를 방문하면 발동

방지 방법: 주로 "SameSite" 쿠키 속성을 사용하여 쿠키를 보호하거나, CSRF 토큰을 사용하여 사용자의 요청이 유효한지 확인(CSRF 토큰은 서버 측에서 생성되며, 폼 제출과 같은 요청이 서버로 전송될 때 이 토큰을 함께 보내 인증을 받음)




- 인증과 인가에 대해 설명해주세요. (163번)

누가, 언제, 어떻게 쓰고 있는가를 파악하기 위해 어떤 사이트에서든 인증, 인가가 있음.
인증과 인가는 API에서 가장 자주 구현되는 기능중 하나.
Private한 API는 물론이고 Public한 API도 기본적인 인증과 인가를 요구.

1. 인증 : 유저가 누구인지 "신원 확인"하는 절차, 회원가입하고 로그인 하는 것.
2. 인가 : 유저에게 특정 자원이나 서비스에 접근할 수 있는 "권한"을 부여하는 과정, 인증을 통해 신원이 확인된 사용자에게 어떤 서비스나 데이터에 접근할 수 있는지 결정하는 단계
    




- package.json에서 private에 대해 설명해주세요. (164번)
: 기본적으로 패키지는 공개적으로 공유됨.
비공개 패키지로 설정하려면, package.json에서 "private": true를 설정하면 됨.


- 프로젝트를 npm에 배포하려면 어떤 설정이 필요할까나요? (165번)
1. Node.js와 npm 설치(Node.js를 설치하면 npm도 자동으로 설치됨)
2. npm adduser를 실행하여 새 계정을 생성
3. 프로젝트의 package.json 파일 생성 (npm init)
4. .npmignore 파일 생성
5. npm login
6. npm publish로 패키지 배포




- ⭐ 어플리케이션의 성능은 어떤식으로 측정하셨나요? (166번)

** 주요 성능 지표

1. 응답 시간(Response Time)
    - 사용자의 요청에 어플리케이션이 얼마나 빨리 응답하는지 측정
2. 처리량(Throughput)
    - 단위 시간당 어플리케이션에 처리되는 요청의 수를 측정
3. 리소스 사용률(Resource Utilization)
    - CPU, 메모리, 디스크, 네트워크 등의 리소스 사용량을 측정
4. 에러율(Error Rate)
    - 전체 요청 중 에러 응답의 비율을 측정
5. 사용자 경험(User Experience)
    - 사용자 인터페이스의 반응성, 페이지 로드 시간, 애니메이션의 부드러움 등을 평가

** 성능 측정 방법

1. 성능 모니터링 도구(APM) 사용 -> 실시간으로 어플리케이션의 성능을 모니터링
2. 로드 테스트
    - 시뮬레이션을 사용해 예상 사용자 트래픽을 모방하고 어플리케이션의 성능을 측정
3. 코드 레벨에서 프로파일러를 사용 -> 실행 시간, 메모리 사용량 등을 분석
4. 웹 어플리케이션의 경우 브라우저의 개발자 도구를 사용 -> 페이지 로드 시간, 렌더링 성능 등을 검사
5. 로그를 수집하고 분석하여 성능 이슈, 에러, 지연 등을 파악
6. 사용자로부터 직접 피드백을 받아 사용자 경험과 관련된 성능 이슈를 파악




- LightHouse 결과가 좋지 않을 때, 프로젝트에서 병목 현상은 어떻게 해결할 수 있을까요? (167번)
1. 성능 프로파일링
개발자 도구(Chrome DevTools 등)에 내장된 성능 탭을 사용하여 페이지 로드 및 런타임 시간 동안의 성능을 프로파일링
(Performance 탭에서 실행 속도가 느린 스크립트, 긴 JavaScript 실행 시간, 레이아웃 이동 등 문제가 되는 영역을 찾기)
2. 코드 분할
큰 JavaScript 번들을 작은 청크로 나누어, 초기 로드 시간을 단축하고 필요할 때만 특정 코드를 로드
Webpack과 같은 모듈 번들러의 동적 임포트(dynamic imports) 기능을 사용하여 이를 수행할 수 있음
3. 불필요한 의존성 제거(페이지 성능을 저하시키는 불필요하거나 큰 크기의 라이브러리나 프레임워크)
4. 이벤트 최적화
이벤트 핸들러 내에서 과도한 계산이 이루어지는 경우, debouncing 또는 throttling 기법을 사용하여 이벤트 처리량을 제한하고 성능을 향상시키기
5. 네트워크 요청 최적화
Network 탭을 확인하여 불필요한 API 호출이나 중복 요청 확인 후, 최적화하여 네트워크 대기 시간을 줄이기
6. 메모리 누수 방지
Memory 탭을 사용하여 메모리 누수를 식별하고 코드 수정하기
7. 리소스 최적화
이미지, CSS, JavaScript에서 불필요한 코드를 제거하여 파일 크기를 줄이고, 필요한 경우 지연 로딩을 적용





- 주소창에 주소를 입력했을 때의 흐름을 설명해주세요. (168번)

1. 사용자가 주소창에 URL을 입력하고 Enter
2. 도메인 이름 시스템(DNS)을 통해 해당 URL의 IP 주소를 조회
(* DNS(Domain Name System) : 웹사이트의 IP주소와 도메인 주소를 연결해주는 시스템(= 인터넷 전화번호부)) 
3. 만약 요청한 URL이 캐시에 없다면 ISP의 DNS 서버가 DNS 쿼리로 입력한 URL을 호스팅하는 서버의 IP 주소를 찾음
(* DNS 쿼리 : 웹 사이트에 대한 올바른 IP 주소를 찾을 때까지 인터넷에서 여러 DNS 서버를 검색하는 것 )
4. 브라우저가 해당 서버와 TCP 연결을 시작 : 이 연결은 3-way handshake 과정을 통해 이루어짐
5. 브라우저가 웹서버에 HTTP 요청을 보냄
6. 서버가 요청을 처리하고 HTTP 응답을 보냄 : 이 응답에는 요청한 웹 페이지의 HTML, CSS, JavaScript, 이미지 등의 리소스가 포함될 수 있음
7. 브라우저가 HTML 컨텐츠를 보여줌