.gif)
웹 개발이란?👩🏻💻
1. 웹 개발
-
정적 사이트 : 방문자에게 정보를 보여주기만 하는 웹사이트
-> 미리 작성한 내용을 웹 사이트에 올려놓으면 방문자가 그 정보를 확인하는 방식으로 제작하기에 쉽다.
ex) 기업 홍보 사이트, 포트폴리오 사이트 -
동적 사이트 : 웹 사이트에서 사용자에게 제공할 기능과 서비스를 담은 사이트
ex) 페이스북, 쇼핑몰, 예매 사이트
웹 개발은 웹 사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담을 수 있어야 한다!
2. 서버와 클라이언트
웹 개발을 하려면 먼저 웹 사이트의 동작 과정을 이해하여야 한다!
-
서버 : 요청을 처리해 알맞은 정보를 제공한다.
-> 웹사이트에 접속하면 보이는 텍스트, 이미지, 동영상 등의 웹 요소와 사용자 정보, 상품 정보 등의 여러 정보를 저장한다. -
클라이언트 : 웹 브라우저를 통해 필요한 정보를 요청한다.
-> 사용자가 웹 사이트에 접근하려고 사용하는 PC, 스마트폰 등이 있다.
ex) 웹 사이트에 로그인하는 과정
1. 사용자가 웹 브라우저에서 아이디와 비밀번호를 입력하여 웹사이트에 로그인을 요청함.
2. 웹 사이트는 사용자에게 입력받은 정보를 서버로 전달함.
3. 서버는 저장된 여러 정보 중 로그인을 요청한 사용자의 정보가 있는지 검색함.
4. 일치하는 정보의 결과를 사용자의 웹 브라우저에 전달하고 로그인에 성공한 화면을 보여줌.
but 일치하는 정보가 없다면 로그인에 실패한 결과를 화면에 보여줌.서버 : 웹사이트에서 정보를 검색하거나 처리하는 일
클라이언트 : 사용자의 요청을 받아 처리한 결과를 보여주는 일 (사용자와 서버 사이에서 화면으로 보여주는 역할)
3. 웹 개발의 기본
웹 개발은 크게 2가지 영역으로 나눌 수 있으며 프론트엔드 개발과 백엔드 개발이 바로 그것이다.
또한, 프론트엔드 개발과 백엔드 개발을 모두 할 수 있는 사람을 풀스택 개발자라고 한다.
- 프론트엔드 영역
- 사용자 앞에 보이는 영역으로 웹 브라우저 화면에 보이는 것을 다룬다.
- 웹 사이트를 디자인하거나 사용자 동작에 반응하는 기능을 만든다.
- 다양한 웹 브라우저의 종류와 버전에 따라 작동할 수 있게 만드는 것이 중요하다.
HTML : 웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표와 같은 웹 요소를 알려 주는 역할 (웹 문서의 뼈대)
CSS : 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용한다. (웹 문서 꾸미기)
JavaScript : 웹 브라우저의 동적인 효과를 연출한다. (사용자 동작에 반응)
-> 리액트, 뷰와 같은 프레임워크 사용
- 다양한 라이브러리 : 제이쿼리, 부트스트랩 등
- 프레임워크 : 리액트, 앵귤러, 뷰 등- 백엔드 영역
- 사용자 뒤에서 보이지 않는 영역으로 사용자가 볼 수 없는 서버의 동장을 개발한다.
- 클라이언트와 서버 사이의 데이터베이스를 설계하거나 데이터를 처리한다.
- 서버 운영체제에 따라 사용하는 언어와 프레임워크가 다르다.
파이썬 : 데이터를 많이 다루는 분야에서 많이 사용한다.
자바 : 오랫동안 백엔드 개발용으로 쓰였고 관련 커뮤니티나 오픈 소스가 많으며 안드로이드 앱 개발, 셋톱 박스나 하드웨어용 애플리케이션 개발이 가능하다.
- 프레임워크 : 노드제이에스, 스프링, 장고 등4. 웹 브라우저
웹 브라우저 : 웹 사이트를 방문할 때 사용하거나 웹 개발자가 웹 편집기로 작성한 문서를 화면에 나타내는 프로그램
- 크롬 (구글) : HTML5가 등장할 때 가장 빨리 지원한 웹 브라우저로 사용자가 가장 많으며 다양한 확장 프로그램으로 필요한 기능을 추가해 사용할 수 있다.
- 엣지 (마이크로소프트) : 크롬 브라우저와 같은 엔진을 사용하여 같은 기능을 대부분 지원한다.
- 파이어폭스 (모질라) : 개발자들이 많이 사용하는 웹 브라우저로 개발 도구와 부가 기능이 뛰어나다.
5. 웹 편집기
웹 개발은 웹 편집기로 소스를 작성하고 웹 브라우저에서 결과를 확인하며 진행한다.
ex) 노트패드, 텍스트 메이트, 비주얼 스튜디오 코드
