정훈5

boardList.js더보기더보기더보기boardList.js 추가// 하나의 게시글 클릭 시 상세보기 화면 이동 처리 function postClickListeners(postElements) { console.log('1111111111'); for(let i = 0; i 글쓰기 페이지 이동 처리 writeButton.onclick = function() { location.href = "board-write.html"; }boardList.js 전체더보기더보기더보기boardList.js// 샘플 데이터 입력const sampleBoardList = [ { id: 1, title: "첫번째 개시글", ..

디자인 시안 확인 board-write.html : 비 로그인 시 로그인 페이지로 리다이렉션 처리 됨    : 파일 미리 보기 기능 구현   board-write.html 더보기board-write.html 글쓰기 화면 게시판 로그인 회원가입 글쓰기 by JS 제목 ..

board-list.html더보기board-list.html 게시판 로그인 회원가입 게시글 상세보기 By JS 번호 제목 ..

디자인 시안 확인 board-list.html   게시글이 없는 경우 (비로그인시), 게시글이 는 경우(로그인시)    header.js 더보기header// DOMContentLoaded 이벤트를 사용해 보자.window.document.addEventListener('DOMContentLoaded', function() { // DOM 요소를 가져오기 const boardMenu = window.document.getElementById('board'); const signInMenu = window.document.getElementById('signIn'); const signUpMenu = window.document.getElementById('sig..

signin.js 파일 생성sing-in.html 더보기sing-in 게시판 로그인 회원가입 로그인 by JS 아이디 ..

work_board_js 폴더 생성 vscode 실행 디자인 시안 확인 sing-up.html 파일임    sign-up.html 더보기sign-up 게시판 로그인 회원가입 회원가입 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 S..

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

학습 목표 1. AJAX에 대해 알아 보자 2. Fetch API란? 3. Fetch API 사용해보기 1. AJAX에 대해 알아 보자💡 AJAX (Asynchronous JavaScript and XML)AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술입니다전통적인 방식의 문제점:- 웹 페이지에서 데이터를 서버로 전송하면 새로운 페이지를 로드해야 했음.- 이로 인해 화면이 깜빡이거나, 데이터 양이 많을 경우 웹 사이트가 느려지는 문제가 발생함.AJAX의 장점:- 웹 페이지의 특정 부분만을 동적으로 업데이트하여 전체 페이지 리로드 없이 데이터를 갱신.- 사용자 경험이 향상되며, 서버 부하 감소로 웹 애플리케이션의 성능 개선 가능.기술적 세부 사항:- 원래 XMLHttpReques..