본문 바로가기
반응형

프론트엔드/[이론] 웹 기술17

웹 구조 Web | 웹 개발 시 주의할 점 ⭕ 웹 구조 Web | 웹 개발 시 주의할 점➡️ 엄격한 문법 준수빈 태그의 슬래시 사용: HTML5에서는 슬래시가 선택적이지만, 일관된 문법을 사용하여 문법의 엄격함을 따르도록 하자! ➡️ 코드의 깔끔함 유지중복 최소화: CSS에서는 스타일의 중복을 최소화하고, 클래스와 ID를 효율적으로 사용하여 코드의 재사용성을 향상함주석 사용: 코드에 주석을 추가하여 다른 개발자들이 코드를 이해하고 유지보수할 수 있도록 함 2024. 5. 16.
웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 ⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blink 엔진사파리(Safari): Webkit 엔진파이어폭스(Firefox): Gecko 엔진 ➡️ CRP (Critical Rendering Path) ➡️ DOM(Document Object Model) 트리 생성HTML 파싱 후, DOM 트리를 생성합니다.파싱웹 페이지나 앱이 실행될 때, 브라우저의 자바스크립트 엔진 같은 런타임 환경이 이해할 수 있는 형태로 코드를 변환하는 과정을 말합니다.웹 문서를 작은 조각들인 '토큰(token)'으로 분리하고, 문법적인 구조를 가.. 2024. 5. 14.
웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS) ⭕ 웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS) ➡️ HTML: 구조 역할: 웹 페이지의 기본 구조를 제공함 기능: 제목, 문단, 표, 이미지, 동영상 등 페이지의 구조적 요소를 정의함 비유: 얼굴에서 눈, 코, 입과 같은 구체적인 부분을 형성함 ➡️ CSS: 스타일 역할: 웹 페이지의 시각적 스타일을 담당함 기능: 색상, 크기, 폰트, 레이아웃 등을 조정하여 콘텐츠의 시각적인 표현을 정의함 비유: 구조적으로 설정된 눈, 코, 입의 위치와 모양, 색상 등을 정의함 ➡️ JavaScript(JS): 동적 처리 역할: 웹 페이지의 동적 기능을 구현함 기능: 사용자의 입력에 반응하거나, 페이지의 콘텐츠를 실시간으로 변경하고 움직임을 추가함 2024. 4. 22.
웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) ⭕ 웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) 프론트엔드 개발은 웹 개발의 가장 전면적인 부분 HTML, CSS, JavaScript 기술을 활용하여 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 사용자와 상호 작용하게 하는 과정 프론트엔드 개발자는 사용자가 직접 보고 경험하는 웹 페이지의 실질적인 구축을 담당함 ➡️ UI(User Interface) 사용자와 컴퓨터가 정보를 주고받기 위해 사용자와 프로그램이 상호 작용하는 프로그램의 일부분 ➡️ GUI(Graphic User Interface) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 환경 이전까지 사용자 인터페이스는 키보드를 통해 명령어로 작업을 수행하였지만.. 2024. 4. 22.
웹 기획: 프로젝트를 체계적으로 구상하는 핵심적인 과정 ✅ 웹 기획웹 기획은 어떤 프로젝트를 현실로 구현하기에 앞서, 그 프로젝트를 체계적으로 정의하고 계획하는 핵심적인 단계입니다. 웹 기획은 웹 개발 프로세스의 초기 단계로서, 웹 사이트나 웹 애플리케이션을 설계하고 구조화하는 과정을 의미합니다. 이 과정에서 다양한 측면을 고려하여 웹 사이트의 목표와 사용자 경험을 최적화하기 위한 전략을 개발합니다. 페이지 왼쪽에는 수업 목차를 나열하고, 목차 항목에는 링크가 포함되어 있습니다. 이 링크를 클릭하면 해당 항목의 내용이 오른쪽에 나타납니다.오른쪽 상단에는 현재 페이지의 제목이 표시되고, 본문에는 해당 제목에 대한 자세한 설명이 제공됩니다. 💡인간의 역할인간은 웹 페이지나 앱을 개발하는 과정에서 중요한 역할을 합니다. 인간은 "코드"를 작성하고 이를 통해 부호.. 2023. 11. 7.
웹 구조 WEB | 웹 디자이너 | UX 디자인, UI 디자인, 웹 디자인 ✅ 웹 디자인 웹 사이트는 코드로 구성되어 있다. 웹 사이트를 이용하는 시스템에서는 웹 디자인은 필요하다. UX, User eXperience 디자인: 사용자가 얻을 수 있는 만족하는 체험을 설계한다. UI 디자인: 최적의 외관, 편리한 사용을 설계한다. 웹 디자인: 언어와 도구로 외관을 표현한다. 2023. 2. 9.
웹 구조 WEB | 정보 시스템 SoR과 SoE ✅ 정보 시스템 SoR과 SoE 💡 정보 시스템 SoR 시스템에서 SoE 시스템으로 바뀌고 있다. 열람 중심 웹 사이트에서 다양한 정보를 수집하여 활용하는 웹 앱, 웹 시스템으로 변화함에 따름이다. 기록 시스템 SoR, System of Record: 과거에 사용, 조직 관리 중심 연결되는 시스템 SoE, System of Engagement: 현재에 사용, 다양한 조직과 개인의 연계 중심 💡 개발 스킬 디바이스나 네트워크가 급속히 다양해짐에 따라 과거와 현재의 개발 스킬이 변화한다. 제로 베이스에서 개발했던 과거에서, 프레임워크를 이용하고 API를 활용하는 현재가 되었다. 독자성이나 전용성을 중시하는 과거에서, 범용성이나 가용성을 중시하는 현재가 되었다. 프로그래밍에 구애받지 않고 코드를 최대한 적지 .. 2023. 2. 9.
웹 구조 WEB | 웹 사이트 규모 | site: 명령어, 웹 페이지 수 카운트 ✅ 웹 사이트 규모 웹 사이트 규모는 웹 페이지 수로 측정한다. 총 페이지 수의 기준은 액티브한 페이지를 전제로 한다. 소규모: 100 페이지 이하 중규모: 1,000 페이지 이하 대규모: 10,000 페이지 이하 초대규모: 10,000 페이지 이상 대규모 이상이 되면 유지 보수가 까다롭게 된다. 💡 웹 페이지 수 카운트 site: 명령어로 페이지 수를 카운트한다. site: 명령어는 구글이 인식하고 있는 페이지 수이므로 실제 페이지 수와 오차는 있지만 대략적인 규모는 짐작할 수 있다. 2023. 2. 9.
웹 구조 WEB | 해외 웹 사이트 접속 구조 | ISP 네트워크, 인터넷 익스체인지 IX ✅ 해외 웹 사이트 접속 구조 해외 웹 사이트는 국외에 서버가 설치되어 있다. ISP(KT, SKT, LG) 네트워크를 거친다. ISP 상위 계층 인터넷 익스체인지 IX 네트워크 사업자 설비를 통하여 해외로 나간다. 인터넷 익스체인지 IX는 인터넷 상호 접속점으로 부르기도 한다. 💡 인터넷 익스체인지 IX 한국에서 해외 웹 사이트에 접속하기 위해서는 해저 케이블을 경유하여야 한다. 인터넷 익스체인지 IX는 해저 케이블의 네트워크에 연결되어 있다. 인터넷 익스체인지 IX는 대기업 통신사 중심으로 운영되고 있다. 안전 보장상의 이유로 구체적 소재지는 알려지지 않았다. 인터넷 익스체인지 IX 시스템이 다운되면 ISP 간의 교신이나 해외 웹 사이트 접근이 불가능해진다. 2023. 2. 9.
웹 구조 WEB | 웹 시스템 관리 | 클라서버 시스템, 온프레미스 On-Premises, 클라우드 서비스 ✅ 웹 시스템 웹 시스템은 브라우저, API, 애플리케이션이 설치된 디바이스로 웹 서버에 접근하는 구성이다. 💡 웹 시스템 관리 타사 웹 서버를 사용하는 것이 대부분이다. 자사 웹 서버 관리 자사 정보 시스템 센터, 데이터 센터에 서버를 설치하고 접근한다. 인트라넷: 내부 내트워크를 사용하는 것이다. 타사 웹 서버 위임, 대여 웹 서버, 메일 서비스 전용 인터넷 서비스 프로바이더 ISP 서비스, 클라우드 서비스, 데이터 센터 사업자의 호스팅 서비스를 이용한다. 💡 기업 업무 시스템 클라서버 시스템 클라이언트에서 LAN 네트워크를 통하여 시스템 서버에 접근한다. 온프레미스 On-Premises 클라서버 시스템 IT 기기가 기업이 관리하는 환경 내에 있는 것이다. 클라우드 서비스 서버를 클라우드 사업자가 관.. 2023. 2. 8.
웹 구조 WEB | API, Application Programming Interface ✅ API, Application Programming Interface 웹 시스템에 연결하는 방법에는 브라우저, API, 애플리케이션 등이 있다. API는 소프트웨어가 송수신할 때의 인터페이스를 의미한다. 💡 웹 시스템 API, WEB Application Programming Interface 웹 시스템 API는 하이퍼텍스트가 아닌 시스템 간의 데이터 송수신을 시행하는 구조이다. 스마트폰에서 애플리케이션을 통하여 웹서버에 데이터를 송수신하는 것이 예시이다. 웹 시스템 API는 위치 정보, 날씨 정보, 금융 거래, 이미지 인식, 언어 처리 등이 패턴화 되어 있다. 2023. 2. 8.
웹 구조 WEB | 브라우저 종류 | 요청과 응답의 렌더링 과정 ✅ 브라우저 브라우저는 하이퍼텍스트를 보여준다. HTML로 기술되어 있는 웹 페이지는 웹 사이트를 구성하고 브라우저에서 본다. 브라우저 종류 구글 Chrome 마이크로소프트 Microsoft Edge Internet Explorer 💡 브라우저 렌더링 Rendering Path 브라우저가 요청하고, 응답받는 과정을 렌더링 Rendering Path라고 한다. 요청, 리퀘스트 브라우저는 웹 서버에 요청을 한다. 응답, 리스폰스 웹 서버는 브라우저에 응답을 한다. HTML, CSS, JavaScript가 응답이다. 2023. 2. 8.
웹 구조 WEB | 웹 서버 구조 종류 | 랙 마운트형, 리눅스 Linux, Window Server, 유닉스 UNIX ✅ 웹 서버 💡 웹 서버 물리적 구조 웹 서버는 서비스 규모, 사용자 수에 따라 다른 구조를 가진다. 웹 서버 구조 종류 타워형: 오피스에서 주로 사용한다. 랙 마운트형: 정보 시스템 센터, 데이터 센터에서 주로 사용한다. Linux 사용이 늘어나고 있다. 리눅스 Linux: 필요한 기능위주로 추가하여 디스크 절약, 안정성 향상, 비용 절감이 가능하다. 구현이 어렵다. 윈도우 서버 Window Server: 많은 기능이 구현되어 있다. 유지 보수에 비용이 쓰인다. 범용기(메인 프레임): 대규모 업무 시스템에서 사용한다. 유닉스 UNIX: 대규모 업무 시스템에서 사용한다. 대규모 업무 시스템에서 범용기(메인 프레임), UNIX 계열 서버를 사용하기도 하지만 랙 마운트형을 여러 대 사용하기도 한다. 2023. 2. 8.
웹 구조 WEB | URL 구성 | 도메인명 종류, 프로토콜, 스키마명, FQDN ✅ URL 💡 URL이란 URL은 웹 페이지, 웹사이트의 파일이다. 구성 스키마(프로토콜)명 FQDN, Fully Qualified Domain Name: 완전 수식 도메인명, 호스트명 + 도메인명 경로명: 생략하여도 웹 서버 기능으로 보완한다. 💡 도메인명 도메인명은 IP 주소에 대응하는 이름이다. IP 주소를 알고 있는 사이트는 IP 주소를 입력하여 페이지를 찾을 수 있다. 하지만 숫자로 구성된 IP 주소는 어느 사이트인지 쉽게 알기 어렵기 때문에 도메인명을 사용한다. 도메인명 종류 gTLD, Generic Top Level Domain .com: 누구나 등록 가능, 상업 조직 대상, 10500원 .net: 누구나 등록 가능, 네트워크 대상, 11000원 .org: 법인(단체, 협회) .edu: 교육.. 2023. 2. 8.
웹 구조 WEB | 웹 페이지 열람 방법 | URL, 전용 애플리케이션 App ✅ 웹 페이지 열람 방법 💡 URL, Uniform Resource Locator 사용 PC, 스마트폰, 태블릿은 디바이스다. 웹 사이트에 가장 접근하기 쉬운 디바이스는 스마트폰인 것 같다. 디바이스에 설치된 브라우저를 사용하여 사용자는 웹 페이지에 접근한다. URL, Uniform Resource Locator을 입력, 클릭, 탭 한다. 💡 전용 애플리케이션 App 사용 디바이스 전용 애플리케이션을 사용하여 접근하는 경우도 늘고 있다. 전용 애플리케이션에 URL을 삽입하여 애플리케이션을 시작하면 바로 접근가능하다. 다른 서버와 자동적으로 특정 데이터를 주고받을 수 있다. 2023. 2. 7.
웹 구조 WEB | 웹 시스템 구조 | 웹 페이지, 웹 사이트, 웹 앱, 웹 시스템 ✅ 웹 시스템 브라우저 소프트웨어를 사용하여 URL을 입력하면 원하는 웹 사이트로 접근한다. 브라우저가 인터넷을 통하여 도착하는 곳은 웹 서버이다. 디바이스(브라우저), 인터넷, 웹 서버가 기본 구성이다. 물리적으로 클라서버 시스템과 같다. 💡 웹 사이트 문서 정보 중심의 웹 페이지로 구성되는 집합체이다. 💡 웹 앱, 애플리케이션 쇼핑 등의 동적인 구조를 가진다. 웹 서버에 애플리케이션 AP 서버, 데이터베이스 DB 서버 등을 추가한 형태이다. 💡 웹 시스템 웹 사이트, 웹 앱에 추가로 API 등 개별 서비스를 제공한다. 다소 복잡하고 규모가 큰 구조이다. 2023. 2. 7.
웹 구조 WEB | 웹이란 | WWW, 하이퍼텍스트, 하이퍼링크 ✅ 웹 WEB 💡 인터넷 웹은 정말 가까이 있는 존재이다. 웹은 인터넷을 통하여 제공되는 정보나 서비스를 주고받기 위한 구조이다. WWW, World Wide Web은 인터넷을 통하여 제공되는 하이퍼텍스트를 이용한 시스템이다. 💡 링크 웹 사이트를 구성하는 웹 페이지는 링크, 참조 형태로 연결된다. 웹은 하이퍼텍스트와 하이퍼링크 구조가 사용된다. 하이퍼링크 구조는 웹 페이지가 하이퍼텍스트 마크업 랭귀지 HTML 언어로 구성되어 있다. 하이퍼텍스트로 작성된 페이지에 링크를 남기면 다른 페이지로 이동할 수 있다. 기존 시스템에서는 프로그램을 호출하고, 종료하는 구조이지만, 웹 사이트에서는 링크로 이동한다. 2023. 2. 7.
반응형

티스토리툴바