분류 전체보기
-
[todo_app_10] 디스크에서 할일목록 관리하기 3프로젝트/[react]todo_app 2018. 5. 26. 13:50
json으로 저장된 todo목록을 매핑해준다. {Object.values(toDos) .reverse() .map(toDo => ( ))} propType을 체크해주자 static propTypes = { text: PropTypes.string.isRequired, isCompleted: PropTypes.bool.isRequired, deleteToDo: PropTypes.func.isRequired, id: PropTypes.string.isRequired, uncompleteToDo: PropTypes.func.isRequired, completeToDo: PropTypes.func.isRequired, updateToDo: PropTypes.func.isRequired }; prop을 state..
-
[todo_app_9] 디스크에서 할일목록 관리하기 2프로젝트/[react]todo_app 2018. 5. 26. 13:44
저장하는 함수를 생성하기 todo를 state에서 가져오고, todo가 비어있지 않다면 무언가를 해야함. _addToDo = () => { const { newToDo } = this.state; if (newToDo !== "") { this.setState({newToDo: ""}); }); } }; 뭔가를 쓰고, 리턴하면 인풋창이 비워지게된다. id로 입력되고, 그 안에 텍스트, isCompleted, date등이 저장되게 모델링하고싶음. _addToDo = () => { const { newToDo } = this.state; if (newToDo !== "") { this.setState(prevState => { const ID = uuidv1(); const newToDoObject = { ..
-
[todo_app_8] 디스크에서 할일목록 관리하기 1프로젝트/[react]todo_app 2018. 5. 26. 13:44
디스크에서 todo리스트를 관리해야한다. import { AppLoading } from "expo"; state = { newToDo: "", loadedToDos: false, toDos: {} }; if (!loadedToDos) { return ; } todo가 로딩이 되지 않으면 로딩화면이 뜬다. componentDidMount = () => { this._loadToDos(); }; 로딩이 끝나면, loadedToDos를 True로 바꿔줄 _loadToDos()함수가 필요하다.
-
[todo_app_7] todo목록 수정프로젝트/[react]todo_app 2018. 5. 20. 21:37
app.js에서 todo목록을 관리, 컨트롤 하고 있다todo.js에서 수정할 때, app.js에서 props를 받아오고 싶음 => 그래야수정할때 자연스럽게 연출됨 수정할 때 텍스트인풋이 떠야하고, 그 안에 value가 있어야함. todo.js const { text } = this.props; { isEditing ? : ( { text } )} app.js ) 편집을 했을 때, 해당 텍스트를 복사해서 state에 보내기todo.jsstate = { toDoValue: ' ' }; 편집중일때는 textinput, 아닐때는 text{ isEditing ? : ( { text } )} 스타일 지정 input: { marginVertical: 15, width: width/2, paddingBottom: 5..
-
근황, 티스토리 new 색 바꾸기오늘뭐했지 2018. 5. 17. 21:32
정보처리기사 필기를 보고, 바로 컴활 1급+2급 실기를 준비하고있는 요즘.거의 하루종일 자격증 공부만 하느라 새 글을 못쓰는데, 뭔가 블로그에 new 표시가 없으면 불안해서 이전에 비공개로 포스팅해놓았던 글들을 조금씩 공개로 바꾸고 있다. 그런데 몇일전부터 new 표시가 빨간색에서 회색이 됐다! ㅠㅠ빨간색이 좋은데.... 검색도 해보고, 코드도 만져본 결과, 빨간 new를 다시 만날 수 있게 되었다. 스킨편집 -> html 편집에서 $('img[alt="N"]').each(function(){ $(this).replaceWith('' ); }); 마지막에 이 코드를 넣어주면 된다! new_icon_1.gif 가 회색이고new_icon_5.gif 가 빨간색이던데... 왜 1로 바뀐거지 ㅠㅠ +) repla..
-
[todo_app_6] isEditing?프로젝트/[react]todo_app 2018. 5. 15. 13:42
수정, 삭제 스타일 수정중인지 아닌지 여부를 판단해서 스타일을 표시할거라 isEditing이 필요함 render(){ const { isEditing } = this.state; 수정, 삭제를 할 수 있는 연필, 엑스표 모양 이모지를 넣자column안에서 관리할거임 {/* column*/} todo ) {isEditing ? {/*수정할 때 모드*/} ✅ : {/*수정하지 않을 때 때 모드*/} ✏️ ❌ } 스타일을 준다const styles = StyleSheet.create({ container: { width: width - 50, borderBottomColor: "#bbb", borderBottomWidth: StyleSheet.hairlineWidth, alignItems: "center", ..
-
[todo_app_5] ui 마무리프로젝트/[react]todo_app 2018. 5. 15. 13:42
isEditing? ToDo앱은 두 개의 states가 있다수정할 때수정하지 않을 때 두 개의 state를 만들고 그 사이를 왔다갔다 해야함 state = { isEditing: false }기본값은 false (수정하기를 누르면 true가 되도록) 다시 ui작업... 할일 목록을 담을 컨테이너 스타일터치 가능한 동그라미 import React, {Component} from 'react';import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native'; const { width, height } = Dimensions.get("window"); export default class ToDo extends Compone..
-
[todo_app_4] 스크롤이 가능한 리스트프로젝트/[react]todo_app 2018. 5. 15. 13:41
ToDo.js 리스트를 만들어서, 스크롤 할 수 있게 코드를 작성하려고 한다.ToDo.js 파일로 빼서 작업import React, {Component} from 'react';import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; export default class ToDo extends Component{ //stateful component, 수정되야하니까 render(){ return ( ToDo ) }} const styles = StyleSheet.create({ }) App.js 에 ToDo 컴포넌트 import 하기 import ToDo from './ToDo'; 스크롤이 가능하게 되었다. 가운데 정렬 ! toDo..