우디의 개발 블로그

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

react-native-swipe-list-view를 사용하면, 카카오톡 친구목록 리스트나, 채팅목록 리스트에 적용되어 있는 형태의 스와이프 리스트를 구현할 수 있습니다. 설치 npm install --save react-native-swipe-list-view // or yarn add react-native-swipe-list-view for ios cd ios pod instll 사용법 react-native-swipe-list-view를 사용하기 위해 아래와 같이 라이브러리를 불러옵니다. import {SwipeListView} from 'react-native-swipe-list-view'; SwipeListView 컴포넌트는 다음과 같이 사용할 수 있습니다. const App = () => {..

목차 기능정의 및 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() 함수에 todoElem이 만들어질 때, 더블 클릭에 대한 이벤트 리스너를 등록합니다. todoElem 요소에 더블 클릭 이벤트가 발생하면 콜백 함수로 onDbclickTodo()라는 함수가 호출됩니다. const paintTodos = () => { todoListElem.innerHTML = ''; //todoListElem 요소 안의 HTML 초기화 const allTodos..

React Native를 사용하여 모바일 앱을 개발 중에, 외부 라이브러리를 사용할 일이 있어서 안드로이드 React Native Module을 만들 던 중 에러가 발생하였다. 외부 라이브러리에서 자체적인 UI를 띄우기 위해 Activity 객체를 필요로 하였다. 해당 파라미터 위치에 reactApplicationContext.baseContext와 getReactApplicationContext()를 캐스팅해 보았지만, MainApplication cannot be cast to android.app.Activity라는 에러를 만났다. 해결방안 리액트 네이티브에서는 MainActivity 단 하나의 Activity가 있으며, 다음과 같이 MainActivity에서 static 함수를 만들어 activi..