서론 프로젝트를 처음 실행할 때 자주 발생하는 에러이다. React Navigation을 사용할 때 발생하였다. React Navigation | React Navigation Routing and navigation for your React Native apps reactnavigation.org 발생 원인 1. npm으로 설치한 라이브러리의 문제 2. npm 문제 3. 라이브러리를 사용하기 위한 조건을 빼먹은 경우 ... 더 많은 경우가 있겠지만 경험한 내용인 위에 내용뿐이다. 해결 방법 기본 터미널에 npm install을 하게 되면 보통은 해결이 된다. npm install npm으로 설치한 라이브러리의 문제 라이브러리를 재 설치하거나, 서버와 애뮬레이터 모두를 재 부팅 npm 문제 1. npm..

Grid란? Flex가 한 방향 레이아웃 시스템(1차원)이라면 Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원)이다. Flex도 충분히 좋은 기술이지만, 좀 더 복잡한 레이아웃을 위해 CSS Grid를 사용할 수 있다. Grid의 구조 부모 요소와 자식 요소로 구분된다. 부모 요소를 Grid Container(그리드 컨테이너), 자식 요소를 Grid Item(그리드 아이템)라고 부른다. "부모(컨테이너)는 Grid의 영향을 받는 전체 공간을 의미하고, 설정된 속성에 따라 각각의 자식(아이템)들이 배치된다." 1 2 3 4 5 6 7 8 9 Grid의 속성 - 부모(컨테이너)에 적용하는 속성 - 자식(아이템)에 적용하는 속성 Grid 부모(컨테이너)에 적용하는 속성 grid 컨테이너 설정 displ..

Flex란? Flex(플렉스)는 Flexible box, Flexbox라고 불린다. Flex는 레이아웃 배치 전용 기능으로 고안되었다. Flex가 나오기 전 사용하던 float, inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능이 많다. Flex의 구조 부모 요소와 자식 요소로 구분된다. 부모 요소를 Flex Container(플렉스 컨테이너), 자식 요소를 Flex Item(플렉스 아이템)라고 부른다. "부모(컨테이너)는 Flex의 영향을 받는 전체 공간을 의미하고, 설정된 속성에 따라 각각의 자식(아이템)들이 배치된다." 1 2 3 4 5 Flex의 속성 - 부모(컨테이너)에 적용하는 속성 - 자식(아이템)에 적용하는 속성 Flex 부모(컨테이너)에 적용하는 속성 flex ..

결과 프로젝트 진행 중 발생한 문제 시뮬레이터 없이 Expo App으로 결과를 확인하는데 App 자체의 오류가 종종 발생했다. 오류 발생 시 어떤 부분에서 오류인지 자세히 알려주지 않는다. 웹(Web) 앱(App) 화면이 다르게 나오고, 안드로이드에서 이상 없던 화면이 Web에서는 오류가 발생한다 느낀 점 React-Native를 직접 사용해보면서 React와 많이 차이는 안난다고 느꼈다. 이론 수업보다는 확실히 직접 해보며 문제에 부딪히는일이 힘들지만 효과적임을 느꼈다. 회고 스스로에게 실망스러운 프로젝트였고 기간 약속 또한 지키지 못하였다. 가장 큰 원인은 내가 안일하게 진행을 했던것이고, 다른 원인은 이력서 작성 및 면접 준비, 백신 2차등의 상황이 있었다. 그래도 처음 앱(App)을 만들어보고 내..

결과 Timer의 시간과 Title(제목) 저장 기능을 만들었다. React-Native 컴포넌트인 Modal을 사용하여 만들었다. 오류 타이머 기록한 내용을 삭제 시 전체가 사라지는 오류 (해결) → 변수를 잘못 설정해주었다. 너비가 고정이 아니라 Title 길이에 따라 변경되는 오류 (해결) → 가장 바깥 tag에 CSS가 잘못 지정되어 있었다. 계획 expo AsyncStorage 기능으로 DB 기능 구현할 계획이다. ToDoList에 완료 버튼을 누르면 모든 스타일이 변경되는 문제를 해결할 예정이다.

결과 간단하게 ToDoList와 Timer 기능을 만들었다. 타이머의 시작, 멈춤 정지 기능을 구현했다. 이미지는 https://icons.expo.fyi/ 위 사이트에서 가져왔다. ToDos expo의 API 중 AsyncStorage를 사용하여 저장하고 있다. 완료 버튼과 삭제 버튼을 만들어 놓았는데, 삭제는 가능하나 완료 상태는 아직 구현하지 못하였다. const addToDo = () => { if (text === '') { return; } const newToDos = { ...toDos, [Date.now()]: { text, inToDos } }; setToDos(newToDos); saveToDos(newToDos); setText(''); }; const deleteToDo = asy..