개요
코딩 실력 향상을 위해 인스타그램 클론 코딩을 해보려 합니다.
인스타그램은 많은 기능을 가지고 있기 때문에 전체를 구현하는것이 아닌 핵심 기능만 구현할것입니다.
프로젝트를 실행하기에 앞서 기본적인 웹/웹 개발에 대한 기본지식을 정리하고 진행 하도록 하였습니다.
클라이언트와 서버
클라이언트(Client) - 서비스를 사용하는 장치 또는 프로그램 (service user)
- 서버와 이어진 모든 기기와 단말기에서 이용하는 웹에 접근하는 SW이며, 주로 서버에 요청을 보내고 응답을 받는 역할을 합니다.
서버(Server) - 서비스를 제공(ex:검색, 스트리밍)하는 장치 또는 프로그램 (service provider)
- 장치 / 다수의 클라이언트에게 서비스를 제공하기 때문에 고사양의 하드웨어를 갖춘 컴퓨터이지만, 하드웨어의 사양으로 서버와 클라이언트를 구분하는 것은 절대 아니며, 사양의 관계없이 서비스를 제공하는 소프트웨어가 실행되는 컴퓨터를 서버라고 합니다.
- 프로그램 / 특정 서비스를 제공하기 위해 설치되고 실행되는 소프트웨어입니다.
- Server 즉, 서비스를 제공한다는 의미처럼 서버는 서비스를 제공합니다. 예로, 유튜브는 동영상 스트리밍 서비스를 제공하는 기능을 가집니다.
즉, 클라이언트는 서버에게 요청(Request)를 보내며(Method+data) 서버는 이에 응답(Response)합니다.
소켓 주소
클라이언트가 서버를 찾기 위해서 서버가 실행되고 있는 컴퓨터의 IP주소와 해당 컴퓨터에서 실행하고 있는 프로그램을 나타내는 Port넘버를 사용하게되는데 이때 소켓 주소(Socket address)를 이용하게됩니다.
소켓 주소는 IP주소와 Port넘버로 이루어져 있는데
220.95.233.172:80
이와 같은 소켓 주소가 있을 때 220.95.233.172는 IP주소(IP Address)이고, 80은 포트넘버(Port Number)입니다
서비스를 찾기 위해서 먼저 서비스가 실행되고 있는 컴퓨터를 찾아야 하는데 이는 우편시스템에서 편지를 보내는 것과 비슷합니다. 비교하자면 컴퓨터에서 아파트 주소에 해당하는것이 IP주소입니다.
컴퓨터마다 겹치지 않는 주소를 가지고(IP주소) 해당 주소를 통해 원하는 컴퓨터를 찾을 수 있습니다.
이 때, 컴퓨터에 실행되는 프로그램은 여러개가 있을 수 있는데 이를 구분하기 위해 Port넘버를 사용합니다. 비교하자면 아파트 호 수로 비교 할 수 있습니다.
이와같은 포트번호는 두가지 방법으로 결정할 수 있습니다.
직접 지정해 줄 수도 있고, 자동으로 컴퓨터가 지정할 수도 있습니다.
포트 번호
HTTP
80 / 웹 문서(HTML)을 전달하기 위한 표준 프로토콜
HTTPS
443 / 웹 문서를 안전하게 전달하기 위한 표준 프로토콜
FTP
20, 21 / 파일 전송을 위한 프로토콜
SSH
22 / 원격 쉘 접속을 위한 프로토콜
TELNET
23 / 원격 접속을 위한 프로토콜
SMTP
25 / 메일 전달을 위한 프로토콜
TCP/IP
인터넷을 위한 프로토콜
프론트엔드와 백엔드
웹 개발에 많은 코드들은 동일한 기능이나 구조를 가지기에 중복되는 경우가 많습니다. (개발 패턴)
개발시에 이러한 중복코드를 줄이기 위해 사용되는것이 프레임워크이며 많은 기업에서 다양한 프레임워크를 사용하고 있습니다.
프레임워크는 미리 작성된 코드를 제공하고 개발에 필요한 코드량을 줄여줘서 개발자들이 빠르게 개발할 수 있도록 도와줍니다.
프론트엔드
사용자와 상호작용(클릭, DnD)하는 부분이며, 사용자의 컴퓨터에서 동작합니다.
예: HTML, CSS3, JavaScript, ReactJS, VeuJS 등
백엔드
서비스를 제공하는 부분이며, 서버 컴퓨터에서 동작합니다.
예: API, 비즈니스로직, 데이터베이스, Spring, Django 등
예시 : 사용자가 네이버 기사를 클릭하면 프론트엔드는 백엔드에 뉴스 내용을 요청하고 백엔드로 부터 기사 내용을 전달 받고 이를 사용자에게 보여주게 됩니다.
프레임워크
대부분 개발시 실제 코딩하는 대부분은 정해져있습니다.
코딩을 해야하는 부분을 최소화 하고 나머지 부분을 제공하는 것이 프레임워크의 역할입니다.
- 개발 패턴을 간소화해주는 도구, 중복된 코드를 최소화 해줍니다. -> 개발 생산성 향상
- 재사용 가능한 부분과 재사용 불가능한 부분으로 나뉘어 있습니다.
- 개발 패턴에서 재사용 가능한 부분을 최대화 하고 재사용 불가능한 부분을 최소화 합니다.
프론트엔드 프레임워크
- AngularJS, ReactJS, VueJS, SvelteJS 등이 있습니다.
주로 자바 스크립트나 타입스크립트를 사용하며, 해당 프로젝트에서는 ReactJS를 사용하려고 합니다.
ReactJS의 경우 웹 컴포넌트를 이용한 간결한 구조를 가지고 있습니다.
백엔드 프레임워크
- Django(Python), Spring(Java), express(JavaScript), 등이 있습니다.
백엔드 프레임워크의 경우 사용하려는 언어에 따라 사용할 프레임워크가 달라집니다.
해당 프로젝트에서는 Django를 사용하려고 합니다.
Django의 경우 웹 개발 토탈 솔루션이며, 웹개발에 필요한 모든것을 패키지로 제공하고 있습니다.
기술 스택
기술 스택은 프론트엔드, 백엔드, 개발시 사용기술에 대한 내용입니다.
광범위한 의미로는 어떠한 제품이나 서비스를 개발시 만드는 라이브러리부터 언어, 개발에 사용한 모든 기술을 포함합니다.
좁은의미로써는 프론트엔드와 백엔드 그리고 프레임워크, 데이터베이스를 의미합니다.
MERN 스택 : MongoDB + Express + ReactJS + NodeJS
MEAN 스택 : MongoDB + Express + Angular + NodeJS
JAM 스택 : JavaScript + API + Markup
MERN스택, MEAN스택의 경우 복잡하고 큰 규모의 웹을 제작할때 적합하고
JAM스택의 경우 작은 웹을 제작할때 적합합니다.
브라우저의 구성요소
브라우저는 렌더링 엔진과 자바스크립트 엔진으로 이루어져있기에, 사용자에게 HTML을 보여주고 JS 실행시킬수 있습니다.
렌더링 엔진은 HTML문법을 해석해서 사용자에게 문서의 형태로 보여주게 되고 JS엔진은 웹문서에 포함된 JS를 실행시켜주게됩니다.
시간이 지나면서 웹에서 JS의 역할이 커지면서 다양한 JS엔진이 나오게 되었는데
사파리 : 웹킷, 니트로
파이어폭스 : 피닉스
크롬 : 웹킷, V8(브라우저에서만 동작하던 V8엔진을 컴퓨터 위에서 동작하도록 한 프로젝트 -> Node.js)
이 있습니다.
추가적으로 대표적인 Node.js프로젝트로는 Angular, React, Express등이 있고
Node.js 프로젝트는 프론트엔드와 백엔드에 Node.js프로젝트를 사용할 경우 백엔드와 프론트엔드 모두 자바스크립트를 프로그래밍 언어로 사용할 수 있기에 풀스택 개발 생산성에 많은 영향을 주었습니다.
