티스토리 뷰
- 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를 주로 사용한다
'면접' 카테고리의 다른 글
[모의 면접] 변수 선언 차이, 호이스팅, 디스, 클로저, 비동기 함수 차이, 렌더링 과정, 쿠키 세션 차이, 토큰, 쓰로틀링 디바운싱 (0) | 2024.08.26 |
---|---|
[모의 면접] ES6 이전 버전 차이, JS와 TS 차이, 시맨틱태그 (0) | 2024.07.05 |
[모의 면접] 성능최적화, CI/CD, 자바스크립트, 타입스크립트 (0) | 2024.06.20 |
[모의 면접] 바벨, 원시 타입 (0) | 2024.06.20 |
[모의 면접] 메모이제이션, 레이지로딩, 모듈 번들러 (0) | 2024.06.19 |