[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

[WIL] 내일배움캠프 열한 번째 주_React Native 프로젝트 결과물 정리

프로젝트 소개 앱 이름 : MBTI Types 앱 설명 : MBTI 타입에 따라 의견을 나눌 수 있는 커뮤니티성 React Native App 커뮤니티: MBTI 타입과 관련된 게시글을 작성 후 댓글과 좋아요 버튼을 통해 공감을 받을 수 있고, MBTI필터를 통해서, 해당 MBTI의 글 만을 볼 수 있습니다. ex) 카테고리 [ISFP]: 약속 취소되면 오히려 좋은 거 다들 공감하시나요?ㅎㅎ 상황문답: 특정 상황을 제시하고 댓글에 각 MBTI 별 반응을 모아서 볼 수 있다. ex) 친구에게 “네 숙제 베껴도 돼?”라는 문자를 받는다면? 마이페이지: 내가 작성한 글과 내가 좋아요 한 글을 볼 수 있다. 프로젝트 정리본 노션 https://green-number-f91.notion.site/MBTI-Type..

• 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.14

Today I Learned Programmsers 문제 풀기 팀프로젝트 회의 Programmers 문제 풀기 배열 자르기 나의 풀이 function solution(numbers, num1, num2) { let array = []; for (i=num1; i

• 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

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

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

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