본문 바로가기
개발공부_Blog/Web

web은 프론트엔드 개발자에게는 기본이다.

by 소팡팡 2023. 11. 26.

부트캠프로 개발을 처음 접했을 때,

그저 react와 새로운 것을 배우는 것에만 집중했던 것 같다. 

하지만 그보다 더 중요한 기본이 있다는 걸 뒤늦게 깨닫게 된다.

 

프론트엔드 개발자는 web개발을 한다. 

나는 생각했다. '그럼 내가 개발하는 web은 뭔데?' 

web은 뭘까?... 답이라고 할 만한 답변이 나오지 않았다. 

 

공부는 어떤 목적이 있을때 가장 빛을 바라는 것 같다. 

무작정 '개발자 될거야' 라며 공부하는 게 아니라, 내가 무엇을 개발할 것인지에 대해 

정확히 알고 그 목적에 맞는 공부를 해야 하지 않을까 싶다. 

 

Web은 무엇?

web은 world wide web과 같은 의미로 인터넷에 연결된 정보공간을 뜻한다. 컴퓨터 과학자인 Tim-berners-Lee가 만들었다.

web은 HTTP를 사용해 web server와 통신하여 HTML문서를 검색 및 접근한다. 이때 HTML파일 명을 통해 문서를 검색하는 것이 아니라, URL을 통해 HTML의 위치를 검색할 수 있도록 도와준다

 

Web Browser

그럼 web과 web browser는 차이가 있나? web은 인터넷에 연결된 정보 공간이다. web browser는 web에 있는 HTML문서 등의 데이터들을 사용자가 볼 수 있고 상호작용 할 수 있도록 도와주는 소프트웨어이다. Google Chrome, Mozilla Firefox, Microsoft Edge, Safari 등이 있다. 사용자와 web server와 통신할 때 HTTP를 사용한다. web browser의 핵심기능으로 URL, HTML, HTTP가 있다.

⇒ 웹 페이지(사이트)를 보여주거나 웹 서버와 통신하는 역할을 한다.

 

web browser의 구조

📒 https://www.notion.so/fun-blog/web-browser-4193556d11934758994c6857e8b2fef3

web browser의 핵심기능

  • (1) URL
    uniform resource location의 약자로, 자원 위치 형식 이라고 해석하면 되려나… 네트워크 상에서 자원이 어디있는지 알려주기 위한 규약이다. web address 웹 주소와 같은 역할을 한다. 이를 통해 web browser는 해당 리소스를 찾아 사용자에게 보여준다.
    📒 https://www.notion.so/fun-blog/url-d3e69428f92b4191ac60d68730fdb374
  • (2) HTML
    hyper text mark-up language의 약자로, 하이퍼링크 텍스트를 덧입힌 언어라고 해석할 수 있다. 이를 통해 웹 브라우저는 웹 페이작 어떻게 구조화 되었는지 알 수 있다.
    📒 https://www.notion.so/fun-blog/HTML-aea31484ef1c4901ad45a971fe7aede8
  • (3) HTTPhyper text transfer protocol의 약자로, 하이퍼링크 텍스트를 전송하는 규약이라고 할 수 있다. web browser는 HTTP를 통해 web server와 통신하며 HTML문서와 같은 리소스를 가져올 수 있고, web을 검색 및 접근할 수 있다.
    📒 https://www.notion.so/fun-blog/HTTP-649695ea89b545cd8dc71b9319cdd6aa

 

Web개발을 한다는 것은

  • web은 인터넷을 기반으로 하는 정보공간이다
  • 나는 웹 개발을 한다 ⇒ web을 기반으로 하는 소프트웨어를 만든다
  • web이라는 정보 공간에서 web browser가 사용자와 상호작용을 하며 리소스를 출력해준다.

프론트엔드 개발자는 web browser가 사용자와 상호작용 할때의 리소스(HTML파일들의 모음)를 만드는 역할을 하는 개발자다. web과 web browser를 기반으로 동작하는 소프트웨어이기 때문에 이들에 대한 공부가 필수적이라고 생각한다.

web을 기반으로 하는 소프트웨어에는 web application과 desktop application이 있다. 요즘은 사람들이 mobile을 더 많이 사용하기 때문에 web application의 개발에 초점을 맞춰 공부하면 될 것 같다. ( application이라는 단어의 의미는 원래 컴퓨터 운영체제에서 실행되는 모든 소프트웨어를 가리켰지만 지금은 스마트폰의 운영체제에서 사용되는 프로그램으로 의미가 축소된 것 같다. 위 문장은 대략적인 프로그램으로 해석하면 될 것 같고, 아래는 축소된 app의 의미로 )

또한 web기반이 아닌 application기반으로 하는 개발도 있다. 특정 OS( Android, iOS )에서 동작하는 application의 종류로 native와 progressive web app이 있어 이들의 개발 역량도 키우면 좋겠다는 생각을 해봄.

 

 

reference

https://ko.wikipedia.org/wiki/웹_브라우저

https://ko.wikipedia.org/wiki/월드_와이드_웹

https://www.mozilla.org/ko/firefox/browsers/what-is-a-browser/

'개발공부_Blog > Web' 카테고리의 다른 글

PWA설치 및 기본 설정  (1) 2024.12.10
Web-app과 PWA  (0) 2024.12.10
HTTP란  (0) 2023.11.28
web browser의 구조와 rendering engine  (2) 2023.11.26

댓글