Today I Learned(2023-12-28)

📝오늘 한 일

• 내일배움캠프 웹 개발 복습 및 학습
• Web 기초 특강

---

📝하루 회고

• 오늘은 Web 기초 특강에서 API, 공공 API, 프론트엔드, 백엔드 등 기초적인 Web에 대한 지식을 배울 수 있었다. 그 중에서 가장 기억에 남는 내용은 서버를 구성하는 4가지 방법이었다.

  1. 프론트엔드와 백엔드를 동시에 구성하는 방법

프로젝트 디렉토리(폴더)안에 리액트와 스프링(또는 노드) 폴더가 각각 존재하여 한번 배포, 끝!(빌드 bla lba...)
	→ 하나의 웹서버에서 프론트엔드와 백엔드를 동시에 처리함
	주요 기능
		- 페이지 전달 : 리액트
		- API 제공 : 스프링(또는 노드)
	장점
		- 배포 및 관리가 간단
		- 네트워크 통신 오버헤드가 없거나 적다
	단점
		- 백엔드와 프론트엔드가 동일한 리소스를 공유하기 때문에 성능 이슈가 발생할 수 있다.
		- 스케일 아웃이 어려울 수 있다.
	예시
		- 블로그 시스템

2. 프론트엔드와 백엔드를 각각 구성해서 배포하는 방법

보통 FE는 Vercel, BE는 AWS로 구성
	- 주요 기능 
		- 페이지 전달 : 리액트
		- API 제공 : 스프링(또는 노드)
	- 장점
		- 프론트엔드와 백엔드를 독립적으로 스케일 아웃할 수 있다.
		- 한쪽에 문제가 발생해도 다른 쪽에 영향을 주지 않는다.
	- 단점
		- 배포 및 관리가 복잡할 수 있다.
		- 프론트엔드와 백엔드 간의 통신 오버헤드가 발생할 수 있다.

3. 백엔드만 구성하여 배포 및 관리

- 주요 기능 
		- 페이지 전달 : 스프링(또는 노드)
		- API 제공 : 스프링(또는 node-express/nest)
	- 장점 : 프론트엔드의 별도 배포가 필요 없다. 설정 및 관리가 상대적으로 간단하다.
	- 단점 : 모던 프론트엔드 프레임워크(React, Vue, 등등)의 이점을 제대로 활용하기 어려울 수 있다.
		- 백엔드 리소스가 정적 페이지 제공에도 사용되므로 퍼포먼스 이슈가 발생할 수 있다.
	- 예시 : 간단한 회사 홈페이지

4. 프론트엔드만 구성하여 배포하는 방법

- 주요 기능 
		- 페이지 전달 : 리액트
		- API 제공 : 없거나, next.js를 사용하는 경우
	- 장점
		- 백엔드 없이 순수한 클라이언트 사이드 렌더링을 활용할 수 있다.
		- 프론트엔드 리소스만 관리하면 되므로 간단한 웹사이트나 앱에 적합
	- 단점
		- 데이터를 처리하거나 복잡한 기능을 구현하기 위해서는 별도의 백엔드 서비스가 필요하다.
		- SEO 최적화를 위해 서버 사이드 렌더링이 필요한 경우 별도의 설정 및 구성이 필요하다.
	- 예시 : 포트폴리오 웹사이트

---

📝내일 할 일

• 웹 개발 복습
• SQL 강의 학습

---