[웹 질문 정리] HTML, RESTful API, HTTP 메소드, Webpack과 Babel, MVC패턴과 MVVM 패턴 그리고 Flux패턴

- Semantic HTML은 무엇인가요?

HTML 요소의 이름과 역할이 내용과 구조를 명확히 나타내도록 설계된 HTML입니다.

<footer> <nav> <main> <section>

장점은 콘텐츠의 구조를 쉽게 이해하고 사용자에게 올바르게 전달될 수 있으며, 검색 엔진 최적화하여 검색 순위 개선에 도움을 줄 수 있습니다. 

 

- semantic HTML 을 사용함으로서 웹 근성에 어떤 영향을 미치나요?

스크린리더와 같은 보조 기술에 의한 콘텐츠 이해도를 향상시킬 수 있습니다.

문서 구조와 콘텐츠 흐름을 명확하게 할 수 있습니다.

검색 엔진 최적화(SEO), 코드 유지보수성 향상, 사용자 경험 개선 등 다양한 장점을 가져옵니다.

 

- RESTful API에 대해 설명해주세요

RESTful API는 자원을

(1) 고유한 URI를 통해 식별하고,

(2) HTTP 메서드를 통해 자원에 대한 작업을 정의하며

(3) JSON, XML, HTML과 같은 형식으로 표현하는 규약을 의미합니다.

 

- HTTP Method 중 POST와 PUT의 차이에 대해 설명해주세요

POST는 새로운 자원을 생성하기 위한 요청이고, PUT은 기존 자원을 생성하거나 업데이트하기 위한 요청입니다. 

 

- Webpack과 Babel은 무엇인가요?

자바스크립트 개발 환경에서 코드 빌드와 변환 작업을 도와주는 도구입니다. 

 

Webpack은 모듈 번들러로 애플리케이션을 구성하는 HTML, CSS, JS와 같은 여러 파일을 하나 또는 여러 개의 번들로 묶어주는 역할을 합니다. 이를 통해 브라우저가 실행하기에 적합한 코드로 변환되고 자바스크립트 파일의 의존성 문제를 해결합니다. 

 

주요 기능은 다음과 같습니다.

모듈 번들링 : 여러 파일을 묶어서 하나의 파일로 만드는 기능

코드분할 : 필요한 부분만 로드하여 성능 최적화

로더 : JS외의 파일(CSS, 이미지 등)을 처리

플러그인 : 추가 작업을 수행

 

Babel은 자바스크립트 트랜스파일러입니다.

최신 자바스크립트 코드를 구형 브라우저에서도 동작할 수 있도록 구버전의 자바스크립트로 변환하는 작업을 수행합니다.

 

주요 기능은 다음과 같습니다.

최신 문법을 ES5 문법으로 변환합니다.

폴리필을 추가하여 구형 브라우저에서 없는 기능을 사용할 수 있도록 합니다

다양한 플러그인을 활용해 기능을 확장합니다.

 

 

- MVC패턴과 MVVM 패턴의 차이에 대해 설명해주세요

특징	MVC	MVVM
주요 중개자 역할	Controller가 View와 Model을 연결	ViewModel이 View와 Model을 연결
View와 중개자의 관계	View와 Controller가 강하게 결합	View와 ViewModel이 데이터 바인딩으로 느슨하게 결합
데이터 흐름	Controller가 모든 작업 지시	양방향 데이터 바인딩(View<=>ViewModel)

 

https://blog.stackademic.com/understanding-mvc-mvvm-and-mvp-a-comprehensive-comparison-324fd6e3c730

 

- MVC패턴의 Controller와 MVVM 패턴의 ViewModel의 역할에 대해 설명해주세요

Controller는 사용자의 요청을 받아 비즈니스 로직을 처리하고 화면 갱신을 하는 중재자 역할을 수행합니다

ViewModel은 View와의 양방향 데이터 바인딩을 통해 상태를 자동으로 동기화합니다. 

따라서, 사용자가 로그인 폼에 정보를 입력하면, ViewModel이 View와 데이터 바인딩을 통해 입력값을 자동으로 수신하고, 

ViewModel이 Model에 데이터를 전달하여 인증을 요청합니다. 인증 결과를 바탕으로 ViewModel의 상태를 갱신하고 

View는 이를 자동으로 반영합니다.

 

- MVVM 패턴과 Flux 패턴의 차이에 대해 설명해주세요

데이터 흐름 및 관리 방식에 차이점이 있습니다.

MVVM은 View와 ViewModel 사이에 양방향 데이터 바인딩을 통해 데이터를 주고받는 반면,

FLUX는 단방향 데이터 흐름을 따릅니다.

MVVM에서는 ViewModel이 Model 역할을 수행하고, View와 ViewModel 사이에서 데이터를 중계합니다.

반면 FLUX에서는 데이터의 흐름이 Action -> Dispatcher-> Store -> View로 이어지며 단일 책임을 갖습니다.

이런 구조는 Flux를 사용한 코드를 테스트하기 쉽게 만듭니다. 

MVVM은 Vue와 같은, Flux는 React....

 

- 동기와 비동기의 차이점을 설명해주세요

동기와 비동기는 작업을 수행할 떄 완료 여부에 따라 구분됩니다. 

동기적 작업은 요청을 보내고, 해당 작업의 완료 응답을 기다리지만 비동기적 작업에서는 요청을 기다리지 않고 바로 다음 작업을 수행합니다