구름톤 유니브 3기 스터디
Back-end & Front-end (웹)
Front-end ?
- 실제로 보여지는 부분
- 시각화의 영역
- Back-end 로부터 넘어온 데이터를 보여주는 역할
Back-end ?
- 보이지 않는 부분 = 웹/앱 서버(의 AP 구현), DB 등
- 데이터 처리, 데이터 연산 등을 처리함
- Front-end 로부터 요청을 받아 데이터를 처리하고 되돌려 보내주는 역할
Back-end & Front-end (모바일)
- Android OS 혹은 iOS 로 개발되어 디바이스에 최적화된 전용 앱들 : Native apps
- HTML/CSS/JS 로 만들어진 앱들 or 이렇게 만든 후 커버를 씌운 앱들 : Webapp, Hybrid apps
- 네이티브 앱들은 Front-end와 Back-end를 굳이 나눠서 구분하지 않음
- 보여지는 부분을 위한 u code + 내부 처리 및 DB 연동을 위한 logic code
HTML & CSS & Javascript
- HTML = Hypertext Markup Language. 웹페이지의 구조와 콘텐츠를 생성하기 위한 표준 마크업 언어. 제목, 단락, 링크, 이미지 등 웹페이지의 다양한 요소를 정의
- CSS = Cascading Style Sheets. HTML 요소를 스타일링하고 레이아웃을 구성하기 위해 사용. 색상, 폰트, 간격 및 레이아웃과 같은 시각적 외형을 제어
- JavaScript = 자바스크립트는 웹페이지에 동적이고 상호작용적인 기능을 추가하는 스크립팅 언어. HTML과 CSS를 조작하고, 이벤트를 처리하며, 폼을 검증하고, 애니메이션을 만드는 등 다양한 작업을 수행
Bootstrap
- 오픈 소스 프론트엔드 프레임워크 중 하나로, 웹 개발을 빠르고 쉽게 만들어주는 HTML, CSS, JavaScript 도구 모음
Materialize
- 시각적으로 매력적이고 직관적인 사용자 인터페이스를 구축하는 데 중점을 둔 프레임워크로, 현대적이고 깔끔한 디자인
BoilerPlate
(바로 프론트엔드 개발을 할 수 있도록 세팅을 해둔 템플릿)
: https://html5boilerplate.com/
IDE
Integrated Development Environment
- SublimeText (간편하고 가벼움)
- Brackets (실시간 브라우저 연동 preview, 프론트개발에 추천)
- Atom (프로젝트 단위로 프로그래밍하기에 편리함, 점유도 점점 오르는 중)
- Visual Studio Code (가장 대중적인 IDE)
- Eclipse(Java), Spring Tool Suite (STS), Android Studio, Pycharm 5
Java
- JVM(Java Virtual Machine) 위에서 작동하므로 OS에 제약받지 않음
- 범용성 & 속도 (slower than C-related languages
Spring
- Java 기반의 Web framework (Django는 Python 기반의 웹 프레임워크)
- 전자정부 표준 프레임워크
- 프로그래밍에서의 Framework
: 개발의 효율성을 위해 전체적인 프로그래밍 코드 및 Logic, 프로그램 구현 방법론 등을 최적화 해둔 것 - Web framework
: 이미 만들어져 있는 흐름을 따라 구현/수정만 하면 웹사이트가 바로 만들어 질 수 있게 기본적인 것들을 제공하는 것
Java의 Spring, Python의 Django/Flask, Ruby의 Rails, PHP의 Laravel, JS의 React/Angular/Vue.js 등
HTTP Request? HTTP Response?
Server & Client Network architecture)
- Server : 특정한 서비스를 제공하는 컴퓨터
- Client : 서비스를 사용하는 사용자 혹은 사용자의 단말기
서버의 주소 (URL : Uniform Resource Locator)
- "통신규칙(Protocol)://인터넷 호스트 주소(IP):Port/경로 이름”
- http://125.209.222.142:80 == https://www.naver.com/
서버의 종류 (default port numbers)
- Web server : 80 (http port)
- Database server: 3306, etc.
- FTP server: 21
- etc.
- 81, 88, 888, 8888, 8080 : 소프트웨어들이 임의의 포트 지정을 할 때 많이 사용하는 포트 번호
НТТР (HyperTextTransfer Protocol)
- WWW 상에서 정보를 주고받을 수 있는 통신 프로토콜
- 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜
Request : 서버로의 요청
- GET (method): 정보를 가져오는 영할
- POST (method) : 정보를 입력(및 수정)하는 역할
Response : 서버로부터의 응답
- 응답 코드 : 200(0), 400(Bad request), 404(Not found), etc
- 응답에 담긴 데이터 : HTML / JS / CSS / image files, JSON, XML, etc.
Django 기본 개념
- 데이터베이스 (DATABASE): Django는 SQLite, MySQL, PostgreSQL 등 다양한 데이터베이스를 지원.
- 요청과 응답 (Request & Response): 사용자의 요청은 Django의 미들웨어를 통해 처리되며, 최종적으로 웹 서버(Nginx/Apache)를 통해 응답이 반환.
- 뷰 (VIEW): 요청을 처리하고, 적절한 응답을 생성하는 Django의 주요 구성 요소.
- 템플릿 (TEMPLATE): HTML 응답을 생성하는 데 사용되는 Django의 템플릿 시스템.
- WSGI: 웹 서버와 Django 애플리케이션 간의 통신을 담당.
Django의 MTV 패턴과 MVC 모델 비교
- MVC 패턴
- Model: 데이터베이스와 직접 상호작용하는 부분으로, 애플리케이션의 데이터 구조를 정의.
- View: 사용자에게 데이터를 표시하는 역할. 즉, 사용자 인터페이스를 담당.
- Controller: 모델과 뷰를 연결하는 부분으로, 사용자 입력을 처리하고, 그에 따라 모델을 갱신하거나 뷰를 업데이트.
- Django의 MTV 패턴
- Model: MVC의 Model과 동일한 역할을 하며, 데이터베이스 테이블을 정의하고 데이터와 관련된 비즈니스 로직을 처리.
- Template: MVC의 View에 해당하는 부분으로, 데이터가 사용자에게 어떻게 표시될지를 정의하는 HTML 파일을 처리. 즉, 사용자에게 보여지는 인터페이스를 담당.
- View: MVC의 Controller에 해당하며, HTTP 요청을 처리하고 적절한 데이터를 가져와 템플릿에 전달하는 역할. Django에서의 View는 로직을 처리하고, 데이터베이스에서 필요한 정보를 가져와 템플릿에 전달하는 중개자 역할.
- 차이점
- 용어의 차이: Django는 MVC에서의 Controller를 View라고 부르며, View를 Template으로 대체.
- 책임 분배: Django에서는 템플릿 시스템이 View의 역할을 맡고, 실제 로직 처리는 View에서 담당. 이는 MVC에서 View와 Controller가 분리되어 있는 것과는 달리, Django의 View가 더 많은 책임을 가지는 구조.
- Django의 MTV 흐름
- 사용자 요청: 웹 서버가 사용자의 요청을 Django로 전달.
- View: Django의 View가 요청을 처리하고 필요한 데이터를 Model에서 가져옴.
- Template: 가져온 데이터를 바탕으로 Template에서 HTML로 데이터를 렌더링 함.
- 응답 반환: 렌더링된 HTML 페이지를 사용자에게 반환.
스터디 방법
- KDC 참여
- 각자 공부해온 자료 발표
