[기술면접] CS

KoEunseo·2023년 3월 2일

CS 기술면접

interview

목록 보기

9/11

1. 브라우저 렌더링 원리에 대해 설명해주세요

HTML 파싱: 브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성합니다.
CSS 파싱: 브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
레이아웃: DOM 및 CSSOM을 조합하여 렌더링 트리(Render Tree)를 생성합니다. 렌더링 트리는 실제로 화면에 그려질 노드만 포함하므로 효율적입니다.
페인팅: 브라우저는 렌더링 트리를 기반으로 화면에 요소를 그리고 페인팅합니다. 이 과정은 화면을 렌더링하는 데 필요한 리소스(메모리, CPU 등)를 소비합니다.
이러한 렌더링 과정은 사용자가 웹 페이지를 로드할 때마다 실행됩니다. 브라우저는 페이지의 구성 요소(이미지, 스타일 시트 등)를 캐시하여 사용자가 다시 방문할 때 더 빠르게 로드할 수 있도록 합니다. 또한 브라우저는 렌더링 트리를 수정하거나 리페인트 할 필요가 없는 부분은 다시 그리지 않도록 최적화됩니다.

2. 주소창에 www.google.com 을 입력하면 생기는 일을 설명해주세요.

DNS 조회: 브라우저는 도메인을 IP 주소로 변환하기 위해 DNS(Domain Name System) 서버에 쿼리를 보냅니다.
TCP 연결: 브라우저는 DNS에서 반환된 IP 주소로 TCP(Transmission Control Protocol) 연결을 시도합니다.
HTTP 요청: 브라우저는 서버로 HTTP(Hypertext Transfer Protocol) 요청을 보냅니다. 이 요청은 브라우저가 받은 URL, 요청 방식(GET 또는 POST 등), 요청 헤더 및 요청 본문으로 구성됩니다.
서버 응답: 서버는 브라우저의 요청에 대한 HTTP 응답을 보냅니다. 이 응답은 요청에 대한 상태 코드(200 OK 또는 404 Not Found 등), 응답 헤더 및 응답 본문으로 구성됩니다.
응답 처리: 브라우저는 서버로부터 받은 응답을 처리합니다. 이 과정에는 응답 본문을 분석하여 HTML, CSS 및 JavaScript 파일을 추출하고, 페이지의 렌더링 및 기능 구현을 위한 자원을 내려받는 등이 포함됩니다.
페이지 렌더링: 브라우저는 HTML, CSS 및 JavaScript 파일을 사용하여 페이지를 렌더링하고, 사용자에게 보여줍니다.

3. 웹 프로토콜이란?

웹 프로토콜(Web Protocol)은 인터넷을 통해 데이터를 주고받는 데 사용되는 규칙과 규격의 모음입니다. 웹 프로토콜은 웹 페이지를 요청하고, 전송하고, 표시하는 데 필요한 모든 과정을 처리합니다.

웹 프로토콜은 대표적으로 HTTP와 HTTPS가 있습니다. HTTP는 웹 브라우저와 웹 서버 간에 데이터를 주고받는 데 사용되는 프로토콜이며, HTTPS는 HTTP에 보안 기능을 추가한 것으로 SSL(Secure Socket Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 데이터를 암호화합니다.
웹 프로토콜은 또한 웹 사이트와 데이터베이스 서버, 파일 서버 등 다양한 서버와 클라이언트 간에 데이터를 주고받는 데 사용되는 다른 프로토콜도 포함합니다. 예를 들어 FTP(File Transfer Protocol)는 파일을 전송하기 위해 사용되며, SMTP(Simple Mail Transfer Protocol)는 이메일을 보내기 위해 사용됩니다.

4. HTTP와 HTTPS의 차이점을 말해주세요.

HTTP(Hypertext Transfer Protocol)와 HTTPS(Hypertext Transfer Protocol Secure)의 가장 큰 차이점은 데이터의 보안성입니다.

HTTP는 데이터 전송 과정에서 암호화를 하지 않기 때문에 데이터가 평문으로 전송됩니다. 이는 해커가 데이터를 가로채어 변조나 도용할 수 있는 위험이 있습니다. 따라서, 비밀번호, 계좌번호, 신용카드 정보 등 민감한 정보가 포함된 웹사이트를 HTTP로 전송할 경우 보안상 취약점이 생길 수 있습니다.

반면에, HTTPS는 SSL(Secure Socket Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 데이터를 암호화합니다. 이를 통해 데이터가 안전하게 전송되어 해커가 데이터를 가로채어도 읽을 수 없도록 보호합니다. 따라서, HTTPS를 사용하면 보안적으로 안전한 통신이 가능합니다.

그 외에도, HTTPS는 HTTP와 달리 인증서를 사용하여 서버의 신원을 확인할 수 있습니다. 이를 통해 사용자는 피싱(Phishing) 사이트를 방지할 수 있습니다.

하지만, HTTPS는 암호화와 인증 절차 때문에 HTTP에 비해 처리 속도가 느릴 수 있습니다. 또한, HTTPS를 사용하려면 SSL/TLS 인증서를 구입하거나 발급받아야 하기 때문에 비용이 발생할 수 있습니다.

5. RESTFUL API란?

RESTful API(Representational State Transferful Application Programming Interface)는 웹 서비스에서 자주 사용되는 API 디자인 패턴 중 하나입니다. RESTful API는 REST 아키텍처 스타일을 따르며, 클라이언트와 서버 간의 통신을 위한 인터페이스로 HTTP 프로토콜을 사용합니다.

RESTful API는 리소스 지향 아키텍처(ROA)를 기반으로 하며, 각각의 URI(Uniform Resource Identifier)가 고유한 리소스를 가리키고, HTTP 메서드를 사용하여 리소스를 조작합니다. 예를 들어, GET 메서드는 리소스를 조회하고, POST 메서드는 리소스를 생성하고, PUT 메서드는 리소스를 수정하고, DELETE 메서드는 리소스를 삭제합니다.

RESTful API는 다음과 같은 특징을 갖습니다.

클라이언트-서버 구조: RESTful API는 클라이언트와 서버 간의 엄격한 분리를 제공하여, 서로의 변경 사항이 다른 쪽에 영향을 미치지 않도록 합니다.
상태 없음(Stateless): RESTful API는 클라이언트와 서버 간의 통신에서 상태를 유지하지 않습니다. 각 요청은 독립적이며, 서버는 요청을 이해하고 처리할 수 있는 모든 정보를 포함해야 합니다.
캐시 처리 가능(Cacheable): RESTful API는 HTTP 프로토콜을 기반으로 하므로, HTTP의 캐싱 기능을 이용하여 캐시 처리가 가능합니다.
계층화(Layered System): RESTful API는 다중 계층으로 구성될 수 있습니다. 이를 통해 서비스를 확장하거나 보안 등의 기능을 추가할 수 있습니다.
일관된 인터페이스(Uniform Interface): RESTful API는 리소스를 고유한 URI로 식별하고, HTTP 메서드를 사용하여 리소스를 조작합니다. 이를 통해 클라이언트와 서버 간의 인터페이스가 일관성 있게 유지됩니다.

6. get, post 차이를 설명해주세요.

데이터 전송 방식: GET 방식은 데이터를 URL의 쿼리 스트링(Query String)에 포함하여 전송합니다. 반면에 POST 방식은 HTTP 요청 본문에 데이터를 담아 전송합니다.
전송 데이터 길이: GET 방식은 URL에 포함된 데이터 길이에 제한이 있으므로, 데이터 전송에 제한이 있습니다. 반면에 POST 방식은 요청 본문에 데이터를 담아 전송하므로, 데이터 전송에 제한이 없습니다.
보안: GET 방식은 URL에 데이터가 노출되므로, 보안에 취약합니다. 반면에 POST 방식은 요청 본문에 데이터를 담아 전송하므로, 데이터 보안에 우수합니다.
캐싱: GET 방식은 브라우저 캐시에 데이터가 저장될 수 있습니다. 반면에 POST 방식은 브라우저 캐시에 데이터가 저장되지 않습니다.
주요 용도: GET 방식은 데이터 조회에 주로 사용되며, POST 방식은 데이터 생성, 수정, 삭제에 주로 사용됩니다.
따라서, GET 방식은 요청할 데이터가 적고 보안이 중요하지 않은 경우에 사용하며, POST 방식은 요청할 데이터가 많거나 보안이 중요한 경우에 사용하는 것이 좋습니다.

7. 브라우저 저장소 (로컬 스토리지, 세션 스토리지, 쿠키의 차이)

브라우저 저장소에는 로컬 스토리지(Local Storage), 세션 스토리지(Session Storage), 쿠키(Cookie)가 있습니다.

로컬 스토리지(Local Storage)
HTML5에서 추가된 기능으로, key-value 형태의 데이터를 클라이언트 측에 저장합니다.
로컬 스토리지에 저장된 데이터는 브라우저를 종료해도 유지됩니다.
저장 용량은 대략 5MB ~ 10MB로, 세션 스토리지보다 많은 데이터를 저장할 수 있습니다.
JavaScript로 API를 통해 접근합니다.
세션 스토리지(Session Storage)
로컬 스토리지와 유사하지만, 데이터가 브라우저 세션(session) 동안만 유지됩니다. 브라우저를 종료하면 저장된 데이터가 모두 삭제됩니다.
저장 용량은 로컬 스토리지와 동일하게 대략 5MB ~ 10MB입니다.
로컬 스토리지와 마찬가지로 JavaScript로 API를 통해 접근합니다.
쿠키(Cookie)
클라이언트와 서버 간의 상태를 유지하기 위해 사용됩니다.
브라우저에 저장되며, 만료일이 지나면 자동으로 삭제됩니다.
저장 용량은 대략 4KB로 로컬 스토리지와 세션 스토리지보다 적은 용량을 가집니다.
HTTP 요청 시 서버로 쿠키를 함께 전송하여 서버에서 쿠키를 활용할 수 있습니다.
JavaScript로 API를 통해 접근할 수 있으며, 쿠키는 document.cookie을 통해 접근합니다.

따라서, 데이터의 영구성과 용량, 서버와의 상호작용 등을 고려하여 적절한 저장소를 선택해야 합니다. 페이지에서는 쿠키를 사용하여 상태를 유지하고, 로컬 스토리지와 세션 스토리지는 웹 애플리케이션에서 사용자 데이터를 저장하고 사용하는데 유용합니다.

8. JWT란?

JWT( JSON Web Token)는 JSON 형태로 인코딩된 정보를 전자 서명하여 웹 상에서 정보를 안전하게 전달하는 방식입니다.

JWT는 인증에 대한 표준이며, 서버와 클라이언트 간의 정보를 안전하게 전송하기 위해 사용됩니다. JWT는 3부분으로 구성되어 있습니다.

Header(헤더): JWT의 유형과 해시 알고리즘 정보를 포함합니다.
Payload(페이로드): 클라이언트와 서버 간 주고받을 정보를 저장합니다.
Signature(서명): 암호화된 헤더와 페이로드, 비밀 키를 조합하여 생성되는 서명 값으로, 서버에서 유효성을 검증할 때 사용됩니다.
JWT는 다음과 같은 장점이 있습니다.
Stateless: JWT는 서버에 상태를 저장하지 않기 때문에 서버의 확장성이 높아집니다.
안전성: JWT는 내부적으로 서명되기 때문에 데이터가 변조되는 것을 방지합니다.
유연성: JWT는 페이로드에 필요한 정보를 저장할 수 있기 때문에 유연하게 사용할 수 있습니다.
그러나 JWT를 사용할 때에는 보안적인 취약점이 있을 수 있으므로, 안전하게 사용하기 위해서는 서명 알고리즘과 유효기간을 적절하게 설정해야 하며, 서버에서 JWT의 유효성을 검증하는 과정이 필요합니다.

9. CORS란?

CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션의 보안 정책 중 하나로, 서로 다른 도메인 간에 리소스 공유를 허용하는 방법입니다.

보안 상의 이유로 브라우저에서는 기본적으로 Same-Origin Policy가 적용됩니다. 이는 동일한 출처(프로토콜, 호스트, 포트)에서만 리소스에 접근을 허용하고 다른 출처에서는 보안 상의 이유로 접근을 차단합니다. 하지만 CORS를 사용하면, 허용된 출처 외의 다른 출처에서도 특정 리소스에 접근할 수 있도록 서버 측에서 설정할 수 있습니다.

CORS는 보안을 위해 중요한 개념이며, 서버에서 Access-Control-Allow-Origin이라는 헤더를 설정하여 허용된 출처만 리소스에 접근할 수 있도록 설정할 수 있습니다. 또한, HTTP 요청 메서드(POST, GET, PUT, DELETE 등)와 허용된 요청 헤더 등도 서버에서 설정할 수 있습니다.

CORS를 사용하면 다양한 출처에서 리소스를 공유할 수 있으므로, 클라이언트와 서버 간의 커뮤니케이션을 보다 유연하게 구성할 수 있습니다.

10. MVC와 MVVM 패턴의 차이를 설명해주세요.

MVC(Model-View-Controller)와 MVVM(Model-View-ViewModel)은 모두 소프트웨어 개발에서 사용되는 디자인 패턴 중 하나입니다. 이 두 패턴의 차이점은 다음과 같습니다.

MVC 패턴: 모델, 뷰, 컨트롤러의 3개의 역할로 구성됩니다.
- 모델: 애플리케이션의 데이터와 비즈니스 로직을 담당합니다.
- 뷰: 사용자 인터페이스(UI)를 담당합니다.
- 컨트롤러: 모델과 뷰 사이에서 데이터를 처리하고, 요청을 처리합니다.
  컨트롤러는 모델과 뷰를 분리하여 유지보수성을 높입니다.
MVVM 패턴: 모델, 뷰, 뷰모델의 3개의 역할로 구성됩니다.
- 모델: 애플리케이션의 데이터와 비즈니스 로직을 담당합니다.
- 뷰: 사용자 인터페이스(UI)를 담당합니다.
- 뷰모델: 뷰와 모델 사이에서 데이터를 처리하고, 뷰에게 렌더링할 데이터를 제공합니다.
  뷰모델은 뷰와 모델을 분리하여, 뷰와 모델 사이의 의존성을 낮춥니다. 또한, 뷰모델은 뷰의 상태와 동기화되어 뷰를 업데이트합니다.
  MVVM 패턴은 양방향 데이터 바인딩을 사용할 수 있어서, 뷰와 뷰모델 사이의 데이터 변화를 실시간으로 반영할 수 있습니다. 이러한 특징으로 인해, MVVM 패턴은 React나 Angular와 같은 모던 웹 프레임워크에서 많이 사용됩니다.

11. OOP (Object Oriented Programming)란 무엇인가요?

OOP (Object Oriented Programming)은 객체 지향 프로그래밍의 약어로, 프로그래밍을 객체로 추상화하여 개발하는 방법론입니다. 객체란 실제 세계에서 존재하는 사물이나 개념을 컴퓨터 프로그램에서 모델링한 것입니다.

OOP는 데이터와 해당 데이터를 처리하는 함수를 하나의 객체로 묶어서 관리하며, 이러한 객체들을 조합해서 큰 시스템을 구성하는 방식으로 개발합니다. 이러한 객체는 클래스라는 틀 안에서 정의됩니다.

캡슐화: 데이터와 함수를 하나의 객체 안에 묶어서 은닉성을 보장합니다. 객체의 내부 구현 정보를 숨기고, 외부에서는 객체에게 정해진 인터페이스를 통해만 접근 가능합니다.
상속: 기존의 클래스를 확장하여 새로운 클래스를 만들 수 있습니다. 이를 통해 중복 코드를 줄이고 코드 재사용성을 높일 수 있습니다.
다형성: 객체가 동일한 인터페이스를 제공하지만, 내부적으로 다르게 동작하는 것을 의미합니다. 이를 통해 유연한 코드를 작성할 수 있습니다.

OOP는 객체 지향 언어인 Java, Python 등에서 주로 사용됩니다. 객체 지향 프로그래밍을 사용하면 코드의 유지보수성, 재사용성, 확장성이 향상되는 등의 장점이 있습니다.

12. CSR과 SSR의 차이를 설명해주세요.

CSR (Client-side Rendering)과 SSR (Server-side Rendering)은 웹 애플리케이션의 렌더링 방식을 나타내는 용어입니다.

CSR은 클라이언트(웹 브라우저) 측에서 렌더링을 담당하는 방식입니다. 즉, 클라이언트에서 서버로 데이터를 요청하고, 서버는 JSON 형식으로 데이터를 반환합니다. 클라이언트는 받은 데이터를 가지고 화면을 그리는데, 이 때 자바스크립트 프레임워크인 React, Angular, Vue 등을 사용합니다. CSR의 장점은 최초 로딩 시간이 짧다는 것입니다. 필요한 데이터만 받아와서 화면을 그리기 때문에 초기 로딩 속도가 빠릅니다. 하지만, 검색엔진 최적화(SEO)에는 취약합니다. 검색엔진은 웹 페이지가 로딩되는 시점에 HTML을 가져오기 때문에, CSR은 검색엔진 크롤링에 어려움을 겪을 수 있습니다.

SSR은 서버 측에서 렌더링을 담당하는 방식입니다. 클라이언트가 서버에 HTML을 요청하면, 서버는 데이터를 포함한 완성된 HTML을 반환합니다. 이 때, 자바스크립트 프레임워크를 사용하지 않아도 되기 때문에 검색엔진 최적화에 강점을 가집니다. SSR의 단점은 최초 로딩 시간이 오래 걸린다는 것입니다. 모든 HTML과 CSS가 서버에서 만들어져서 클라이언트에게 전달되기 때문에 초기 로딩 속도가 느리게 됩니다. 하지만, 검색엔진 최적화에 유리하기 때문에, 검색 엔진에서 상위 노출을 원하는 페이지에서 많이 사용됩니다.

따라서, CSR과 SSR은 각각의 특징을 가지고 있으며, 프로젝트의 목적에 따라 적절한 렌더링 방식을 선택해야 합니다.

13. SPA와 MPA의 차이를 설명해주세요.

SPA(Single-Page Application)와 MPA(Multi-Page Application)은 웹 애플리케이션의 구조를 나타내는 용어입니다.

SPA는 한 개의 페이지에서 모든 동작을 처리하는 웹 애플리케이션입니다. 즉, 처음에 한 번 페이지를 로드한 후, 페이지 전환 없이 자바스크립트로 동적으로 화면을 업데이트합니다. SPA의 장점은 빠른 페이지 전환이 가능하다는 것입니다. 필요한 데이터만 받아와서 화면을 그리기 때문에 초기 로딩 속도가 빠릅니다. 또한, 웹 애플리케이션의 구조가 간단해져서 개발 속도가 빨라지는 장점이 있습니다. 하지만, 초기 로딩 시간이 오래 걸린다는 단점이 있습니다. 모든 자바스크립트 파일이 한 번에 다운로드되기 때문에, 초기 로딩 속도가 느려질 수 있습니다.

MPA는 여러 개의 페이지로 구성된 웹 애플리케이션입니다. 각 페이지마다 새로운 HTML 파일이 로드되며, 서버에서 데이터를 받아와 화면을 그립니다. MPA의 장점은 초기 로딩 속도가 빠르다는 것입니다. 필요한 데이터만 받아와서 화면을 그리기 때문에 초기 로딩 속도가 빠릅니다. 또한, 검색 엔진 최적화(SEO)에 유리합니다. 하지만, 페이지 전환 시마다 새로운 HTML 파일을 로드해야 하기 때문에, 페이지 전환 속도가 느려질 수 있습니다.

따라서, SPA와 MPA는 각각의 특징을 가지고 있으며, 프로젝트의 목적에 따라 적절한 웹 애플리케이션 구조를 선택해야 합니다. SPA는 최초 로딩 시간이 오래 걸리더라도 사용자 경험(UX)을 중시하는 웹 애플리케이션에서 많이 사용됩니다. 반면에, MPA는 검색 엔진 최적화(SEO)에 유리한 사이트에서 많이 사용됩니다.

14. Git에 대해 설명해주세요.

Git은 분산 버전 관리 시스템(Distributed Version Control System)으로, 소스 코드의 버전 관리를 할 때 사용됩니다.

Git을 사용하면 여러 명이 같은 소스 코드를 작업할 때 충돌을 방지하고, 소스 코드의 이력을 쉽게 관리할 수 있습니다. Git의 가장 큰 장점은 브랜치(Branch)를 통한 개발 작업을 지원한다는 것입니다. 브랜치를 사용하면 동시에 여러 기능을 개발하거나 버그 수정을 할 수 있으며, 다른 개발자와의 충돌을 최소화할 수 있습니다.

Git은 CLI(Command Line Interface)를 통해 사용할 수 있지만, 대부분의 개발자들은 GUI(Graphical User Interface) 툴을 사용합니다. 대표적인 Git GUI 툴로는 SourceTree, GitKraken, GitHub Desktop 등이 있습니다.

Git은 오픈 소스이기 때문에, 다양한 플랫폼에서 지원되며, 무료로 사용할 수 있습니다. 또한, GitHub, GitLab, Bitbucket 등의 원격 저장소 호스팅 서비스와 연동되어, 소스 코드를 공유하거나 협업할 때 매우 유용합니다.

15. 웹팩과 바벨이 무엇인가요?

웹팩(Webpack)과 바벨(Babel)은 모두 자바스크립트 프로젝트에서 사용되는 도구입니다.

웹팩은 모듈 번들러(Module Bundler)로, 여러 개의 자바스크립트 파일과 CSS, 이미지 등의 여러 종류의 파일들을 하나의 번들(Bundle)로 묶어줍니다. 이를 통해 네트워크 비용을 줄이고, 빠르게 로드되는 애플리케이션을 만들 수 있습니다. 또한, 웹팩은 로더(Loader)와 플러그인(Plugin)을 통해 다양한 작업을 수행할 수 있습니다.

바벨은 자바스크립트 컴파일러(JavaScript Compiler)로, 최신 버전의 자바스크립트 문법을 지원하지 않는 브라우저에서도 동작할 수 있는 코드로 변환해줍니다. 이를 통해 개발자는 최신 문법을 사용하면서도 모든 브라우저에서 호환성 문제 없이 실행되는 애플리케이션을 만들 수 있습니다.

16. 깊은복사와 얕은복사의 차이점을 말해주세요.

깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)는 객체를 복사할 때의 차이점입니다.

얕은 복사는 원본 객체와 복사된 객체가 같은 객체를 참조합니다. 따라서, 복사된 객체의 값을 변경하면 원본 객체의 값도 함께 변경됩니다. 이는 객체의 주소를 복사하기 때문에 발생하는 현상입니다. 자바스크립트에서는 Object.assign() 메서드나 spread 연산자(...)를 사용하여 얕은 복사를 수행할 수 있습니다.

깊은 복사는 원본 객체와 복사된 객체가 서로 다른 객체를 참조합니다. 따라서, 복사된 객체의 값을 변경해도 원본 객체의 값은 변경되지 않습니다. 이는 객체의 내용을 복사하기 때문에 발생하는 현상입니다. 자바스크립트에서는 JSON.parse()와 JSON.stringify() 메서드를 사용하여 깊은 복사를 수행할 수 있습니다.

17. 크로스 브라우징이란?

크로스 브라우징(Cross Browsing)이란 웹 페이지나 웹 애플리케이션을 여러 브라우저에서 동일하게 보이고 작동하도록 만드는 기술입니다.

웹 개발에서는 다양한 브라우저가 존재하며, 각 브라우저마다 HTML, CSS, JavaScript를 해석하는 방식이 조금씩 다릅니다. 이러한 차이로 인해, 웹 페이지나 웹 애플리케이션이 한 브라우저에서는 정상적으로 작동하지만, 다른 브라우저에서는 제대로 작동하지 않는 경우가 있습니다.

크로스 브라우징을 위해서는 다양한 브라우저에서 동일하게 작동하도록 코드를 작성해야 합니다. 이를 위해서는 HTML, CSS, JavaScript에서 사용하는 기능이 각 브라우저에서 지원되는지 확인해야 합니다. 또한, 브라우저별로 다른 기능을 사용해야 하는 경우에는 브라우저를 감지하여 해당 기능을 사용하도록 코드를 작성해야 합니다.

크로스 브라우징은 모든 브라우저에서 동일하게 작동하는 것을 보장하지는 않습니다. 하지만, 대부분의 브라우저에서 정상적으로 작동하도록 만들어진 웹 페이지나 웹 애플리케이션은 사용자들에게 더 나은 사용자 경험을 제공할 수 있습니다.

18. Sementic HTML란 무엇인가요?

Semantic HTML(시멘틱 HTML)은 웹 문서의 구조를 의미론적으로 명확하게 표현하는 HTML 마크업 기법입니다.

시멘틱 HTML을 사용하면 웹 페이지의 구조가 의미에 따라 구성되기 때문에 검색 엔진 최적화(SEO)에도 도움이 됩니다. 또한, 시각 장애인 등의 보조 기술을 사용하는 사용자들이 웹 페이지를 더 쉽게 이해할 수 있도록 도와줍니다.

시멘틱 HTML을 사용하면 div와 span 등의 일반적인 컨테이너 태그 대신 의미 있는 태그를 사용하여 웹 페이지를 구성합니다. 예를 들어, article, section, nav, aside, header, footer 등의 태그를 사용하여 웹 페이지의 구조를 나타내는 것이 시멘틱 HTML을 따르는 것입니다.

시멘틱 HTML은 웹 페이지의 가독성과 유지보수성을 향상시키며, 검색 엔진 최적화와 웹 접근성을 높이는 데에도 도움이 됩니다.

19. 라이브러리와 프레임워크에 대해 설명해주세요.

라이브러리(Library)와 프레임워크(Framework)는 모두 코드를 재사용하기 위한 도구입니다. 하지만 두 개의 차이점이 있습니다.

라이브러리는 개발자가 코드를 호출하여 사용하는 도구 모음입니다. 라이브러리는 특정 기능을 수행하기 위한 코드 집합이며, 개발자는 필요한 기능을 호출하여 사용합니다. 라이브러리는 개발자가 필요한 기능을 찾아서 가져와 사용하면 되기 때문에 자유도가 높고, 유연하게 사용할 수 있습니다. 대표적으로 jQuery, Lodash 등이 있습니다.

프레임워크는 미리 정해진 구조와 규칙에 따라 개발자가 코드를 작성하는 도구입니다. 프레임워크는 미리 구축된 코드를 제공하여 개발자가 이를 확장하거나 변경하여 애플리케이션을 개발할 수 있도록 돕습니다. 개발자는 프레임워크에서 제공하는 규칙을 따라 코드를 작성해야 합니다. 프레임워크는 초기에는 개발 속도가 느리지만, 유지보수 및 확장성이 용이하며 보다 일관적인 코드를 작성할 수 있습니다. 대표적으로 Angular, React, Vue.js 등이 있습니다.

두 도구 모두 코드를 재사용하여 개발 속도를 높이는 데에 도움을 주지만, 라이브러리는 개발자가 코드의 흐름과 구조를 직접 관리하고, 프레임워크는 미리 정해진 규칙에 따라 개발자가 코드를 작성하는 것이 큰 차이점입니다.

KoEunseo

주니어 플러터 개발자의 고군분투기

다음 포스트