[알토르] 2주차 과제 : SPA, MPA, React

[기술과제]

1. SPA란 무엇인가 ?, MPA란 무엇인가?

 

 

SPA(Single Page Application)

(ex. React, Vue, Angular)

 

개발자 : 웹사이트가 앱처럼 보였으면 좋겠다.

AJAX로 백단에서 서버한테 데이터 요청

전체화면을 바꾸지 말고 화면일부만 바꿔치기

 

하나의 페이지로 되어있는 애플리케이션

(웹을 앱 같이 보이게끔 도움 주는 프레임워크)

// 프레임워크 -> 기능들 모음집

 

장점 :

페이지 전체를 다시 로드하지 않고 필요한 데이터만 요청하여 화면 일부만 업데이트(데이터 소모 적음)

컴포넌트 기반 구조로 UI를 분리하여 코드 재사용성과 유지보수성이 높음

 

단점 :

검색엔진에 노출이 안 된다(해결방식도 있긴 함 -> SSR // 맨아래 추가과제에 정리)

---

MPA(Multi Page Application)

(ex. 전통적인 웹사이트, 서버 렌더링 기반 사이트)

 

여러 개의 HTML 페이지로 구성된 웹 애플리케이션

사용자가 페이지 이동할 때마다 서버에 새로운 HTML 요청

서버가 새로운 페이지를 다시 렌더링해서 전체 화면을 새로 로드

 

장점

SEO(검색엔진 노출)에 유리

초기 로딩 구조 단순

서버 중심 구조라 관리가 명확(대부분 로직 서버에서 처리)

 

단점

페이지 이동마다 전체 화면 리로드

SPA보다 사용자 경험(UX) 느릴 수 있음

페이지 전환 시 데이터 다시 로드

 

// 검색엔진은 기본적으로 HTML 문서를 읽어서 페이지 내용을 파악

 

MPA /SSR :

클라이언트가 페이지 요청 -> 서버가 완성된 HTML 생성 -> 브라우저와 검색엔진에 전달

(검색엔진이 페이지를 크롤링할 때 이미 콘텐츠가 HTML 안에 존재)

 

SPA :

처음 HTML에는 콘텐츠 없음 → JS 실행 후 화면 생성 (SEO 불리)

---

2. React란 무엇인가 ?

-> 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

 

lib(Library)

-> 각각 하나의 기능을 lib

(가구 조립할 때 쓰는 드라이버나 망치 같은 도구)

 

Framework

-> 일하는 규칙이 정해진 작업장. 규칙대로 코드 넣으면 알아서 실행)

// 안에 lib들이 엄청 많음

// React에서 다양한 모듈 불러오다 보면 프레임워크처럼 됌

(react는 자기들을 lib라고 함 - UI 만드는 기능에만 집중해서)

 

웹 프레임워크 -> 웹 개발하기 위해 다양한 lib 제공해주는 것 

---

3. JSX 문법이 무엇인가 ?

 

JSX문법

-> HTML처럼 생겼지만 HTML 아님

-> JavaScript 안에서 UI 작성하기 위한 문법

-> React에서 사용되며 최종적으로 JavaScript로 변환됨

---

4. 컴포넌트가 무엇인지 ?

 

레이아웃 하나하나의 특정한 기능을 분리시킴(컴포넌트화 // 감싼다).

컴포넌트는 하나의 모듈. 

각각 컴포넌트들을 다른 페이지에서도 쉽게 불러와서 사용 가능.

(컴포넌트는 가능한 쪼개서 개발하기)

 

//React에서 컴포넌트 파일 만들때 첫글자는 대문자로 (규칙)

---

5. 소스코드 설치 해보기(완료)

 

npx create-react-app react-study
cd react-study
npm start

---

 

npm (Node Package Manager)

-> Node.js에서 사용하는 패키지 관리자 (모듈들을 설치할 때 쓰는 명령어)

 

ES6 비구조화 할당

-> 객체나 배열에서 필요한 값만 빠르게 꺼내 변수로 할당하는 ES6 문법

 

//객체나 배열을 일일히 값을 따로 넣어주려면 번거로움

 

const [first, , third] = ['사과', '바나나', '포도'];
console.log(third); // '포도'

---

const smartphone = {
  brand: 'Samsung',
  model: 'Galaxy',
  color: 'Phantom Black'
};

// 'brand'와 'color'라는 이름의 변수로 바로 추출
const { brand, color } = smartphone;

console.log(brand); // 'Samsung'
console.log(color); // 'Phantom Black'

---

-> 함수 정의할 때 필요한 데이터만 명시 가능!

-> 코드가 짧아지는 것은 물론이고, 협업 시 함수 사용 데이터 명확

---

 

[추가과제]

Next.js 간단하게 개념 정리

 

Next.js

-> React로 만든 웹사이트를 더 빠르고 SEO 친화적으로 만들어주는 웹 프레임워크

(프레임워크니깐 코드 작성법과 명확한 규칙이 있음)

특징.

-> SSR (Server Side Rendering) 지원

서버에서 HTML을 만들어서 전달 → SEO 좋아짐

 

-> 파일 기반 라우팅

pages 폴더에 파일 만들면 자동으로 페이지 생성

(Next.js 는 파일 구조가 곧 URL 경로가 되는 방식을 사용)

ex.

pages/about.js  →  /about
pages/blog.js   →  /blog
pages/index.js  →  /

 

-> 풀스택 개발 가능

프론트엔드와 백엔드를 함께 개발할 수 있다.

프론트엔드: 화면(UI)

백엔드: 데이터 처리 / API / 서버 로직

//API 기능을 통해 프로젝트 내부에서 서버(API)를 만들 수 있음