우디의 개발 블로그

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

React Native에서 제공하는 코어 컴포넌트인 , 를 사용하여 이미지를 로드할 수 있다. 하지만, 이미지 여러 개를 한 번에 로드하거나 이미지 자체가 큰 이미지 일 때, ios는 문제가 없었지만 android에서는 이미지가 로드되지 않은 경우가 발생하였다. 확인 결과 ios에서는 기본적으로 큰 이미지가 들어가면 자동으로 리사이징을 해주어서 문제가 없지만, android는 리사이징이 자동으로 잘 안되는 것 같다. android에서의 컴포넌트는 props로 resizeMethod를 갖는다. resizeMethod - android only resizeMethod 속성에 대한 value로 가질 수 있는 값은 다음과 같습니다. auto : 휴리스틱(대충 짐작으로)하게 resize와 scale 중 선택 re..

목차 기능정의 및 HTML/CSS 할 일 추가하기 할 일 목록에서 할 일 삭제, 완료 처리 구현 할 일 수정하기 전체 완료 처리 및 남은 할 일 개수 하단 버튼 기능 구현 1. 입력에 대한 이벤트 리스너 등록하기 일단 할 일을 추가하기 위해서는 요소로부터 이벤트 리스너를 등록하여, 이벤트를 캐치 후, 입력받은 데이터를 배열에 순차적으로 담아주어야 합니다. const todoInputElem = document.querySelector('.todo-input'); let todos = []; let id = 0; const init = () => { todoInputElem.addEventListener('keypress', (e) =>{ if( e.key === 'Enter' ){ appendTodos(..

목차 기능정의 및 HTML/CSS 할 일 추가하기 할 일 목록에서 할 일 삭제, 완료 처리 구현 할 일 수정하기 전체 완료 처리 및 남은 할 일 개수 하단 버튼 기능 구현 바닐라 자바스크립트를 이용해 todo-list를 만들어 보았습니다. 투두리스트의 동작 방식은 TodoMVC-VanilaJS 와 같이 작동하도록 개발하였으며, 다음과 같은 형태입니다. 1. 기능 정의하기 전체 선택 해당 버튼을 누르면 모든 할 일이 완료된 상태로 바뀜 이미 모두 완료된 상태일 때, 누르면 전체 할 일 리스트가 완료되지 않은 상태로 변함 전체 완료되지 않음 상태 일 때는 회색으로 표시 전체 완료된 상태는 초록색으로 표시 할 일 입력 사용자로부터 입력을 받음 Enter Key를 누르면 할 일이 추가됨 할 일이 추가된 이후, ..

Intersection Observer API는 타깃 요소와 상위 요소 또는 최상위 document 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다. Intersection Observer API 필요성 페이지가 스크롤되는 도중에 발생하는 이미지나 다른 콘텐츠의 지연 로딩. 무한 스크롤(infinite-scroll) 구현 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고 사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션 수행 여부 Intersection Observer API는 감시하고자 하는 요소가 다른 요소(viewport)에 들어가거나 나갈 때 또는 요청한 부분만큼 요소의 교차 부분이 변경될 때마다 실행될 콜백 함수를 등록할 수 있게 한다. Intersectio..

회원가입 시에 사용되는 비밀번호 유효성 검사 기능을 구현해보자. 구현할 비밀번호 유효성 검사 항목 영문 소문자를 사용 여부 영문 대문자를 사용 여부 숫자를 사용여부 특수문자 사용 여부 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 ..