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

Today I Leraned TypeScript 공부하기 Typescript vs Javascript Type Typescript는 정적 타입 Javascript는 동적 타입 let num = 3; num = '삼'; Javascript는 어떤 변수에 숫자, 문자, 배열, 객체 등 아무거나 할당 가능하다. Typescript는 처음에 숫자 (number)를 할당했으니 number에 string를 할당할 수 없다고 에러가 난다. Time (변수의 type 결정 시점) Typescript는 컴파일 타임 (compile time): 작성한 소스 코드가 어떠한 것(js, binary 등)으로 변환되는 과정 -> IDE(VS Code)에서 에러가 날 상황을 빨간 줄로 미리 알려준다. Javascript는 런타임 ..

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

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

Today I Learned 팀 프로젝트 UI 그리기 GOLLA 팀 프로젝트 기록 "useNavigation must be used within a data router" Error const navigate = useNavigation(); Uncaught Error: useNavigation must be used within a data router. Header 컴포넌트에서 useNavigation을 사용하려고 했는데 갑자기 에러가 뜨면서 Header가 보이지 않는다. 검색해 보니 useNavigation이 아니라 useNavigate를 사용해야 하는 거였다ㅎㅎ 참고 https://stackoverflow.com/questions/74323060/react-router-error-usenaviga..

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

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

Today I Learned React Native 팀 프로젝트 마감 및 발표회 헤더에 로그인, 로그아웃 조건부 렌더링하기 useFocusEffect( // 비로그인 상태에서 마이페이지 접근 시 로그인화면으로 이동하고, 뒤로가기 시 무비탭 useCallback(() => { setOptions({ headerRight: () => { return ( {!authService.currentUser ? "로그인" : "로그아웃"} ); }, }); }, []) ); firebase authService에서 currentUser를 조회해서 currentUser가 존재하면 "로그아웃"을 보여주고 존재하지 않으면 "로그인"을 보여준다. 그리고 텍스트뿐만 아니라 당연히 onPress했을 때 작동하는 함수도 삼항으로..

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

[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

[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