[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

[TIL] 내일배움캠프 React 과정 2023.01.03_React Navigation

Today I Learned React Native 실무 심화 강의 수강 터미널에서 expo 셋업하기 npx create-expo-app 폴더명 git bash에 입력 eas update:configure vscode로 폴더 열고 터미널창에 입력 -> expo 홈페이지에도 프로젝트가 생성된 것을 볼 수 있음 eas update 배포하기 App icon 변경하기 icon.png -> IOS 아이콘 adaptive-icon -> Android 아이콘 splash -> 로딩 화면 Figma 링크에 들어가서 아이콘을 만들고 png 파일로 저장한 후에 assets 폴더에 동일한 파일명으로 png 파일을 교체한다. 공식문서 https://docs.expo.dev/guides/app-icons/ react-navig..

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