[JavaScript] 27. JavaScript를 사용한 목록 페이지 만들기(1)  1. board-list.html 게시판 로그인 회원가입 게시글 상세보기 by JS 번호 제목 작성자 작성일 ..

[JavaScript] 26. JavaScript를 사용한 헤더 만들기  1. header.js// DOMContentLoaded 이벤트를 사용해보자.document.addEventListener('DOMContentLoaded',function(){ // DOM 요소를 가져오기 const boardMenu = document.getElementById('board'); const signInMenu = document.getElementById('signIn'); const signUpMenu = document.getElementById('signUp'); const authLinks = document.getElementById('authLinks'); // 로그인 ..

[JavaScript] 25. JavaScript를 사용한 로그인 만들기 (1) 1. sign-in.html 게시판 로그인 회원가입 로그인 by JS 아이디 비밀번호 ..

[JavaScript] 24. JavaScript를 사용한 회원 가입 만들기 (3)  1. sign-up.html 게시판 로그인 회원가입 회원가입 by JS 아이디 중복확인 닉네임 ..

[JavaScript] 23. JavaScript를 사용한 회원 가입 만들기 (2) 1. JavaScript를 사용하여 기능 만들기(1) 아이디 중복 확인 기능// 1. 변수의 선언과 초기화const inputs=document.querySelectorAll(".inputs");const checkIdBtn = document.getElementById("checkIdBtn");const signUpBtn = document.getElementById("signUpBtn");const toDay=new Date(); // 현재 날짜와 시간을 가져오는 객체// 로컬 스토리지에 접근해서, 사용자 정보를 가져오는 함수를 만들어보자.// localStorage

[JavaScript] 22. JavaScript를 사용한 회원 가입 만들기 (1) 1. 폴더 및 파일 구성 2. 기본 뼈대 만들기(1) sign-up.html 게시판 로그인 회원가입 회원가입 by JS 아이디 중..

[JavaScript] 20. 실행 환경 구축 1. Live Server 플러그인-Live Server 플러그인은 VS Code에서 사용할 수 있는 확장 플러그인 중 하나로, 로컬 개발 환경에서 HTML,CSS, JavaScript로 구성된 웹페이지를 실시간으로 미리보기 할 수 있게 해준다. 이 플러그인은 코드가 변경될 때마다 자동으로 브라우저를 새로고침하여, 개발 중인 웹 페이지의 최신 상태를 바로바로 확인할 수 있게 해준다.  2. CORS 문제의 개념CORS(Cross-Origin Resource Sharing) 문제는 웹 개발에서 흔히 겪는 보안 이슈 중 하나!이는 웹 페이지가 자신의 도메인이 아닌 다른 도메인의 리소스를 요청할 떄 흔히 발생하는 문제로, 웹브라우저의 보안 정책 때문에 발생하게 된..

[JavaScript] 19. 로컬 스토리지 1. 로컬 스토리지란?로컬 스토리지와 세션 스토리지 모두 브라우저의 웹 스토리지 API에 속하는 기능으로, 사용자의 로컬 환경에 데이터를 저장하는 방법을 제공한다. 이들은 쿠키와 비슷한 역할을 하지만, 용량이 더 크고 서버와의 통신 없이 클라이언트 측에 데이터를 저장할 수 있다.  2. 로컬 스토리지의 특징(1) 데이터 지속성: 로컬스토리지에 저장된 데이터는 사용자가 브라우저를 닫거나, 컴퓨터를 재부팅해도 삭제되지 않는다.(2) 데이터 용량: 로컬스토리지에 저장할 수 있는 데이터의 용량은 보통 브라우저마다 다르지만, 일반적으로 도메인 당 약 5~10MB 정도이다.(3) 데이터 접근성: 같은 도메인 내에서만 접근이 가능하다.(4) 데이터 형식: 로컬스토리지에 저..

[JavaScript] 18. AJAX와 Fetch 1. AJAX=>AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술이다! 2.  Ferch API(1) Fetch API의 개 3. 시나리오 코드(1-1) JSON PlaceHolder를 출력해보기 통신 요청   (1-2) await/async를 통해 출력해보기 통신 요청   (2) 응답 주고 받기 통신 요청 통신 요청

[JavaScript] 17. Promise 타입 1. Promise 타입의 이해(1) Promise 타입의 개념(2) Promise 타입의 3가지 상태대기(pending)이행(fulfilled)거부(rejected)*비동기 통신:*웹 브라우저=일종의 해석기!웹 브라우저 내부에는 자바스크립트 엔진이 존재하며, 이는 싱글 스레드로 동작한다.메모리 힙(Memory Heap) 데이터를 임시 저장하는 곳콜 스택(Call Stack) 2. Promise 타입 선언과 활용(1) async (2) await (3) 명시적 체인 (Explicit Chaining)  3. 시나리오 코드(1) 커피 주문하기 Promise Callback Test   (2) 소주 주문하기 -> 재고 소진 메세지 Promis..