웹 개발자 도전기

Fetch API는 네트워크를 통한 리소스 가져오기 인터페이스를 제공하고, 이전의 'XMLHttpRequest' 방식을 대체하는 현대적인 방법이다. Fetch API의 주요 특징Promise 지원 : Fetch는 프로미스를 기반으로 구축되어 비동기 코드를 더 깔끔하고 읽기 쉽게 작성할 수 있다.요청과 응답 객체 : HTTP 요청과 응답을 각각 'Request'와 'Response' 객체로 캡슐화한다.CORS 지원 : Cross-Origin Resource Sharing(CORS)을 지원하여 도메인 간 요청을 쉽게 처리할 수 있다.스트리밍 : 대용량 데이터를 효율적으로 처리할 수 있는 스트리밍을 지원한다. Fetch API 기본 문법Fetch API는 'fetch()' 함수를 사용하여 HTTP 요청을 수행..

네트워크 기초1. 네트워크 정의 네트워크는 여러 컴퓨터를 통신 회선으로 연결한 것LAN (Local Area Network) : Hub, Switch를 통해 특정 영역에 있는 컴퓨터를 연결WAN (Wide Area Network) : LAN을 Router로 연결한 것으로 인터넷 이라고 부름2. 네트워크 통신네트워크에 연결된 컴퓨터 간에 프로그램을 통해 데이터를 주고받는 것을 의미통신을 위해 송신 측과 수신 측이 동일한 프로토콜을 사용해야 한다.3. 프로토콜네트워크 데이터 통신상의 송수신 규칙을 정의한 것데이터 전송 순서 , 종류, 포맷 등을 규정예 : TCP , UDP , IP , HTTP , SMTP , POP3 , FTP , TELNET 등.  4. 서버 (Server) & 클라이언트 (Client)..

웹 스토리지는 브라우저에서 데이터를 클라이언트 측에 저장할 수 있게 해주는 강력한 기능입니다.쿠키의 한계를 극복하고 더 많은 데이터를 안전하게 저장할 수 있어 현대 웹 애플리케이션에서 널리 사용되고 있습니다. 웹 스토리지의 특징최대 5MB까지의 데이터 저장 가능서버로 전송되지 않아 네트워크 트래픽 감소문자열 형태로 데이터 저장  웹 스토리지의 종류 웹 스토리지는 크게 두 가지 유형이 있습니다.sessionStroage : 브라우저 세션 동안만 데이터 유지localStorage : 브라우저를 닫아도 데이터 영구 보존 sessionStrorage sessionStrorage는 페이지의 세션이 유지되는 동안에만 데이터를 저장합니다. 사용자가 탭이나 창을 닫으면 데이터가 제거됩니다.   localStorage ..

이벤트란 ? 이벤트(event)는 웹 브라우저나 사용자가 실행하는 동작을 의미합니다.예로 사용자가 웹 문서에서 마우스를 클릭하거나 키보드의 키를 누르는 것, 웹 브라우저에서 웹 문서를 불러오는 것 등이 모두 이벤트에 해당합니다. JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하고 이에 따라 다양한 작업을 수행할 수 있습니다. 이벤트의 종류 1. 문서 로딩 이벤트 :웹 서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 문서를 웹 브라우저 창에 보여주는 것과 관련된 이벤트입니다. 이벤트 타입 :load : 웹 문서가 완전히 로딩이 끝났을 때unload : 문서를 벗어날 때abort : 문서가 완전히 로딩되기 전에 불러오기를 멈추었을 때error : 문서가 정확히 로딩되지 않았을 때..

1. Document.getElementsByName() 사용 See the Pen Untitled by 김현진 (@jbfiyipe-the-selector) on CodePen. HTML첫 번째 요소는 전체선택 체크박스 입니다. 이 체크박스를 클릭하면 checkAll 함수가 호출됩니다. 요소들은 각각 감자, 고구마, 호박 이라는 이름의 체크박스입니다. 모두 name을 동일하게 설정했습니다.JavaScript 함수 checkAllcheckAll 함수는 전체 선택 체크박스의 상태를 기반으로 나머지 체크박스들을 선택하거나 선택 해제합니다.document.getElementsByName('ani') : 'name' 속성이 'ani'인 모든 체크박스 요소를 가져옵니다. 이 메서드는 NodeList를 반환..

DOM 개요DOM은 HTML , XML 문서의 프로그래밍 인터페이스입니다.DOM은 문서를 노드와 객체로 표현하여, 웹 페이지를 스크립트 또는 프로그래밍 언어에서 사용할 수 있도록 연결시켜주는 역할을 합니다. 주요 특징 DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공합니다.DOM은 동적으로 문서 내용 , 구조 , 스타일을 변경할 수 있게 해줍니다.DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준입니다. DOM 트리DOM은 문서를 논리 트리로 표현합니다. 트리의 각 분기점을 "노드"라고 부르며 , 각 노드는 객체를 갖습니다.예) 이 HTML의 DOM 트리는 대략 다음과 같습니다. DOM 조작요소 선택DOM 조작의 첫 단계는 조작..

브라우저 객체 모델(Browser Object Model, BOM)은 웹 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체들의 모음입니다. BOM을 통해 개발자는 브라우저와 상호작용하고, 웹 페이지 외부의 브라우저 기능을 제어할 수 있습니다. 1. Window 객체Window 객체는 BOM의 핵심이며 브라우저 창을 나타냅니다. 모든 전역 JavaScript 객체 , 함수 , 변수 는 자동으로 Window 객체의 멤버가 됩니다. 주요 프로퍼티와 메서드 window.innerHeight , window.innerWidth : 브라우저 창의 내부 높이와 너비window,open() , window.close() : 새창 열기와 닫기window.alert() , window.prompt()..

1. 반응형 웹 디자인반응형 웹 디자인은 다양한 기기와 화면 크기에 맞춰 웹사이트의 레이아웃과 콘텐츠를 자동으로 조정하는 접근방식입니다. 이를 통해 사용자는 PC,태블릿,스마트폰 등 어떤 기기에서도 최적화된 경험을 할 수 있습니다. 주요 특징 :유연한 그리드 레이아웃유동적인 이미지와 미디어CSS 미디어 쿼리를 통한 스타일 조정 2. 뷰포트 (Viewport)뷰포트는 웹 페이지가 표시되는 기기의 화면 영역을 의미합니다. 반응형 웹 디자인에서 뷰포트 설정은 매우 중요합니다. 뷰포트 단위 :vw (viewport width) : 뷰포트 너비의 1% vh (viewport height) : 뷰포트 높이의 1%   3. 미디어 쿼리 (Media Queries)미디어 쿼리는 CSS에서 특정 조건에 따라 스타일을 적..

CSS 레이아웃은 HTML 요소들의 배치를 의미합니다. 웹 페이지에서 요소를 어떻게 배치할 것인지 결정하는 방법으로 주요한 레이아웃 기법으로는 float , position , flexbox , grid 가 있습니다.  Float 속성을 이용한 레이아웃float 속성을 사용하여 요소를 좌측이나 우측에 배치할 수 있습니다.left 로 설정하면 요소가 왼쪽에서 순서대로 배치되고 right 로 설정하면 오른쪽에서 순서대로 배치됩니다. Position 속성을 이용한 레이아웃position 속성을 사용하면 요소를 기본적인 흐름에서 벗어나 원하는 위치에 배치할 수 있습니다.static : 기본값. 원래 위치에 배치됨relative : 원래 위치에서 이동. 원래 자리 차지.absolute : 가장 가까운 포지셔닝 조..

박스 모델은 HTML 요소가 사각형 박스 형태로 구성되어 있는 개념으로 요소를 배치하는 데 기본이 됩니다. 구성 요소 :내용 (Content) : 요소 내부의 텍스트나 이미지패딩 (Padding) : 내용과 테두리 사이의 내부 여백테두리 (Border) : 패딩과 마진 사이의 경계선마진 (Margin) : 요소의 외부 여백 블록 요소와 인라인 요소블록 요소 :한 줄을 독립적으로 차지하며 수직으로 쌓입니다.너비와 높이를 지정할 수 있습니다.예 : ` , , ` 인라인 요소 :내용에 맞춰 공간을 차지하며 수평으로 배치됩니다.너비와 높이를 지정할 수 없으며 수평 여백만 적용됩니다.예 : ` , , ` 박스 모델 구성 요소크기 설정 : width , height 속성으로 콘텐츠 영역의 크기를 지정합니다.속성..