2022년 03월 까지 웹 개발 정복하기 (21.05.26 up)

길라잡이

웹 개발 테크트리 정리

 

 

Chapter 1. HTML/CSS/웹지식 기초 공부 (2021.05.26 ~ )

HTML 정리

 

Chapter 2. 자바스크립트 문법 공부 (커밍쑨)

 

 

Chapter 3. 웹 프레임워크 공부 (커밍쑨)

 

Chapter 4. 깃 공부 (커밍쑨)

 

Chapter 5. 프로젝트 진행 (2021 10월 진행 목표 !!!)

---

정적 웹 vs 동적 웹

정적 웹 : 움직이지 않는, 언제 접속해도 같은 리소스를 보여주는 웹

            이미 작성해둔 파일을 그대로 클라이언트 브라우저에 전달.

            

동적 웹 : 데이터베이스에 접속해서 접속할 때마다 새로운 정보 보여주는 웹

 

 

 

MVC

- Model : 데이터베이스에서 저장하는 형식 지정, 저장,불러오는 코드가 있는 파트

- View : 데이터를 시각적으로 보여주는 파트 (html, css 등)

- Controller : Model data를 View에 연결하여 사용자가 GUI 화면을 통해 제어할 수 있게 해주는 파트

Model : 식료품창고 관리하고 음식 요리하는 주방장 View : 그 음식을 플레이팅하는 직원 Controller : 주문, 서빙하는 매니저

이 MVC 구조를 미리 만들어둔 것이 MVC 웹 프레임워크

 

라이브러리 : 재료 (가져다 씀)

프레임워크 : 재료가 모인 골격 (기본 틀 삼아 그 위에 덧붙여 만드는것) 

- JAVA의 Spring

- Python의 MTV (Model Template View) 프레임워크 Django

- Ruby Rails

 

Routing : 어떤 주소로 접속했을때 어떤 페이지 보여줄지 메뉴판 작성해두는 것

Routing 하는 방법은 프레임워크마다 다름

 

 

기존 MVC가 가지는 아쉬운점

사용자가 이 게시물의 주소로 접속했을 때

1. 서버는 이 사용자가 이 게시판의 이 게시물 읽는구나 확인 후

2. 게시글을 데이터베이스에서 불러오고 이전글, 다음글 제목/링크 불러오고

3. 사이트에 기본적으로 보여주는 다른 내용과 함께

이 데이터들의 HTML, CSS, JS로 작성해서

사용자의 브라우저에 보내준다.

사용자가 그 화면에 좋아요 누르면

서버는 이 사용자가 이 게시판의 이 게시물 좋아요 했구나 확인 후

해당 게시물에 사용자의 아이디로 좋아요 추가 

반복

...

→ 사소한 변경도 너무 많은 작업이 필요함.

사이트 로드할 정보 많으면

엣날에는 이렇게 페이지 통째로 로드해야 했는데

 ajax 라는 기술 나오면서 http 통신으로 데이터 전송하고 결과 받아서

사이트 이 부분을 이렇게 변경하라고 JS로 명령 줄 수 있게 되었음.

대신에 일일이 코딩해야하는 불편함 있었음.

 

이전에는 PC용 웹만 만들면 되었지만, 앱이나 스마트폰 브라우저로 서비스 이용되기 시작하면서

개발자들이 PC용, 모바일용, 안드로이드, ios 까지 개발하게 되었음.

 

안드로이드, IOS 에는 자체 SW와 시스템 있어서 서버로 부터 데이터 정보만 받으면

화면으로 보여줄 수 있음.

 

웹에서도 그런게 가능하다면, 이걸 브라우저에서 HTML, CSS, JS로 랜더링해낼 수 있게 되면

서버는 어디서 요청들어오든 동일 작업으로 데이터 전송하면 되게 됨.

SPA 웹 프레임워크 (Single Page Application) 은

재료 가져다주면 손님이 직접 불판에 구워먹는 고기집

 

서버는 HTML, CSS, JS로 된 코드를 브라우저에 전송

여기 포함된 JS는 주어진 데이터에 따라 HTML 웹페이지를 렌더링

기존에 서버가 하던 일을 브라우저가 하게 된 것임.

 

SPA는 서버에서 데이터 받아와야 할 때마다 서버로 요청을 보내서 반환된 데이터로 사이트 내용 갱신

사이트에서 뭘 할 때마다 새로 접속하지 않고 한번 로드된 화면에서 많은 기능 수행 가능함.

그래서 SPA임

 

Vue Angular React

 

 

 

HTML : 화면에 내용이 이런 구조로 놓여있어라고 갖다놓는 수단

CSS : HTML이 올려놓은 내용을 이렇게 꾸며주는 문서

JS : 프로그래밍 언어. 

브라우저에서 웹사이트 돌리기 위한 언어였는데

Node.js가 브라우저 밖으로 꺼내오면서 

웹사이트에서 돌아가는 JS는 브라우저에서 다양한 일을 수행하고

HTML으로 올려놓은 요소를 변형시키거나 직접 만들기도 함.

 

 

웹사이트 구글크롬, 사파리, 파이어폭스, 익스플로어 등의 브라우저에서 돌아가는 SW임.

브라우저 중 최신기술 지원x 또는 혼자 기능 안돌아가는 경우 있기 때문에

호환성 같은거 따져가면서 만들 필요 있음.

 

1. html, css 스터디

2. 바닐라 자바스크립트

   이걸 배워야 프레임워크 없이도 자바스크립트로 코드짤 수 있다.

   리액트 밑에 무슨 일이 일어나는지 알 수 있음.

   다른 프레임워크도 금방 적응하고 차이점 알 수 있게됨.