개발story

개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지 React Native 팀프로젝트중!! 업무, 개발 중 발생한 이슈/고민 또는 이를 해결한 내용 ⚽ Trouble Shooting 원인 로그인 사용자만 게시글 ‘삭제하기’ 버튼을 보이도록 하는 로직 그러나 비로그인 사용자가 ‘삭제하기’ 버튼이 있는 화면으로 진입하면, 렌더링 오류가 발생했습니다. 그 이유는 authService.currentUser가 undefined이기 때문이었습니다 * Post.js {post.userId === authService.currentUser.uid ? ( 글 삭제하기 ) : ( "" )} 해결 옵셔널 체이닝을 사용하여 해결 * Post.js {post.userId === authService.currentUser?.u..

개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지 React Native 팀 프로젝트 진행 오늘 새로 배운 내용 📖영화 리뷰 Read // My 탭 화면 리스트 Read 로직 useFocusEffect(useCallBack(()=>{ const q = query( collection(dbService, "reviews"), orderBy("createdAt", "desc"), where("userId", "==", authService.currentUser?.uid) ); const unsubcribe = onSnapshot(q, (snapshot) => { const newReviews = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), }));..

오늘 새로 배운 내용 React-Query란? Server State, 비동기 데이터를 관리하기 위한 라이브러리입니다. useQuery hook 안에서 API get 요청을 담당하고, API 요청 결과 및 다양한 상태들을 바로 사용할 수 있습니다. (redux thunk 사용 필요X) 한번 API 요청 시 queryKey가 API 요청결과를 cache 에 저장하고, caching된 API 요청은 다시 서버에 하지 않고 cache memory에서 더 빠르게 불러옵니다. const fetcher = () => fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res => res.json()); const { isLoading, erro..

개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지 React Native 팀프로젝트 진행중..! 오늘 새로 배운 내용 useEffect vs. useFocusEffect useEffect : 컴포넌트가 마운트(첫 렌더링)되었을 때, dependency가 변경 되었을 때, 언마운트 되었을 때를 감지하여 실행 useEffect(()=>{ // 한번만 실행 return () => { // 언마운트 시 실행 } }, []) // dependency array가 빈배열이면 컴포넌트 마운트 후 한번만 실행 useFocusEffect : 컴포넌트가 화면에 지금 보이는 지(Focus), 안보이는지(Blur)를 감지하여 실행 useFocusEffect(useCallBack(()=>{ // 컴포넌트가 현재 화면에 있으..

이번주 계획 - React Native 실무기초,심화 강의 듣기 - 팀프로젝트 react 복기(미흡) - React Native 노마드코더 강의 듣기 📖이번주 알게 된 점 총정리 - Expo 셋업 & 앱 아이콘, 스플래시 이미지 변경 - React-Navigation 라이브러리 - Native-Stack Navigator - Bottom-Tab Navigator - Stack & Bottom-Tab Navigator 병합 사용 - 다크모드 적용 패턴 3가지 - 전체 API 연동 및 RefreshControl 스크롤로 새로고침 처리 : RefreshControl - ScrollView을 FlatList 로 리팩터링 ScrollView 모든 리스트들을 한번에 렌더링 해야해서 리스트가 많을 수록 성능이 저하됩..

개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지 React Native 팀프로젝트 시작 오늘 새로 배운 내용 react-router-dom(웹페이지 이동) vs. react-navigation(앱 페이지/스크린 이동) // react-router-dom (React 웹개발 시) import { Link, useNavigate } from 'react-router-dom'; const Home = () => { const navigate = useNavigate(); const goToAnother = () => { navigate("/another"); } return ( 페이지 이동방법1 페이지 이동방법2 ) } // react-navigation (React Native 앱개발 시) import..

개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지 RN 심화강의 듣는중 오늘 새로 배운 내용 - 서로 다른 Navigator 안의 스크린으로 어떻게 이동 export default function Stack() { return ( ); } // 오직 Screen 컴포넌트만 props로 navigation을 가질 수 있음 // Screen 컴포넌트 외의 컴포넌트에서는 const navigation = useNavigation(); navigation.navigate(""); const ScreenComponent = ({ navigation: { navigate } }) => ( navigate("이동할 Navigator name", { screen: "이동할 Navigator안의 screen name..