[프로그래밍] 웹 개발 전체 과정

*프론트앤드(front-end)

- 이용자의 웹브라우저에서 직접적으로 보이는 부분을 다루는 기술들

- HTML, CSS, 자바스크립트

- 웹브라우저가 이해하는 직접적인 기술들을 다루는 분야

- HTML5, CSS3, JavaScript를 보면 된다.

- HTML5 : 웹문서 본문을 적는 텍스트 포맷

- CSS3 : 그 문서의 스타일을 다루는 속성

- JavaScript : 웹브라우저가 이해하고 실행할 수 있는 프로그래밍 언어

- 프론트엔드가 먼저 요청을 해서 서비스를 받는 입장 (클라이언트 측)

- 백엔드가 그 요청을 받아서 작업을 처리하고 응답을 주는 입장 (서버 측)

- 보통의 웹사이트 처럼 간단한 화면 요소들만 필요할 것 같다면 Vue.js를 공부

- AngularJS 하지 마라.

 

*백엔드(back-end)

- 웹브라우저가 주고 받는 데이터를 기록하고 가져오는 등의 뒷 단의 궂은 일을 처리하는 기술들

- 백엔드는 프론트엔드에 보일 자료들을 만들어 내는 영역

- 자바, 파이썬, 루비 등의 언어

- 스프링, 장고, 루비 온 레일스 같은 프레임워크

- 백엔드에서는 프론트엔드에 보여줄 HTML 문서를 그때그때 생성해서 내려줌

- 한번 작성하고 잘 바뀌지 않는 내용들은 평범한 파일의 형태로 디스크에 저장 (static 페이지)

- 변하는 새로운 자료들은 요청시 클라이언트마다 다르게 만들어서 내려줌 (dynamic 페이지)

- 백엔드는 여러 고객의 요청을 한꺼번에 받아서 가각 제대로 처리해서 내려줘야 하는 동시성(concurrency)처리 문제가 있어서 어려움

- 동시성 처리를 잘 하면서, 성능까지 좋아야 함

 

*데이터베이스(database)

- 백엔드가 다루는 데이터를 보관하고 검색해 오는 기술

- 잘 정돈한 데이터의 모음

- DB에 연산을 요청하는 내용을 쿼리(query)

- MYSQL 이나 PostgreSQL

- DB는 데이터를 보관한다는 측면에서 워낙 중요

- 데이터를 잘 남겨두고, 주기적으로 백업하고 혹시라도 장애가 나면 복구해야 하며, 때로는 데이터를 다른 곳으로 옮겨야 하며, 새로 구축해야 할 때도 있음

- 백엔드 소프트웨어가 DB와 통신하기 위해 사용하는 언어가 SQL

- 루비온레일스의 경우에는 액티브레코드라는 라이브러리가 그 일을 함

- DB서버가 다루는 집합 구조의 레코드와 컬럼을 객체지향 프로그램에서 다루기 좋은 형태로 변환

- DB는 우리가 만드는 웹서비스에다가 잘 정리하고 나중에 찾아볼 데이터를 잘 다룰 수 있으면 된다.

- 엘라스틱서치 같은 검색 엔진에 부어 넣고 내가 원하는 기능을 만들 수 있다면 그렇게 쓰면 됨 

 

*네트워크(network)

- 여러 컴퓨터 사이의 데이터 통신에 필요한 기술들

- 우리가 쓰는 컴퓨터와 저 멀리 있는 백엔드 서버와 통신하는 연결선

- 어떤 장비가 네트워크에 연결되면, 고유의 주소를 할당 받음

- IP라고 부르는 주소가 인터넷에서의 주소

- Internet Protocol

- 모든 장비에 IP주소가 있어야 서로 통신이 됨

- IPv4

- IPv6

- DNS : 114 같이 전화번호부 역할을 해주는 것, Domain Name System

- 'www.naver.com' 이라는 이름이 104.74.171.196 을 대신하는 주소명

- 주소명을 IP 주소로 알아내는 작업 : DNS 조회(look up)

- IP주소도 유한한 자원

- 도메인명도 희소한 유한 자원이기에 돈을 주고 산다.

- IP주소는 보통 한 장비를 의미

- 한 장비 내에서도 여러 개의 포트(port)가 있음

- 포트는 0~65535 사이의 숫자를 사용, 0번과 49152번 이후의 숫자를 특별한 용도로 제외

- 포트 번호 관례가 있음

- 웹브라우저로 접근하는 웹서비스 : 80번 포트

- 암호화된 통신 : 443번 포트

- "http://www.naver.com/" = "http://www.naver.com : 80/"

- "https://www.naver.com/" = "https://www.naver.com : 443/"

- HTTP 1.1 프로토콜의 기초를 파악한다.

 

*에디터/툴/버전관리 시스템(tools)

- 각 주제 개발 작업에 필요한 도구들 선택과 활용

- 과거 텍스트 에디터 Emacs 나 Vim 중 하나 씀

- 예전에는 서버에 직접 접속해서 텍스트를 편집해야 할 일이 잦았기에 Emacs 나 Vim 이 유력

- 요새는 서버에 직접 접속해서 편집할 일이 점점 줄어듬

- 지금은 Atom 쓰면 된다.

- 자바는 인텔리J 라는 통합개발환경(IDE) 으로 귀결

- IDE는 Visual Studio Code 또는 JetBrain 사의 제품들

- 버전 관리 시스템은 Git

 

*기초 자료 구조(data structure)

- 프론트엔드나 백엔드 프로그래밍 모두에 쓰이는 기초 지식, 데이터를 원하는 형태로 찾기 좋게 연결하는 구조

- 자료를 효과적으로 잘 쓸 수 있도록 잘 정리하는 방법

- 자료구조는 주로 프로그램이 실행되는 동안 메모리에 있는 데이터를 다룬다.

- 배열(array) : 데이터들을 차례로 인덱스를 부여하며 순차적으로 나열

- 리스트(list) : 데이터들을 서로 줄기로 엮어서 다음 데이터들을 연결

- 해쉬(Hash, Dictionary) : 데이터의 기준값을 나름의 방법으로 분류해 정리

- 트리(tree) : 데이터들을 몇 단계로 분류를 거치며 계층적으로 정돈, 대량의 데이터를 검색하는데 매우 효과적

- 계산 복잡도(Computational Complexity), 공간 복잡도(space complexity), 시간 복잡도(time complexity)

- 빅오

 

*리눅스/도커/AWS

- 백엔드와 데이터베이스를 운영할 기술과 환경

- 서버 운영체제로 리눅스 사용

- 도커 환경 덕분에 아주 가벼운 Alpine Linux를 많이 씀

- 서버 작업만을 위해서 버추얼 박스에 설치한 리눅스로 연습

- 리눅스 서적 1권을 읽는다.

- 선택한 리눅스 환경에 웹서버를 띄우고, 파이썬으로 웹 서비스를 실행해서 외부 네트워크 열어주고, 80포트나 443포트를 열어서 웹 서비스를 제공

- 도커는 리눅스 안에 다른 가상 리눅스 환경을 여러 개 만들고, 그 환경마다 각양각색의 원하는 설정을 미리 준비해서 쉽게 곧바로 실행할 수 있음

- 도커 기초 서적 1권을 읽는다.

- AWS 기초 서적 1권을 읽는다.

- EC2, RDS, S3 정도만 파악