$$config title: 클래스 - 웹 개발 기초 - 웹 개발의 의미와 그것을 잘하는 방법 keywords: - IT - 웹 개발 개요 $$ # 수업 - [주소 : https://slog.gg/p/6403](https://slog.gg/p/6403) # ?️ 챕터 1 : 웹서버와 웹클라이언트 개요 ## ? 1-1 웹서버와 웹클라이언트 개요 ?️ 그림 1-1-A : 웹 서비스 과정 $$uml actor 유저 actor 개발자 :웹 서비스(Naver or Google or etc): as (WS) << Web Server >> :크롬: as (WC) << Web Client >> 유저 -> WC : 사용 WC --> WS : 1. HTTP 요청 : GET https://www.naver.com WS -> WC : 2. HTTP 응답 : HEAD + BODY(HTML, CSS, JS) 개발자 -> WS : 개발 및 유지보수 $$ ?️ 그림 1-1-B : 서버 클라이언트 $$uml @startwbs * 서버 클라이언트에 해당하는 다양한 분야들 ** 음식점 *** 규약 : 음식주문과 요리제공 *** 서버 : 점원 *** 클라이언트 : 손님 ** 병원 *** 규약 : 의사와 상담, 치료 *** 서버 : 의료인, 접수처 직원 *** 클라이언트 : 환자 ** 웹 *** 규약 : HTTP *** 서버 : 웹서버 *** 클라이언트 : 웹클라이언트 ** 리눅스원격제어 *** 규약 : SSH *** 서버 : SSHD *** 클라이언트 : putty, Bitvise SSH Client @endwbs $$ ?️ 그림 1-1-C : HTTP 구성요소 $$uml @startwbs * HTTP ** 클라이언트가 지켜야할 규칙 ** 서버가 지켜야할 규칙 @endwbs $$ ?️ 그림 1-1-D : 웹클라이언트 종류 $$uml @startwbs * 웹클라이언트 ** 웹브라우저 *** 크롬 *** 사파리 *** 엣지 ** 웹로봇 *** 구글봇 *** 빙봇 ** 웹문서다운로더 *** wget *** curl @endwbs $$ ### 주요개념 - 개발자는 웹서비스를 구현하고, 유지보수하고 배포(반영)한다. - 유저는 웹서비스를 이용하는 손님이다. - 사용자는 웹브라우저를 통해서 웹서비스를 이용한다. - HTTP는 웹서버와 웹클라이언트가 서로 이야기를 나눌 때 지켜야하는 규약 혹은 언어이다. - 웹클라이언트로 인정을 받으려면, HTTP에 적혀있는 클라이언트가 가져야할 기능리스트를 모두 가져야 한다. - 누구나 변호사에 준하는 능력과 자격을 갖추면 변호사가 될 수 있다. - 날때부터 변호사는 없다. - 마찬가지로 어떤 프로그램이든 HTTP가 제시하는 클라이언트의 자격 기준에 해당되면 웹클라이언트라고 인정된다. - 웹 브라우저(웹 클라이언트의 일종)와 웹 서버(NGIX or 아파치)는 서로 HTTP 라는 언어로 통신한다. ### 서버, 클라이언트간 절대규칙 - 클라이언트는 오직 서버에게 요청만 할 수 있다. - 서버는 오직 클라이언트에게 응답만 할 수 있다. - 서버는 클라이언트가 요청하지 않은 그 어떤 데이터응답이나 처리도 하지 않는다. - 클라이언트는 다수이고, 서버는 한명이다. - 클라이언트는 서버의 위치를 기억하고 있어야 한다. - 서버의 주소(IP or 도메인)와 포트는 무조건 알아야 한다. - 서버는 주소, 포트는 상세주소 라고 볼 수 있다. - 예를들면, - 서버 : 서울시 연희동 한국아파트 104동 - 포트 : 1906호 - 만약 서버에 접근하려는데 아이디/비밀번호가 필요하다면, 클라이언트는 그 정보도 알고 있어야 한다. - 서버는 클라이언트의 위치를 평소에는 몰라도 된다. - 요청이 들어올 때, 요청자의 주소를 파악하고, 응답만 잘 해주면 된다. - 늘 기억하고 있을 필요는 없다. - 예를들어, 고객(클라이언트)은 맥도날드(서버)의 매장위치, 혹은 전화번호와 같은 정보를 알고 있어야 이용이 가능하다. - 맥도날드는 고객의 집주소를 항상 알고 있을 필요는 없다. - 맥도날드 입장에서는 주문이 들어올 때, 배송지정보를 받기 때문에, 그 때만 잠깐 기억하고, 배송이 끝나면 잊어도 된다. - 서버는 특정 클라이언트의 존재여부를 알지 못한다. - 맥도날드는 특정손님A가 어떤사람인지 관심이 없을 뿐 아니라, 이 세상에 존재는 하는지 조차 관심이 없다. - 맥도날드 입장에서 특정손님A는 그냥 수 많은 손님중에 하나일 뿐이다. - 맥도날드는 특정손님A가 성별은 무엇이고, 나이는 몇살인지, 국적은 무엇인지, 심지어 사람인지 로봇인지도 구분하지 않는다. 모른다. 관심이 없다. 단순히 그냥 손님으로 본다. # ?️ 챕터 2 : 백엔드와 프론트엔드 개요 ## ? 2-1 백엔드와 프론트엔드 개요 ?️ 그림 2-1-A : 백엔드와 프론트엔드 개요 $$uml left to right direction actor 사용자 as u package 프론트엔드 { :? 크롬: as (WC1) << Web Client >> :? 안드로이드 앱: as (AC1) << App Client >> } package 네트워크 { :네트워크: as (NW1) << Network >> } package 백엔드 { package 로직 { :네이버: as (WS1) << Web Server >> :다음: as (WS2) << Web Server >> :카카오톡서버: as (AS1) << App Server >> :라인서버: as (AS2) << App Server >> :배민서버: as (AS3) << App Server >> } package DB { :네이버DB: as (DB1) << DB Server >> :다음DB: as (DB2) << DB Server >> :카카오톡DB: as (DB3) << DB Server >> :라인DB: as (DB4) << DB Server >> :배민DB: as (DB5) << DB Server >> } } u -> WC1 : 사용 u --> AC1 : 사용 WC1 -> NW1#red : 사용 WC1 -> NW1#blue : 사용 AC1 -> NW1#green : 사용 AC1 -> NW1#pink : 사용 AC1 --> NW1#gold : 사용 NW1 -> WS1#blue : 사용 NW1 -> WS2#red : 사용 NW1 -> AS1#pink : 사용 NW1 -> AS2#gold : 사용 NW1 --> AS3#green : 사용 WS1 -> DB1#blue : 사용 WS2 -> DB2#red : 사용 AS1 -> DB3#pink : 사용 AS2 -> DB4#gold : 사용 AS3 --> DB5#green : 사용 $$ # ?️ 챕터 3 : 소프트웨어 공학 개요 ## ? 3-1 소프트웨어 공학 개요 ?️ 그림 3-1-A : 워터폴 개발방식, 애자일 개발방식 ![워터폴 개발방식, 애자일 개발방식](https://i.imgur.com/abevTwT.png) ### 핵심 - 일반적인 경우, 애자일 방식이 더욱 효율적이다. - 애자일 방식은 설계를 과하게 하지 않고, 프로토타입을 여러번 만들어보는 방식으로 소프트웨어를 점진적으로 성장심킨다.