[Book] 비전공자를 위한 이해할 수 있는 IT지식 #2

 

6장 에서 10장 까지 정리한 내용과 끝까지 정독한 후기를 작성하였다.

1장 ~ 5장 내용은 1편을 참고해 주세요 !

 

비전공자를 위한 이해할 수 있는 IT지식

 

6 ~ 10장

---

웹 (Web)

 웹은 크게 4가지 이슈를 다룬다.

1.  HTML, CSS, JavaScript

 HTML과 CSS를 합해서 '퍼블리싱', '마크업' 작업 이라고 표현하고, 이 작업을 하는 사람들을 '퍼블리셔', '마크업(HTML의 M을 뜻함) 개발자' 라고 부른다. JavaScript와 Java는 이름이 비슷해보이지만 아무런 관계가 없다.
  JavaScript는 API 요청을 받아 서버로 전송(GET 요청)하고 요청한 내용의 응답을 JSON 형식으로 받아 HTML 형식으로 바꾸어 화면에 나타낸다.

앱과 웹의 차이점
  앱에서는 버전이 변경되면 사용자가 업데이트 된 버전을 직접 다운로드 해서 사용해야 하지만, 웹에서는 서버에서 알아서 원본 파일을 수정하여 업로드 하게 되면 화면을 껐다 키거나 F5를 눌러 새로고침 할 시, 사용자의 화면에서 업데이트 된 내용으로 표시되게 된다. 또한 앱은 수정을 할 시 스토어의 심사를 받아야 하지만, 웹에서는 심사 과정도 존재하지 않는다. 

  따라서 웹은 수정이 용이하다는 것이 장점이고, 네트워크가 빠르지 않은 환경에서는 항상 새로고침을 해주어야 한다는 점이 단점이다. 앱은 수정 후 업데이트가 조금 오래 걸리고 까다롭다는 단점이 있지만, 업데이트를 하면 따로 새로고침을 하지 않아도 되기 때문에 네트워크 영향을 웹에 비해 조금 받는다.

2. 브라우저

 인터넷 브라우저는 다양한 종류가 있다. 사람마다 사용하는 브라우저의 종류가 다른데, 웹 개발자는 페이지를 개발하기 시작할 때 모든 브라우저의 버전과 종류에 맞게 개발할 수 없기 때문에 개발 후 각 브라우저에 맞게 돌아가게 하기 위해 추가 적인 코드를 작성 하게 된다. 이러한 문제를 '브라우저 버전의 파편화'라고 부르고, 문제 해결을 위한 코딩을 '파편화를 잡는다' 라고 표현한다. 이 점이 웹 퍼블리싱 작업 하시는 분들이 힘들어 하는 주된 이유중 하나이다.

 하지만 웹 개발자는 정말 다양하고 점유율이 적은 브라우저의 버전까지 충족 시킬 수는 없기 때문에 브라우저 별로 점유율을 조사해보고 어떠한 브라우저들을 기준으로 파편화를 할 것인지 따져봐야 한다.

3. 반응형 웹

 모바일에서 PC버전의 웹을 보려면 확대를 하거나 넘겨 보아야 했기 때문에 불편한 점이 있었다. 그런 불편함을 해결하기 위해 등장한 기술이 '반응형 웹' 이다. 

 이전에는 가로 넓이가 특정 픽셀 이하로 내려가거나, 이상으로 올라가면 각각 다른 CSS를 적용해야 했는데, 이 기술을 활용하면 CSS 내용은 그냥 두고, 레이아웃 위주로 나누어 작업하여 각 기기에 맞게 디자인을 구현할 수 있다. CSS 내용을 그냥 두기 때문에 색상은 유지되지만, 구성 요소의 레이아웃이 변경되어야 하기 때문에 서로 다른 기기의 넓이에 따른 CSS를 추가로 코딩 해야한다. 때문에 더 많은 코드가 필요해서 작업 시간이 오래 걸리고 비용이 많이 들어가게 된다.

4. 하이브리드 애플리케이션

 브라우저를 통해 HTML, CSS, JavaScript를 가져와서 애플리케이션 화면에 보여주는 방식은 수정이 용이하다. 애플리케이션은 수정 시 심사를 받고 업데이트를 사용자가 직접 해야 한다는 단점이 있었는데, 웹 브라우저를 애플리케이션과 합쳐서 보여줌으로써 애플리케이션을 따로 수정해서 심사 후 업데이트를 하는 과정을 거치지 않아도 서버에서 수정한 내용이 보여질 수 있다. 하지만 네트워크의 영향을 받는다는 단점이 생기게 된다. 

 하이브리드 애플리케이션에서 웹과 네이티브 애플리케이션을 구분하는 방법이 있다. 정확히 눈으로 구분하기는 어렵지만, 어떠한 버튼을 눌렀을 때 버튼을 눌렀다는 것을 보여주는 등 애니메이션이 포함되어 있다면, 그 부분은 웹이라고 추측할 수 있다. 또한 다른 페이지로 넘어가는 상황에서 모든 부분이 새로고침 된다면, 이 부분도 웹으로 만들어졌다고 볼 수 있다. 또 다른 방법으로는 API 문서를 살펴보는 것인데, API 문서에는 웹 개발자를 위한 부분과 앱 개발자를 위한 부분이 구분되어 있다. 해당 부분을 찾아 읽고 이해할 수 있다면, 어렵지 않게 웹과 앱을 구분할 수 있다. 

 

 웹과 앱은 각 기술의 장점을 흡수하고 단점을 보완하는 방식으로 계속 발전하고 있다. 

 

---

데이터베이스와 이미지 처리

 데이터는 정말 많은 양이 존재하지만 그 데이터에는 단 1%의 결점도 없어야 하기 때문에 데이터를 관리하는 것이 어렵다. 따라서 데이터를 다루는 사람들은 보수적일 수 밖에 없고, 데이터들에 변화가 생길 시 깨지고 오류가 생길 수 있기 때문에 쉽게 변화를 허용하지 않는다.

 이렇게 관리하기 어려운 데이터 관리 주요 방법론으로 '관계형 데이터베이스'가 근 20 ~ 30년을 지배했다. 이 방법론 시스템 안에서 데이터들은 특정 테이블과 고유한 번호로 연결되고 관리된다. 따라서 데이터 안에 같은 이름이 존재해도 각각의 데이터는 고유한 번호를 가지게 되기 때문에 신경 쓸 것이 없어진다. 

 이 방법론에서 전체 파일은 스키마(Schema) 혹은 데이터베이스(Database) 라고 불린다.

 데이터베이스 관리 시스템 (DBMS)는 소프트웨어이며, CPU와 메모리가 있다면 실행할 수 있다. 

 클라이언트와 서버 컴퓨터 위에는 DBMS를 돌릴 수 있고, 데이터를 저장할 수 있다. 하지만 클라이언트와 서버에 있는 데이터에는 차이가 있다. 클라이언트에 있는 데이터는 네트워크가 없는 오프라인 상태에서도 보여질 수 있고, 서버에 있는 데이터는 네트워크가 있어야 보여지며 그 시스템을 사용하는 모든 사용자에게 같은 데이터가 보여진다.

 모든 파일과 이미지에는 고유한 위치가 존재한다. 운영체제는 그 고유한 위치를 통해 이미지를 인식한다. 이미지를 추가, 수정하기 위해서는, 이미지가 있는 위치와 주소가 중요하다.

 클라이언트에서 이미지를 변경할 때 그 이미지가 서비스에 영향을 미치는 이미지라면 서버에서 이미지의 주소를 불러와서 나타낸다. 그 이유는 클라이언트에서 이미지를 변경하려면 업데이트가 필요하고, 업데이트를 진행하지 않은 사용자에게는 잘못된 이미지가 보여질 수 있기 때문이다.
 앞과 같은 이유라면 서버에 이미지를 두고 불러와야 편리할 거 같지만 클라이언트에 이미지를 놓을 수 있다면 최대한 많이 놓아야 한다. 그렇게 해야만 서버에서 이미지를 불러올 때 사용하는 네트워크가 최소한으로 쓰이기 때문이다.

 

---

프레임워크와 라이브러리

거대 IT 기업에서 개발자들이 자사의 애플리케이션을 쉽고 빠르게 개발할 수 있도록 프레임워크를 만들어 제공하고 있다. 프레임워크와 라이브러리는 만든 주체가 모두 다르기 때문에 사용 전 설명을 참고 해야한다. 사용료를 받는 것 부터 출처를 남기면 무료로 사용이 가능한 것, 조건없이 무료로 쓸 수 있는 것까지 다양한 방식이 있다.

 웹 프레임워크는 특정회사의 소유가 아니기 때문에 여러 사람들이 만들고, 웹에 관한 많은 프레임워크와 라이브러리가 존재한다. (웹 프론트엔드 프레임워크 및 라이브러리 삼대장 : Angular.js - 구글 / React.js - 페이스북 / Vue.js - 중국)

 각 언어별로 유명한 프레임워크들이 하나씩 존재한다.
- Java : 스프링 (Spring)
- Python : 장고 (Django)
- Ruby : 레일스 (Rails)
- JavaScript : 익스프레스 (Express.js)

 프레임워크는 라이브러리보다 더 큰 개념으로, 각종 라이브러리와 코드가 모여 프레임워크가 된다. 또한 프로젝트에서 프레임워크는 하나만 사용할 수 있다. 반면 라이브러리는 망치나 가위 같은 도구들이기 때문에 한 프로젝트에서 함께 사용이 가능하다.

 

---

협업, 소스관리, 디자인

 Git (깃)은 리눅스 개발자 '리누스 토발즈'가 개발한 프로그램이다. 깃은 깃발과 깃발 사이의 변화와 누가 언제 커밋했고, 어떤 부분을 바꿨는지 모두 추적해 준다. 또한 체크아웃을 이용해 깃발이 꽂힌 부분의 코드로 옮겨 다닐 수 있다. 이것이 깃의 주된 기능인 소스코드의 버전관리이다.

 브랜치를 사용한느 이유는 개발을 하던 중 내부적으로 프로그램에 큰 변화를 줘야할 때 프로젝트 파일 곳곳에 새로운 코드들이 추가 되기 때문에 브랜치를 사용하게 된다. 각각 서로 다른 곳에서 개발하면, 하나의 프로젝트를 진행할 때, 동시에 여러 기능을 충돌없이 작업할 수 있다. 이후 각각의 브랜치에서 작업한 코드들을 합치기(Merge)만 하면 된다.

 깃은 똑똑하기 때문에 브랜치에서 작업한 내용이 겹치지 않으면 자연스럽게 코드를 합쳐준다. 만약 겹치는 부분이 있다면 깃은 충돌(Conflict)을 알려주고 어떤 부분이 충돌됐는지 보여주기 때문에 개발자는 그 부분만 수정하면 된다. 하지만 머지가 성공했다고 모두 성공한 코드는 아니다. 큰 브랜치들이 합쳐진다면 반드시 테스트가 필요하기 때문에 많은 시간을 요구한다.

 브랜치에서 따로 작업하여 합치는 것은 단체로 개발을 진행할 때 이용하곤 하는데, 모든 개발자가 같은 생각으로 코드를 작성하지 않기 때문에 합칠 때에 문제가 생길 수 있다. 이에 개발자들은 깃을 기반으로 한 '깃 허브 (Github)', '비트버킷 (Bitbucket)' 등의 '원격 저장소'라는 것을 만들었다. 개발자들이 자신의 컴퓨터(로컬)에서 작업 한 뒤 커밋을 하면, 그 결과를 원격 저장소에 보낼 수 있고, 원격 저장소에서 이미 작업된 결과물을 가져올 수도 있다.

 이처럼 깃을 활용하면 개발을 훨씬 수월하게 할 수 있기 때문에 개발자들은 깃을 많이 사용하고 있다.

 

단어 정리 / (ABC 가나다 순으로 정리하였다.)

API 문서
- 이 문서를 읽어보면 데이터를 어디서(서버 / 클라이언트) 불러오는 지 명확하게 알 수 있다.
- 클라이언트에 있는 데이터 : 로컬 / 내부 DB / 네이티브 / 프론트 엔드
- 서버에 있는 데이터 : API / DB / 백 엔드

Application (앱 / 응용 프로그램)
- 설치해서 사용하는 모든 응용 프로그램
- 대부분 스마트폰에서는 '앱' 이라고 부르고 데스크톱에서는 '응용 프로그램' 이라고 부른다.

Branch (브랜치)
- '분기', '가지' 라는 뜻으로 새로운 가지를 뻗는 것을 의미한다.
- 새로운 방향의 추가 개발을 해야할 때 개발자는 기존 개발에 덮어씌어 작업하지 않고, 새롭게 가지를 쳐서 작업할 수 있다.
- 이 방법을 통해 기존 브랜치에 커밋을 하는 것이 새로운 브랜치에 영향을 주지 않고, 마찬가지로 새로운 브랜치에 커밋을 하는 것이 기존 브랜치에 영향을 주지 않는다. 

Commit (커밋)
- 깃을 통해 개발자들은 개발 단계별로 '깃발'을 꽂을 수 있는 행위
- 커밋에는 항상 무슨 개발을 했는지 적어주는 '커밋 로그' 라는 메모가 따라다닌다.

CSS (Cascading Style Sheets)
- HTML에 디자인을 입힐 수 있는 코드

Git (깃)
- 분산형 버전 관리 시스템

HTML (Hyper Text Markup Language)
- 운영체제나 프로그램에 상관없이 일정한 형식이 언제나 동일하게 보이도록 하기 위해 작성하게 된 문서
- 브라우저만 있으면 어디에서든 웹 사이트에 접속하여 동일한 정보를 볼 수 있도록 해준다.
- 컴퓨터에게 특정 일을 시키는 언어가 아닌 단지 브라우저가 볼 수 있는 문서를 적는 언어
- '태그' : HTML을 구성하는 코드. [ ex )) <h>, <p>, <ol>, ... 등 ]

JavaScript (js - 파일의 확장자)
- 웹 쪽에서 프로그래밍 언어의 역할을 한다. (백 엔드)

Merge (머지)
- 브랜치에서 작업한 코드들을 합치는 기능

RDBMS (관계형 데이터베이스 관리 시스템)
- 데이터들을 파일로 만들어서 저장하고 관리해주는 소프트웨어
- 종류 : SQL, Oracle DB, MySQL, MariaDB 등

데이터의 '무결성'
- 데이터에는 단 1%의 결점도 없어야 한다.

반응형 웹
- 브라우저의 가로 넓이에 '반응'하여 구성요소가 변하는 기술 (웹 페이지의 크기가 사용자의 기기에 맞춰 자동 변형)

프레임워크
- 소프트웨어 애플리케이션이나 솔루션의 개발을 수월하게 하기 위해 소프트웨어의 구체적 기능들에 해당하는 부분의 설계와 구현을 재사용 가능하도록 협업화된 형태로 제공하는 소프트웨어 환경을 말한다.
- 애플에서는 AppKit, Ulkit 등 기기에 따라 다른 여러가지 프레임워크를 제공하는데, 이 프레임워크들을 통칭하여 '코코아 프레임워크' 라고 부른다.
- 안드로이드에서는 '코틀린(Kotlin)' 이라는 언어를 사용하여 앱을 제작한다.

하이브리드 애플리케이션
- 웹과 애플리케이션이 혼합된 애플리케이션

 

 

---

후기

 종종 IT 지식에 관련된 서적들을 읽어본 적이 있다. 내가 봐왔던 서적들은 거의 그 분야에 대한 지식이 어느정도 존재해야 읽을 수 있는 책들이 대부분이었고, 전공자인 나도 이해하기 어려운 부분이 허다했다. 그치만 이 책은 달랐다. 어떠한 주제 하나, 단어 하나를 설명할 때에도 정말 유치원생도 이해할 수 있을 만한 스토리텔링으로 쉽게 설명해주었다. 덕분에 독서를 좋아하지 않는 나도 정말 재미있게 읽었다고 꼽을 수 있는 책이었던 것 같다. 책을 읽으며 블로그에 단어 정리를 글자 순서대로 정리해 두었으니 앞으로도 공부할 때 자주 찾아보게 될 것 같다.

 꼭 알아야 할 다양한 IT 지식에 대해 머리에서 박혀서 떠나지 않을 정도로 쉽게 이해하고 나의 것으로 만들 수 있는 경험이 되어서 정말 유익한 책이었다. 더 구체적인 지식에 대한 책도 이렇게 쉽게 풀어주는 책이 있었으면 좋겠다는 생각이 들었다. 그런 책 아시는 분 추천해주세요 !!!!!! 

 후기가 조금 짧지만 이만 마치겠습니다!