ReactNative15 [WIL] 내일배움캠프 열한 번째 주_React Native 프로젝트 결과물 정리 프로젝트 소개 앱 이름 : MBTI Types 앱 설명 : MBTI 타입에 따라 의견을 나눌 수 있는 커뮤니티성 React Native App 커뮤니티: MBTI 타입과 관련된 게시글을 작성 후 댓글과 좋아요 버튼을 통해 공감을 받을 수 있고, MBTI필터를 통해서, 해당 MBTI의 글 만을 볼 수 있습니다. ex) 카테고리 [ISFP]: 약속 취소되면 오히려 좋은 거 다들 공감하시나요?ㅎㅎ 상황문답: 특정 상황을 제시하고 댓글에 각 MBTI 별 반응을 모아서 볼 수 있다. ex) 친구에게 “네 숙제 베껴도 돼?”라는 문자를 받는다면? 마이페이지: 내가 작성한 글과 내가 좋아요 한 글을 볼 수 있다. 프로젝트 정리본 노션 https://green-number-f91.notion.site/MBTI-Type.. 2023. 1. 16. [TIL] 내일배움캠프 React 과정 2023.01.13 Today I Learned React Native 팀 프로젝트 마감 및 발표회 헤더에 로그인, 로그아웃 조건부 렌더링하기 useFocusEffect( // 비로그인 상태에서 마이페이지 접근 시 로그인화면으로 이동하고, 뒤로가기 시 무비탭 useCallback(() => { setOptions({ headerRight: () => { return ( {!authService.currentUser ? "로그인" : "로그아웃"} ); }, }); }, []) ); firebase authService에서 currentUser를 조회해서 currentUser가 존재하면 "로그아웃"을 보여주고 존재하지 않으면 "로그인"을 보여준다. 그리고 텍스트뿐만 아니라 당연히 onPress했을 때 작동하는 함수도 삼항으로.. 2023. 1. 15. [TIL] 내일배움캠프 React 과정 2023.01.12 Today I Learned React Native 팀 프로젝트 진행 useEffect와 useFocusEffect useFocusEffect( useCallback(() => { getPostlist(); }, []) ); 디테일 페이지에서 좋아요를 누르고 뒤로 가기 했다가 다시 해당 게시물 페이지에 들어가면 DB에는 반영이 됐지만 화면에는 좋아요가 반영되지 않는 문제가 발생했다. 원래는 useEffect로 getPostList라는 데이터를 불러오는 함수를 실행했는데 useEffect는 최초 렌더링 시 한 번만 실행이 되고 메인->디테일->메인으로 다시 돌아왔을 때는 useEffect가 실행되지 않았다. 그래서 useEffect 대신 useFocusEffect를 사용해서 화면에 포커스가 갈 때마다, 즉.. 2023. 1. 13. [TIL] 내일배움캠프 React 과정 2023.01.11 Today I Learend React Native 팀 프로젝트 진행 Firebase Error: Need to provide options import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; import { getAuth } from "firebase/auth"; // ❌이 위치에 넣으면 안됩니다. const app = initializeApp(firebaseConfig); export const dbService = getFirestore(app); export const authService = getAuth(app); const firebaseConfig = { apiKey: .. 2023. 1. 13. [TIL] 내일배움캠프 React 과정 2023.01.09 Today I Learned React Native 팀 프로젝트 진행 Firestore onSnapshot과 useQuery const getComments = async () => { const q = query( collection(dbService, "communityComments"), orderBy("date", "desc") ); const array = []; await onSnapshot(q, (snapshot) => { snapshot.docs.map((doc) => ( array.push({ id: doc.id, ...doc.data() }))) setComments(array) }) return array; }; const data = useQuery("communityComments.. 2023. 1. 10. [WIL] 내일배움캠프 열 번째 주_리액트 네이티브 리액트 네이티브 프로젝트 진행을 위한 공부를 시작했다. 그나마 다행인 점은 사전캠프 기간에 앱개발 강의를 들은 경험이 있다는 것인데 어째 다 까먹은 거 같다. 오랜만에 만나는 네이티브는 리액트와 다른 점이 많았다. , 등 기존과 다른 컴포넌트를 사용해야 한다는 점이 그렇고, expo 앱을 이용한 앱 개발은 수많은 에러와 마주하며 정말 쉽지가 않았다. 그래도 네이티브를 공부하며 앱 개발 만의 매력을 느끼기도 했는데 웹과 다른 화면 구성이라든지, 등 네이티브에서 제공해 주는 다양한 기본 컴포넌트를 사용하며 프로젝트를 쌓아나가는 과정도 재밌었고 웹 개발과 다른 관점에서 사용자들이 어떻게 앱을 편하게 이용할 수 있을까 고민하는 과정도 재밌었다. 한번 정말 간단한 구조의 어플이라도 만들어서 스토어에 배포까지 해보.. 2023. 1. 9. [TIL] 내일배움캠프 React 과정 2023.01.08 Today I Learned 팀 프로젝트 진행 new Date()로 날짜 출력하기 댓글을 작성할 때 date: new Date()를 이용해서 작성 날짜를 저장하고 date를 이용해서 댓글을 최신순으로 정렬할 수 있었다. 근데 댓글을 작성한 날짜를 화면에 보여줄 때 new Date()로 생성한 날짜를 그대로 가져오면 에러가 발생한다. Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead. firestore에서 확인해봤더니 new Date()로 생성한 데이터는 문자열 형태가 아니라.. 2023. 1. 8. [TIL] 내일배움캠프 React 과정 2023.01.07 Today I Learned React Native 댓글 CRUD 구현하기 버튼 클릭할 때마다 토글하기 const [toggle, setToggle] = useState(false); setToggle(!toggle)}> {toggle && ...생략... } 우측에 ...을 클릭할 때마다 수정, 삭제 버튼을 토글하고 싶었다. 여러 번의 시행착오 끝에 useState에 boolean 속성을 넣어서 구현했다. &&연산자를 이용해서 toggle이 true일 때만 ToggleBox가 뜨도록 구현했다. 그리고 toggle 속성은 ToggleBtn을 클릭할 때마다 true와 false를 왔다갔다 한다. 참고 https://webisfree.com/2019-08-14/react-native-컴포넌트-숨기기-hide.. 2023. 1. 8. [TIL] 내일배움캠프 React 과정 2023.01.06_네이티브 팀 프로젝트 S.A Today I Learned 리액트 네이티브 팀 프로젝트 초기 구성 S.A 작성 https://green-number-f91.notion.site/S-A-a45eb3327c774333a38c76ce9eb67cf0 회고 오늘은 리액트 네이티브로 구현하는 팀 프로젝트 초기 구성하느라 하루를 다 썼다. 그래서 진짜 TIL에 적을 내용이 없다..! 이번에는 와이어 프레임을 정말 정성 들여서 완성했는데 덕분에 CSS에 통일감을 주고 후반부에 CSS 작업에 소요되는 시간을 줄일 수 있을 거 같다. 나는 이번에도 좀 욕심을 내서 댓글 CRUD를 전부 담당하게 됐는데 주말 동안 쿼리도 부지런히 공부해서 최대한 빨리 구현할 수 있도록 노력해야겠다. 이번 프로젝트 결과물도 너무 기대가 된다! 2023. 1. 6. [TIL] 내일배움캠프 React 과정 2023.01.05 Today I Learned React Native 심화 강의 수강 !!(느낌표 두 개) 연산자가 뭐지? let a = 1 console.log(!a) // false console.log(!!a) // true let a = undefined console.log(!!a) // false 해당 변수에 값이 할당되어있으면 true, 그렇지 않으면 false로 반환해주는 매우 유용한 연산자이다! 참고 https://hermeslog.tistory.com/279 https://velog.io/@hoon_dev/JavaScript-느낌표-두개Double-Exclamation-Marks-연산자-알아보기 FlatList 연구하기 ( ) )} Top Rated Movies } keyExtractor={(item) .. 2023. 1. 5. 이전 1 2 다음
