우디의 개발 블로그

안녕하세요. 개발자 우디예요. 해당 블로그 포스팅은 개발과 관련된 내용을 정리하는 과정에서 작성되었습니다. 웹 프로젝트를 위한 Firebase 사용법 - (1) Firebase 시작하기 개요 Firebase를 사용한 웹 개발에 대해 알아보려고 합니다. 이번 내용은 Firebase 프로젝트를 어떻게 생성하고 웹 서비스에 액세스 할 수 있는 방법에 대해 알아봅시다. 1. Firebase 프로젝트 만들기 firebase를 사용하려면 우선 firebase에서 프로젝트를 생성해야 합니다. 다음 이미지 순서대로 따라 하시면 파이어베이스 프로젝트를 생성하실 수 있습니다😄 firebase 홈페이지 =>https://www.firebase.google.com 저는 학습을 위한 프로젝트로 별도로 구글 애널리틱스를 사용하지..

목차 기능정의 및 HTML/CSS 할 일 추가하기 할 일 목록에서 할 일 삭제, 완료 처리 구현 할 일 수정하기 전체 완료 처리 및 남은 할 일 개수 하단 버튼 기능 구현 1. 각각의 버튼에 이벤트 리스너 등록하기 이번 챕터에서는 투두리스트 하단의 All, Active, Completed, Completed Clear 버튼의 기능을 구현하겠습니다. 각각의 버튼 역할을 다음과 같습니다. All : 전체 투두리스트를 보여줌. Active : 완료되지 않은 할 일 리스트를 보여줌. Completed : 완료된 할 일 리스트를 보여줌. Completed Clear : 완료된 할 일 리스트를 전체 투두리스트에서 삭제함. 우선 todos.js 파일 상단에 All, Active, Completed, Completed..

목차 기능정의 및 HTML/CSS 할 일 추가하기 할 일 목록에서 할 일 삭제, 완료 처리 구현 할 일 수정하기 전체 완료 처리 및 남은 할 일 개수 하단 버튼 기능 구현 이번 챕터에서는 해야 할 일들을 전체 완료 처리 및 남은 할 일 개수를 표시하는 부분을 구현하도록 하겠습니다. 1. todos 전체 완료 처리 우선 todos.js 상단에 전체 완료 처리를 위해 만들어둔 버튼을 querySelector를 통해 checkAllBtnElem이라 선언하겠습니다. 그 다음, init() 함수 안에서 해당 버튼에 대한 클릭 이벤트 리스너를 등록하고, 콜백 함수로 onClickCompleteAll() 이라는 함수를 호출하겠습니다. const completeAllBtnElem = document.querySelec..

목차 기능정의 및 HTML/CSS 할 일 추가하기 할 일 목록에서 할 일 삭제, 완료 처리 구현 할 일 수정하기 전체 완료 처리 및 남은 할 일 개수 하단 버튼 기능 구현 1. 할 일 목록에서 할 일 삭제 우리는 이전에 paintTodos() 함수를 통해 HTML을 그렸습니다. 이때, 각각의 할 일들은 'todo-item' 클래스 네임을 가지는 li 요소로 만들어지며, 그 안에 'delBtn' 클래스 네임을 가지는 button 요소가 존재합니다. 각각의 'todo-item'이 만들어질 때마다, 해당 'delBtn'에 'click'에 대한 이벤트 리스너를 등록하여 삭제 기능이 동작하도록 하였습니다. const paintTodos = () => { todoListElem.innerHTML = ''; //to..

회원가입 시에 사용되는 비밀번호 유효성 검사 기능을 구현해보자. 구현할 비밀번호 유효성 검사 항목 영문 소문자를 사용 여부 영문 대문자를 사용 여부 숫자를 사용여부 특수문자 사용 여부 8자 이상 유효성 검사 항목에 대한 각각의 함수 만들기 const isValidLowercase = (password) => { return password.search(/[a-z]/g) >= 0; } const isValidUppercase = (password) => { return password.search(/[A-Z]/g) >= 0; } const isValidNumber = (password) => { return password.search(/[0-9]/g) >= 0; } const isValidSpecial ..

이벤트 객체의 메서드인 Event.stopPropagation() 를 이해하기 위해 일단 이벤트 버블링에 대해 알아보자. 버블링이란? 버블링이란 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하는 것을 말하며, 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 간단한 예시를 통해 버블링이 어떻게 발생하는지 알아보자. FORM DIV P 가장 안쪽의 요소를 클릭하면 다음과 같은 순서로 동작이 나타난다. 에 할당된 onclick 핸들러가 동작함. 에 할당된 onclick 핸들러가 동작함. 에 할당된 onclick 핸들러가 동작함. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러..