🎇웹 프로그래밍의 이해

👉 웹 기초

웹이란?

• World Wide Web의 줄임말.
• 인터넷에서 운영되는 서비스 중 하나.

웹의 동작구조

• HTML 중심으로 한 웹의 동작 과정

웹브라우저 → URL 입력 → DNS 서버 → IP 주소로 변환 → HTML 페이지 요청 → 웹서버 → 요청 내용 분석 → HTML 페이지 응답 → HTML 태그 분석 및 화면 구성

네트워크

• 컴퓨터 간에 연결을 위한 연결망.

프로토콜

• 네트워크에 연결된 컴퓨터들 간의 통신 규약.

포트(port)

• 네트워크 서비스를 제공하기 위한 일종의 출입문.
• 하나의 컴퓨터에서 여러 개의 네트워크 서비스를 제공하는 경우 이를 구분하기 위한 목적으로 사용함.
• 포트와 프로토콜이 일치하지 않은 경우 네트워크 서비스 사용이 불가함.

TCP/IP

• 프로토콜 중 하나로 TCP/IP를 기반으로 한 것이 '인터넷'이다.

TCP/IP 4계층 구조

• 응용계층 : WWW, FTP, TeInte, STMP 같은 네트워크 프로그램으로 구성.
• 전송계층 : 각 시스템을 연결하고 TCP 프로토콜을 이용하여 데이터를 전송한다.
• 인터넷계층 : IP 프로토콜을 이용하여 데이터를 정의하고 경로를 배정.
• 물리계층 : 실제 네트워크에 접근할 수 있도록 하는 물리적인 부분.

IP 주소

• 네트워크 상에서 컴퓨터를 구분하기 위해 사용하는 주소.

DNS

• IP 주소에 해당하는 도메인 네임을 관리하는 시스템.
• 인터넷 주소의 형태 : 호스트명(www).도메인명(naver.com)

🎇웹프로그래밍 구조

👉클라이언트/서버 구조

• 클라이언트 : 웹 서비스를 이용하는 사용자
• 서버 : 웹 서비스를 제공하는 공급자

👉자바스크립트(js)

• HTML 문서에서 동적으로 변하는 콘텐츠를 표현하기 위해 이벤트 처리를 하거나 서버와 연결하여 데이터를 가지고 오는 등의 역할을 하는 프로그래밍 언어.
• 서버에 새로 접속하지 않고도 화면 정보가 변하는 기능.

👉프론트엔드 중심 개발

• 클라이언트에서 HTML을 가지고 있거나 서버에서 HTML 만 받아오고 서버로부터 화면 구성에 필요한 데이터만 JS(JSON)으로 받아와서 데이터와 화면을 구성한다.
• 이러한 방식을 Client Side Rendering 이라고 한다.
• 화면을 구성하는 것을 브라우저에서 수행하고 백엔드에서 변동되는 데이터만 가져온다.

👉프론트엔드 중심 개발의 한계

• 프론트엔드 중심의 개발이라고 하더라도 데이터 제공을 위한 서버는 필요하며, 데이터 제공 서버는 주로 REST API로 개발되기 때문에 백엔드 작업은 필수적이다.

🎇자바 웹개발 환경

👉서블릿 컨테이너

• 웹 애플리케이션을 구동하는 서버를 의미.
• 서버 컴퓨터에서 WAS(Web Application Server)로서 동작하기 위해서는 서블릿 컨테이너가 필요하다.
• 실제 서비스 시스템을 구축 시 정적 콘텐츠 서비스를 위한 웹서버와 WAS를 병행하여 운영하며, 설정을 통해 상호 연동되는 구조를 갖는다.
• Ex) Apache Tomcat

웹브라우저 → 웹서버 → WAS → DB

👉데브옵스

• 개발과 운영의 합성어
• 규모가 큰 소프트웨어의 신속한 개발과 지속적 유지보수, 배포 등의 운영을 병행하기 위한 노력을 통칭함.

🎇자바 웹개발 환경 구축

1. JDK 설치

2. Apache Tomcat 설치

3. Eclipse EE 설치

4. worksapce 지정

5. text encoding 설정

1. 기본 문자 인코딩
[window] → [Preferences] → [General] → [contentTypes] → [Text] → 하부에 'Defualt encoding' 에 UTF-8 입력 후 Update 버튼 클릭. + Apply

2. HTML, CSS, JSP 문자 인코딩
[Web] → [HTML Files] & [CSS Files] & [JSP Files] → Encoding → ISO 10646/Unicode(UTF-8) 설정. + Apply

3. 서버 실행 시 브라우저 선택
[General] → [Web Browser] → Use external web browser check → Chrome check + Apply

톰캣 연동

• [File] → [New] → Dynamic Web Project 생성.
  - Dynamic Web Project ?
  • 동적 웹 프로젝트 : 서블릿, JSP 개발 시 생성하는 프로젝트.

😊 추가 개념

Markup Language란?

• 텍스트에 의미를 부여하기 위해 문서에 주석을 다는 표현 시스템.
• 표현하고자 하는 정보가 있을 떄 정보의 앞뒤에 태그 표기를 달아 정보에 의미를 부여하는 형식.
• HTML은 기존에 정의된 태그만 사용하지만, XML은 자신만의 태그를 정의할 수 있다.

HTML 기본 구조

• !DOCTYPE html : HTML5 버전으로 문서를 작성함을 알려주는 코드.
• head : 페이지에 노출되지 않는 코드로 보통 meta 데이터, script 등의 태그 입력.
• body : 페이지에 노출되는 코드.

CSS

• 인라인 스타일 시트 : 속성으로 사용하는 style 사용.
• 내장 스타일 시트 : head 태그 안에 style 태그를 사용.
• 외장 스타일 시트 : 별도의 css 파일을 만들며, link 태그를 사용하여 css 파일을 불러온다.

부트 스트랩

• 가장 대표적인 오픈소스 CSS 라이브러리

자바 스크립트 기초

• 이벤트 발생과 처리
  1. HTML 태그에 이벤트 처리 속성 이용.
  2. 문서 객체 모델 DOM 요소에 속성 추가.
  3. DOM 요소에 addEventListener()로 콜백 함수를 등록.
• JS에서 DOM에 접근하는 방법
  - 특정 태그, 아이디를 비롯해 CSS 선택자를 통한 요소 선택이 가능함.
  • querySelector() : 선택자와 일치하는 첫번째 노드만 가져옴.
  • querySelectorAll() : 선택자와 일치하는 모든 노드를 가져옴.
    • getAttribute(), setAttribute() : 속성 조회 및 변경.