1. 웹의 기본
HTML, CSS, JavaScript 완성본은 모두 서버에 있다.
GET요청으로 서버에서 받아온다.
즉, 내가 내 컴퓨터에서 개발자도구를 이용해 사이트의 CSS를 모두 지워버려도
원본에는 아무 문제가 없다. 새로고침해서 서버에서 다시 받아오면 된다.
1-1. HTML
시작은 '유럽 입자 물리 연구소(CERN)'
'팀 버너스리'가 연구소 내에서 서로 다른 운영 체제나 애플리케이션을 이용하는 문제점을 발견하고 모든 운영체제와 프로그램에서 일정한 형식이 언제나 동일하게 보일 수 있도록 문서를 제안한다.
이렇게 탄생한 HTML
'HTML'은 운영체제에 상관없이 브라우저만 있으면 스마트폰, PC, 노트북 등 모두 웹사이트에 접속해 동일한 정보를 볼 수 있다.
- 정보를 표현하기 위한 코드 : 태그 tag
- 한 HTML 문서에서 다른 HTML 문서로 이동할 수 있게 해주는 개념 : 링크
- HTML은 컴퓨터에게 특정일을 시키는 것이 아니라, 단순하게 브라우저가 볼 수 있는 문서
- 마크업작업
1-2. CSS
HTML에 '디자인'을 입힐 수 있는 코드
- HTML + CSS : 퍼블리싱
1-3. JavaScript
보여주기에 한정된 HTML과 CSS에 추가적으로 '프로그래밍'을 할 수 있는 언어가 필요했다.
- 코딩된 파일 확장자 : js
1-4. 웹과 앱
- 웹은 수정이 용이하다. 원본만 수정하면 유저가 업데이트하지 않아도 새로고침하면 반영된다.
즉, 빠르게 적용할 수 있다.
웹의 단점은 '새로고침'이다. 항상 새로고침을 해야한다. 매번 HTML, CSS, JavaScript를 다운받아야한다. 따라서 네트워크의 영향을 크게 받는다. - 앱은 수정이 힘들다. 하지만, 웹보다 효율적으로 네트워크의 영향을 조금만 받도록 만들 수 있다.
2. 웹 개발이 힘든점
- 웹 브라우저는 수많은 종류가 있다. 다양하다.
즉, 수많은 브라우저들마다 HTML, CSS, JavaScript등의 버전호환 가능여부가 다르다.
이걸 하나하나 다 맞춰서 개발해야한다..
소비자의 브라우저에 맞춰서 작동에 장애가 없도록 추가로 코드를 작성해야한다.
이런 문저를 '브라우저 버전의 파편화'라고 부른다. - 문제해결을 하면 : 파편화를 잡는다. 라고 부른다.
- 'caniuse.com'이라는 사이트를 사용하면 내가 해당 브라우저에서 이 기술을 쓸 수 있는지 좀 더 손쉽게 알 수 있다.
- 파편화를 다 잡을 수는 없다. '점유율'에 따라 잡자. 소비자가 더 많이 점유하는 브라우저를 대상으로 고민하고 의사결정을 효율적으로 한다.
3. 반응형 웹
- 모니터의 다양한 크기, 태블릿pc, 모바일 등 다양화된 기기에 맞춰 웹 페이지를 제작해야한다.
- 대형 사이트의 경우 m 버전의 사이트를 따로 만들었다. (모바일버전을 따로 )
- 하지만, 모든 곳이 모바일 사이트를 따로 만들기는 쉽지 않다.
- 때문에, '반응형 웹'이 중요!!
- 브라우저의 가로 넓이에 반응하여 구성 요소가 변하는 기술
- 웹페이지의 크기(비율)가 사용자의 기기에 맞춰 자동으로 변형된다.
- 반응형 웹으로 만들면 때로는 추가적으로 코드를 더 작성해야한다. 따라서, 시간과 비용이 좀 더 소비된다.
4. 하이브리드 애플리케이션
- 웹과 앱이 합쳐진 형태
- 모바일에 '웹 페이지'를 먼저 애플리케이션으로 설치해두면 사용자는 그 사이트를 자연스럽게 많이 이용하게된다.
- 이런 효과를 위해 발전하기 시작.
알수록 웹과 앱은 뗄 수 없는 사이인듯하다.
웹 공부를 마치면 앱도 도전해보고 싶다 :)
ᴘᴇᴛɪᴛs ᴅᴇ́ᴠᴇʟᴏᴘᴘᴇᴜʀ. ᴘʀᴏɢʀᴀᴍᴍᴀᴛɪᴏɴ = ᴘʟᴀɪsɪʀ 💕