[TIL] 내일배움캠프 React 과정 2023.01.12

Today I Learned React Native 팀 프로젝트 진행 useEffect와 useFocusEffect useFocusEffect( useCallback(() => { getPostlist(); }, []) ); 디테일 페이지에서 좋아요를 누르고 뒤로 가기 했다가 다시 해당 게시물 페이지에 들어가면 DB에는 반영이 됐지만 화면에는 좋아요가 반영되지 않는 문제가 발생했다. 원래는 useEffect로 getPostList라는 데이터를 불러오는 함수를 실행했는데 useEffect는 최초 렌더링 시 한 번만 실행이 되고 메인->디테일->메인으로 다시 돌아왔을 때는 useEffect가 실행되지 않았다. 그래서 useEffect 대신 useFocusEffect를 사용해서 화면에 포커스가 갈 때마다, 즉..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 13.
• textsms

[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: ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 13.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.10

Today I Learned React Native 팀 프로젝트 진행 댓글 수정, 삭제 시 View->Modal로 수정 원래는 컴포넌트를 이용해서 버튼을 클릭했을 때 댓글 수정, 댓글 삭제 기능이 보이도록 구현했는데 크기가 너무 작아서 수정 삭제 버튼을 클릭하기가 힘들고 컴포넌트도 한번 이용해보고 싶어서 수정하기로 했다. setIsOpenModal(false)}> setIsOpenModal(false)}> 댓글 수정 deleteMutate.mutate(comment.id,{onSuccess: () => queryClient.invalidateQueries("communityComments")})}> 댓글 삭제 최상위 모달 안에 배경을 블러 처리하기 위해서 TouchableOpacity로 만든 BackBl..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 12.
• textsms

[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..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 10.
• textsms

[WIL] 내일배움캠프 열 번째 주_리액트 네이티브

리액트 네이티브 프로젝트 진행을 위한 공부를 시작했다. 그나마 다행인 점은 사전캠프 기간에 앱개발 강의를 들은 경험이 있다는 것인데 어째 다 까먹은 거 같다. 오랜만에 만나는 네이티브는 리액트와 다른 점이 많았다. , 등 기존과 다른 컴포넌트를 사용해야 한다는 점이 그렇고, expo 앱을 이용한 앱 개발은 수많은 에러와 마주하며 정말 쉽지가 않았다. 그래도 네이티브를 공부하며 앱 개발 만의 매력을 느끼기도 했는데 웹과 다른 화면 구성이라든지, 등 네이티브에서 제공해 주는 다양한 기본 컴포넌트를 사용하며 프로젝트를 쌓아나가는 과정도 재밌었고 웹 개발과 다른 관점에서 사용자들이 어떻게 앱을 편하게 이용할 수 있을까 고민하는 과정도 재밌었다. 한번 정말 간단한 구조의 어플이라도 만들어서 스토어에 배포까지 해보..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 9.
• textsms

[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()로 생성한 데이터는 문자열 형태가 아니라..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 8.
• textsms

[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..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 8.
• textsms

[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를 전부 담당하게 됐는데 주말 동안 쿼리도 부지런히 공부해서 최대한 빨리 구현할 수 있도록 노력해야겠다. 이번 프로젝트 결과물도 너무 기대가 된다!

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 6.
• textsms

[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) ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 5.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.04

Today I Learned React Native 심화 강의 수강 LinearGradient 사용하기 배경 이미지에 그라디언트 효과를 줄 때 LinearGradient를 사용한다. colors라는 porp을 넘겨서 배열 형태로 원하는 그라디언트 효과를 구현할 수 있다. ["transparent", "black"]는 투명에서 검은색으로 그라디언트 효과를 주고 싶다는 것을 의미한다. flex-end 속성 flex-end: 아이템들을 끝으로 정렬한다. flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽에 위치한다. 출처 https://studiomeal.com/archives/197 StyleSheet.absoluteFill // 동일한 코드 배경이미지 적용..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 4.
• textsms