IT 전체 영역 큰 그림 보기

2023. 12. 12. 13:11· CS공부/IT기본지식

개발 기본 구조


프로그램 종류는 웹과 앱이 대부분임

# 웹과 앱의 차이점은 뭘까?

웹 : 서버(실행) -> 브라우저 -> 사용자
브라우저 설치
화면이나 데이터를 한꺼번에 전달하는 방식
처음에 화면과 데이터를 보내놓고 그 후에는 필요한 데이터만 전달하는 방식

앱 : 서버(실행) -> 앱 설치 -> 사용자


개발 구조 알아보기


1. 웹 개발 구조

 데이터 베이스에 데이터 저장 -> 정보를 핸들링하는 로직 개발 -> 정보를 표시하는 화면 개발
정보를 핸들링하는 것을 비즈니스 로직 개발 이라고 함


# 화면 랜더링 방식의 차이 SSR vs. CSR


# 서버사이드랜더링 SSR

서버 쪽에서 화면 전체를 가지고 오는 것
서버개발자 라는 명칭으로 프론트와 백 동일하게 개발
웹만 개발할 때 주로 진행되는 개발 형식


# 클라이언트사이트랜더링 CSR

클라이언트 쪽에서 화면을 그리고 서버에서 데이터가 오가는 것
백엔드와 프론트엔드 개발이 완전하게 나누어짐
서버에서 프론트 쪽으로 데이터를 넘기기 위한 방식, 프론트엔드와 백엔드를 연계해주는 것 -> api




2. 앱 개발 구조

데이터 베이스에 데이터 저장 -> 정보를 핸들링하는 로직 개발 -> 정보를 표시하는 화면 개발 앱(안드로이드, ios)

크로스 플랫폼 : 하나의 소스코드 개발로 안드로이드, ios 모두 적용
리액트 네이티브, 플러터

# 앱 개발 방식(모바일)


개발 방식의 선택 기준: 접근의 평이성, 관리의 용이성, 가용할 개발 리소스, 프로그램 성능, 프로그램 성격

 

1. 모바일 웹 개발 

  • 모바일을 위한 앱 페이지를 개발하는 것
  • 일반 웹페이지를 모바일에서 볼 수 있게 하는 것
  • 웹 개발자 + 퍼블리셔 필요
  • 장점 -> 웹 개발만 하면 되어 작업 리소스 감소, 유지 보수 시 서버 배포만 하면 됨
    앱은 새로운 기능을 추가하거나, 오류 수정시 앱스토어에서 새로 다운을 받아야 함 즉 업데이트 필요함
    유저들은 이 점에 매우 민감 -> 불편함, 번거로움을 느낌
    웹이 유지보수 관리 측면에서는 유용
  • 단점 -> 휴대폰의 고유 기능 사용 불편, url을 통한 접속으로 불편한 접근성

 

2. 반응형 웹 

  • 동작하는 기기의 화면과 해상도에 맞춰 웹페이지가 자동 반응하여 변하게 하는 개발
  • 웹 개발자 + 퍼블리셔 + 기획 고민 추가 필요
  • 장점 -> 단순하고 가벼운 웹페이지는 개발 리소스 절약
  • 단점 -> 화면의 다양성과 복잡한 UI 구성일 때는 오히려 비용과 효율이 떨어짐
  • 간단한 예로 pc/모바일 웹을 별도로 개발하는 것이 아닌 한 페이지로 개발, 자동 변형
    인기가 그렇게 많지는 않음


3. 웹앱 개발

  • 모바일 웹에 앱의 외관을 씌운 개발
  • 개발 자체, 모든 기능은 모바일 웹으로 함, 이 웹이 일반 브라우저를 통해서 나오는 것이 아니라 앱을 통해서 나오게 함, 앱 개발을 하긴 하지만 앱 자체는 빈깡통의 개념 거기에 모든 화면을 웹으로 보이게(웹뷰)
  • 즉 앱이라는 껍데기에 웹을 씌우는 개발임
  • 모바일 웹의 가장 불편한 단점이 접근성을 보완
  • 웹앱 형태로 개발하게 되면 웹 개발 그대로 가져감과 동시에 앱의 형태이기 때문에 직접적인 접근성 확보가 가능
  • 웹 개발자 + 퍼블리셔 + 앱개발자(비중 낮음) 필요
  • 장점 -> 웹 개발 중심이기 때문에 작업 리소스 감소, 유지 보수 시 서버 배포만 하면 됨, 모바일 웹과 달리 전용 앱 존재
  • 단점 -> 휴대폰의 고유 기능을 사용하기 어려움, 소수이지만 운영을 위해 앱 개발 리소스가 들어감


4. 네이티브 개발

  • 모바일의 고유 기능을 중심으로 서비스하는 앱을 만들 때 많이 사용
  • GPS, BLE, 카메라 등
  • 안드로이드,ios 앱 개발을 뜻함
  • 백엔드 + 앱개발자(안드로이드, ios)
  • 장점 -> 휴대폰 고유 기능 등 앱에 최적화딘 개발, 모바일 웹에 비해 성능 분석이 우수
  • 단점 -> 개발 리소스가 많이 들어감, 유지보수 불편(앱 배포, 사용자 업데이트)
  • 성능 측면에서는 우수하지만 유지보수 측면에서는 불편함

5. 하이브리드 개발

  • 웹앱 + 네이티브의 혼합 방식
  • 비중에 따라서 네이티브 80% + 웹앱 20% -> 네이티브앱 중심, 자주 변경되는 몇가지 페이지는 웹으로 개발(잦은 업데이트 불편함 해소
  • 웹앱 80% + 네이티브 20% -> 웹앱 중심, 단 특별한 네이티브 기능 필요(웹만으로 적용 불가능한 기능을 강화하기 위함)
  • 요즘 나오는 앱들이 대부분 하이브리드 개발
  • 서버개발자 + 앱개발자(안드로이드, ios) 필요
  • 장점 -> 네이티브와 웹앱의 비중에 따라 양쪽 장점 채용
  • 단점 -> 개발 리소스가 많이 들어감


6. 크로스플랫폼 개발

  • 네이티브 개발, 원소스 코드 개발
  • 최근 많이 사용하는 트랜드, 네이티브 앱 대비 장점이 많음 하지만 아직은 개발자가 부족함
  • 크로스 플랫폼(리액트 네이티브, 플러터) 개발자 필요
  • 장점 -> 개발 리소스가 많이 줄어듬, 유지비용도 줄어듬
  • 단점 -> 네이티브 대비 약간의 기능 섬세함 미흡, 아직까지는 크로스플랫폼 개발자 공급 부족



저작자표시 비영리 변경금지 (새창열림)

'CS공부 > IT기본지식' 카테고리의 다른 글

테스트 & 배포 & 안정화 관련 필수 지식  (0) 2023.12.13
WEB-APP 관련 필수 지식  (0) 2023.12.13
외부 시스템 연계 필수 지식  (0) 2023.12.13
보안 필수 지식  (0) 2023.12.13
IT 개발 필수 지식  (0) 2023.12.12
'CS공부/IT기본지식' 카테고리의 다른 글
  • WEB-APP 관련 필수 지식
  • 외부 시스템 연계 필수 지식
  • 보안 필수 지식
  • IT 개발 필수 지식
개발자 정지은
개발자 정지은
프로그래밍 공부 기록
개발자 정지은
PROGRAMMING DIARY
개발자 정지은
전체
오늘
어제
  • 분류 전체보기 (107)
    • 알고리즘 (49)
      • BeakJoon (27)
      • SWEA (9)
      • Inflearn (2)
      • CodeSignal (1)
      • Programmers (10)
    • FE (0)
      • Javascript (0)
      • React (0)
    • BE (0)
    • CS공부 (13)
      • Database (7)
      • IT기본지식 (6)
    • TIL (45)
      • 프로그래머스 데브코스 (45)
    • Project (0)
      • DreamHi (0)
      • 인사관리시스템 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 피그마
  • javascript
  • 국비지원교육
  • figma
  • 프로그래머스 데브코스
  • React.JS
  • ReactNative
  • 프론트엔드
  • 알고리즘
  • 리액트
  • 자바스크립트
  • 코딩부트캠프

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
개발자 정지은
IT 전체 영역 큰 그림 보기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.