react native앱 영화 UI그리기 (+ react native 네비게이터 제작) 네비게이터는 navigation이란 폴더를 만들어 root.jsx안에 bottom Taps navigater와 native Stack Navigater를 합쳤다. https://reactnavigation.org/docs/native-stack-navigator (NativeStack) https://reactnavigation.org/docs/bottom-tab-navigator (Bottom Tabs) 이 두개를 사용했는데 사용하기 전에 먼저 https://reactnavigation.org/docs/getting-started (아래 설치의 링크) npm install @react-navigation/native..
react native todo 수정,삭제 삭제 alert로 취소,삭제 버튼을 준 후 삭제를 누르면 실행 alert문법은 Alert.alert("제목", "내용", [{ text:"버튼1", style: "3가지" }, { text:"버튼2", style: "3가지" }]); 아래 코드에서 onPress로 todo.id를 매개변수로 준다. 매개변수를 id로 받아서 filter를 이용해 todos안의 todo.id와 같지 않은 것만 출력 const deleteTodo = (id) => { //alert쓰는 방식 제목,내용을 쓰고 버튼은 배열안에 객체를 넣어서 씀 style로 세가지 모양가능 Alert.alert("Todo 삭제", "정말 삭제하시겠습니까?", [ { text: "취소", style: "ca..
react native styledText에 스타일 컴포넌트로 touchableopacity속성을 주고 클릭시 onPress로 category가 바뀌고 카테고리에따라 styledText박스 style이 바뀌게 설정 setCategory("ct")} style={{ backgroundColor: category === "ct" ? "blue" : "#ccc" }} > 그리고 각 category에 따라 각각 다른 내용이 나오게 설정 했다. {todos .filter((t) => { return t.category === category; }) .map((todo) => { return ( {todo.text} setDone(todo.id)}> );
2023년 새해가 되었다. 새해가 되면서 새롭게 한 부분, 못 한 부분, 게을렀던 부분들을 한번 되돌아 봤다. 새해에는 전처럼 유지해야 할 부분, 더 발전해야 할 부분을 토대로 계획을 짜 2022년보다 빠른 성장을 할 수 있는 환경이 되게 만드려고 한다. 좀 더 체계적으로 자신만의 규칙을 정해 지키면서 생활하면 일정한 발전을 할 수 있지 않을까 생각한다.
리액트 네이티브 Todolist 메인화면 만들기 기본적으로 Text, TextInput, View등 사용할 태그들은 모두 import해온 후 사용해야 한다. css스타일링 방법엔 inline styling StyleSheet Styled Component Tailwind 등이 있다. 이중에 styled component를 사용했는데 react native에서는 기본 사용했던 styled component가 아니라 emotion native (https://emotion.sh/docs/@emotion/native)를 사용하는게 편하고 호환이 잘 된다. 설치 후 npm install @emotion/react @emotion/native import import styled, { css } from '@em..
리액트 네이티브 처음 설치는 편하게 expo로 시작하는게 좋다. expo에서 project를 만들고 화면에 나와있는 순서대로 하면 좋다. 1. 터미널로 npm install --global eas-cli 를 글로벌로 설치해 주고 2. npx create-expo-app name 원하는 위치에 expo에 만든 프로젝트 이름으로 만들어 준다. 3. init은 파일 내부 터미널에서 사용해주면 편리하게 자동으로 배포가 가능하다. 그 후 프로젝트를 제작하면서 어떻게 나오는지 확인해보려면 터미널에서 npm start혹은 yarn start를 누르면 qr이 나오게 되는데 휴대폰에 expo go설치 후 qr을 찍으면 볼 수 있고 실시간으로 수정사항도 반영된다.
이번 프로젝트를 하면서 새롭게 배운 부분도 많지만 부족했던 부분도 알게 됐다. axios, thunk등 아직 혼자 완성하기에 어려운 부분들은 먼저 공부하고 새로 시작하는 리액트네이티브 공부를 나가는게 좋을 것 같다.
발표준비 발표는 내가 하기로 했고 팀 소개, 팀 목표, 협업 방식, 프로젝트 이름, 목적, 와이어프레임, 페이지 설명, 폴더 구조설명, 데이터 베이스 설계, API 명세, 각자 인상 깊었던 코드, 소감등 정리해서 발표할 예정이다.
