웹 개발자 도전기

RESTful은 REST 아키텍처 스타일을 따르는 웹 서비스 입니다.REST는 HTTP 프로토콜을 기반으로 웹 서비스의 설계 원칙을 정의하며, RESTful 웹 서비스는 이러한 원칙을 준수하여 구현됩니다. RESTful 웹 서비스는 웹의 기존 기능을 최대한 활용하는 데 중점을 둡니다.  REST의 주요 원칙자원(Resource)모든 것은 자원으로 간주됩니다.자원은 URI(Uniform Resource Identifier)로 고유하게 식별됩니다.예 : `https://api.example.com/users/123`는 ID가 123인 사용자 자원입니다.표현(Representation)자원은 JSON , XML , HTML 등 다양한 형태로 표현될 수 있습니다.클라이언트와 서버는 자원의 표현을 주고받습니다.상..

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 동기 처리 방식과 비동기 처리 방식동기 처리 방식동기 처리 방식은 코드가 작성된 순서대로 실행되는 방식 입니다. 자바스크립트 엔진은 단일 콜 스택을 사용하여 순차적으로 코드를 실행합니다. 즉, 한 함수가 실행되고 있는 동안에는 다른 함수가 실행될 수 없습니다.   비동기 처리 방식비동기 처리 방식은 현재 실행 중인 작업이 완료되지 않아도 다음 작업을 즉시 실행할 수 있는 방식입니다.이는 블로킹 현상을 방지하고 애플리케이션의 반응성을 높여줍니다.  2. 자바스크립트 비동기 처리 방식자바스크립트에서는 비동기 처리를 위한 여러 가지 방식이 있습니다.콜백 함수 기반 비동기 처리Promise 기반 비동기 처리async / await 기반 비동기 처리  2-1 콜백 함수 기반 비동기 처리콜백 함수는 특정 작업이..

1. Promise 란 ?Promise 는 비동기 작업의 완료 또는 실패를 나타내는 객체 입니다. Promise 는 세 가지 상태를 가질 수 있습니다.대기(Pending) : 작업이 진행 중인 상태이행(Fulfilled) : 작업이 성공적으로 완료된 상태거부(Rejected) : 작업이 실패한 상태  2. async / await 란 ?async 와 await 는 Promise 를 보다 직관적으로 사용할 수 있게 해주는 구문입니다. asyncasync 키워드를 함수 앞에 붙이면 그 함수는 항상 Promise를 반환합니다. awaitawait 키워드는 Promise 가 해결될 때까지 기다립니다.await 는 반드시 async 함수 내에서만 사용해야 합니다.  3. async / await 와 Promise..