IT도서 : 비전공자를 위한 이해할 수 있는 IT지식 - [6장] 웹(Web) / [7장] 데이터베이스와 이미지 처리

 

6장] 웹 (Web)

 

 

🚨 Web

 

웹의 4가지 이슈

• HTML, CSS, JavaScript 로 이루어진 웹의 기본적인 내용 
• 브라우저
• 반응형 웹
• 하이브리드 애플리케이션

 

 

🚨 웹을 구성하는 3요소

• HTML 
• CSS 
• JavaScript

 

HTML (Hyper Text Markup Language)

• 유럽 입자 물리 연수소(CERN) 에서 시작
• '팀 버너스리' 라는 직원은 연구소 사람들이 서로 다른 운영체제(OS)나 애플리케이션을 사용하고 있다는 문제점을 발견
• 운영체제나 프로그램에 상관없이 일정한 형식이 언제나 동일하게 보이도록 하는 새로운 개념이 필요
  -> HTML 문서는 운영체제에 상관없이 브라우저만 있으면 스마트폰에서도, PC에서도, 노트북에서도,
     윈도우에서도, 맥에서도, iOS나 안드로이드에서도 모두 웹사이트에 접속하여 동일한 정보를 확인할 수 있다

HTML 태그

• 정보를 체계화하는 코드 => 이러한 코드들을 Tag(태그) 라고 지칭   <h> : Header(대제목)   <p> : Paragraph 문단)   <ol> : Ordered List(순서 있는 목록)   <ul> : Unordered Lis (순서 없는 목록)   <a> : 다른 HTML 문서로 이동(링크 개념) • HTML 은 프로그래밍 언어가 아니다    -> 컴퓨터에게 일을 시킬 수 있는 언어가 아닌 단지 브러우저가 볼 수 있는 문서를 적는 언어

 

CSS

• HTML 에 디자인을 입힐 수 있는 코드
• HTML이 정보전달에만 초점을 맞추다보니 디자인 기능이 부족해서 생긴 코드
 - 퍼블리싱 : HTML 와 CSS 가 합쳐진 작업
 - 퍼블리셔 : 퍼블리싱을 작업하는 사람들
 - 마크업(Markup) : HTML 작업을 마크업 작업이라 부르고, HTML 작업을 주로 하는 사람들을 마크업 개발자라고 한다

 

JavaScript

• HTML과 CSS 로는 힘든 또 다른 기능들이 필요해지면서 프로그래밍 언어의 역할을 하는 JavaScript 가 탄생
• JavaScript와 Java는 아무 상관이 없다

 

 

🚨 웹과 애플리케이션의 차이

요소를 수정하는 경우의 차이점
애플리케이션	웹
1. 코드 수정 2. 모바일일 경우 마켓에 업로드 (심사 필요) 3. 사용자들이 각각 버전 업데이트 4. 변경 완료	1. 코드 수정 2. 원본 파일을 수정된 파일로 교체 3. 변경 완료

 

웹 개발이 힘든 이유?

• 각 브라우저는 서로 다른 애플리케이션이기 때문에 브라우저에 따라 그 안의 구현 방식이 다름
• 참고할만한 사이트 : caniuse.com
  - CSS의 사용 가능 여부를 찾아볼 수 있는 서비스
  - CSS의 기술 별로 사용가능한 브라우저를 확인할 수 있다.
• 모두를 만족시킬 필요는 없다! -> 점유율이 높은 브라우저를 타케팅해서 개발하자

 

 

🚨 반응형 웹

• 웹페이지의 크기(비율)가 사용자의 기기에 맞춰 자동으로 변형됨
  ex) bootstrap 
• 서로 다른 기기의 넓이에 따른 CSS 를 추가로 코딩해야 함 
  -> 작업 시간이 오래걸리고, 비용이 더 많이 들어가게됨

 

 

🚨 네이티브 애플리케이션 / 하이브리드 애플리케이션 / 모바일 웹 앱

 

네이티브 애플리케이션

• iOS 개발 언어(스위프트, Objective-C), 안드로이드 개발 언어(자바, 코틀린) 로 개발한 어플리케이션
• 원래 정해 놓은 언어들을 사용해 OS 자체의 기능을 사용
- 성능이 가장 좋다
- 하지만 플랫폼에 한정적

하이브리드 애플리케이션

• 네이티브앱에 웹 뷰(web view)를 띄우는 방식
• OS 안에 브라우저가 내장되기 시작(iOS 속 사파리, 윈도우의 인터넷 익스플로러)하면서 
  애플리케이션의 특정 부분에 '브라우저'를 올리는 방식의 개발이 탄생
• 한번의 개발로 다수 플랫폼에 적용 가능

모바일 웹 앱

• 모바일에서 데스크탑 브라우저에서 실행되는 기능을 모바일에 맞추어 표현한 사이트
• 따로 설치할 필요 없음
• 네트워크 연결만 있으면 모든 기기와 브라우저에서 접근 가능

 

 

---

 

7장] 데이터베이스와 이미지 처리

 

 

🚨 데이터 베이스

• 데이터는 단 1%의 결점도 없어야한다! 그래서 데이터를 관리하는게 어렵다!
 -> 데이터의 무결성 : 데이터의 정확성과 일관성을 유지하고 보증하는 것

 

관계형 데이터베이스 (relational database / RDB)

  • 테이블(table)로 이루어져 있으며, 이 테이블은 키(key)와 값(value)의 관계를 나타냄
   -> 이처럼 데이터의 종속성을 관계(relationship)로 표현하는 것
  • 오랫동안 사용된 만큼 신뢰성이 높고, 어떤 상황에서도 데이터의 무결성을 보장

 

관계형 데이터베이스 관리 시스템 (RDBMS)

  • 관계형 데이터베이스의 철학으로 만들어진 관리 시스템
  • 데이터들을 파일로 만들어서 저장해주고 관리해주는 소프트웨어
  • 개발자들은 RDBMS를 사용함으로 파일을 만들고 수정하고 삭제하는 작업을 직접해줄 필요가 없다
   ex ) MSSQL, Oracle DB, MySQL, MariaDB 등

 

• 클라이언트와 서버는 모두 컴퓨터 이기 때문에 DBMS를 실행할 수 있다
  -> 클라이언트, 서버 모두 데이터를 저장할 수 있다
• 데이터를 어디서 불러오는지 명확하게 파악하기 위해서는 API 문서에서 확인할 수 있다
  - 정확한 사람에게 정확한 요청을 하기 위해 데이터를 어디서 가져오는지 명확하게 알아야한다

 

💡 용어

• 클라이언트의 데이터 : 로컬 / 내부DB / 네이티브 / 클라이언트 / 프론트 • 서버의 데이터 : 서버 / (그냥 DB) / API요청 / 백

 

 

🚨 이미지

• 이미지를 추가, 수정하기 위해서는, 이미지가 있는 위치와 주소가 중요하다
 -> 클라이언트 에 있는 이미지인지? 서버 에 있는 이미지인지?

 

 

감사합니당 (❁´◡`❁)