IT 기초 지식 도서 ② [비전공자를 위한 이해할 수 있는 IT지식]

5. 웹

   * 브라우저

        : HTML에 적힌 정보를 보여주고, CSS에 적힌 디자인을 입혀주며, JavaScript에 적혀있는대로 동작함

          - 브라우저의 파편화

             : 소비자의 브라우저 버전과 종류에 맞춰 정상적으로 동작할 수 있도록 문제 해결하는 것

          - CSS 사용 가능 여부 찾아볼 수 있는 서비스 caniuse.com

 

   * HTML(Hyper Text Markup Language)

        : 브라우저가 볼 수 있는 문서를 적는 언어, 프로그래밍 언어 X

          정보만 표현

 

   * CSS(Cascading Style Sheets)

        : HTML에 디자인을 입힐 수 있는 코드

          디자인만 표현

 

   * 퍼블리셔

        : HTML과 CSS '퍼블리싱' 작업을 하는 사람, 마크업 개발자

 

   * JavaScript

        : HTML, CSS로는 구현하기 힘든 기능을 만들 때 사용하는 프로그래밍 언어

          기능 구현

 

[웹 앱 비교]

	웹	앱
장점	수정 용이/업데이트 과정 없음 (코드 수정 시, 원본 수정 후 새로고침 시 반영됨)	네트워크의 영향이 적음 (인터넷에 상관없이 서비스 사용할 수 있게 가능)
단점	네트워크의 영향을 크게 받음	코드 수정 시, 업데이트 필수 (유저가 다운로드해야 반영됨) 사용하는 사람들에 따라 버전 및 브라우저 다름 브라우저에 따라 구현 방식이 달라 오류발생 가능 모바일일 경우 마켓에 업로드할 시 심사 필요

   * 반응형 웹

        : 브라우저의 가로 넓이에 '반응'하여 구성 요소가 변하는 기술

         웹페이지의 크기(비율)가 사용자의 기기에 맞추어 자동으로 변형됨

 

  * 네이티브 어플리케이션

       : 원래 정해놓은 언어들을 사용해 운영체제 자체의 기능을 사용

         ex) iOS - 스위프트, C언어 사용

              안드로이드 - 자바, 코틀린 사용

  * 하이브리드 어플리케이션

        : 네이티브와 브라우저가 혼합된 어플리케이션(웹과 어플리케이션이 혼합된 형태)

         어플리케이션의 특정 부분에 브라우저를 놓고 이를 통해 HTML, CSS, JavaScript를 불러와 구현

 

[네이티브 하이브리드 비교]

	네이티브	하이브리드
장점	사용하기 편리 네트워크 최소한으로 이용하도록 코딩 가능	수정 용이 (코드 수정 시, 원본 수정 후 새로고침 시 반영됨)
단점	코드 수정 시, 업데이트 필수 (유저가 다운로드해야 반영됨) 업로드할 시 심사 필요	네트워크의 영향을 크게 받음

          - 화면, API문서 등을 통해 웹과 어플리케이션 구분 가능

 

6. 데이터베이스

 

   * 데이터

        : 결점/오류가 없어야 함(무결성)

          인터넷이 연결되어 있지 않거나 서버와 통신하지 않고도 정상적으로 작동하는 데이터는 클라이언트에 있음

          어떤 플랫폼에 접속해도 똑같이 보이는 데이터는 서버에 있음

          API 문서를 통해 데이터를 어디에서 불러오는지 알 수 있음(주소 다운로드 경로 확인)

 

          - 클라이언트/로컬 내부DB 네이티브 프론트

          - 서버/API요청 DB 백

 

 

   * 관계형 데이터베이스

       : 연관된 데이터들을 같은 번호로 연결하여 고유 번호를 붙여 관리하는 기법

        - 엑셀의 Sheet : 테이블(table)

        - 엑셀 파일 : 스키마(Schema), 데이터베이스(Database) 

 

   * 관계형 데이터베이스 관리 시스템(Relational Database Management System; RDBMS)

        : 관계형 데이터베이스의 철학으로 만들어진 관리 시스템(소프트웨어)

          ex) MS SQL, Oracle DB, MySQL, Maria DB 등

 

7. 프레임워크, 라이브러리

 

   * 프레임워크(Framework)

        :  개발하기 위한 코드 사전

           ex) 애플 - App framworks

                맥OS - Appkit

                맥iOS, tvOS - UIkit

            - 코코아(Cocoa) 프레임워크: 프레임워크 통칭 in 애플

        - 웹 프론트엔드 프레임워크 및 라이브러리

           : Angular.js/구글, React.js/페이스북, Vue.js/Evan You

 

   * 프로그래밍 언어/프레임워크, 라이브러리

        - Ruby/Rails

        - Java/Spring

        - Js/Express

        - Python/django

 

   * 라이브러리

        : 프레임워크보다 작은 단위

 

8. 협업

 

   * Git

        : 리눅스 개발자 리누스 토발스가 개발한 프로그램

          소스코드의 버전관리, 협업툴 등 다양하게 활용 가능

 

          - Commit : 개발 단계별 북마크

          - Commit Log : 어떤 개발을 하였는지 적은 메모

          - Check out : Commit 된 부분의 코드로 옮겨 다님

          - Branch : 새로운 방향의 개발 추가 시, 브랜치 작업

                       기존 브랜치에 영향 주지 않아 여러 기능을 동시에 충돌 없이 작업 가능

          - Merge : 각각 따로 개발된 코드를 합치는 기능

 

   * 원격저장소

        : 깃허브(GitHub), 비트버킷(Bitbucket)

 

   * 가이드

        : 개발자가 구현하는 과정에서 오류를 줄이기 위하여 디자이너에게 수치 표시 요구

          개발자와 디자이너 간의 갈등 요인

          - 스케치, 재플린, XD : 디자이너의 작업 결과물의 수치를 보여줌

                                       이미지 요소를 개발에 필요한 형식으로 다운로드 가능

                                       디자인을 구현하기 위한 소스코드 추천

                                       컬러코드 추출

                                       디자인 수정 필요할 시, 코멘트 달 수 있음

          - HIG(Himan Interface Guideline)/애플 기기

          - Material Design/구글

 

   * UI(User Interface)

        :  화면의 버튼, 텍스트 필드와 같은 요소

           기기의 비율에 따라 변동 폭이 클 수 있음

           클라이언트 개발자 필수로 공부

 

 [출처_비전공자를 위한 이해할 수 있는 IT지식]