1. 웹, 앱 개발 시스템 구조

 현재 컴퓨터공학과 1학년을 마침과 동시에 서울시 Sesac 임베디드/로봇 과정 마무리를 코 앞에 둔 상황인 현재, 

지금껏 배워왔던 지식들을 거시적인 관점에서 정리하고, 몰랐던 부분을 빠르게 배워보고자

인프런에서 비 개발자들을 위한 IT 개발 지식 강좌가 있어 빠르게 정리해 보려고 한다.

 

 공부하기 위해 올리는 내용이기에 틀린 부분이나 부족한 부분이 많이 있습니다. 댓글로 틀린 부분을 지적해주시면 정말 감사하겠습니다. 

---

강의 유튜버 주소는 불꽃남자25 IT도서관 님의 https://www.youtube.com/user/seonsin

불꽃남자25 IT도서관

 인프런 주소는 https://www.inflearn.com/course/%EB%B9%84%EA%B0%9C%EB%B0%9C%EC%9E%90-it-%EA%B0%9C%EB%B0%9C-%EC%A7%80%EC%8B%9D

[무료] 비 개발자들을 위한 IT 개발 지식 - 인프런 | 강의

---

1. 웹 

- 프론트엔드는 백엔드(DB)에 데이터를 요청하면, 데이터를 받아 표시하는 역할. (흔히, html + css + javascripts로 개발)

- 백엔드(db)는 프론트엔드에서 요청이 들어오면, 데이터를 비교, 거절, 전달등의 역할. (ex. spring, django, etc...)

- 비즈니스로직 개발은 프로그램 개발과 같은 말 

 

2. 앱

 - 앱은 웹과 구조는 거의 동일 / 프론트엔드 개발 == 앱 개발

 - 다만, 사용되는 프로그래밍 언어, 툴, 등에 차이가 있음.

 

3. 웹 논리적 구조 구분 (SSR // CSR)

 렌더링이란? 서버로 요청해서 받은 내용을 브라우저 화면에 표시하는 것

 서버사이드렌더링(SSR)?

- 클라이언트가 서버에 데이터를 요청하면 서버가 통째로 완성된 페이지를 만들어 보내주는 것. (보통 옛날)

 클라이언트사이드렌더링(CSR)?

- 서버가 보내준 데이터를 가지고 필요한 부분만 바꿔서 보내주는 것.  (요즘)

 

 - SSR, CSR 각각 장단점이 있지만, 서버사이드렌더링의 경우에는 웹과 앱 각각, 서버 개발을 해주어야 하기 때문에 서버 관련 cost가 증가하게 됨.

 - 클라이언트사이드렌더링은 서버 하나로 웹과 앱이 같이 사용할 수 있다. 

   따라서 앱개발을 같이 하거나 하게 될 가능성이 있는 경우 API(Application Programming Interface), 프론트엔드와 백엔드사이의 중매쟁이를 사용하여 클라이언트사이드렌더링 구조로 개발한다. 

 

4. 앱 논리적 구분 

서버에 있는 걸 API를 통해서 안드로이드 ios 따로 or 같이 

 

5. 웹 + 앱 논리적 구조 

최근에는 웹, 앱 동시에 개발할 때,  벡엔드가 만든 데이터를 웹과 앱에서 같이 사용하기 위해 아래와 같은 구조를 띄게 된다. 

6. 서버 - 앱 개발 구분 

파란색 - 서버개발자 // 하늘색 - 앱개발자 

frontend가 왜 서버냐?? 이게 좀 헷갈릴 수 있는데 이는 배포 기준. 

배포(Deploy, 설치) 개발자가 자기 피시에서 개발한 것을 실제 돌아갈 위치로 옮겨줘야 하는데 이게 바로 배포.

프로그램 코드를 전부 서버에 심기때문에 frontend도 서버로 넣어버림.

앱은 핸드폰이나 기기에 바로 설치하기 때문에 따로 뺌.