웹 개발자 도전기

컬럼 정보 확인desc 테이블명;   컬럼 추가alter table 테이블명 add 컬럼명 자료형(길이) 제약조건;  컬럼 삭제alter table 테이블명 drop 컬럼명;  컬럼명 변경 + 자료형 변경alter table 테이블명 change 컬럼명 변경할컬럼명 바꿀자료형(길이) 제약조건; name varchar(30) ==> fullName varchar(50)  컬럼 자료형 변경alter table 테이블명 modify 컬럼명 자료형(길이) 제약조건; userid의 varchar(20) == > varchar(50)

데이터베이스를 먼저 생성합니다. 생성한 데이터베이스를 사용하여 그 안에 테이블을 만들어줍니다. 테이블 생성 idx , age , userid...등은 컬럼명으로  JavaScript 에서 변수명이라 생각하면 이해하기 쉽습니다.MySQL 에서는 대 소문자를 구분하지 않습니다. 1. int (정수형)int는 정수값(숫자)을 저장할 때 사용합니다.음수 , 양수 , 0 등 숫자 데이터를 저장하는 데 적합합니다.예를 들어, 사용자 ID, 나이,점수,카운트 등 숫자 데이터를 다룰 때 사용합니다.예시 : idx int auto_increment primary key 여기서 auto_increment 란 숫자 자동 증가 입니다. idx에 값을 주지않아도 자동으로 하나씩 추가할때마다 +1 씩 증가합니다. primary ..

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()..