[WEB] 웹 프론트엔드 기초 - 1. 브라우저와 개발 도구/프레임워크 이해하기

---

 

브라우저

• 사용자가 웹 페이지를 요청하고 표시하는 데 사용되는 소프트웨어
• HTML, CSS, JavaScript와 같은 웹 기술을 해석하고 실행하여 사용자에게 웹 페이지를 표시
• Windows, macOS, Linux, Android, iOS 등 다양한 운영 체제에서 웹 브라우저를 지원하고 있다.

 

브라우저 구성 요소

• 주소 표시줄
• 뒤로/앞으로 버튼
• 북마크
• 확장 기능
  • 광고 차단, 팝업 차단, 개발자 도구

 

브라우저 엔진

• Chromium, Gecko, WebKit

렌더링 엔진

• HTML과 CSS를 해석하고 페이지를 렌더링하는 엔진
• 예를 들어, Chrome은 Blink 엔진을 사용하고, Firefox는 Gecko 엔진을 사용합니다.

자바스크립트 엔진

• JavaScript 코드를 해석하고 실행하는 엔진입니다
• V8 엔진 (Chrome 및 Node.js), SpiderMonkey (Firefox), JavaScriptCore (Safari) 등이 있습니다.

 

브라우저 보안

• 브라우저 자체에서 개인정보와 데이터 보안을 위해 제공하는 기능
• HTTPS 지원, 쿠키 제어, 콘텐츠 보안 정책(CSP) 등

 

브라우저 버전

• 주기적으로 업데이트하여 새로운 기능과 보안 패치를 제공 중

 

웹 브라우저

• 목적 : 코드 테스트
• 예)
  • 운영체제 별 브라우저
    • Linux: Firefox, Chrome, Opera.
    • Windows: Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge (Window 10은 Edge를 탑재하고 있습니다. Windows 7 이상에선 Internet Explorer 11)
    • Mac: Firefox, Chrome, Opera, Safari (Safari는 iOS와 macOS에 탑재되어 있습니다)

 

텍스트 편집기

• 목적 : 코드 작성
• 예)
  • 기본 편집기
    • Windows : 메모장
    • macOS : TextEdit
    • Linux-Ubuntu gedit
  • 웹 개발용
    • 텍스트 편집기
      • Sublime
      • Brackets
      • Atom
      • Visual Studio Code
    • 하이브리드 편집기
      • Dreamweaver
      • WebStorm

 

이미지 편집기

• 목적 : 웹 페이지를 위한 이미지 생성
• 예)
  • GIMP
  • Paint.NET
  • Photoshop

 

버전 관리 시스템

• 목적 : 서버 파일 관리, 프로젝트 협업, 코드와 자원 공유, 수정 충돌 방지 용도
• 예)
  • Git
  • GitHub

 

FTP 프로그램

• 목적 : 웹 호스팅 계정에 파일을 올리는 용도, 지금은 점점 Git이 FTP를 대체
• 예)
  • Cyberduck
  • Fetch
  • FileZilla

 

자동화 시스템

• 목적 코드 압축과 테스트 등 반복 작업을 자동으로 수행
• 예)
  • Grunt
  • Gulp

 

템플릿

라이브러리

프레임워크

기타