💡 학습 목표 객체 리터럴 안에서 this 대한 개념을 반드시 알아야 한다.현재 객체 참조 개념 - 객체 리터럴 내에서의 this는 보통 객체 자신을 가리킵니다. 동적 바인딩이란 뭘까? this는 메서드가 호출되는 시점에 결정됩니다. 만약 메서드가 다른 객체의 컨텍스트에서 호출되면, this는 해당 객체를 가리키게 됩니다. 하지만 객체 리터럴 내에서의 this는 보통 객체 자신을 가리킵니다.this 를 바인딩하는 경우 객체 리터럴 안에서 메서드를 정의할 때, 메서드가 이벤트 핸들러로 등록되거나, 다른 함수로 전달될 경우, this가 원래 객체를 참조하지 않을 수 있습니다.  예시 코드 const myObject = { name: "Alice", greet: function() { ..

권한이 있는 경우 (본인 작성 글) 권한이 없는 경우 (다른 사용자 작성 글, 비로그인 시)  게시판 로그인 회원가입 상세보기 화면 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) 특징데이터 지속성로컬스토리지에 저장된 데이터는 사용자가 브라우저를 닫거나 컴퓨터를 재부팅해도 삭제되지 않습니다. 명시적으로 데이터를 삭제하거나 코드로 제거하지 않는 한, 해당 데이터는 무기한으로 유지됩니다.데이터 용량로컬스토리지에 저장할 수 있는 데이터의 용량은 보통 브라우저마다 다르지만, 일반적으로 도메인당 ..

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

💡 학습 목표1. Promise 타입에 대해 알아 보자.2. Promise 타입 선언과 활용1. Promise 타입에 대해 알아 보자.자바스크립트 Promise는 비동기 작업을 처리하기 위한 객체입니다. Promise는 어떤 작업의 결과를 반환하는 객체로서, 이를 통해 비동기적으로 실행되는 작업을 처리하고 그 결과를 콜백 함수 등을 이용해 처리할 수 있습니다.Promise는 총 3가지 상태를 갖습니다.대기(pending): Promise 객체가 생성되었으나 아직 처리가 진행되지 않은 상태입니다.이행(fulfilled): Promise 객체가 처리를 완료하여 결과를 반환한 상태입니다.거부(rejected): Promise 객체가 처리를 실패하였거나 오류가 발생한 상태입니다. 💡 잠깐! 웹 브라우저 안에..

💡 학습 목표1. HTML 및 CSS 설정하기2. 이벤트 리스너 등록 및 핸들러 처리3. 무한 슬라이더를 위한 코드 작성하기  prev next

학습 목표 1. 심볼즈(Symbols)에 대해 알아 보자 2. 자바 스크립트로 토글 기능 만들어 보기  1. 심볼즈(Symbols)에 대해 알아 보자 심볼즈(Symbols)"는 문자나 기호를 의미합니다. 웹 페이지에서 사용할 수 있는 다양한 문자나 기호가 있고, 이러한 문자나 기호는 특정 코드를 사용하여 웹 페이지에 표시할 수 있습니다.  HTML SymbolsThe following table shows Unicode symbol, HTML code, CSS code, and official HTML name for the characters categorized under heart symbols.https://www.htmlsymbols.xyz/heart-symbols  시나리오 코드 1 단계 ​ ..

💡 학습 목표1. Flexible Box(flexbox)를 활용해서 HTML 요소를 만들어 보자.2. 반복문을 사용한 LIST 만들어 보기   반복문을 활용한 리스트 생성 Render

💡 학습 목표문서에서 form 에 접근 방법onsubmit 에 대한 이해validation에 이해 💡 학습 목표1. 문서에서 form 에 접근 방법2. onsubmit 에 대한 이해3. validation에 이해시나리오 코드 1  배송지입력 이름 : 연락처 : ..

💡 학습 목표1. addEventListener() 메서드의 활용2. 이벤트 위임(Event Delegation)와 버블링(Bubbling)addEventListener() 메서드의 활용 - 아이템 추가, 토글 기능 만들기 EventListener를 사용한 요소 추가, 삭제 수정, 토글 만들기 아이템 추가 리스트 토글 아이템 1 수정하기 삭제하기 2. 이벤트 위임(Event Delegation)이벤트 리스너 를 하위 요소 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는 패턴입니다. 이 패..

💡 학습 목표1. HTML 요소에 이벤트 등록하기2. 이벤트 등록 및 이벤트 핸들러 처리 ( C R U D )1. HTML 요소에 이벤트 등록하기자바스크립트 이벤트는 웹 페이지에서 발생하는 다양한 동작이나 발생 상황을 나타냅니다. 이런 이벤트를 활용하여 사용자의 행동에 반응하는 동적인 웹 페이지를 만들 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때 메시지가 나타나게 하거나, 마우스를 웹 페이지의 특정 부분에 올렸을 때 스타일이 변경되게 할 수 있습니다. 이벤트를 활용하려면, 먼저 HTML 요소에 이벤트를 등록해야 합니다. 이벤트 등록에 대표적인 3가지 방식Inline Event Handler : HTML 요소 내부에 직접 이벤트를 등록합니다.Element Property : 자바스크립트에서 HT..

💡 학습 목표1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자2. 연습 문제 - 오류 해결1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어집니다HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성합니다.CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성합니다.렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성합니다.레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산합니다.페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변환하여 화면..

💡 학습 목표1. BOM 에 대하 알아 보자2. Window Object 와 하위 객체들에 대해 알아 보자1. BOM 에 대하 알아 보자JavaScript에서 BOM (Browser Object Model)은 웹 브라우저와 상호작용하기 위한 객체 모델입니다. BOM을 사용하면 JavaScript가 브라우저 창 및 브라우저의 기타 요소와 상호작용할 수 있습니다. BOM은 DOM(Document Object Model)과는 달리 표준화되지 않았기 때문에 브라우저마다 차이가 있을 수 있습니다.💡 정리 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화 시켜 놓은 것을 의미합니다. 추가 적으로 BOM은 하나의 객체만을 가리키는 것이 아니라 브라우저와 관련된 여러 객체들을 포함하며 그 구조..

💡 학습 목표1. DOM 이란 무엇일까?2. JS로 DOM 조작해보기3. DOM에 접근할 수 있는 5가지 방법4. 연습 문제 풀어보기 브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하겠지만 그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 사용해야 합니다. 1. DOM 이란 무엇일까? (문서 객체 모델)문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 ..

💡 학습 목표1. 함수에 선언과 사용2. 함수 표현식이란?3. 즉시 실행 함수란?4. 화살표 함수란?1. 함수에 선언과 사용 index7.html 파일 입니다. 2. 함수 표현식이란?자바스크립트에서 "함수 표현식"은 함수를 변수에 할당하는 방식으로 정의하는 것을 의미합니다. 함수 표현식은 함수를 값으로 다루는 함수형 프로그래밍의 개념 중 하나이며, 매우 유용한 패턴 중 하나입니다.💡 함수 자체가 식(Expression) 이기 때문에 함수를 변수에 할당하거나 함수의 매개변수로 사용할 수 도 있음 (일급 객체)  index8.html 파일 입니다.

💡 학습 목표1. 객체에 대한 이해와 사용2. 배열에 대한 이해와 사용1. 객체에 대한 이해와 사용 객체는 프로그래밍에서 데이터와 그 데이터를 다루는 동작(메서드)을 함께 묶어서 표현하는 자료구조입니다. 내장 객체 (Built-in Objects)내장 객체는 JavaScript 언어 자체에 내장되어 제공되는 객체들을 말합니다. 이러한 객체들은 JavaScript 프로그래밍에서 기본적인 기능을 제공하며, 모든 JavaScript 환경에서 사용할 수 있습니다. 몇 가지 주요 내장 객체에는 다음과 같은 것들이 있습니다.Object: 모든 객체의 기본이 되는 객체입니다. 다른 모든 객체는 이 객체를 상속 받습니다.Array: 배열을 다루는 데 사용되며, 순서가 있는 여러 값을 저장할 수 있습니다.String:..

💡 학습 목표1. 자료형에 대한 이해2. 연산자에 대해 알아 보자3. var 키워드와 호이스팅에 대한 이해4. ES6 와 let, const 키워드1. 자료형에 대한 이해자료형이란 - 컴퓨터가 처리하는 자료에 형태 💡 자바스크립트 자료형의 특징 느슨한 자료형 체크(weak datatype check) 자바스크립트는 미리 변수의 자료형을 지정하지 않음 변수를 지정하고 원하는 값을 할당만 하면 됨숫자형정수 - 소수점이 없는 숫자 , 표현 방법에 따라 8진수, 10진수, 16진수실수 - 소수점이 있는 숫자, (! 자바스크립트에서는 정밀한 실수 계산을 못 함)무한 소수(infinite decimal)란, 소수점 이하의 자리수가 무한히 반복되는 소수를 말합니다. 예를 들어, 1/3을 소수로 나타내면 0.333..

💡 기본 개념자바스크립트(JavaScript)는 웹 브라우저에서 동작하는 스크립트 언어 중 하나입니다. HTML, CSS와 함께 웹 프로그래밍을 할 수 있도록 고안되었으며, 다양한 용도로 사용됩니다.자바스크립트는 기본적으로 클라이언트 측에서 실행되는 스크립트 언어로, 웹 페이지를 동적으로 만들고, 사용자와 상호 작용하는 기능을 구현할 수 있습니다. 예를 들어, HTML 요소의 속성 값을 변경하거나, 이벤트 핸들러를 등록 하여 사용자의 동작에 따라 새로운 기능을 수행하도록 할 수 있습니다. 또한, AJAX를 이용하여 서버와 비동기적으로 데이터를 주고받는 기능을 구현할 수도 있습니다.자바스크립트는 브라우저를 제어하는 데 주로 사용되지만, Node.js와 같은 서버 측 프레임워크를 이용하여 서버 측에서도 사..