💡 학습 목표 객체 리터럴 안에서 this 대한 개념을 반드시 알아야 한다.현재 객체 참조 개념 - 객체 리터럴 내에서의 this는 보통 객체 자신을 가리킵니다. 동적 바인딩이란 뭘까? this는 메서드가 호출되는 시점에 결정됩니다. 만약 메서드가 다른 객체의 컨텍스트에서 호출되면, this는 해당 객체를 가리키게 됩니다. 하지만 객체 리터럴 내에서의 this는 보통 객체 자신을 가리킵니다.this 를 바인딩하는 경우 객체 리터럴 안에서 메서드를 정의할 때, 메서드가 이벤트 핸들러로 등록되거나, 다른 함수로 전달될 경우, this가 원래 객체를 참조하지 않을 수 있습니다.예시 코드const myObject = { name: "Alice", greet: function() { co..
JavaScript/JS 활용
권한이 있는 경우 (본인 작성 글) 권한이 없는 경우 (다른 사용자 작성 글, 비로그인 시) 게시판 로그인 회원가입 상세보기 화면 by JS 제목 ..
디자인 시안 확인 board-write.html: 비 로그인 시 로그인 페이지로 리다이렉션 처리 됨: 파일 미리 보기 기능 구현 board-write.html 게시판 로그인 회원가입 글쓰기 by JS 제목 ..
디자인 시안 확인 board-list.html 게시글이 없는 경우 (비로그인시), 게시글이 는 경우(로그인시) 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"..
디자인 시안 확인 sing-in.html sign-in.html 게시판 로그인 회원가입 로그인 by JS 아이디 비밀번호 ..
디자인 시안 확인 sign-up.html 파일임 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 Ser..
💡 로컬스토리지(localStorage)와 세션스토리지(sessionStorage)둘 다 브라우저의 웹 스토리지(Web Storage) API에 속하는 기능으로, 사용자의 로컬 환경(즉, 브라우저)에 데이터를 저장하는 방법을 제공합니다. 이들은 쿠키와 비슷한 역할을 하지만, 용량이 더 크고 서버와의 통신 없이 클라이언트 측에 데이터를 저장할 수 있습니다. 로컬스토리지(localStorage) 특징데이터 지속성로컬스토리지에 저장된 데이터는 사용자가 브라우저를 닫거나 컴퓨터를 재부팅해도 삭제되지 않습니다. 명시적으로 데이터를 삭제하거나 코드로 제거하지 않는 한, 해당 데이터는 무기한으로 유지됩니다.데이터 용량로컬스토리지에 저장할 수 있는 데이터의 용량은 보통 브라우저마다 다르지만, 일반적으로 도메인당 ..
