개발자애오

디자인 시안 확인 sign-in.html 게시판 로그인 회원가입 로그인 by JS 아이디 비밀번호 로그인 ..

디자인 시안 확인   sign-up.html 게시판 로그인 회원가입 회원가입 by JS 아이디 중복확인 닉네임 ..

사전기반 지식 확인1. HTML (HyperText Markup Language)역할: 웹 페이지의 구조와 내용을 정의하는 마크업 언어. HTML 요소들은 웹 페이지의 다양한 부분들(텍스트, 이미지, 링크, 폼 등)을 정의하고 브라우저에 표시되는 방식에 영향을 준다.기본 구조: HTML 문서는 선언으로 시작하며, , , 등의 주요 태그로 구성된다.2. CSS (Cascading Style Sheets)역할: 웹 페이지의 시각적 스타일을 정의하는 언어. CSS를 사용하면 글꼴, 색상, 레이아웃, 애니메이션 등 웹 페이지의 외관을 지정할 수 있다.스타일링 방법: CSS는 HTML 파일 내의 태그, 외부 CSS 파일, 또는 인라인 스타일로 적용할 수 있다.CSS 파일 구조: .css 파일은 프로젝트의 스..

Visual Studio Code(VS Code)에서 웹 개발을 위한 실행 환경을 구성할 때, "Live Server" 플러그인을 사용할 예정이다. 이 플러그인은 정적인 웹 페이지를 실시간으로 확인할 수 있도록 해주며, 로컬 개발 환경에서 쉽게 웹 애플리케이션을 실행하고 테스트할 수 있는 환경을 제공한다.  Live Server 플러그인이란?Live Server는 VS Code에서 사용할 수 있는 확장 플러그인 중 하나로, 로컬 개발 환경에서 HTML, CSS, JavaScript로 구성된 웹 페이지를 실시간으로 미리보기 할 수 있게 해준다. 이 플러그인은 코드가 변경될 때마다 자동으로 브라우저를 새로 고침하여 개발 중인 웹 페이지의 최신 상태를 바로바로 확인할 수 있게 해준다.  Live Server의..

로컬스토리지(localStorage)와 세션스토리지(sessionStorage)는 둘 다 브라우저의 웹 스토리지(Web Storage) API에 속하는 기능으로, 사용자의 로컬 환경(즉, 브라우저)에 데이터를 저장하는 방법을 제공한다. 이들은 쿠키와 비슷한 역할을 하지만, 용량이 더 크고 서버와의 통신 없이 클라이언트 측에 데이터를 저장할 수 있다.    로컬스토리지(localStorage) 특징데이터 지속성로컬스토리지에 저장된 데이터는 사용자가 브라우저를 닫거나 컴퓨터를 재부팅해도 삭제되지 않는다. 명시적으로 데이터를 삭제하거나 코드로 제거하지 않는 한, 해당 데이터는 무기한으로 유지된다.데이터 용량로컬스토리지에 저장할 수 있는 데이터의 용량은 보통 브라우저마다 다르지만, 일반적으로 도메인당 약 5~1..

AJAXAJAX (Asynchronous JavaScript and XML)AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술이다.전통적인 방식의 문제점 - 웹 페이지에서 데이터를 서버로 전송하면 새로운 페이지를 로드해야 했다.- 이로 인해 화면이 깜빡이거나, 데이터 양이 많을 경우 웹 사이트가 느려지는 문제가 발생AJAX의 장점- 웹 페이지의 특정 부분만을 동적으로 업데이트하여 전체 페이지 리로드 없이 데이터 갱신 가능- 사용자 경험이 향상되며, 서버 부하 감소로 웹 애플리케이션의 성능 개선 가능기술적 세부 사항- 원래 XMLHttpRequest 객체를 이용하여 서버와 비동기 통신- 최근에는 더 간편한 fetch API가 많이 사용됨  Fatch API웹 브라우저에서 제공하는 인터..

Promise 타입자바스크립트 Promise는 비동기 작업을 처리하기 위한 객체이다. Promise는 어떤 작업의 결과를 반환하는 객체로서, 이를 통해 비동기적으로 실행되는 작업을 처리하고 그 결과를 콜백 함수 등을 이용해 처리할 수 있다. Promise는 총 세가지 상태를 갖는다. 대기(pending) : Promise 객체가 생성되었으나 아직 처리가 진행되지 않은 상태이행(fulfilled) : Promise 객체가 처리를 완료하여 결과를 반환한 상태거부(rejected) : Promise 객체가 처리를 실패하였거나 오류가 발생한 상태웹 브라우저 안에 자바스크립트 엔진은 싱글 스레드로 동작하며, 이벤트 루프를 통해 비동기 작업을 처리한다.  사전 기반 지식 - 자바스크립트 엔진(v8)JS 엔진 내부만..

prev next

심볼즈(Symbols)심볼즈(Symbols)는 문자나 기호를 의미한다. 웹 페이지에서 사용할 수 있는 다양한 문자나 기호가 있고, 이러한 문자나 기호는 특정 코드를 사용하여 웹 페이지에 표시할 수 있다. HTML 심볼 사이트https://www.htmlsymbols.xyz/heart-symbols HTML Symbols...www.htmlsymbols.xyz JavaScript에서 DOM(Document Object Model)을 통해 요소를 가져올 때 반환되는 객체 타입은 HTMLCollection, NodeList, Node 등이 있다. 이들은 각각 다르게 동작하며, 사용하는 메서드에 따라 달라질 수 있다. 1. HTMLCollection정의 : HTMLCollection은 HTML 문서에서 특정 기..

반복문을 활용한 리스트 생성 Render