[모의 면접] 리액트, SPA,MPA, 넥스트, RESTful API , HTTP메서드

• React란
• SPA , MPA 차이
• Next.js란
• RESTful API 란
• HTTP메서드 종류

---

React란

• SPA웹 애플리케이션을 개발하기 위한 라이브러리
• UI를 여러 독립적인 컴포넌트 구조로 나누어 개발하기 때문에 재사용성에 용이하다
• 메모리에 저장된 가상 DOM을 이용해 배치 업데이트로 여러 변경사항을 하나로 묶어 실제 DOM에 반영하여 효율적인 업데이트가 가능하다

---

SPA , MPA 차이

SPA (Single Page Application)

• 하나의 HTML 페이지 기반으로 동적으로 콘텐츠를 변경하며 사용자와 상호작용하는 웹 애플리케이션

특징

• 초기에 필요한 모든 자원(HTML, CSS, JavaScript)을 로드한 후, 페이지 전환 또는 수정 시 필요한 데이터만 동적으로 로드하여 콘텐츠를 업데이트한다.
• 페이지 새로고침 없이 작동하여 깜빡임 현상이 일어나지 않아 사용자 경험을 향상한다
• 주로 React, Angular, Vue.js와 같은 프레임워크나 라이브러리를 사용해 개발된다

MPA (Multi-Page Application)

• 여러 개의 HTML 페이지로 구성되어 있고, 각 페이지마다 별도의 서버 요청이 필요한 전통적인 웹 애플리케이션

특징

• 각 페이지는 서버로 모든 자원 (HTML, CSS, JavaScript) 을 받아 렌더링 한다
• 페이지 전환 또는 수정 시 서버에 새로운 페이지를 요청하고 로드하는 방식으로 동작한다

---

Next.js란

• React 기반 웹 프레임워크
• 이미지 사이즈를 동적으로 설정하여 페이지 성능을 개선할 수 있다.
• 다양한 렌더링 방식 (SSR, SSG, ISR, CSR)으로 성능을 최적화할 수 있다
• app폴더 page로 간단한 파일 기반 라우팅을 구현할 수 있어 개발 생산성을 높일 수 있다
• TypeScript와 같은 다양한 언어와 라이브러리와 함께 사용할 수 있어 확장성이 높다

---

RESTful API

RESTful API 설계는 HTTP메서드를 활용한 CRUD설계원칙이다

REST는 각 자원을 URI로 표현하고, 자원에 대한 CRUD작업을 HTTP 메서드로 수행한다

블로그에서 각 포스트(post)는 하나의 자원이며, 이 자원은 고유한 URI를 가진다.
URI를 통해 포스트를 식별하고,
GET으로 포스트를 조회하거나,
POST로 사용하여 새로운 포스트를 생성할 수 있다.
이렇게 자원을 정의하고 접근하는 것이 REST의 핵심 개념이다

API 
데이터 정보 교환을 위한 도구

 
 

• URI : 각 자원은 고유한 URI를 가지고, 자원을 식별하고 접근한다
• HTTP 메서드 : HTTP 프로토콜 메서드(GET, POST, PUT, DELETE)로 자원에 대한 CRUD 작업을 정의한다 
• JSON 형식 : HTTP 요청과 응답은 헤더와 바디를 통해 필요한 정보와 자원의 상태를 JSON 형식으로 전달한다
• 요청과 응답의 독립성: 각 요청과 응답은 무상태성을 유지해야 한다(이전 요청과 다음 요청은 연결성이 없고 새로운 요청인 것)

URI, URL 차이
URI는 리소스를 식별할 수 있는 고유한 이름이나 주소(IP와 같다)
URL은 URI의 하위 개념으로, 리소스가 위치한 특정 주소

 

---

HTTP메서드 종류

 

• GET: 조회, 클라이언트가 서버에서 데이터를 가져올 때 사용한다
• POST: 생성, 클라이언트가 서버에 데이터를 전송하여 새로운 자원을 생성할 때 사용한다
• PUT: 전체 수정, 클라이언트가 전체 내용을 서버에 업데이트할 때 사용된다
• PATCH: 일부 수정, 클라이언트가 일부 수정된 내용을 서버에 업데이트할 때 사용된다
• DELETE: 삭제, 클라이언트가 서버에서 데이터를 삭제할 때 사용된다

 

*전체 데이터를 업데이트하는 put 보다 일부 변경 사항만 업데이트하는 patch를 주로 사용한다