03. IT 회사에서 살아남기 위한 모든 기초지식_프론트엔드(웹/앱)

프론트엔드 : 유저들에게 정보를 보여주는 화면 

1. 브라우저에서 웹이 동작하는 과정
웹을 실행하는 환경은 '브라우저'입니다. 웹을 제공하는 곳은 '웹 서버'

① 사용자가 브라우저에서 URL 주소 입력
② 브라우저는 웹 서버를 실행하고 있는 컴퓨터에게 요청
③ 웹 서버에서는 프론트엔드 개발자가 개발한 웹을 클라이언트(브라우저)에게 전달  
- HTML / CSS / javascript : 프론트엔드 개발자 웹 개발할때 3개 언어 사용

HTML : 뼈대를 잡고 CSS : 디자인을 한후 JAVASCIPT :웹의 모든 동작을 처리
(HTML : 원시인 CSS: 화장javascript:밖으로 나가게하자)

① HTML 을 통해 element (텍스트,링크 등) 들을 적용
② CSS를 이용해서 element들에 디자인을 씌우고, 이 때 색깔, 크기, 배치 결정
③ 이미지를 다운 > javascript 적용

API 서버에서 정보를 받아와서 HTML / CSS를 변경할 수 있는데 > SSR 방식
> 브라우저 화면에 웹을 그리는 전체적인 과정 '브라우저 렌더링' 이라고 하며, '렌더링'은 프로그래밍적으로 화면을 그리는(보여주는)것이다. 

2. 웹 개발에 쓰이는 라이브러리 & 프레임워크 
> 순수한 javascript로만 개발하기 어렵기 때문에 라이브러리로  jQuery 나왔지만
javascript 기술이 발전하면서 Angular, React, Vue 프레임워크가 나왔으며 현재는 Angular 점점 사용하고 있지 않음

- 반응형웹 : 화면크기에 따라서 다른 CSS를 적용 (동일한 URL > 모바일환경 /웹 너비에 따라 디자인을 다르게 하는것) 

> 하나의 웹을 다르게 보여주는것 / 리소스가 많이 들지 않음 

  ≠ EX,) 네이버 도메인네임이 다르고, 다른 웹으로 연결됨 

- 웹앱 : 모바일 앱처럼 꾸며놓은 웹
- 크로스브라우징 : 브라우저마다 HTML / CSS / javascript를 읽는 방식이 다름> 통일성 있게 웹을 보여주는것으로 말함 
- HTTL : 브라우저에서는 http 프로토콜 통해 웹서버와 통신
- HTTLS : HTTP 프로토콜에 보안(S)을 강화한 프로토콜

---

3. 모바일 앱
1) 플랫폼 OS  : 안드로이드 / IOS
2) 개발언어 : OS에 따라 만들 수 있는 언어 다름

 

앱은 웹과 다르게, 이미 모든 페이지와 코드들이 앱 내부에 있음

 

①  화면 로드되면서  api 서버에게 어떤 페이지 관련 정보를 달라고 요청 

② api 서버는 해당 페이지 정보 요청 확인 후 데이터 응답 값을 넘겨줌

③ 해당 페이지를 받은 앱은 api 응답값을 바탕으로 실행 

 

- 웹뷰 : 웹뷰는 앱에서 웹을 보여줄 수 있는 기능입니다 (안드로이드, ios 모두 가능합니다)

앱의 경우, 업데이트를 하지 않는 이상 새로운 코드가 변경되지 않음.

하지만, 웹뷰로 이용하게 되면, 웹서버와 통신을 하여, 웹 서베에서 웹을 업데이트 한다면 앱에서 변경된 웹을 사용할 수 있게 됨 

> 다양하게 사용할 수 있음 / 다만 웹이 앱에 비해 렌더링 속도가 느리기 때문에 유저들이 불편함

 

4.네이티브 앱 

:  Android 개발자, ios 개발자가 각각 프로그래밍 언어로 개발을 진행

> 가장 성능이 좋지만, 스타트업의 경우 각각 프로그래밍 언어를 사용할 수 있는 개발자를 모두 뽑는것에 대해서 한계가 있음 

 

5. 하이브리드 앱

: 전용 프레임워크를 사용해서 앱/웹을 동시에 만들어 주는 기술을 말함 

네이티브앱 + 웹뷰(그냥 웹인데 마치 앱처럼 꾸며놓은 웹) 형태

웹 기술(HTML, CSS, Javascript)를 기반으로 코딩을 하면 앱을 만들어주는 기술 (아이오닉)

 

6.웹과 앱의 공통점과 차이점 

>공통점 :  동일한 API 서버를 사용

>차이점 

웹 :

① 페이지마다 계속해서 URL 요청해서 다운받아야 하므로 속도가 느리다

  (웹에서도 SPA 방식으로 개발하면 앱과 같이 페이지 전환 속도를 높일 수 있다.)

② 코드를 바꾼 후 웹서버에 업로드하면 바로 반영된다 

③ 컴퓨터 장치를 자유자재로 이용할 수 없다. 

 

앱 :

① 앱스토어에서 한번 다운 받으면 사용할 때는 속도가 빠르다.

② 코드를 바꾼 후 앱을 앱스토어에 올려서 심사를 통과해야 반영된다. 

③ 컴퓨터의 장치 설정에 자유롭다. (알림설정/PUSH/승인 등등)