etc

[CS기술면접 대비] 프론트엔드 CS 기술 공부 (1)

jelly._.me 2025. 4. 14. 19:53
다른 사람이 정리한 레퍼런스들 보면서 내가 걍 다시 복습하려고 정리하는 TIL이라서 가독성 0임

 

💯1. 브라우저 렌더링 원리

⇒ 우선 렌더링이 뭐냐 ?

컴퓨터 프로그램을 이용해 데이터를 이미지로 변환하거나, 여러 요소를 하나의 파일로 합치는 과정

⇒ 그럼 렌더링 엔진은 ?

브라우저마다 렌저링 수행하는 엔진을 가지고 있는데, ex) 크롬 → 블링크, 사파리 → 웹킷 등

브라우저 렌더링 작동 방식 : CRP라는 프로세스 사용!

1. HTML을 파싱해서 DOM트리 구성
2. CSS를 파싱해서 CSSOM트리 구성
3. javascript(동작) 실행
4. DOM과 CSSOM을 조합해서 렌더트리 구축
5. 레이아웃 단계: 뷰포트 기반으로 랜더트리의 각 노드가 가지는 위치와 크기 계산
6. 페인트 단계: 계산한 위치 크기 기반으로 화면에 그림

 

⇒ 그럼 CRP는 또 뭐다냐 ?

critical rendering process 준말, HTML,CSS,JavaScript를 화면에 픽셀로 변화하는 일련의 프로세스

 

💯2. AJAX

js통해서 비동기 방식으로 XMLHttpRequest 객체를 통해 전체 페이지를 새로고치지 않고도 데이터 교환하게 하는 통신 기능 브라우저가 가지고 있는 XMLHttpRequest

⇒ 왜 비동기인가 ? JavaScript는 기본적으로 동기적. 즉, 코드가 한 줄씩 순차적으로 실행하지만, Ajax는 비동기적. 왜? 데이터를 서버에서 받아오는데 시간이 걸릴 수 있기 때문에 그동안 다른 작업들이 멈추지 않고 계속 진행될 수 있게 하려고 비동기적으로 만듦

ex) 유저가 화면 보는 동안 서버 데이터 받아옴

ex) 네이버에서 검색하면, 관련 데이터만 잠깐 받아오는 동안 다른 부분)헤더 등)은 그대로임

⇒ 즉 ?

Ajax는 페이지 일부만 업데이트하고, 비동기 통신을 통해 사용자가 기다리는 시간 없이 페이지의 서버와 데이터만 교환할 수 있게 해주는 강력한 기술

⇒ AJAX 메서드 : 우리가 흔히 아는 POST, GET 등

$.ajax({
        url : '/ajax/sample.do',
        type : 'GET',

 

⇒ 이때, 클라이언트 풀링방식으로 데이터 요청하는데 → 그래서 실시간 서비스 만드는 건 불가함

  • 클라이언트 풀링이란 뭐냐면, 클라이언트가 일정한 시간 간격으로 서버에 데이터를 요청하는 방식
  • 풀링방식의 단점 ⇒ 실시간을 원한다? 그럼 웹소켓 쓰셈
    • 비효율성: 클라이언트가 서버에 계속 동기적으로 요청을 보내야 하니까, 서버는 필요 없을 때도 계속 응답해야 돼. 실제로 클라이언트가 필요한 데이터를 갖고 있지 않으면 서버는 빈 응답을 보낼 수도 있음. 이게 성능상 낭비임. 특히 실시간 서비스라면, 서버가 바로바로 데이터를 보내줘야 하는데 풀링은 계속 반복적인 요청을 보내는 방식이라 효율적이지 않음.
    • 지연 문제: 풀링의 문제는 실시간 서비스가 아님. 왜냐하면 서버는 요청을 받을 때까지 데이터를 준비할 수 없고, 클라이언트는 일정 주기로 요청하기 때문에 서버에서 데이터가 준비되었을 때 바로 알려주지 못함. 즉, 클라이언트가 요청을 보내고 나서야 데이터가 도착하는 구조라 실시간으로 반응하는 건 어렵. 지연시간이 발생하게 됨.
  • 그럼 웹 소켓은 또 뭔데?
    • 양방향 통신: 기존의 HTTP 통신은 클라이언트가 요청을 보내면 서버가 응답하는 한 방향의 통신인데, 웹소켓은 서버가 클라이언트에게 데이터를 보낼 수 있는 양방향 통신을 제공.
    • 지속적인 연결: 웹소켓은 한 번 연결되면 연결을 지속적으로 유지 ㄱㄴ. 그 후에는 클라이언트가 요청할 때마다 새로운 연결을 만들지 않아도 됨.
    • 빠르고 실시간: 이게 실시간 서비스에 특화된 이유는 서버가 연결이 지속되는 동안 클라이언트에게 바로바로 데이터를 보낼 수 있기 때문. 예를 들어, 채팅방에서 새로운 메시지가 오면 그걸 즉시 사용자에게 전달 ㄱㄴ

 

 

💯3. API

응용 프로그램이 다른 프로그램이나 서비스를 사용할 수 있도록 연결해주는 도구.

쉽게 말하면, 프로그램이 다른 프로그램이나 시스템과 대화할 수 있게 만드는 "대화법”, “통로”

 

 

💯4. REST API

아까 API에서 rest 원칙을 적용해서 설계한 것! 아키텍처 스타일

  1. 자원을 HTTP URI로 이름 명시해주고
  2. HTTP 메서드(GET,PUT,DELETE,POST)통해서 자원의 상태를 가져오거나 변경

RESTFUL API == REST API를 제공하는 웹 애플리케이션을 RESTful 하다고 함

 

 

💯5. 주소창에 google.com을 입력하면?

⇒ URL은 뭐다냐 ?

인터넷 리소스를 가리키는 걸로, 서버의 자원을 요청할 때 사용 (URI), 인터넷 상의 모든 리소스를 요청할 수 있고, HTTP/FTP 자원요청 가능

++ URI와 차이점: URL의 상위 개념으로, 인터넷 상 자원을 식별하는 고유 이름/주소 URL은 그 자원이 어디에 위치해 있는지 알려주는 주소

⇒ HTTP는 뭐다냐 ?

TCP기반 클라이언트와 서버 간의 응답/요청 프로토콜

⇒ DNS는 뭐다냐 ?

도메인 네임 시스템. 도메인 명을 머신이 읽을 수 있도록 IP주소로 변환해줌

 

프로세스

１。 주소 입력하면, url 중 도메인 네임을 DNS서버에 검색
２。DNS 서버에 해당 도메인에 맞는 IP 주소 찾아서, URL 정보와 함께 전달
３。 브라우저는 HTTP 프로토콜 이용해서 요청 메시지 생성 (TCP/IP 프로토콜 사용)
４。서버는 응답 메시지 만들어서 다시 브라우저에 전송
５。브라우저는 해당 데이터 받아서 파싱 후, 화면에 렌더링

 

 

💯６. oAuth

인터넷 사용자들이 비번 제공하지 않고, 다른 웹 상의 자신들의 정보에 대해 접근 권한을 부여할 수 있는 개발형 표준 방법

ex) 예를 들어, 구글 계정으로 다른 웹사이트에 로그인한다고 해보자. 구글 계정의 비밀번호를 그 웹사이트에 입력하지 않으면서, 구글 계정에 있는 정보(예: 이메일 주소)를 공유할 수 있는 방법이 바로 OAuth야. 그러니까 OAuth는 비밀번호를 공유하지 않으면서도, 원하는 정보를 안전하게 공유할 수 있게 해주는 방식이지.ex) 집주인이 집비번 안알려줘도, 다른 사람들이 들어가고 싶다고하면 방문증(토큰) 줘서 들어올 수 있도록

 

oAuth 인증 과정

1. 앱이 서비스제공자(구글)에 요청토큰 요청
2. 구글은 앱한테 요청 토큰 발급해줌 (유저가 승인할 수 있도록 유도하는 토큰)
3. 앱은 유저가 구글로 이동하게 함 (사용자 인증하게 함)
4. 구글은 유저를 다시 앱으로 앱이 접근 토큰 요청
5. 구글은 접근 토큰 발급
6. 발급된 접근토큰으로 앱은 유저 기본정보 접근가능해짐

** 위 과정을 대입 : 카카오 로그인 과정에서!

인가코드 == 요청토큰
액세스 토큰 == 접근토큰

 

 

 

💯7. 쿠키, sessionStorage, localStorage

셋 다 웹 브라우저 상의 데이터 저장 방법!

저장 용량, 데이터 유지기간, 데이터 접근성 차이일 뿐

기간 저장 용량 특징

쿠키 만료 기간 전 최대 4kb HTTP헤더 통해서 서버랑 클라이언트 간에 주고받기 ㄱㄴ
sessionStorage 브라우저 세션 동안만 5mb 이상 js로만 접근 ㄱㄴ
localStorage 브라우저 닫혀도 ㄱㅊ 5mb ~ 10mb js로만 접근 ㄱㄴ

 

쿠키: 서버와 상호작용이 필요하거나 여러 도메인에서 정보를 공유하는 경우(자동 로그인)

세션 스토리지: 임시데이터 저장/세션동안만 유지 필요할 경우 (실시간 업데이트, 채팅 메시지)

로컬 스토리지: 클라이언트에 영구적으로 저장 (유저 테마)

💯 8. CSR과 SSR

  • CSR : 클라이언트 측에서 렌더링

→ 초기 로딩 속도는 좀 느리지만, 첨에 한번에 받아오니까 페이지 이동은 빠름

→ 초기에 빈 HTML불러와서 js를 통해 동적 렌더링 == js가 완전 로드되지 않은 상태를 검색엔진이 크롤링하게 되어 SEO에 부정적 영향 끼칠 수 있음

  • SSR : 서버가 HTML 생성,렌더링 후에 클라에 보내줌

→ 초기속도는 빠른데, 페이지 이동마다 새로운 HTML을 받아와야 해서 이동 땐 느림

→ 이미 서버에서 완전히 렌더링한 걸 클라에 전해주니까, 검색엔진이 완전한 내용 크롤링 가능! SEO엔 유리

 

💯9. CORS

다른 도메인 리소스에 접근할 때 발생하는 보안 이슈 해결하기 위한 표준 방법

** 서버가 응답할 때, 특정 도메인, 프로토콜, 포트에서만 접근을 허용하도록 CORS 헤더를 포함

ex) 이 헤더는 서버에게 특정 도메인/프로토콜/포트에서만 요청 허용하도록 지시!

⇒ 옵션

  • Access-Control-Allow-Origin: 어떤 도메인에서 접근을 허용할지 명시.
  • Access-Control-Allow-Methods: 허용할 HTTP 메서드(예: GET, POST 등)를 설정.
  • Access-Control-Allow-Headers: 허용할 HTTP 헤더를 설정.
CORS 작동 방식

1. 브라우저가 HTTP요청
2. 서버는 요청에 대한 reponse반환
3. 브라우저가 응답 분석해서 CORS헤더 확인
4. CORS헤더가 존재하면 브라우저는 자원에 대한 권한 검사
5. 권한이 허용되면, 자원 사용. 안되면 CORS 에러